Spaces:
Running
Running
| /* catalog.css — the work catalog and the draggable rail. | |
| =========================================================================== | |
| A separate stylesheet rather than more of app.css: these are two new, | |
| self-contained surfaces, and keeping them out of an 8,600-line file makes | |
| them reviewable. Every colour here is one of app.css's existing tokens, so | |
| both themes and the light/dark switch work with nothing added. | |
| =========================================================================== */ | |
| /* ═══════════════════════════════════════════════════════ draggable rail ══ */ | |
| .rail-split { | |
| position: fixed; | |
| top: var(--bench-strip-h, 56px); | |
| bottom: 0; | |
| /* Centred ON the boundary, so the grab area straddles the line rather | |
| than sitting to one side of it and feeling offset. */ | |
| left: calc(var(--bench-rail, 392px) - 5px); | |
| width: 11px; | |
| z-index: 36; | |
| cursor: col-resize; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: transparent; | |
| /* No transition on `left`: it tracks the pointer, and easing a drag makes | |
| the handle lag behind the cursor. */ | |
| } | |
| .rail-split[hidden] { display: none; } | |
| /* Visible AT REST, and this is the whole point of the control. | |
| The first version started at opacity 0 and only appeared on hover. Measured | |
| in the browser: `getComputedStyle(.rail-split-grip).opacity === "0"` with | |
| the split open and the pointer elsewhere — so the boundary between the | |
| conversation and the bench looked exactly like the fixed 1px border it used | |
| to be, and nothing on screen said it could move. A handle you have to | |
| already know about is not a handle. | |
| So it shows: a short grip on the seam, in --line-bold — one step up from | |
| the .cockpit border-right it sits on, present enough to read as a grab | |
| point, quiet enough not to become a third vertical rule in the layout. It | |
| grows and takes ink on hover, focus and drag, which is where the affordance | |
| should be loud. */ | |
| .rail-split-grip { | |
| width: 3px; | |
| height: 34px; | |
| border-radius: 3px; | |
| background: var(--line-bold); | |
| opacity: 1; | |
| transition: opacity var(--t-fast, .12s) var(--ease, ease), | |
| height var(--t-fast, .12s) var(--ease, ease), | |
| background var(--t-fast, .12s) var(--ease, ease); | |
| } | |
| .rail-split:hover .rail-split-grip, | |
| .rail-split:focus-visible .rail-split-grip, | |
| body.is-railsplitting .rail-split-grip { | |
| height: 46px; | |
| background: var(--ink-soft); | |
| } | |
| @media (prefers-reduced-motion: reduce) { .rail-split-grip { transition: none; } } | |
| .rail-split:focus-visible { | |
| outline: 2px solid var(--ink-strong); | |
| outline-offset: -2px; | |
| } | |
| /* While dragging, kill text selection and stop the pointer being captured by | |
| anything underneath — including the Mol* canvas, which otherwise starts | |
| rotating the model the moment the cursor crosses it. */ | |
| body.is-railsplitting { user-select: none; cursor: col-resize; } | |
| body.is-railsplitting .workspace, | |
| body.is-railsplitting .cockpit { pointer-events: none; } | |
| @media (max-width: 900px) { .rail-split { display: none; } } | |
| /* ═════════════════════════════════════════════════════════════ catalog ══ */ | |
| .cat { | |
| position: fixed; inset: 0; z-index: 90; | |
| display: flex; align-items: center; justify-content: center; | |
| padding: 32px 20px; | |
| } | |
| .cat[hidden] { display: none; } | |
| body.cat-open { overflow: hidden; } | |
| .cat-backdrop { | |
| position: absolute; inset: 0; | |
| background: rgba(6, 8, 12, 0.55); | |
| backdrop-filter: blur(2px); | |
| animation: catFade 160ms var(--ease, ease); | |
| } | |
| @keyframes catFade { from { opacity: 0; } to { opacity: 1; } } | |
| .cat-panel { | |
| position: relative; | |
| width: min(1080px, 100%); | |
| max-height: min(820px, 100%); | |
| display: flex; flex-direction: column; | |
| background: var(--bg-card); | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--r-4, 6px); | |
| box-shadow: 0 24px 64px rgba(0, 0, 0, .34); | |
| overflow: hidden; | |
| animation: catRise 200ms var(--ease, ease); | |
| } | |
| @keyframes catRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } | |
| @media (prefers-reduced-motion: reduce) { | |
| .cat-backdrop, .cat-panel { animation: none; } | |
| } | |
| .cat-head { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 16px 18px 12px; | |
| border-bottom: 1px solid var(--line); | |
| flex: 0 0 auto; | |
| } | |
| .cat-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-strong); } | |
| .cat-x { | |
| margin-left: auto; background: none; border: none; cursor: pointer; | |
| font-size: 22px; line-height: 1; color: var(--ink-faint); padding: 2px 8px; | |
| font-family: inherit; | |
| } | |
| .cat-x:hover { color: var(--ink-strong); } | |
| .cat-controls { | |
| display: flex; align-items: center; gap: 12px; flex-wrap: wrap; | |
| padding: 12px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto; | |
| } | |
| .cat-q { | |
| flex: 1 1 260px; min-width: 0; | |
| padding: 8px 12px; font-size: 13.5px; font-family: inherit; | |
| color: var(--ink); background: var(--bg-app); | |
| border: 1px solid var(--line-strong); border-radius: 999px; | |
| } | |
| .cat-q::placeholder { color: var(--ink-faint); } | |
| .cat-q:focus { outline: none; border-color: var(--ink-soft); } | |
| .cat-seg { display: flex; gap: 2px; flex: 0 0 auto; } | |
| .cat-segb { | |
| padding: 6px 13px; font-size: 12px; font-family: inherit; cursor: pointer; | |
| background: none; border: 1px solid transparent; border-radius: 999px; | |
| color: var(--ink-soft); | |
| } | |
| .cat-segb:hover { color: var(--ink-strong); } | |
| .cat-segb.is-on { | |
| color: var(--ink-strong); border-color: var(--line-strong); background: var(--bg-app); | |
| } | |
| .cat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 20px; } | |
| .cat-body:focus { outline: none; } | |
| .cat-sec { | |
| margin: 18px 0 10px; font-family: var(--font-mono); font-size: 10px; | |
| letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); | |
| font-weight: 500; display: flex; align-items: baseline; gap: 7px; | |
| } | |
| .cat-sec span { color: var(--ink-disabled); } | |
| .cat-grid { | |
| display: grid; gap: 10px; | |
| grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); | |
| /* Equal-height rows: chip counts differ per run, and ragged card bottoms | |
| make a grid read as broken rather than varied. */ | |
| grid-auto-rows: 1fr; | |
| } | |
| .cat-empty { color: var(--ink-faint); font-size: 13.5px; padding: 40px 4px; text-align: center; } | |
| /* ── card ───────────────────────────────────────────────────────────────── */ | |
| .cat-card { | |
| display: grid; | |
| grid-template-columns: 104px 1fr; | |
| /* 1fr on the content row, auto on the actions row: with equal-height grid | |
| rows this pins Rename/Delete to the bottom edge of every card, so the | |
| buttons line up across the row however many chips a run carries. */ | |
| grid-template-rows: 1fr auto; | |
| grid-template-areas: "thumb main" "acts acts"; | |
| gap: 12px; | |
| padding: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-4, 6px); | |
| background: var(--bg-app); | |
| position: relative; | |
| transition: border-color var(--t-fast, .12s) var(--ease, ease); | |
| } | |
| .cat-card:hover { border-color: var(--line-strong); } | |
| .cat-card.is-sel { border-color: var(--ink-soft); } | |
| .cat-card.is-current { border-color: var(--ink-soft); } | |
| .cat-card.is-current::before { | |
| content: "Open now"; position: absolute; top: -1px; right: 10px; | |
| font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; | |
| text-transform: uppercase; color: var(--bg-app); background: var(--ink-soft); | |
| padding: 1px 6px; border-radius: 0 0 3px 3px; | |
| } | |
| .cat-card.is-busy { opacity: .55; pointer-events: none; } | |
| /* ── the fold ───────────────────────────────────────────────────────────── */ | |
| .cat-thumb { | |
| grid-area: thumb; | |
| position: relative; | |
| width: 104px; height: 84px; | |
| border-radius: 4px; | |
| background: var(--bg-subtle); | |
| border: 1px solid var(--line); | |
| display: flex; align-items: center; justify-content: center; | |
| overflow: hidden; flex: none; | |
| } | |
| .cat-canvas { width: 100%; height: 100%; display: block; } | |
| .cat-thumb-msg { | |
| position: absolute; inset: 0; | |
| display: flex; align-items: center; justify-content: center; | |
| text-align: center; padding: 6px; | |
| font-family: var(--font-mono); font-size: 8.5px; line-height: 1.35; | |
| letter-spacing: 0.04em; color: var(--ink-disabled); | |
| } | |
| /* The accession is the receipt: it says WHICH model this is, so the picture | |
| is checkable rather than decorative. */ | |
| .cat-acc { | |
| position: absolute; left: 0; right: 0; bottom: 0; | |
| font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em; | |
| color: var(--ink-faint); background: color-mix(in srgb, var(--bg-subtle) 84%, transparent); | |
| padding: 1px 4px; text-align: center; | |
| } | |
| .cat-thumb[data-sc="idle"] .cat-canvas, | |
| .cat-thumb[data-sc="loading"] .cat-canvas { opacity: 0; } | |
| .cat-thumb[data-sc="ok"] .cat-thumb-msg { display: none; } | |
| .cat-thumb[data-sc="loading"] .cat-thumb-msg::after { content: "Folding…"; } | |
| .cat-thumb[data-sc="error"] .cat-thumb-msg::after { content: "Structure unavailable"; } | |
| .cat-thumb[data-sc="ok"] .cat-acc { display: block; } | |
| .cat-thumb[data-sc="none"] .cat-acc { display: none; } | |
| /* A construct has no fold to show, so its tile carries a mark instead of a | |
| picture. Dropping the border is the point: a 1px frame around a small glyph | |
| on an empty ground is the shape of a broken image, and that is what it was | |
| being read as. Without the frame it reads as an icon beside a title, which | |
| is what it is. */ | |
| .cat-thumb--cx { | |
| color: var(--ink-faint); | |
| border-color: transparent; | |
| background: var(--bg-subtle); | |
| } | |
| .cat-thumb--cx svg { width: 34px; height: 34px; } | |
| .cat-card--cx:hover .cat-thumb--cx { color: var(--ink-soft); } | |
| /* ── body ───────────────────────────────────────────────────────────────── */ | |
| .cat-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 5px; } | |
| .cat-open { | |
| background: none; border: none; padding: 0; text-align: left; cursor: pointer; | |
| font-family: inherit; color: var(--ink-strong); min-width: 0; | |
| } | |
| .cat-name { | |
| display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; | |
| overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.35; | |
| letter-spacing: -0.005em; | |
| } | |
| .cat-open:hover .cat-name { text-decoration: underline; text-underline-offset: 2px; } | |
| .cat-open:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 2px; border-radius: 2px; } | |
| .cat-flag { | |
| align-self: flex-start; | |
| font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.09em; | |
| text-transform: uppercase; color: var(--warning, var(--ink-strong)); | |
| border: 1px solid currentColor; border-radius: 3px; padding: 1px 5px; | |
| } | |
| .cat-chips { display: flex; flex-wrap: wrap; gap: 4px; } | |
| .cat-chip { | |
| font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; | |
| padding: 2px 6px; border-radius: 3px; | |
| background: var(--bg-subtle); color: var(--ink-soft); border: 1px solid var(--line); | |
| } | |
| .cat-chip.is-key { color: var(--ink-strong); border-color: var(--line-strong); } | |
| .cat-chip.is-soft { color: var(--ink-faint); background: none; } | |
| .cat-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.02em; } | |
| .cat-note { margin: 2px 0 0; font-size: 11.5px; color: var(--danger); } | |
| /* ── actions ────────────────────────────────────────────────────────────── */ | |
| .cat-acts { | |
| grid-area: acts; | |
| display: flex; gap: 6px; justify-content: flex-end; | |
| padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--line); | |
| } | |
| .cat-act { | |
| font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; | |
| padding: 4px 10px; cursor: pointer; | |
| background: none; color: var(--ink-soft); | |
| border: 1px solid var(--line-strong); border-radius: 999px; | |
| } | |
| .cat-act:hover { color: var(--ink-strong); border-color: var(--ink-soft); } | |
| .cat-act.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); } | |
| .cat-act.is-danger:hover { border-color: var(--danger); } | |
| .cat-act:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 1px; } | |
| .cat-rename { display: flex; gap: 6px; align-items: center; } | |
| .cat-rename-i { | |
| flex: 1 1 auto; min-width: 0; padding: 5px 9px; font-size: 12.5px; | |
| font-family: inherit; color: var(--ink); background: var(--bg-card); | |
| border: 1px solid var(--line-strong); border-radius: 4px; | |
| } | |
| .cat-rename-i:focus { outline: none; border-color: var(--ink-soft); } | |
| .cat-confirm { | |
| grid-column: 1 / -1; | |
| display: flex; align-items: center; gap: 8px; flex-wrap: wrap; | |
| margin-top: 8px; padding: 9px 10px; | |
| border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line)); | |
| border-radius: 4px; | |
| font-size: 12px; color: var(--ink); | |
| } | |
| .cat-confirm span { flex: 1 1 180px; min-width: 0; } | |
| @media (max-width: 620px) { | |
| .cat { padding: 0; } | |
| .cat-panel { max-height: 100%; height: 100%; border-radius: 0; border: none; } | |
| .cat-grid { grid-template-columns: 1fr; } | |
| } | |