/* ============================================================ ELIO — panel design system Ops/control-room aesthetic: layered dark, monochrome white brand, monospace telemetry, green reserved for live signals. One stylesheet → every page. Class names kept stable so the whole panel lifts at once, then pages get progressively polished. ============================================================ */ :root { color-scheme: dark; /* neutrals — deep near-black scale (blacker canvas, layered surfaces) */ --bg: #030304; --surface-1: #08080A; /* sidebar / topbar */ --surface-2: #0C0D10; /* panels */ --surface-3: #15161C; /* raised: inputs, hovers */ --surface-4: #1B1C23; /* input hover */ /* hairlines carry the whole layout on a near-black canvas — at .10/.07 they dropped below the point where a panel edge reads as an edge. */ --line: rgba(255,255,255,.15); --line-2: rgba(255,255,255,.10); /* one hover surface for every interactive chrome element (no ad-hoc rgba fills) */ --hover: rgba(255,255,255,.06); --hover-2: rgba(255,255,255,.09); /* text — every level clears 4.5:1 on --surface-2, including ink-4. The old scale bottomed out at 2.6:1, which is what made labels, placeholders and disabled controls read as "missing" rather than "secondary". */ --ink: #EDEFF3; /* Secondary and help text stepped up one level. Same hue family, same palette — the interface simply stopped mumbling its explanations. Measured against --surface-2 (#0C0D10), the surface they sit on most. */ --ink-2: #CFD4DC; /* body secondary 10.9 -> 12.9:1 */ --ink-3: #B0B7C3; /* muted / help 7.3 -> 9.5:1 */ --ink-4: #949CAA; /* section labels 5.1 -> 6.9:1 */ /* brand — monochrome white (ELIO mark). CTA / selection only. */ --accent: #FFFFFF; --accent-h: #E6E8EC; --accent-ink: #0A0A0C; --accent-soft: rgba(255,255,255,.10); --accent-line: rgba(255,255,255,.32); --accent-glow: rgba(255,255,255,.16); --focus: rgba(255,255,255,.60); /* semantic — green = live telemetry (means "farming/online") */ --live: #35D6A0; --live-dim: #2BA97D; /* status dots: same hue, not acid */ --live-soft: rgba(53,214,160,.12); --live-glow: rgba(53,214,160,.40); /* line drop-shadow on charts */ --warn: #F5B23E; --warn-soft: rgba(245,178,62,.14); --bad: #FF5B6B; --bad-soft: rgba(255,91,107,.13); /* radii — restrained; big containers no rounder than 14 */ --r-xs: 8px; --r-sm: 10px; --r: 12px; --r-lg: 14px; --r-xl: 18px; /* motion — feedback / continuity / hierarchy only */ /* every chrome transition sits in the 120-180ms band; --slow is for data readouts (a progress bar easing to its new width), not for chrome */ --fast: 120ms; --base: 180ms; --slow: 300ms; --ease-out: cubic-bezier(.22,.61,.36,1); --ease-in-out: cubic-bezier(.65,0,.35,1); /* type */ --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* One ladder, eight rungs. Keep the whole interface on this shared scale so changing its density remains one edit rather than a page-by-page chase. */ --fs-1: 10px; /* micro: badge counts, version pills */ --fs-2: 11px; /* labels, table headers, chips, dense buttons */ --fs-3: 12px; /* help text, nav, buttons */ --fs-4: 13px; /* body, panel titles */ --fs-5: 16px; /* card readouts, drawer and modal titles */ --fs-6: 19px; /* section display */ --fs-7: 24px; /* page title */ --fs-8: 26px; /* stat readout */ /* Three line-heights, chosen by what the text does — not by its size. 128 elements were rendering at `normal` because nothing set one. */ --lh-tight: 1.25; /* numbers and display type that must not look airy */ --lh-snug: 1.4; /* headings, labels, single-line UI text */ --lh-body: 1.55; /* anything the reader reads as prose */ --sidebar-w: 258px; /* legacy token aliases — older inline styles still resolve to the new scale */ --card: var(--surface-2); --card2: var(--surface-3); --border: var(--line); --border-2: var(--line-2); --mute: var(--ink-2); --mute2: var(--ink-3); --acc-soft: var(--accent-soft); --acc-bord: var(--accent-line); --good: var(--live); --good-bg: var(--live-soft); --red: var(--bad); --accent2: var(--accent-h); } * { box-sizing: border-box; } /* pin a narrow default for transition-property: the UA initial value is `all`, which audit tools report on every element even at duration 0. Authored transition shorthands below override this per-element. */ *, *::before, *::after { transition-property: opacity, transform, background-color, border-color, box-shadow, color; } /* html keeps a real height so body's min-height:100% has something to resolve against; body must NOT be capped to it. A fixed `height` here pinned body to one screen, so on a longer page the content overflowed the body box instead of growing it — which left the sticky sidebar no room to stick and slid it off the top, ending its surface short of the bottom. */ html { height: 100%; } /* reserve the scrollbar gutter permanently on the page scroller. Without it, a short page has no vertical scrollbar and a tall one does — so navigating between them changes the viewport width, and the flex `.main` visibly shifts sideways on every button/link click. */ html { background: var(--bg); font-family: var(--sans); scrollbar-gutter: stable; } body { margin: 0; color: var(--ink); background: var(--bg); font: 400 var(--fs-4)/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: flex; min-height: 100%; } /* The sidebar is a sticky rail exactly one screen tall, so on any page longer than the viewport its surface simply stops and leaves a hard edge with bare page underneath. Paint the same column on the page itself — including the hairline that divides it — and it runs unbroken however far the page goes. Background only, so nothing about the layout moves. */ @media (min-width: 761px) { body.has-shell { background-image: linear-gradient(to right, var(--surface-1) 0 var(--sidebar-w), var(--line-2) var(--sidebar-w) calc(var(--sidebar-w) + 1px), transparent calc(var(--sidebar-w) + 1px)); background-repeat: no-repeat; } } a { color: inherit; text-decoration: none; } /* `hidden` means hidden — including out of the tab order. The UA stylesheet's [hidden]{display:none} is the weakest rule there is, so any component that set its own `display` silently outranked it: a closed drawer stayed a full-viewport click-eater, an empty bulk bar stayed on screen, and a collapsed inline form kept its Save button reachable by Tab as a 0×0 target. Five separate .x[hidden] patches had accumulated for the same cause; this is the cause. */ [hidden] { display: none !important; } /* form controls don't inherit font-family by default → they fall back to the UA serif (Times New Roman). Force the sans everywhere so nothing leaks serif. */ button, input, textarea, select, optgroup, option { font-family: var(--sans); font-size: inherit; line-height: inherit; } ::selection { background: rgba(255,255,255,.25); } /* One focus treatment everywhere: crisp 2px ring, no glow bloom. The ring lives on `outline`, and that is the whole point of this rule. It used to be drawn with box-shadow — but .btn-ghost and .btn-danger each declare `box-shadow: none`, and .btn and .nav-link declare a decorative one, all further down this file. Same specificity as `:focus-visible` — (0,1,0) — so position decided it, and they won: the ring was erased and the `outline: none` right here had already removed the fallback. Measured: 71 of 394 Tab stops (18%) showed no focus indicator at all — every ghost button, the whole sidebar, the profile button. Nothing else in this file styles `outline`, so the ring cannot be silently overwritten again. Controls that paint their own stand-in switch it off explicitly, just below. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* Inputs hidden under custom artwork: the ring belongs on the thing the user can see, and those rules live further down (.switch .track, .segmented label, .map-chip span, the file-field button). The invisible input must not carry a second one. */ .switch input:focus-visible, .segmented input:focus-visible, .map-chip input:focus-visible, .file-field input[type=file]:focus-visible { outline: none; } /* Truncating cells clip to produce their ellipsis, and an outline drawn outward is clipped along with the text: the ring around a bot name lost its right edge, because the link fills its cell to the pixel. Draw it inside instead. */ .row-link:focus-visible, .cell-trunc:focus-visible { outline-offset: -2px; } /* thin custom scrollbars */ * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: content-box; } /* ---------------- Sidebar ---------------- */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface-1); border-right: 1px solid var(--line-2); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; /* a little air under the last item so it never sits flush on the edge */ padding: 0 12px 22px; overflow-y: auto; /* symmetric gutter: when the nav is tall enough to scroll, the classic scrollbar reserves equal space both sides so the centered logo doesn't drift left (headless uses overlay scrollbars, so this is invisible there). */ scrollbar-gutter: stable both-edges; transition: transform 180ms cubic-bezier(.2, .8, .2, 1); } /* brand area — logo has its OWN class, never a global img rule. Centered on the FULL sidebar (padding 0), not aligned to nav's left edge. Bigger logo lives in a taller brand zone so it can't overflow into nav. */ .brand { padding: 0; height: 96px; margin-bottom: 10px; flex: none; display: flex; align-items: center; justify-content: center; } .brand-logo { display: block; width: 168px; height: auto; margin-inline: auto; } /* explicit (narrow) transitions — never `all`, so hover/layout can't animate oddly */ .brand, .brand-logo { transition: opacity 160ms ease, transform 160ms ease; } /* explicit narrow transitions on elements devtools reports as `all` (its default) — never `all` */ .nav-group, .nav-label, .panel, .card, .aside-card { transition: background-color 160ms ease, border-color 160ms ease; } /* Icons never animate their own transform — only .chev rotates (its own rules below). Transitioning transform on every icon and, worse, on every SVG primitive made them jitter/jump while the sidebar scroll-repainted, so the transition lists here are transform-free. Still explicit — never `all`. */ .nav-link svg, .icon-btn svg, .btn svg, .logout svg { transition: color 160ms ease; } .chev { transition: color 160ms ease, transform 160ms ease; } /* also the primitives inside icons (rect/path/circle) so none inherit the `all` default */ svg *, .nav-link svg * { transition: color 160ms ease, fill 160ms ease, stroke 160ms ease; } .nav-group { margin-bottom: 4px; } .nav-label { font-size: var(--fs-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); padding: 15px 12px 7px; } /* first nav sits a comfortable distance below the logo, not cramped */ .nav-group:first-of-type .nav-label { padding-top: 4px; } .nav-link { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-3); font-weight: 500; margin-bottom: 1px; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); } /* uniform optical weight: every icon sits at the same stroke + opacity, so no single glyph reads heavier than its neighbours */ .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .7; stroke-width: 1.6px; } .nav-link:hover { background: var(--hover); color: var(--ink); } .nav-link:hover svg { opacity: .9; } /* "you are here" = a deeper seat in the sidebar, not a lit-up blue chip. The accent survives only in the icon — one accent per component. */ .nav-link.active { background: rgba(255,255,255,.055); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } .nav-link.active svg { opacity: 1; color: var(--accent); } /* An admin's nav is 19 links plus four group labels — 1049px, taller than a laptop viewport, so the sidebar grew its own scrollbar and the last items sat below the fold. Tighten the vertical rhythm as the window gets shorter instead; a tall monitor keeps the roomier spacing. */ @media (max-height: 980px) { .brand { height: 64px; margin-bottom: 4px; } .brand-logo { width: 136px; } .nav-group { margin-bottom: 2px; } .nav-label { padding: 9px 12px 4px; } .nav-group:first-of-type .nav-label { padding-top: 2px; } .nav-link { padding: 7px 12px; margin-bottom: 0; } .nav-link svg { width: 17px; height: 17px; } } @media (max-height: 860px) { /* the nav overshot by 9px at 768 tall; the 22px tail is the cheapest place to find them, and it still leaves air under the last item */ .sidebar { padding-bottom: 10px; } .brand { height: 54px; } .brand-logo { width: 120px; } .nav-label { padding: 7px 12px 3px; font-size: var(--fs-2); } .nav-link { padding: 5px 12px; font-size: var(--fs-3); } } @media (max-height: 760px) { .brand { height: 44px; margin-bottom: 2px; } .brand-logo { width: 108px; } .nav-label { padding: 5px 12px 2px; } .nav-link { padding: 3px 12px; gap: 9px; } .nav-link svg { width: 16px; height: 16px; } } .side-bottom { margin-top: auto; padding-top: 10px; } .user-card { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: var(--r); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); margin-top: 6px; transition: border-color var(--fast), background-color var(--fast); } .user-card:hover { border-color: var(--line); background: rgba(255,255,255,.055); } /* avatar = the same EV orbit mark as the favicon/app icon (one visual family) */ .user-card .ava { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line-2); background: #0a0d14; display: flex; align-items: center; justify-content: center; } .user-card .ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-card .nm { font-size: var(--fs-3); font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-card .tg { font-size: var(--fs-1); color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* icon-only controls share one geometry: 38px square, radius 12 (same as .icon-btn and .nav-toggle) — no invisible odd-sized squares */ .user-card .logout { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 12px; color: var(--ink-3); transition: color var(--fast), background-color var(--fast); } .user-card .logout svg { width: 17px; height: 17px; } .user-card .logout:hover { color: var(--bad); background: var(--bad-soft); } /* own glow ring — outline off, or the two stack into a double ring */ .user-card .logout:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); } /* ---------------- Main / topbar ---------------- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } /* Above 760px this bar is empty and therefore gone. Its hamburger and brand are already display:none on desktop (the sidebar is permanent there), the fleet counters left, the account block moved to the account page — what remained was a 64px strip of nothing across every page. The mobile block below turns it back on, where it is the only way to open the nav. */ .topbar { display: none; } /* maintenance warning, now that it lives in the sidebar instead of the bar */ .side-maint { padding: 0 2px 12px; } .side-maint .status-chip { width: 100%; justify-content: center; text-align: center; } /* What the shell says on its own. The fleet counters that lived here are gone (.tb-stat / .tb-num / .tb-lab went with them); the maintenance chip is all that is left, and it appears only while pickup is actually paused. */ .tb-state { display: flex; align-items: center; gap: 6px; min-width: 0; } /* still used by the slot readout on /machines/create */ .tb-sep { color: var(--ink-4); margin: 0 1px; } .tb-maint { margin-left: 4px; } /* No `@media (max-width: 760px) { .tb-state { display: none } }` any more. Hiding this area on a phone was right when it held two numbers available one tap away; it now holds a warning that job pickup is paused, which is worth the room. */ /* topbar chrome: the bell and the profile are ONE family — same surface, same border, same hover. Neither carries a shadow. */ .icon-btn { position: relative; color: var(--ink-2); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: var(--r); background: transparent; border: 1px solid var(--line-2); box-shadow: none; transition: color var(--fast), background-color var(--fast), border-color var(--fast); } .icon-btn:hover { color: var(--ink); background: var(--hover); border-color: var(--line); } .icon-btn:disabled { opacity: 1; color: var(--ink-4); cursor: not-allowed; background: transparent; } .icon-btn:disabled:hover { color: var(--ink-4); background: transparent; } .icon-btn svg { width: 18px; height: 18px; } .icon-btn .count { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--accent); color: var(--accent-ink); font: 700 var(--fs-1)/17px var(--mono); text-align: center; border-radius: 999px; border: 2px solid var(--bg); } /* hover tooltip for icon-only controls (keeps aria-label for a11y) */ [data-tip] { position: relative; } /* The tooltip generates NO box until it is actually shown. It used to be rendered permanently at opacity:0 — and an absolutely positioned descendant still counts toward its containing block's scrollable overflow, so every `nowrap` tooltip silently widened its ancestor chain. One 28-character tip on an IP readout in the settings aside was enough to push the whole page 74px past the viewport at 1440 and give the document a horizontal scrollbar. `content: none` at rest means no box, no overflow; the text is still exposed to assistive tech through the attribute itself. */ /* Placement is two independent axes, and they are held in custom properties on purpose. Every variant used to restate the whole `transform`, so a rule that only wanted to move the tooltip sideways silently reset the vertical slide as well — which is why a tooltip could not be both right-anchored AND pointed upwards. Now a variant sets only the axis it cares about. */ [data-tip]::after { /* Two variables, not one, and the split matters. Placement rules set only --tip-from (which way it slides in); the hover rule sets only --tip-y. If both wrote --tip-y, the placement rules — being far more specific, e.g. `.table-wrap tbody tr:last-child [data-tip]` at (0,3,2) against hover's (0,2,0) — would win on hover too, and the tooltip would pop into place instead of sliding. Measured that exact failure before splitting them. */ --tip-x: -50%; /* centred on the host */ --tip-from: -3px; /* resting offset: negative = slides down */ --tip-y: var(--tip-from); content: none; position: absolute; z-index: 60; left: 50%; top: calc(100% + 8px); transform: translateX(var(--tip-x)) translateY(var(--tip-y)); background: var(--surface-4); color: var(--ink); border: 1px solid var(--line); font: 500 var(--fs-2) var(--sans); padding: 5px 9px; border-radius: 8px; /* wraps instead of running off the edge; wide enough to stay readable */ width: max-content; max-width: min(260px, 70vw); white-space: normal; text-align: left; box-shadow: 0 8px 24px -8px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; } [data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); opacity: 1; --tip-y: 0px; } /* The trailing action column sits at the right edge of a table that scrolls on overflow. A centred tooltip hangs past that edge and gives the table a horizontal scrollbar even when every column fits — anchor these inwards. */ .col-actions [data-tip]::after { left: auto; right: 0; --tip-x: 0px; } /* Same problem mirrored: the first column stands at the container's left edge, and a wide tooltip (a full user-agent string on /settings/sessions) centred on a narrow cell hangs 71px past it and gets cut off. Anchor those to the left. */ .table-wrap td:first-child [data-tip]::after, .table-wrap th:first-child [data-tip]::after { left: 0; right: auto; --tip-x: 0px; } /* A table wrapper scrolls sideways, and `overflow-x: auto` forces the vertical axis to clip too — so a tooltip pointing DOWN from the last row is always cut off by the wrapper's bottom edge, no matter what z-index it carries. Measured on six pages: /jobs/bot, /machines, /license-keys, /admin/audit, /bots/web-api-keys and /subscriptions, every one of them the last row, cut by 1–6px. Point them up instead; there is always a row above. */ .table-wrap tbody tr:last-child [data-tip]::after { top: auto; bottom: calc(100% + 8px); --tip-from: 3px; } /* logout sits at the sidebar bottom → point the tooltip up so it isn't clipped */ .user-card .logout[data-tip]::after { top: auto; bottom: calc(100% + 8px); --tip-from: 3px; } /* The account block is gone from the shell entirely. Sign out — the only thing it offered that the Account nav item did not — now lives on the account page. In the sidebar it cost 56px of a nav that had to scroll. */ /* 1200px used to cap this. On a 1600+ monitor that left ~400px of empty page while the tables inside scrolled sideways — the panel is a work tool, it should spend the screen it is given. Prose and forms keep their own caps (.page-sub 60ch, form max-widths), so only data widens. */ .content { padding: 26px 34px 72px; max-width: 1440px; width: 100%; margin-inline: auto; } /* Cross-page transitions. Chromium cross-fades between full navigations via the View Transitions API: the new page dissolves in ON TOP of the old one, so there is no mid-transition flash to the background, and because the sidebar is identical page to page only the content appears to change. Browsers without it keep the pageIn rise-fade below; reduced-motion turns both off. htmx same-document swaps run their own transition:true and are unaffected. */ @view-transition { navigation: auto; } /* Hold the outgoing page fully opaque for the whole transition while the new page fades in on top of it. The old `animation: none` let the browser drop the outgoing snapshot at frame 0, and the incoming snapshot (fill: both) was still held at opacity 0 — that one-frame gap showed the bare background as a flicker. An explicit hold keeps something opaque on screen at every frame. */ ::view-transition-old(root) { animation: vt-hold 200ms both; } ::view-transition-new(root) { animation: vt-page-in 200ms var(--ease-out) both; } @keyframes vt-hold { from, to { opacity: 1; } } @keyframes vt-page-in { from { opacity: 0; } to { opacity: 1; } } /* page-enter fallback: subtle rise+fade. fill-mode backwards, NOT both — `both` keeps applying the final transform, making .content a containing block for position:fixed children (the floating save-bar would pin to the page). */ @keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @supports not (view-transition-name: none) { .content { animation: pageIn 160ms var(--ease-out) backwards; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .content { animation: none; } } /* ---------------- UI contract ---------------- Rules that hold everywhere, so no page has to remember them. */ /* A flex or grid child defaults to min-width:auto, which means it refuses to shrink below its longest word. That single default is what turns one long value — an IP, an email, a hardware id — into a page-wide scrollbar. */ .row > *, .panel-head > *, .list-toolbar > *, .form-actions > *, .stat > *, .setting-row > *, .cfg-head > *, .drawer-head > * { min-width: 0; } /* form controls never exceed their container, whatever inline width they carry */ input, select, textarea, .secret-field { max-width: 100%; } /* a long unbroken value wraps rather than pushing its column */ .cell-flex > *, .ac-row .v, .drawer-title { overflow-wrap: anywhere; } /* ---------------- Live viewer ---------------- */ .live-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } /* connection state, pinned to the preview it describes */ .live-state { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px; background: rgba(4,4,6,.78); backdrop-filter: blur(8px); border: 1px solid var(--line); font-size: var(--fs-3); font-weight: 600; color: var(--ink); } .live-state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; } .live-state[data-state="live"] { border-color: rgba(53,214,160,.4); } .live-state[data-state="live"] .live-state-dot { background: var(--live); box-shadow: 0 0 0 4px rgba(53,214,160,.16); } .live-state[data-state="connecting"] .live-state-dot { background: var(--warn); animation: pulseDot 1.4s ease-in-out infinite; } .live-state[data-state="stale"] .live-state-dot { background: var(--warn); } .live-state[data-state="error"] { border-color: rgba(255,91,107,.4); } .live-state[data-state="error"] .live-state-dot { background: var(--bad); } .live-state[data-state="offline"] .live-state-dot { background: var(--ink-4); } @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .live-state-dot { animation: none !important; } } .live-frame img { width: 100%; height: 100%; object-fit: contain; display: none; } .live-frame.has-frame img { display: block; } .live-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 24px; } .live-frame.has-frame .live-empty { display: none; } .live-empty h3 { margin: 6px 0 0; font-size: var(--fs-4); font-weight: 600; } .live-empty p { margin: 0; font-size: var(--fs-2); color: var(--ink-3); max-width: 320px; line-height: 1.5; } .live-refresh { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity 160ms ease; pointer-events: none; } .live-refresh.on { opacity: 1; } .live-refresh .btn-spin { width: 14px; height: 14px; margin: 0; } /* Expandable "why did the capture fail" log under the live placeholder. min-width:0 lets this flex item honour max-width even when the message is a long unbroken line, so the block stays centred instead of blowing out. */ .live-log { margin: 14px auto 0; width: 100%; max-width: 340px; min-width: 0; text-align: center; } .live-log summary { cursor: pointer; font-size: var(--fs-2); font-weight: 600; color: var(--ink-3); } .live-log summary:hover { color: var(--ink-2); } .live-log[open] summary { margin-bottom: 8px; } .live-log-hint { margin: 0 0 8px !important; color: var(--ink-2) !important; font-size: var(--fs-2) !important; line-height: 1.5; max-width: none !important; } .live-log-detail { margin: 0; padding: 8px 10px; text-align: left; background: var(--surface-3); border: 1px solid var(--line); border-radius: 8px; font: var(--fs-2)/1.5 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; } /* interactive surfaces only — a card lifts on hover if (and only if) it's clickable */ .interactive-card { transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); } .interactive-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); box-shadow: 0 14px 36px rgba(0,0,0,.22); } /* accessibility: honour reduced-motion — kill transforms, loops, page-enter, smooth-scroll */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ---------------- Headings ---------------- */ .crumb { font-size: var(--fs-2); color: var(--ink-3); margin-bottom: 10px; } .crumb a { color: var(--ink-2); transition: color var(--fast); } .crumb a:hover { color: var(--accent); } .crumb span { color: var(--ink); font-weight: 500; } .page-title { font-size: var(--fs-7); font-weight: 700; letter-spacing: 0; margin: 0 0 20px; text-wrap: balance; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .page-head .page-title { margin: 0; } .page-sub { color: var(--ink-2); font-size: var(--fs-3); margin: -12px 0 22px; max-width: 60ch; } /* Inside .page-head the title already has margin:0, so the -12px pulled the subtitle up ONTO the title. Stack them normally there. */ .page-head .page-sub { margin: 6px 0 0; } /* Administrator-only information has one visual grammar everywhere. The scope strip says when an otherwise shared route has widened to the whole platform; the compact badge marks the exact columns and controls that customers never receive. Blue stays distinct from live/warn/fail status colours. */ .admin-scope { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 0 18px; padding: 10px 13px; background: rgba(91,141,239,.08); border: 1px solid rgba(91,141,239,.28); border-radius: var(--r-sm); color: var(--ink-2); } .admin-scope-copy { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--fs-2); } .admin-scope-copy strong { color: var(--ink); font-size: var(--fs-3); font-weight: 600; white-space: nowrap; } .admin-scope-copy > span { color: var(--ink-3); } .admin-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 20px; padding: 2px 7px; border-radius: 6px; background: rgba(91,141,239,.14); border: 1px solid rgba(111,158,255,.34); color: #9DBAFF; font: 700 var(--fs-1)/1.2 var(--mono); letter-spacing: .06em; } .admin-badge--compact { min-height: 17px; padding: 1px 5px; font-size: 9px; } .admin-column-heading, .admin-section-title, .admin-owner { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .admin-owner { max-width: 210px; } .admin-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .admin-section-title { flex-wrap: wrap; } .resource-owner { margin: 5px 0 0; color: var(--ink-3); font-size: var(--fs-2); } .resource-owner .admin-owner { vertical-align: middle; } .admin-only { border-color: rgba(91,141,239,.28) !important; background: linear-gradient(135deg, rgba(91,141,239,.075), transparent 46%), var(--surface-2) !important; } .admin-control { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .admin-scope { align-items: flex-start; } .admin-scope-copy { flex-direction: column; gap: 2px; } .admin-scope-copy strong { white-space: normal; } } /* Persistent identity boundary while an administrator is using a customer's account. It remains pinned as the page scrolls and carries the only route that can cross back into the administrator identity. */ .impersonation-notice { position: sticky; top: 0; z-index: 19; display: flex; align-items: center; gap: 11px; min-width: 0; margin: 0; padding: 10px 34px; background: color-mix(in srgb, var(--warn-soft) 92%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); color: var(--warn); box-shadow: 0 8px 24px rgba(0,0,0,.18); } .impersonation-notice > svg { width: 18px; height: 18px; flex: none; } .impersonation-copy { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; } .impersonation-copy strong { color: var(--ink); font-size: var(--fs-3); white-space: nowrap; } .impersonation-copy > span { color: var(--ink-2); font-size: var(--fs-2); } .impersonation-notice form { flex: none; } @media (max-width: 760px) { .impersonation-notice { top: 59px; padding: 10px 14px; align-items: flex-start; } .impersonation-copy { flex-direction: column; gap: 2px; } .impersonation-copy strong { white-space: normal; } } @media (max-width: 520px) { .impersonation-notice { flex-wrap: wrap; } .impersonation-notice form { width: 100%; padding-left: 29px; } .impersonation-notice form button { width: 100%; } } /* ---------------- Panels (real containers only) ---------------- */ .card, .panel { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px; margin-bottom: 20px; } .card-title, .panel-title { font-size: var(--fs-4); font-weight: 600; letter-spacing: -.005em; margin: 0 0 4px; color: var(--ink); } .card-sub, .panel-sub { font-size: var(--fs-2); color: var(--ink-3); margin: 0 0 16px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .panel-head > :first-child { margin-bottom: 0; } .panel-head .panel-title, .panel-head .card-sub { margin: 0; } /* ---------------- Stat tiles (instrument readouts, not fat cards) --- */ .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; } .stat { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px 17px; position: relative; overflow: hidden; transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out); /* A tile with a sparkline pushed its caption up under the number while its neighbours kept theirs at the foot — four cards in a row, captions on two different lines. The caption is the tile's last line, always. */ display: flex; flex-direction: column; } /* hover is a whisper: the border wakes up, nothing moves, nothing casts a shadow */ a.stat:hover { border-color: var(--line); background: var(--surface-3); } .stat .k { font-size: var(--fs-2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); display: flex; align-items: center; gap: 7px; } /* readout: the number is the loudest thing in the tile — full ink, tight, tabular */ .stat .v { font: 700 var(--fs-8)/1 var(--mono); letter-spacing: -.01em; margin-top: 13px; font-variant-numeric: tabular-nums; color: var(--ink); } .stat .v small { font-size: var(--fs-4); color: var(--ink-3); font-weight: 600; } /* "no measurement" is not the number zero — it reads quieter and never invites the tile to be compared against one that has real data */ .stat .v .v-none { color: var(--ink-4); font-weight: 600; } /* margin-top:auto, not a fixed gap — the caption is the tile's last line even in the tile that carries a sparkline after it */ .stat .d { font-size: var(--fs-2); margin-top: auto; padding-top: 8px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .stat .d.up { color: var(--live); } .stat .d.down { color: var(--bad); } /* Countdown readout — the one figure on the dashboard that must never wrap and never clip. It sizes itself to the tile instead of the other way round, and the word "days" lives in the caption below, not inside the number. */ .stat .v.cd { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; min-width: 0; } .cd-d { display: inline-flex; align-items: baseline; gap: 1px; } .cd-d b { font: inherit; } .cd-d small { font-size: .58em; font-weight: 600; color: var(--ink-3); } .cd-t { font: inherit; font-variant-numeric: tabular-nums; } /* clamp so the widest form ("7d 23:59:59") still fits the narrowest tile */ .stat { container-type: inline-size; } .stat .v.cd { font-size: clamp(16px, calc(8cqi - 1px), 24px); } /* fluid, but both ends land on the ladder */ /* on a phone the timer takes the full row rather than half of one — a clock squeezed into a 112px column is the reason it was losing its last digits */ @media (max-width: 620px) { .stat-grid .stat:has(.cd) { grid-column: 1 / -1; } } /* ---------------- Tables (one DataTable, every page) ---------------- */ /* overflow-x:auto forces overflow-y to compute to auto → a stray vertical scrollbar. overflow-y:hidden stops that; padding-bottom then gives the last row breathing room AND a gutter so a horizontal scrollbar never clips it. (No negative bottom margin — that used to pull the panel edge over the row.) */ .table-wrap { overflow-x: auto; overflow-y: hidden; margin: 0 -20px; padding-bottom: 14px; border-radius: 12px; } .table-wrap table { padding: 0 20px; } /* The wrapper is the query container, so a table reacts to the width it actually gets — not to the width of the window. The two differ by the sidebar plus the page gutters (~300px), and by however much an aside column takes, which is why a viewport-keyed breakpoint left rows in table form at 1024 and 768 with their action buttons parked outside the visible area. */ .table-wrap.as-cards { container-type: inline-size; container-name: rows; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; vertical-align: middle; } tr:last-child td { border-bottom: 0; } th { color: var(--ink-3); font-weight: 600; font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .04em; } tbody tr, table tr { transition: background-color var(--fast); } tbody tr:hover td { background: rgba(255,255,255,.03); } td .mono, td.mono, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--ink-3); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Opt-in figure column: header and digits both pin right, so the numbers line up under each other and under the end of their label. Left-aligned digits below a long header ("GAMES (24H)" over a lone "0") read as belonging to nothing. Opt-in rather than applied to every .num — other tables pair left-aligned headers with their numbers and would end up mismatched. */ th.col-num, td.col-num { text-align: right; } /* Two counts sharing one column ("0 / 197"). Right-aligning the whole string would put the slash in a different place on every row, so each side gets a fixed box and the slash becomes the pivot everything lines up on — heading included, since it carries the same separator. */ th.col-pair, td.col-pair { text-align: center; } /* one box, so the phone's card layout treats the pair as a single value instead of flinging its three parts to opposite edges of the row */ .pair { display: inline-block; white-space: nowrap; } .pair-a, .pair-b { display: inline-block; min-width: 3ch; } .pair-a { text-align: right; } .pair-b { text-align: left; color: var(--ink-3); } .pair-s { color: var(--ink-4); margin: 0 5px; } /* column sizing: one column absorbs slack, the rest pack to content. .col-grow → primary text column takes leftover width (dense, no lopsided gaps) .col-actions → trailing icon column shrinks and pins its content right */ th.col-grow, td.col-grow { width: 100%; } th.col-actions, td.col-actions { width: 1%; text-align: right; white-space: nowrap; } th.col-owner, td.col-owner { width: 1%; min-width: 150px; } .row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; } /* A destructive control must not sit shoulder to shoulder with an ordinary one — put a gap and a hairline between them so a mis-aimed click lands on nothing. */ .row-actions .ra-danger { margin-left: 12px; padding-left: 12px; position: relative; } .row-actions .ra-danger::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: var(--line-2); } /* level readout: the figures lead, the bar illustrates */ .lvl { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; } .lvl-head { display: inline-flex; align-items: baseline; gap: 8px; } .lvl-head b { font-size: var(--fs-2); font-weight: 600; color: var(--ink); } .lvl-pct { font: 600 var(--fs-2) var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-3); } .lvl-xp { font-size: var(--fs-2); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .lvl-none { color: var(--ink-4); font-style: normal; } /* A job row swaps its buttons when it changes state (cancel → run again + delete). Reserve room for the widest set so the columns never shift. */ .row-actions.ra-2 { min-width: 86px; } /* Danger, once per row, is a warning; danger repeated down every row is wallpaper. /license-keys showed five tinted Revoke buttons and /admin/invites six Delete — together the loudest thing on either page, louder than the one button that actually creates something. Inside a row the destructive control keeps its red word and drops the red seat; the tint returns on hover and focus, where the pointer already is, and the confirm dialog still carries the full weight. Header and danger-zone buttons are untouched. */ .row-actions .btn-danger, td .btn-danger { background: transparent; border-color: var(--line-2); } .row-actions .btn-danger:hover, .row-actions .btn-danger:focus-visible, td .btn-danger:hover, td .btn-danger:focus-visible { background: var(--bad-soft); border-color: rgba(255,91,107,.25); } /* Compact marker for an auto-queued job — a full "auto" pill cost the jobs table ~40px of width it does not have. */ .auto-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 5px; background: var(--surface-3); border: 1px solid var(--line-2); font: 700 var(--fs-1)/1 var(--sans); color: var(--ink-3); vertical-align: middle; } /* Below a roomy desktop the jobs table drops its least-critical column instead of making the whole table scroll sideways. */ @media (max-width: 1400px) { .md-hide { display: none; } } /* One tier up: a column that is nice to have but must not starve the row's primary text column. Below a wide monitor it steps aside. */ @media (max-width: 1600px) { .lg-hide { display: none; } } /* truncate an over-long inline value inside a cell (tokens, urls) */ .cell-trunc { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* a flexible cell that GROWS to fill leftover width but truncates when squeezed (shows the full value on wide screens, ellipsis in a narrow column) */ td.cell-flex { width: 100%; max-width: 0; } td.cell-flex > * { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* an avatar + name pair stays a flex row while it truncates (the generic rule above would turn it into an inline-block and drop the avatar out of line) */ /* the rule above forces inline-block on every child; these two need to lay their own contents out side by side, so they opt back in to flex */ td.cell-flex > .name-cell, td.cell-flex > .drop-item { display: inline-flex; } /* .dot* removed: every one of the 13 sat immediately before text that already said the same thing ("● Machines Online", "● claimed"), so it carried no information and pulsed for attention it had not earned. */ /* ---------------- Pills / badges ---------------- */ .pill-ok, .pill-fail, .pill-warn, .pill-mute, .badge, .status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-2); font-weight: 600; line-height: 1.4; border: 1px solid transparent; } .pill-ok { background: var(--live-soft); color: var(--live); border-color: rgba(53,214,160,.18); } .pill-fail{ background: var(--bad-soft); color: var(--bad); border-color: rgba(255,91,107,.18); } .pill-warn{ background: var(--warn-soft); color: var(--warn); border-color: rgba(245,178,62,.18); } .pill-mute{ background: transparent; color: var(--ink-3); border-color: var(--line-2); } /* status chips read stronger with a leading colour dot (inherits the pill's colour) */ .pill-ok::before, .pill-fail::before, .pill-warn::before, .pill-mute::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .pill-mute::before { opacity: .7; } /* Status column: one width for every chip so the column reads as a tidy stack instead of pills that jump wider on longer words ("offline" vs "active"). */ #bots-table td[data-label="Status"] .status-chip { min-width: 86px; justify-content: center; } /* Status as an actions menu — a chip that is also a button (payments history). Native
; the popover is position:fixed (set by JS) so it isn't clipped by the table-wrap's overflow. Colour modifiers mirror the pill-warn/pill-mute chips. */ .status-menu { position: relative; display: inline-block; } .status-menu > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px 3px 9px; border-radius: 999px; font-size: var(--fs-2); font-weight: 600; line-height: 1.4; border: 1px solid transparent; transition: background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out); } .status-menu > summary::-webkit-details-marker { display: none; } .status-menu > summary::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .status-menu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .status-menu .chev { transition: transform var(--fast) var(--ease-out); opacity: .7; margin-left: 1px; } .status-menu[open] > summary .chev { transform: rotate(180deg); } .status-menu--warn > summary { background: var(--warn-soft); color: var(--warn); border-color: rgba(245,178,62,.18); } .status-menu--warn > summary:hover, .status-menu--warn[open] > summary { border-color: rgba(245,178,62,.5); } .status-menu--mute > summary { background: transparent; color: var(--ink-3); border-color: var(--line-2); } .status-menu--mute > summary:hover, .status-menu--mute[open] > summary { border-color: var(--line); color: var(--ink-2); } .status-menu-pop { position: fixed; z-index: 60; min-width: 180px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px; display: grid; gap: 2px; box-shadow: 0 14px 34px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.35); animation: status-pop var(--fast) var(--ease-out); } @keyframes status-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .status-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer; padding: 7px 9px; border-radius: var(--r-xs); border: 0; background: none; font: 500 var(--fs-3)/1.4 var(--sans); color: var(--ink-2); transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out); } .status-menu-item:hover, .status-menu-item:focus-visible { background: var(--surface-3); color: var(--ink); outline: none; } .status-menu-item.is-primary { color: var(--ink); } .status-menu-item svg { flex: none; opacity: .85; } @media (prefers-reduced-motion: reduce) { .status-menu-pop { animation: none; } .status-menu .chev { transition: none; } } code, .code { font: var(--fs-2) var(--mono); background: var(--surface-3); border: 1px solid var(--line-2); padding: 2px 8px; border-radius: 7px; color: var(--ink-2); font-variant-numeric: tabular-nums; } /* ---------------- Forms ---------------- */ label.field { display: block; margin-bottom: 17px; } /* New-bot credentials use
(not