/* SixPanel — "Polar" design language. No framework, no external assets. --------------------------------------------------------------------------- A calm, airy, professional panel: soft cool-grey page, white floating surfaces, indigo accent, pill chips, generous spacing. Theme model (unchanged contract): LIGHT is the default (:root). html[data-theme="dark"] forces dark; no attribute = "system" and the prefers-color-scheme media block applies the same dark tokens. Every component reads the variables only — the whole theme is swappable from :root alone. Legacy variable names (--bg2, --card, --primary, --ok-fg, …) are kept as aliases because JS templates paint inline styles/SVG strokes with them. */ :root { /* ---- surfaces ---- */ --bg: #f6f7fb; /* page background */ --surface: #ffffff; /* cards, sidebar, modals */ --surface-2: #fbfbfe; /* subtle raised bits: hover, tiles */ --well: #eff1f7; /* sunken bits: meter tracks, code, crumbs */ --border: #e7e9f2; /* hairlines */ --border-strong: #dcdfeb; /* input outlines */ /* ---- text ---- */ --text: #101321; --muted: #5b6172; /* ---- accent (indigo) ---- */ --accent: #4f46e5; --accent-strong: #4338ca; --accent-soft: #eef0ff; --accent-fg: #ffffff; /* text on solid accent */ /* ---- status ---- */ --ok: #16a34a; --ok-soft: #e8f7ee; --ok-fg: #15803d; --warn: #d97706; --warn-soft: #fdf3e2; --warn-fg: #b45309; --err: #dc2626; --err-soft: #fdecec; --err-fg: #b91c1c; --info: #0284c7; --info-soft: #e7f4fb; --info-fg: #0369a1; /* ---- console (job logs keep a dark terminal look in BOTH themes) ---- */ --console-bg: #0e101c; --console-text: #d7dbe8; --console-line: #23263a; /* ---- fixed-purpose ---- */ --qr-bg: #ffffff; /* QR codes must stay white to scan */ --on-solid: #ffffff; /* text/knob on saturated fills, both themes */ /* ---- brand gradient (small marks only) ---- */ --grad: linear-gradient(90deg, #6366f1, #a855f7); /* ---- chrome ---- */ --overlay: rgba(13, 15, 23, .5); --shadow-1: 0 1px 2px rgba(16, 19, 33, .05), 0 8px 24px rgba(16, 19, 33, .05); --shadow-2: 0 2px 6px rgba(16, 19, 33, .07), 0 18px 48px rgba(16, 19, 33, .14); --shadow-knob: 0 1px 2px rgba(16, 19, 33, .22); --mesh-a: 16%; /* mesh gradient strength (accent corner) */ --mesh-b: 9%; /* mesh gradient strength (warm corner) */ --warm: #f59e0b; /* the warm mesh tint */ /* ---- shape ---- */ --r-ctl: 10px; /* inputs, buttons, nav pills */ --r-card: 14px; /* cards */ --r-modal: 20px; /* modals + wizard card */ /* ---- type ---- */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- motion ---- */ --tick: .16s ease-out; /* ---- legacy aliases (JS inline styles + old markup read these) ---- */ --bg2: var(--well); --ring: color-mix(in srgb, var(--muted) 45%, transparent); --primary: var(--accent); --radius: var(--r-ctl); color-scheme: light; } /* explicit dark choice */ :root[data-theme="dark"] { --bg: #0d0f17; --surface: #151827; --surface-2: #191d30; --well: #10131f; --border: #272b40; --border-strong: #2f3450; --text: #e9eaf3; --muted: #9aa0b5; --accent: #818cf8; --accent-strong: #a5b4fc; --accent-soft: #232748; --accent-fg: #14163a; --ok-soft: #12281c; --ok-fg: #4ade80; --warn-soft: #2b2113; --warn-fg: #fbbf24; --err-soft: #2c1519; --err-fg: #f87171; --info-soft: #10222f; --info-fg: #38bdf8; --console-bg: #0a0c15; --console-line: #1e2233; --overlay: rgba(0, 0, 0, .62); --shadow-1: 0 0 0 1px rgba(39, 43, 64, .55), 0 8px 24px rgba(0, 0, 0, .35); --shadow-2: 0 0 0 1px rgba(47, 52, 80, .7), 0 20px 56px rgba(0, 0, 0, .55); --shadow-knob: 0 1px 2px rgba(0, 0, 0, .5); --mesh-a: 11%; --mesh-b: 6%; color-scheme: dark; } /* system preference (no data-theme attribute set) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d0f17; --surface: #151827; --surface-2: #191d30; --well: #10131f; --border: #272b40; --border-strong: #2f3450; --text: #e9eaf3; --muted: #9aa0b5; --accent: #818cf8; --accent-strong: #a5b4fc; --accent-soft: #232748; --accent-fg: #14163a; --ok-soft: #12281c; --ok-fg: #4ade80; --warn-soft: #2b2113; --warn-fg: #fbbf24; --err-soft: #2c1519; --err-fg: #f87171; --info-soft: #10222f; --info-fg: #38bdf8; --console-bg: #0a0c15; --console-line: #1e2233; --overlay: rgba(0, 0, 0, .62); --shadow-1: 0 0 0 1px rgba(39, 43, 64, .55), 0 8px 24px rgba(0, 0, 0, .35); --shadow-2: 0 0 0 1px rgba(47, 52, 80, .7), 0 20px 56px rgba(0, 0, 0, .55); --shadow-knob: 0 1px 2px rgba(0, 0, 0, .5); --mesh-a: 11%; --mesh-b: 6%; color-scheme: dark; } } /* =========================================================================== base ======================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 14px/1.55 var(--font); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [hidden] { display: none !important; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -.01em; } h2 { letter-spacing: -.01em; } h3 { font-size: 15px; margin: 0 0 12px; font-weight: 650; letter-spacing: -.01em; } code { font-family: var(--mono); font-size: .92em; background: var(--well); padding: 1.5px 6px; border-radius: 6px; } .mono { font-family: var(--mono); font-size: 12.5px; } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } /* quiet, theme-following scrollbars (page scroll behavior unchanged) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 32%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 50%, transparent); } .hint { color: var(--muted); margin: 4px 0 0; font-size: 13px; } .spacer { flex: 1; } /* =========================================================================== shell layout: sidebar + main column ======================================================================== */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 232px; flex: 0 0 232px; background: var(--surface); border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; padding: 18px 14px 14px; position: sticky; top: 0; height: 100vh; } /* brand block: mark + the name as type + a small gradient beacon */ .brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 3px; } .brand::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); margin-inline-start: 1px; flex: 0 0 auto; align-self: flex-start; margin-top: 2px; } /* 36px, not 26. Measured against the 232px sidebar it sits in: at 26 beside a 14px wordmark the whole lockup was smaller than one nav row's text and read as an afterthought. 36/19 fills the column without crowding it. */ .brand-icon { width: 36px; height: 36px; flex: 0 0 auto; } /* The name as TYPE. Sized in px against the 36px mark beside it, weight 700 to match .login-title, and -.01em tracking so "SixPanel" closes up the way the login card's does. "Six" takes the brand indigo; the rest inherits --text, so both themes are the page's job with no second file and no swap. */ .brand-name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--text); line-height: 1; white-space: nowrap; } .brand-name-a { color: var(--primary); } /* 58px = the sidebar's 10px padding + the 36px mark + the 12px gap, so the version starts exactly under the "S". */ .brand-sub { color: var(--muted); font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: 2px 10px 18px 58px; /* the version, the update chip and (for a demo or temporary session) the scope chip share this line inside a 240px sidebar — let them sit in a row that wraps, instead of overflowing the column */ display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } /* the scope chip lives here too: same pill, one size down, and it never stretches the line's height */ #scopeChip { font-size: 9.5px; padding: 2px 8px; letter-spacing: .04em; } #scopeChip::before { width: 5px; height: 5px; } /* the running version: a fact to look up, not a headline — and never uppercased (a version is not a word) */ /* no margin of its own: .brand-sub is a flex row now and owns the spacing */ .brand-ver { text-transform: none; letter-spacing: 0; opacity: .85; } /* update chip appended next to the version; it is an to Settings */ .brand-ver-chip { margin-inline-start: 6px; text-decoration: none; } .brand-ver-chip:hover { text-decoration: none; filter: brightness(1.05); } /* big variant (setup wizard head) */ .brand.big { justify-content: center; font-size: 18px; font-weight: 700; padding: 0 0 10px; } .brand.big .brand-icon { width: 38px; height: 38px; } .brand.big::after { align-self: center; margin-top: -12px; } /* ---- nav: rounded pills, 38px tall ---- */ .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; padding: 2px; } .nav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; color: var(--muted); border-radius: var(--r-ctl); font-weight: 550; text-decoration: none; transition: background var(--tick), color var(--tick); } .nav a svg { flex: 0 0 auto; opacity: .9; } .nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } :root[data-theme="dark"] .nav a:hover { background: var(--well); } .nav a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; } .nav a.active svg { color: var(--accent); opacity: 1; } /* active marker: a rounded 3px accent bar hugging the pill's start edge */ .nav a.active::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 99px; background: var(--accent); } .nav a:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); } .sidebar-foot { padding-top: 12px; } /* nav groups (Panel / Project) */ .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-group + .nav-group { margin-block-start: 20px; } .nav-group-title { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 12px; margin-block-end: 6px; } .nav-group-head { display: flex; align-items: center; gap: 8px; margin-block-end: 6px; padding-inline-end: 2px; min-width: 0; } .nav-group-head .nav-group-title { flex: 0 0 auto; margin: 0; } /* contextual nav: the back-to-panel link on project pages */ #nav a.nav-back { margin-bottom: 12px; opacity: .8; } #nav a.nav-back:hover { opacity: 1; } /* ---- main column ---- */ .main { flex: 1; min-width: 0; padding: 0 36px 120px; max-width: 1200px; } /* ---- topbar: sticky translucent page head, hairline below ---- */ .page-head { position: sticky; top: 0; z-index: 40; margin: 0 -36px 26px; padding: 11px 36px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; /* 96%, not 80%. The blur is what was doing the hiding, and a backdrop filter is the first thing a browser drops when it has no GPU compositing to spend — measured in headless Chrome, which reports backdrop-filter as supported and then does not paint it: the page scrolled underneath and a Restart button showed through the page title. @supports cannot catch that, because nothing there is unsupported. So the background is opaque enough to stand on its own and the blur stays as the effect it always was, not as the thing legibility depends on. */ background: color-mix(in srgb, var(--bg) 96%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* the title column takes the room and wraps its own hint; the tools keep their row. Without flex:1 a long hint made the column as wide as the line, and the moment the job pill joined .head-tools the tools wrapped UNDER the title, left-aligned (Projects, fresh demo box, 30 Sep 2026). Phones still stack, below. */ .page-head-text { flex: 1 1 0; min-width: 0; } .page-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .page-head .hint { margin-top: 2px; } /* header tools (project switcher pill, language, theme) */ .head-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* THE PROJECT SWITCHER (index.html #projMenu, core.js paintProjMenu / projMenuOpen): a pill that names the project being looked at, and a box under it listing every project. It was a native draws the same chevron as the searchable .combo and the project switchers. The browser's own arrow is a heavier glyph pressed to the edge — measured on the fresh demo box, 28 Sep 2026: the wizard's Language select sat under Country/Timezone (.combo) wearing a different arrow. The data-URI cannot read currentColor, so each theme pins its own gray (the same two the switchers use). */ .input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); } .field { margin-bottom: 14px; } .field label { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 6px; font-weight: 600; } .note, .field .note { color: var(--muted); font-size: 12px; margin-top: 5px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; } .check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; margin: 5px 0; } .check input { width: auto; min-height: 0; } /* A step that is not optional, shown where a checkbox would be. A `checked disabled` input is the obvious way to render "on, and you cannot change it", and it is wrong: the browser greys it, and grey-with-a-tick is indistinguishable from grey-without at a glance — the mandatory backup in the maintenance window came out looking like the one task the owner had switched off. This is unmistakably on, and unmistakably not a control. */ .ok-tick { flex: 0 0 auto; width: 15px; text-align: center; color: var(--ok-fg); font-weight: 700; line-height: 1.5; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* small CSS switch: */ .toggle { position: relative; display: inline-flex; width: 38px; height: 22px; flex: 0 0 auto; vertical-align: middle; } .toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; min-height: 0; } .toggle i { display: block; width: 100%; height: 100%; pointer-events: none; background: var(--well); border: 1px solid var(--border-strong); border-radius: 99px; transition: background var(--tick), border-color var(--tick); } /* THE KNOB OF A SWITCH THAT IS OFF is the muted text colour, never the surface: the surface is what a card is made of, so in the dark theme the knob was #151827 on a #10131f track on a #151827 card — 1.05 : 1, measured in the browser, 10 Oct 2026. An off switch read as an empty capsule and could not be told from a disabled one. Muted is 7.1 : 1 on the dark track and 5.5 : 1 on the light one (where the white knob had been 1.13 : 1 and was seen by its shadow alone); on, the knob stays white on the accent. Held by the audit's fact on Server → Monitoring, in every mode. */ .toggle i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); box-shadow: var(--shadow-knob); transition: transform var(--tick), background var(--tick); } .toggle input:checked + i { background: var(--accent); border-color: var(--accent); } .toggle input:checked + i::after { transform: translateX(16px); background: var(--on-solid); } [dir="rtl"] .toggle input:checked + i::after { transform: translateX(-16px); } .toggle input:focus-visible + i { box-shadow: 0 0 0 3px var(--accent-soft); } .toggle input:disabled + i { opacity: .55; } .toggle input:disabled { cursor: not-allowed; } /* =========================================================================== tables ======================================================================== */ .tbl-wrap { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: start; color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px; border-bottom: 1px solid var(--border); } .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .tbl tr:last-child td { border-bottom: none; } .tbl tr:hover td { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); } .tbl .mono { font-family: var(--mono); font-size: 12px; } .tbl .actions { text-align: end; white-space: nowrap; } /* STACKING THESE TABLES ON A PHONE MEASURED WORSE, so it is not here. The reasoning was sound: at 390px a project Overview's deploy history gave its four cells 83 / 81 / 97 / 92 px, so a commit subject wrapped inside 97px and each row stood 182px. Turning each row into a block gives every cell the full width. Measured on the box after doing exactly that: Recent deploys 838 -> 731px, but Services 922 -> 978px and its rows 104 -> 129px, because a service row's four short cells (name, description, state, button) each took a line of their own where they had shared one. Net on the page: 2839 -> 2787px, 52px for a layout that reads less like a table. Not worth it; reverted. The honest reading is that these two tables want opposite things, so a per-table decision would be the fix rather than a blanket breakpoint — left for a round that can measure each one. Recorded so the next reader does not spend the same hour: docs/measurements/2026-09-06. Services has since been decided the other way (.ssvc-tbl, below): once the last cell was pinned, its rows stood 367-428px at 390px with What it does and State hidden under the buttons (2 Oct 2026). */ .tbl .actions .btn { margin-inline-start: 6px; } /* A ROW'S BUTTONS STAY IN REACH WHEN ITS TABLE SCROLLS SIDEWAYS. On a phone a four-column table is wider than its card, and .tbl-wrap scrolls it — which put the Remove / Restore / Sign out / Log / Run now button of every row past the card's edge, with nothing saying it was there (measured 30 Sep 2026 at 390px: 15 pages, controls ending at 392-616px; `WALK_OVERFLOW=1` in browser-walk.js is the check). The last cell, when it holds a control, is pinned to the visible edge and the other cells scroll beneath it. Sticky does nothing while the table fits, so wide screens are unchanged; the cell needs a solid background to cover what scrolls under it, hover tint included. A .btn-row of buttons counts too (AI → Connect's Edit and Revoke ended at 479 and 498px on a 390px phone, 2 Oct). */ .tbl td:last-child:has(> .btn, > .toggle, > .btn-row) { position: sticky; inset-inline-end: 0; z-index: 1; background: var(--surface); } .tbl tr:hover td:last-child:has(> .btn, > .toggle, > .btn-row) { background: linear-gradient(color-mix(in srgb, var(--accent-soft) 40%, transparent), color-mix(in srgb, var(--accent-soft) 40%, transparent)), var(--surface); } .tbl-wrap { position: relative; } /* A DATA TABLE THAT IS A LIST OF CARDS ON A PHONE (`.tbl-cards`). Measured on the GCP beta box at 390px (3 Oct 2026, the walk's covered-cell probe): on ten tables the pinned actions cell sat on top of the columns that carry the information — Problem reports' Status and Last reply, the databases' Belongs to / Size / Tables / Charset, locked-out addresses' Why / Failed tries / Clears in, PHP and Node.js versions' support, release dates and download sizes, MCP tokens' Last used and Calls, a snapshot's Contents, a signed-in device and its IP — with nothing saying the table scrolled. Under 600px each row becomes a card: its first cell as the title on a line of its own, every other value after its column's name (`data-label`, copied from the headings by core.js labelCardTables), the buttons last and no longer pinned. Above 600px nothing changes. `.tbl.tbl-cards` outranks the pinned-cell rule above, hover included. */ @media (max-width: 600px) { .tbl.tbl-cards thead { display: none; } .tbl.tbl-cards, .tbl.tbl-cards tbody { display: block; width: 100%; } .tbl.tbl-cards tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--border); } .tbl.tbl-cards tr:last-child { border-bottom: none; } .tbl.tbl-cards td { display: block; padding: 0; border: 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; } .tbl.tbl-cards td:first-child { flex: 1 1 100%; } .tbl.tbl-cards td:empty { display: none; } .tbl.tbl-cards td[data-label]:not([data-label=""]):not(:first-child)::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; font-family: var(--font); font-size: 13px; /* a mono value keeps its own face; its name does not */ } /* a row marked by a tint on each cell (this device) reads as stripes once the cells wrap: the card keeps one tint and one edge instead */ .tbl.tbl-cards td, .tbl.tbl-cards tr.cur td, .tbl.tbl-cards tr.cur td:first-child { background: none; box-shadow: none; } .tbl.tbl-cards tr.cur { background: color-mix(in srgb, var(--ok) 7%, transparent); box-shadow: inset 3px 0 0 var(--ok); padding-inline: 10px; } [dir="rtl"] .tbl.tbl-cards tr.cur { box-shadow: inset -3px 0 0 var(--ok); } .tbl.tbl-cards td.num { text-align: start; } .tbl.tbl-cards td:last-child:has(> .btn, > .toggle, > .btn-row), .tbl.tbl-cards td.actions, .tbl.tbl-cards td.host-actions { position: static; flex: 1 1 100%; background: none; text-align: start; white-space: normal; } .tbl.tbl-cards td:last-child:has(> .btn, > .toggle, > .btn-row)::before { content: none; } .tbl.tbl-cards td .btn { margin-inline: 0 6px; } .tbl.tbl-cards tr:hover td, .tbl.tbl-cards tr:hover td:last-child:has(> .btn, > .toggle, > .btn-row) { background: none; } /* Server ▸ PHP: as a card the labelled "Used by" link has room again, so the plain copy under the version (the 640px rule below) would say it twice */ .tbl.tbl-cards .rt-used-sm { display: none; } } /* SERVER → SERVICES IS A LIST OF CARDS ON A PHONE. As a table at 390px its buttons cell (two buttons, pinned) and the name cell (its scope chip does not wrap) left What it does its narrowest word, ~90px: every row stood 367-428px, and the pinned buttons covered What it does and State entirely (beta box walk, 2 Oct 2026). Here a row is: the name with its state beside it, what it does under them at full width, then its buttons. `.tbl.ssvc-tbl` outranks the pinned-cell rule above. */ @media (max-width: 600px) { .tbl.ssvc-tbl thead { display: none; } .tbl.ssvc-tbl, .tbl.ssvc-tbl tbody { display: block; } .tbl.ssvc-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--border); } .tbl.ssvc-tbl tr:last-child { border-bottom: none; } .tbl.ssvc-tbl td { display: block; padding: 0; border: 0; } .tbl.ssvc-tbl td:nth-child(3) { grid-column: 2; grid-row: 1; } .tbl.ssvc-tbl td:nth-child(2), .tbl.ssvc-tbl td.actions { grid-column: 1 / -1; } .tbl.ssvc-tbl td.actions { position: static; background: none; text-align: start; white-space: normal; } .tbl.ssvc-tbl td.actions:empty { display: none; } .tbl.ssvc-tbl td.actions .btn { margin-inline: 0 6px; } .tbl.ssvc-tbl tr:hover td, .tbl.ssvc-tbl tr:hover td.actions:last-child { background: none; } } /* AI → MONITORING'S CHECKS AND SERVER → FIREWALL'S RULESET, THE SAME WAY. Three columns at 390px left each ~100px: the address check listed its 25 hostnames one broken word at a time (beta-static.al / lsweb.net) in a 590px row, and the firewall's reasons ran to 444px rows (beta box walk, 2 Oct 2026). On a phone the check (with its hostnames) and the rule take the full width, how often / last run share the line under the check, and the rule's "allow from" says what it is. */ @media (max-width: 600px) { .tbl.ai-watch thead, .tbl.fw-plan thead { display: none; } .tbl.ai-watch, .tbl.ai-watch tbody, .tbl.fw-plan, .tbl.fw-plan tbody { display: block; } .tbl.ai-watch tr, .tbl.fw-plan tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .tbl.ai-watch tr:last-child, .tbl.fw-plan tr:last-child { border-bottom: none; } .tbl.ai-watch td, .tbl.fw-plan td { display: block; padding: 0; border: 0; } .tbl.ai-watch td:first-child { grid-column: 1 / -1; } .tbl.ai-watch td:nth-child(3) { justify-self: end; } .tbl.fw-plan td { grid-column: 1 / -1; } .tbl.fw-plan td:first-child { font-weight: 600; } .tbl.fw-plan td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); } .tbl.ai-watch tr:hover td, .tbl.fw-plan tr:hover td { background: none; } } /* SECURITY → ACTIVITY LOG, LIKE THE ACTIVITY PAGE. Four columns at 390px wrapped every date to three lines and cut each detail at the card's edge (2 Oct 2026). A row is the sentence at full width, then the panel's id for it with the time beside it, then the address it came from — or nothing, rather than a lone dash. The id was the bold line of the card and the sentence the one under it until round 157 (UX-21); the cells are placed by name, so a column that moves in the page moves here with it. An entry with no sentence (panel.start) has its id alone. */ .tbl.sec-audit td.sec-id { color: var(--muted); font-size: 12px; } @media (max-width: 600px) { .tbl.sec-audit thead { display: none; } .tbl.sec-audit, .tbl.sec-audit tbody { display: block; } .tbl.sec-audit tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .tbl.sec-audit tr:last-child { border-bottom: none; } .tbl.sec-audit td { display: block; padding: 0; border: 0; } .tbl.sec-audit td.sec-what { grid-column: 1 / -1; grid-row: 1; font-weight: 600; overflow-wrap: anywhere; } .tbl.sec-audit td.sec-what:empty { display: none; } .tbl.sec-audit td.sec-id { grid-column: 1; grid-row: 2; overflow-wrap: anywhere; } .tbl.sec-audit td.sec-when { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 12px; text-align: end; } .tbl.sec-audit td.sec-ip { grid-column: 1 / -1; grid-row: 3; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .tbl.sec-audit td.sec-noip { display: none; } .tbl.sec-audit tr:hover td { background: none; } } /* THE SCHEDULED-TASK TABLES, the same way (demo box walk at 390px, 3 Oct 2026). 6amMart's own schedule broke "0 * * * *" over two lines and "58 minutes from now" over four; a website's cron and a project's own tasks pin a toggle and three or four buttons over the schedule, the next run and the last result. On a phone a task is: what runs (with its last result, or its switch) on top, when it runs and when next under it, then its buttons. The two with long cells WRAP (flex) rather than sit in a grid: a grid's auto column took the width of "any moment now · Oct 3, 2026, 12:50 AM" and left the job's name and command 76px, a 458px card (measured on the live page before this was kept). */ @media (max-width: 600px) { .tbl.cron-app thead, .tbl.cron-own thead { display: none; } .tbl.cron-app, .tbl.cron-app tbody, .tbl.cron-own, .tbl.cron-own tbody, .tbl.scron-tbl, .tbl.scron-tbl tbody { display: block; } .tbl.cron-app tr, .tbl.cron-own tr, .tbl.scron-tbl tr { gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .tbl.cron-app tr:last-child, .tbl.cron-own tr:last-child, .tbl.scron-tbl tr:last-child { border-bottom: none; } .tbl.cron-app td, .tbl.cron-own td, .tbl.scron-tbl td { display: block; padding: 0; border: 0; overflow-wrap: anywhere; } /* 6amMart's schedule: the command, then its cron line and when it is next due — short cells */ .tbl.cron-app tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .tbl.cron-app td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; } .tbl.cron-app td:nth-child(1) { grid-row: 2; white-space: nowrap; color: var(--muted); } .tbl.cron-app td:nth-child(3) { grid-row: 2; text-align: end; color: var(--muted); font-size: 12.5px; } .tbl.cron-own tr, .tbl.scron-tbl tr { display: flex; flex-wrap: wrap; align-items: flex-start; } /* a project's own tasks: name + switch, when, next run, the command, where it runs */ .tbl.cron-own td:nth-child(1) { order: 1; flex: 1 1 0; min-width: 60%; font-weight: 600; } .tbl.cron-own td:nth-child(6) { order: 2; margin-inline-start: auto; } .tbl.cron-own td:nth-child(2) { order: 3; flex: 1 1 100%; } .tbl.cron-own td:nth-child(5) { order: 4; flex: 1 1 100%; color: var(--muted); font-size: 12.5px; } .tbl.cron-own td:nth-child(3) { order: 5; flex: 1 1 100%; } .tbl.cron-own td:nth-child(4) { order: 6; flex: 1 1 100%; color: var(--muted); font-size: 12.5px; } .tbl.cron-own td.empty { flex: 1 1 100%; font-weight: 400; } /* a website's cron: name + command with its last result, its schedule, its next run */ .tbl.scron-tbl td:nth-child(1) { order: 1; flex: 1 1 0; min-width: 60%; } .tbl.scron-tbl td:nth-child(4) { order: 2; margin-inline-start: auto; } .tbl.scron-tbl td:nth-child(2) { order: 3; flex: 1 1 100%; } .tbl.scron-tbl td:nth-child(3) { order: 4; flex: 1 1 100%; } /* the buttons: their own line, unpinned (`.tbl. td.x` outranks the pinned-cell rule) */ .tbl.cron-own td.actions, .tbl.scron-tbl td.host-actions { order: 9; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: static; background: none; text-align: start; white-space: normal; } .tbl.cron-own td.actions:empty { display: none; } .tbl.cron-own td.actions .btn, .tbl.scron-tbl td.host-actions .btn { margin: 0; } .tbl.cron-app tr:hover td, .tbl.cron-own tr:hover td, .tbl.scron-tbl tr:hover td, .tbl.cron-own tr:hover td.actions:last-child, .tbl.scron-tbl tr:hover td.host-actions:last-child { background: none; } } /* …and the same tasks on Server → Scheduled: 6amMart's schedule is .cron-app above; a project's own tasks (name, when, command, on/off) and each website's (with its last run and next run) wrap the same way — five columns scrolled the website's status out of sight. */ @media (max-width: 600px) { .tbl.crons-own thead, .tbl.crons-site thead { display: none; } .tbl.crons-own, .tbl.crons-own tbody, .tbl.crons-site, .tbl.crons-site tbody { display: block; } .tbl.crons-own tr, .tbl.crons-site tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .tbl.crons-own tr:last-child, .tbl.crons-site tr:last-child { border-bottom: none; } .tbl.crons-own td, .tbl.crons-site td { display: block; padding: 0; border: 0; overflow-wrap: anywhere; } .tbl.crons-own td:nth-child(1), .tbl.crons-site td:nth-child(1) { order: 1; flex: 1 1 0; min-width: 60%; } .tbl.crons-own td:nth-child(1) { font-weight: 600; } .tbl.crons-own td:nth-child(4), .tbl.crons-site td:nth-child(5) { order: 2; margin-inline-start: auto; } .tbl.crons-own td:nth-child(2), .tbl.crons-site td:nth-child(2) { order: 3; flex: 1 1 100%; } .tbl.crons-own td:nth-child(3) { order: 4; flex: 1 1 100%; } .tbl.crons-site td:nth-child(3) { order: 4; } .tbl.crons-site td:nth-child(4) { order: 5; flex: 1 1 auto; align-self: center; color: var(--muted); font-size: 12.5px; } .tbl.crons-own tr:hover td, .tbl.crons-site tr:hover td { background: none; } } /* slow-query digest cells: clickable, one line */ .tbl td.digest { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .tbl td.digest:hover { color: var(--accent); } /* security: active sessions table */ .sessions-tbl tr.cur td { background: color-mix(in srgb, var(--ok) 7%, transparent); } .sessions-tbl tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--ok); } [dir="rtl"] .sessions-tbl tr.cur td:first-child { box-shadow: inset -3px 0 0 var(--ok); } /* =========================================================================== chips & badges ======================================================================== */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: 3px 11px; border: 0; white-space: nowrap; line-height: 1.4; } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } /* ON A PHONE A CHIP MAY WRAP. It is one line by design, and some chips say a sentence: "off — logins allowed from anywhere" is 404 px of chip in Spanish, on a 390 px screen (Security → Access; the UI audit in every language, 7 Oct 2026) — the fifth chip to carry its page past the edge, each of the four before it given a rule of its own. A chip no wider than its line is exactly as it was. NOT in a table cell and not in a button: there the row would rather squeeze a chip than scroll, and a two-word chip went onto two lines because it now could ("not" over "created", six times on a project's Overview; "en directo" inside the Logs button). Those two keep the one line they had. (`width: max-content` did the same for every chip at once — and made a chip as unshrinkable as before to whatever it sits IN, so a website's card on Projects, whose chip is inside a span, was 395 px wide again on the test server.) Written BELOW the rule it changes: the same lines sat in the phone block above for a day and did nothing, because a later rule of the same weight wins. */ @media (max-width: 860px) { .chip { white-space: normal; max-width: 100%; } td .chip, th .chip, .btn .chip { white-space: nowrap; } } .chip.ok { color: var(--ok-fg); background: var(--ok-soft); } .chip.warn { color: var(--warn-fg); background: var(--warn-soft); } .chip.err { color: var(--err-fg); background: var(--err-soft); } .chip.off { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); } .chip.acc { color: var(--accent); background: var(--accent-soft); } /* small info badges (update preview, deploy triggers) */ .badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; border-radius: 7px; padding: 2.5px 8px; white-space: nowrap; background: color-mix(in srgb, var(--muted) 11%, transparent); color: var(--muted); } .badge.warn { color: var(--warn-fg); background: var(--warn-soft); } .badge.acc { color: var(--accent); background: var(--accent-soft); } .badge.info { color: var(--info-fg); background: var(--info-soft); } .badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .badge svg { vertical-align: -2px; margin-inline-end: 2px; } /* ON A PHONE THE BADGE THAT SAYS WHAT A DELIVERY DID MAY WRAP. A badge is a word or two and one line by design; this one says a sentence. "verificado — los despliegues estaban desactivados" is some 310 px of badge beside its label in a card with 326, and a shop's Deploys page stood 402 px wide on a 390 px screen in Spanish, 393 in Portuguese (the UI audit pointed at a real server, 9 Oct 2026 — a jar has no delivery to draw; tests/Scripts/deploys-head-phone-measure.js measures it). Only this badge: every other keeps its one line. Written BELOW the rule it changes. */ @media (max-width: 860px) { .badge.dl-result { white-space: normal; } } /* protected-path badge (files) */ .prot-badge { cursor: help; margin-inline-start: 6px; } /* =========================================================================== metrics, stats & sparklines (dashboard) ======================================================================== */ .metric { margin-bottom: 14px; } .metric-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .metric-top span:last-child { color: var(--muted); } /* The meter's second line: how many cores the CPU percentage is spread across, or how much of a disk or memory is still free. Smaller than the pair above it because it answers a follow-up question, not the first one. */ .metric-sub { margin-top: 4px; font-size: 11.5px; color: var(--muted); } .meter { height: 8px; background: var(--well); border-radius: 99px; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s ease-out; } .meter i.ok { background: var(--ok); } .meter i.warn { background: var(--warn); } .meter i.err { background: var(--err); } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border); } .kv:last-child { border-bottom: none; } .kv .k { color: var(--muted); } /* A CHIP BESIDE A LABEL THAT TAKES TWO LINES KEEPS ITS OWN SHAPE. A flex row stretches its items, so a one-word chip became a 40 px lozenge ("unknown" beside "In the 6amMart admin panel" on a phone in Spanish): it is centred instead. And the LABEL gives way first: now that a chip may wrap on a phone, an even share of the squeeze put "pas encore" on two lines beside a long French label. Weighted like this the label takes all of it, and the chip narrows only once the label cannot — which is the chip that says a sentence ("off — logins allowed from anywhere"), the one that has to wrap. (The weight is on the label because a chip's own small factor stops it shrinking at all once the label is done: factors that sum to less than one share out only that fraction of the squeeze.) */ .kv > .chip { align-self: center; } .kv:has(> .chip) > .k { flex-shrink: 1000; } /* a value with chips beside it (Services ▸ live updates: the websocket domain, "https", "behind Cloudflare") wraps onto lines of its own instead of running off a phone — measured at 390px on the demo box, the second chip was cut at the card's edge */ .kv.kv-wrap { flex-wrap: wrap; } .kv-vals { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 100%; } .kv-vals .mono { overflow-wrap: anywhere; } /* stat tiles (database overview) */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; } .stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; } .stat .v { font-size: 19px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat .k { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; } /* disk page: inline label + big value */ .stat-inline { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; } .stat-inline .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .stat-inline .v { font-size: 17px; font-weight: 700; white-space: nowrap; } /* monitoring sparklines */ .mon-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mon-head h3 { margin: 0; } .spark { min-width: 0; } .spark svg { width: 100%; height: 56px; display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctl); } /* =========================================================================== console-look log blocks (dark terminal in BOTH themes) ======================================================================== */ .log-pre { font: 12.5px/1.6 var(--mono); color: var(--console-text); background: var(--console-bg); border: 1px solid var(--console-line); border-radius: 12px; padding: 12px 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; } /* =========================================================================== files browser ======================================================================== */ .file-name { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .file-name:hover { color: var(--accent); } .file-name svg { color: var(--muted); flex: 0 0 auto; } .file-name.dir svg { color: var(--warn); } /* in the file managers a row's name is a button — it opens, and the keyboard reaches it — drawn as the text it always was */ button.file-name { border: 0; background: none; padding: 0; margin: 0; max-width: 100%; font: inherit; color: inherit; text-align: start; border-radius: 4px; } button.file-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* toolbar */ .fm-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-block-end: 12px; } .fm-toolbar .btn { display: inline-flex; align-items: center; gap: 6px; } .fm-toolbar .btn svg { flex: 0 0 auto; opacity: .85; } .fm-toolbar .sep { width: 1px; align-self: stretch; background: var(--border); margin-inline: 4px; } /* THE SELECTION BAR: what acts on the selected rows, on a row of its own under the toolbar. With nothing selected it holds one line on how to select. ONE ROW EITHER WAY — it scrolls sideways and never wraps: a bar that grew on the first click would push the list down, and the second click of a double-click would land on the row above the one that was meant. */ .fm-selbar { flex: 1 0 100%; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-ctl); background: var(--well); overflow-x: auto; } .fm-selbar.on { background: color-mix(in srgb, var(--accent) 9%, var(--well)); } .fm-selbar .hint { margin: 0; font-size: 12.5px; } .fm-selbar-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; } .fm-selbar-acts .sep { align-self: center; height: 18px; } /* breadcrumb path bar: clickable segments; clicking swaps in an editable path input (.fm-crumbs input) for jump-to-path */ .fm-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font: 12.5px/1.5 var(--mono); background: var(--well); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 8px 12px; margin-block-end: 12px; cursor: text; min-height: 36px; } .fm-crumbs a { color: var(--accent); cursor: pointer; white-space: nowrap; } .fm-crumbs .sep { color: var(--muted); } .fm-crumbs .cur { color: var(--text); font-weight: 600; word-break: break-all; } .fm-crumbs input { flex: 1 1 auto; min-width: 140px; min-height: 0; border: 0; background: transparent; padding: 0; border-radius: 0; font: inherit; color: var(--text); } .fm-crumbs input:focus { outline: none; box-shadow: none; } .fm-crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* the pencil at the end of the bar: the path, to type */ .fm-crumb-edit { margin-inline-start: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; } .fm-crumb-edit:hover { color: var(--accent); background: var(--accent-soft); } .fm-crumb-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* THE PROGRESS STRIP of a file action (files.js fmTasks), above the list: what is happening, how many of how many (or the time that has passed), the item in hand, and a bar where there is a total. The colours of .busy-strip, which says the same kind of thing for a job. Red (.err) once a task ended part-way: it then lists what was not done, until it is closed. */ .fm-strip { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); color: var(--warn-fg); font-size: 13px; } .fm-strip.err { border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); color: var(--err-fg); } .fm-strip-row { display: flex; align-items: center; gap: 9px; } .fm-strip-what { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .fm-strip-num { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; } .fm-strip-row .btn { flex: 0 0 auto; } .fm-strip-cur { margin-top: 4px; font: 12px/1.45 var(--mono); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-strip .meter { margin-top: 8px; background: color-mix(in srgb, var(--warn) 20%, transparent); } .fm-strip .meter i { background: var(--warn); } .fm-strip-list { margin: 6px 0 0; padding-inline-start: 18px; } .fm-strip-list li { overflow-wrap: anywhere; } /* table extensions (applied alongside .tbl) */ .fm-table tr.sel td { background: color-mix(in srgb, var(--accent) 8%, transparent); } /* a click anywhere on a row selects it; the row the keyboard is on is marked while the list has the keyboard */ .fm-table tbody tr[data-name] { cursor: default; } .fm-drop .tbl-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-ctl); } .fm-drop .tbl-wrap:focus-within .fm-table tr.cur td { background: color-mix(in srgb, var(--accent) 15%, transparent); } /* …the row's last cell included: it is pinned with a solid background of its own (.tbl td:last-child:has(> .btn), further up), so the tint is mixed onto that surface */ .fm-table tr.sel td.actions:last-child { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .fm-drop .tbl-wrap:focus-within .fm-table tr.cur td.actions:last-child { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); } .fm-table th.fm-check, .fm-table td.fm-check { width: 32px; padding-inline-end: 0; } .fm-table td.fm-perms { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; } .fm-table th.sortable { cursor: pointer; user-select: none; } .fm-table th.sortable:hover { color: var(--text); } .fm-table td .file-name { word-break: break-all; } /* ON A PHONE THE NAME GETS THE ROW. Six columns at 390px left the name ~20px, so "wp-admin/" ran one letter per line and every row was ten lines tall (1 Oct 2026 walk, every website's Files page). Size and permissions step out under 600px — both are one tap away in the row's menu — and the date stays on one short line. */ @media (max-width: 600px) { .fm-table:has(th.fm-check) th:nth-child(3), .fm-table:has(th.fm-check) td:nth-child(3), .fm-table:has(th.fm-check) th:nth-child(5), .fm-table:has(th.fm-check) td:nth-child(5) { display: none; } .fm-table:has(th.fm-check) { table-layout: fixed; width: 100%; } .fm-table:has(th.fm-check) th:nth-child(4), .fm-table:has(th.fm-check) td:nth-child(4) { width: 96px; font-size: 12px; color: var(--muted); } .fm-table:has(th.fm-check) th.actions, .fm-table:has(th.fm-check) td.actions { width: 40px; } .fm-table td .file-name { word-break: normal; overflow-wrap: anywhere; } } /* pressed with a finger, the name and the selection bar's buttons are 24 px tall like every other control (the rule of the 860 px block further up) */ @media (max-width: 860px) { button.file-name { min-height: 24px; min-width: 24px; } /* the hint is two lines on a phone: the bar is that tall with the actions in it too */ .fm-selbar { min-height: 48px; } .fm-selbar .hint { font-size: 12px; } } /* drag-drop upload target (on the table wrap) */ .fm-drop { position: relative; border: 1.5px dashed transparent; border-radius: var(--r-ctl); transition: border-color var(--tick), background var(--tick); } .fm-drop.dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); } /* context menu (right-click / "⋯ Actions") — positioned by JS via left/top */ .fm-ctx { position: absolute; z-index: 95; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); } .fm-ctx li { list-style: none; } .fm-ctx .ctx-sep { border-top: 1px solid var(--border); margin: 5px 0; } .fm-ctx button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: start; cursor: pointer; transition: background var(--tick); } .fm-ctx button:hover { background: var(--accent-soft); color: var(--accent); } .fm-ctx button:disabled { opacity: .5; cursor: not-allowed; background: none; color: var(--text); } .fm-ctx button.danger { color: var(--err-fg); } .fm-ctx button.danger:hover { background: var(--err-soft); color: var(--err-fg); } .fm-ctx button svg { flex: 0 0 auto; opacity: .85; } /* full-height editor modal (Files) */ .modal.fm-editor-modal { width: 840px; display: flex; flex-direction: column; } .fm-editor-modal textarea { height: 60vh; min-height: 240px; flex: 1; font: 12.5px/1.6 var(--mono); white-space: pre; resize: vertical; tab-size: 4; } /* =========================================================================== login (mesh backdrop: accent + warm radial glows over page bg) ======================================================================== */ .login-wrap { position: fixed; inset: 0; z-index: 200; background: radial-gradient(46% 38% at 8% 0%, color-mix(in srgb, var(--accent) var(--mesh-a), transparent), transparent 70%), radial-gradient(42% 36% at 100% 100%, color-mix(in srgb, var(--warm) var(--mesh-b), transparent), transparent 70%), var(--bg); /* CENTRED WHEN IT FITS, SCROLLABLE WHEN IT DOES NOT. `justify-content: center` alone is a trap on a fixed, full-height box: when the content is taller than the viewport, flex centring overflows in BOTH directions and the overflow above the container is unreachable — there is no scroll position that reveals it. Measured on the two-factor setup screen, which is the tallest of these (QR + secret + code form + skip): the heading and the brand mark were cut off the top of a 1050px window and could not be scrolled to. `overflow-y: auto` plus `margin: auto` on the child is the fix that keeps both behaviours: the auto margins centre it while there is room, and they collapse to zero when there is not, leaving a normal scrollable box. */ display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding: 24px; } /* The auto margins that do the centring: one above the first child and one below the last, so the whole group (card + controls + credit) is centred as a block and stays together. They collapse to zero the moment the content is taller than the box, which is what turns it into a plain scrollable page. */ .login-wrap > .login-card { margin-top: auto; } /* the shorthand on .foot-note sets all four margins, so the bottom auto has to come after it in specificity as well as in source order */ .login-wrap > .foot-note { margin-top: 20px; margin-bottom: auto; } /* TWO-FACTOR SETUP IS A WIDER SCREEN, and it has to be allowed to say so. 370px is right for two fields and a button — it is wrong for a QR code beside a 32-character secret, a code field and a skip control. Locked to 370 the QR and the secret stacked, every hint wrapped to three lines, and the card grew past the window (which is what made the unreachable-overflow bug above visible). The enrolment card gets the width its content needs; the sign-in card is untouched. */ #enrolCard { width: 560px; } /* Below that, the QR and the secret stack — which is correct, and .qr-row already wraps on its own. */ @media (max-width: 620px) { #enrolCard { width: 370px; } } .login-card { width: 370px; max-width: 100%; background: var(--surface); border-radius: var(--r-modal); box-shadow: var(--shadow-2); /* FLUID PADDING, so there is no size at which the card is either cramped or wasteful. The card had a single fixed 34px/30px pair and no responsive rule at all: on a 360px phone that left 300px of usable width inside a screen already down to 312px, and the inputs went edge to edge with the card. clamp scales it with the viewport between the two sizes that are actually right — 20px on the narrowest phone, 34px from tablet up — and needs no breakpoint. */ padding: clamp(24px, 5vw, 34px) clamp(20px, 4.5vw, 30px); display: flex; flex-direction: column; gap: 15px; position: relative; animation: rise-in .18s ease-out; } /* SHORT WINDOWS, which are not the same question as narrow ones. A phone in landscape is 390x844 rotated: 844 wide and ~390 tall, and the card plus its footer credit is taller than that — so the whole thing was centred inside a viewport it did not fit, and the top of the card (the brand, the hint) was simply unreachable. Scroll from the top instead of centring, and tighten the vertical rhythm so it mostly fits anyway. */ @media (max-height: 700px) { .login-wrap { justify-content: flex-start; overflow-y: auto; padding-top: 24px; padding-bottom: 24px; } .login-card { padding-top: 22px; padding-bottom: 22px; gap: 12px; } .login-brand { margin-bottom: 2px; } .login-icon { width: 42px; height: 42px; } } /* NO ORPHAN LAST WORD. Measured: the English hint wrapped to two lines with "server." alone on the second, in a 370px card. `text-wrap: pretty` is the right tool rather than a shorter sentence or a hand-placed
: the browser rebalances the lines it actually has, so it fixes the same defect in all eight languages — Bengali and German are longer, not shorter — and it cannot be broken by a future translation. Browsers without it simply wrap as before. */ .login-card .hint { text-align: center; margin: 0; text-wrap: pretty; } .login-error { color: var(--err-fg); text-align: center; margin: 0; font-size: 13px; } /* SIGN-IN, STEP 1 AND STEP 2. Each step is one flex child of the card, so it restates the card's own column gap for the fields inside it. */ .login-step { display: flex; flex-direction: column; gap: 15px; } /* The card is vertically centred, so swapping a two-field step for a one-field step would move the logo. core.js loginStep() pins the height and animates to the new one; .sizing is on only for that 200ms, because the brand halo is drawn outside the card's box and must not be clipped the rest of the time. */ .login-card { transition: height .2s ease; } .login-card.sizing { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .login-card { transition: none; } } /* who is signing in — quiet, but the name itself is not */ .login-as { text-align: center; margin: -4px 0 0; font-size: 13px; color: var(--muted); } /* =========================================================================== SIX-DIGIT CODE FIELD — six slots drawn over ONE input Six separate boxes is the right picture: it says how many digits are wanted before the reader types anything, and each digit lands somewhere definite. Six separate s is the wrong implementation of that picture, and it breaks the three things this field is used with most: * PASTE. An authenticator shows "123 456" and that is what gets copied. Into six inputs, the whole string lands in the first one. * AUTOFILL. iOS and Android fill `autocomplete="one-time-code"` from the notification, and a password manager fills a TOTP field the same way. Both need one field with one value. * SELECT-ALL, backspace across the boundary, undo, and the caret. All of it is free in one input and all of it has to be re-implemented, badly, across six. So there is one holding the value, and the slots are drawn behind it: a grid of six empty boxes, with the input transparent on top, its own text positioned so each character sits in the middle of its slot. Everything the browser gives a text field keeps working, and the field still looks like six boxes. The geometry lives in two custom properties, so slot size and gap are changed in one place and the input's letter-spacing follows automatically. ======================================================================== */ .code-field { --slot: 46px; /* one box */ --slot-gap: 8px; /* space between boxes */ position: relative; width: calc(6 * var(--slot) + 5 * var(--slot-gap)); max-width: 100%; margin: 2px auto 16px; /* the card's column gap does not apply inside a form */ direction: ltr; /* digits are digits; an RTL page must not reverse them */ } /* the six drawn boxes */ .code-slots { display: grid; grid-template-columns: repeat(6, var(--slot)); gap: var(--slot-gap); } .code-slots > span { height: calc(var(--slot) * 1.18); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); background: var(--surface); transition: border-color var(--tick), box-shadow var(--tick), background var(--tick); } /* THE INPUT, laid exactly over the slots. Transparent background and no border of its own: the boxes underneath are the visible field. Each character is centred in its slot by making the advance width of one character equal one slot plus one gap — letter-spacing adds after the glyph, so a half-slot indent puts the first digit in the middle of the first box and every one after it follows. */ /* THE INPUT IS INVISIBLE, and the digits are drawn in the slots. The first build laid a transparent input over the boxes and tried to line its text up with them using letter-spacing and text-indent derived from `1ch`. It cannot be made to hold: `ch` is the advance width of "0" in the resolved font, and `var(--mono)` resolves to a different font on every platform — so the digits landed between the boxes, half a box out, with the first one clipped at the left edge (measured; visible in the screenshot that prompted this). No amount of tuning fixes a measurement the stylesheet cannot know. So nothing is aligned to anything: the input keeps the value and the caret and is transparent, and each slot paints its own digit from `attr()`, centred by the grid that already positions the boxes. There is no geometry left to get wrong, and it is exact in every font. */ .code-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; outline: none; box-shadow: none; /* the value is present for select-all, paste, autofill and the caret — just not painted; `transparent` and not `visibility:hidden`, which would take the caret with it */ color: transparent; caret-color: transparent; /* the slots show focus; a caret here would sit wrong for the same reason the digits did */ font-family: var(--mono); font-size: 21px; /* a text cursor across the whole field, so clicking any box focuses it */ cursor: text; } /* Chrome paints its own colour for an autofilled field; without this the value reappears on top of the drawn digits after a one-time-code autofill. */ .code-input:-webkit-autofill, .code-input:-webkit-autofill:focus { -webkit-text-fill-color: transparent; transition: background-color 9999s; } /* THE DIGIT, painted by its own slot. core.js sets --d1…--d6 on the wrapper on every input event, in the same pass that writes data-filled, and each slot renders its own from a custom property. Custom properties and not attr(), because attr() outside `content` is still not usable and the string form needs quoting the JS would have to add — a property holds the quoted string once. No positioning, no font metrics, no per-digit DOM. */ .code-slots > span { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 21px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; /* the boxes are decoration to a screen reader — the input carries the value */ user-select: none; } .code-slots > span:nth-child(1)::before { content: var(--d1, ''); } .code-slots > span:nth-child(2)::before { content: var(--d2, ''); } .code-slots > span:nth-child(3)::before { content: var(--d3, ''); } .code-slots > span:nth-child(4)::before { content: var(--d4, ''); } .code-slots > span:nth-child(5)::before { content: var(--d5, ''); } .code-slots > span:nth-child(6)::before { content: var(--d6, ''); } /* the caret, drawn as the focused empty box's own blinking bar — the real caret is transparent (see above), so this is what tells the reader where they are */ .code-field:focus-within .code-slots > span.at::after { content: ''; width: 2px; height: 22px; background: var(--accent); animation: code-caret 1.06s steps(1, end) infinite; } @keyframes code-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .code-field:focus-within .code-slots > span.at::after { animation: none; } } /* FILLED SLOTS read as done: a firmer border and a tinted fill. `data-filled="N"` is written on the wrapper by core.js on every input event, so which boxes hold a digit is expressed once, in the DOM, and CSS does the rest — no JS ever touches a style property here. */ .code-field[data-filled="1"] .code-slots > span:nth-child(-n+1), .code-field[data-filled="2"] .code-slots > span:nth-child(-n+2), .code-field[data-filled="3"] .code-slots > span:nth-child(-n+3), .code-field[data-filled="4"] .code-slots > span:nth-child(-n+4), .code-field[data-filled="5"] .code-slots > span:nth-child(-n+5), .code-field[data-filled="6"] .code-slots > span:nth-child(-n+6) { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } /* THE RING GOES ON THE BOX THE CARET IS IN — one box, and only while focused. The first attempt at this put a ring on box one AND on the next empty box, and tried to cancel the first with a later `box-shadow: none` — but the two rules had the same specificity, so source order decided and the filled boxes kept a ring they had no business showing (measured: digits in 1 and 2, rings on 1, 2 and 3 at once). One selector per state, `data-filled` choosing the box, and no cancelling rule to get the order wrong. */ .code-field:focus-within[data-filled="0"] .code-slots > span:nth-child(1), .code-field:focus-within[data-filled="1"] .code-slots > span:nth-child(2), .code-field:focus-within[data-filled="2"] .code-slots > span:nth-child(3), .code-field:focus-within[data-filled="3"] .code-slots > span:nth-child(4), .code-field:focus-within[data-filled="4"] .code-slots > span:nth-child(5), .code-field:focus-within[data-filled="5"] .code-slots > span:nth-child(6) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); } /* Narrow phones: the field must not overflow a 272px card. Shrinking the slot is the whole adjustment — every other measurement is derived from it. */ @media (max-width: 400px) { .code-field { --slot: 38px; --slot-gap: 6px; } .code-input { font-size: 18px; } } /* brand block: icon above the product name, soft gradient halo behind */ .login-brand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 2px; } .login-glow { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 190px; height: 95px; border-radius: 50%; background: var(--grad); filter: blur(44px); opacity: .14; pointer-events: none; } :root[data-theme="dark"] .login-glow { opacity: .2; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .login-glow { opacity: .2; } } .login-icon { width: 52px; height: 52px; position: relative; } .login-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; position: relative; } /* =========================================================================== pre-auth tools (language + theme, before signing in) ONE bar serving three overlays — login (#login, z-index 200), forced two-factor enrolment (same wrap) and the first-run wizard (.wz / .setup-wrap, 150). It sits above all of them (201) because it is chrome for whichever one is showing, not part of any single card, and because that is what lets it survive the wizard rebuilding its card on every step. It is display:none whenever the app shell is up: the signed-in header carries the same two controls, and drawing both would put two language flags on one screen. The rule keys on #shell rather than on a class the JS has to remember to set — the shell's `hidden` attribute is already the panel's one source of truth for "is the visitor in". ======================================================================== */ /* WHERE THEY GO — IN THE LAYOUT, not pinned to the window. The first attempt fixed them to the viewport's top-right corner, and that was wrong twice over. On the login screen the card is 370px, vertically centred, and the rest of the page is empty — so two controls in the far corner read as something dropped on the page, as far from where the visitor is looking as it is possible to get. And being `position: fixed`, they could not be responsive: every screen size needed another hand-written offset, and each one was a guess that a different window height broke. So on the login and two-factor screens the bar is a normal child of `.login-wrap`, which is already a centred flex column: it sits under the card, above the footer credit, in the card's own 370px column — and it then follows the card at every window size with no media query deciding where it goes. The wizard keeps a pinned top-right, because its 860px shell is top-aligned and genuinely has a corner to align to. `#preAuthTools` lives at the top of in index.html, so it is moved into the login wrap by the ONE line in core.js that already knows which screen is showing — not copied into three places in the markup. */ /* THE BOOT GATE — see the note in theme-boot.js. The whole document is held back until core.js knows which screen to show, so a reload is one paint instead of three. `visibility`, not `display`, so layout is already computed when it is revealed and nothing reflows on the way in; the background is painted so the hold looks like the page loading rather than a white flash. */ html.booting { background: var(--bg); } html.booting body > * { visibility: hidden; } .pre-auth-tools { display: flex; align-items: center; gap: 8px; /* LOGICAL DIRECTION IS WRONG FOR THIS ROW. flex mirrors the ORDER of its children in RTL, so on Arabic the theme button came first and the language button moved (measured on the live box). The one control a reader reaches for BECAUSE the page is in the wrong language must not change places when the language changes. */ direction: ltr; } /* Signed in -> the header owns these controls. Keys on #shell's `hidden` attribute, already the panel's one source of truth for "is the visitor in". */ body:has(#shell:not([hidden])) .pre-auth-tools { display: none; } /* Each button carries its own surface: these screens have no card behind the controls. A real token and a real border, not a translucent mix of --surface — in dark mode --surface is the card colour over a near-black page, so mixing it toward transparent lands it ON the page (measured invisible in the dark render, only the border left). */ .pre-auth-tools .icon-btn { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 19, 33, .05), 0 6px 18px rgba(16, 19, 33, .06); } .pre-auth-tools .icon-btn:hover { background: var(--surface-2); } .pre-auth-tools .icon-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .pre-auth-tools .lang-pop { z-index: 202; direction: inherit; } /* ---- in the login / two-factor column ---- BETWEEN the card and the footer credit, not after both. The bar is appended to the wrap, so in DOM order it lands last — below the credit line, which read as an afterthought stuck to the bottom of the page. `order` puts it back where it belongs without the JS having to insert it at a particular index (it moves between three different parents, and each one would need its own rule). */ .login-wrap .pre-auth-tools { order: 1; margin-top: 20px; } .login-wrap .foot-note { order: 2; } /* Down here the popover would open off the bottom of the screen, so it opens UPWARD, centred on the control that opened it. */ .login-wrap .pre-auth-tools .lang-pop { top: auto; bottom: calc(100% + 6px); inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%); } /* ---- wizard: the window corner, clear of the card ---- This was `top: 32px` right-aligned to the shell's own 860px column, which put it exactly on the card's top-right corner — fine while .wz had 32px of top padding and the shell was pinned there, and broken the moment the shell moved down the page: on the two-factor step the bar sat INSIDE the card, over its heading. Measured in the screenshots. A control that must not collide with a card of unpredictable height does not belong on that card's edge. The window corner is stable whatever the step does, and the shell's 860px column leaves room beside it on every width the wizard is readable at. */ body:has(#setup:not([hidden])) .pre-auth-tools { position: fixed; z-index: 201; top: 18px; inset-inline-end: 18px; } /* HEADROOM FOR THE BAR, always — not only on narrow windows. The bar is 34px tall at y=18, so the card must start below 62px or the two share that strip. It was only guaranteed under 940px, and a 1280x720 laptop is neither narrow nor tall: measured there, the card started at y=32 with the bar ending at 52 — a 20px overlap of the card's top edge, on the most ordinary screen size there is. So the floor is unconditional and the tall-window rule below only ever adds to it. One number, one reason: 62px is the bar's own bottom plus a hair. */ body:has(#setup:not([hidden])) .wz { padding-top: 62px; } @media (max-width: 520px) { body:has(#setup:not([hidden])) .pre-auth-tools { top: 12px; } } /* Touch: 38px targets. A 34px target is under the 44px both platforms ask for, and these two are the controls a visitor uses before they can read anything. Keyed on the INPUT, not on a width — a 1280px tablet is touch and a narrow desktop window is not. */ @media (hover: none) and (pointer: coarse) { .pre-auth-tools .icon-btn { width: 40px; height: 40px; } } /* Dark: an opaque raised surface and a shadow a dark backdrop can show. Both selectors, because the panel pins dark with [data-theme] AND follows an unpinned device through the media query; one rule covers only half the visitors. */ :root[data-theme="dark"] .pre-auth-tools .icon-btn { background: var(--surface-2); border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } :root[data-theme="dark"] .pre-auth-tools .icon-btn:hover { background: color-mix(in srgb, var(--text) 10%, var(--surface-2)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pre-auth-tools .icon-btn { background: var(--surface-2); border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } :root:not([data-theme="light"]) .pre-auth-tools .icon-btn:hover { background: color-mix(in srgb, var(--text) 10%, var(--surface-2)); } } /* =========================================================================== drawer (bottom sheet log viewer) ======================================================================== */ .drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: 42vh; display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba(16, 19, 33, .16); overflow: hidden; animation: drawer-up .18s ease-out; } :root[data-theme="dark"] .drawer { box-shadow: 0 -8px 40px rgba(0, 0, 0, .5); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer { box-shadow: 0 -8px 40px rgba(0, 0, 0, .5); } } .drawer.full { height: 88vh; } .drawer-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); } /* THE TITLE GIVES WAY, NEVER THE BUTTONS. A job's name is as long as it is ("backup full -> This server (local disk)") and "Report this", "Expand" and "Close" are as long as their language makes them: on a 390 px phone in German "Erweitern" stood at 334..415 and "Schließen" at 425..507 — the way to close the log was off the screen (the UI audit, --press, 9 Oct 2026). So the title is one line that shrinks and is cut with an ellipsis (its whole text is in title="", core.js drawerPrepare), and the chip and the buttons keep their size. The title is dir="auto" (index.html): an English name on an Arabic page is cut at its end, not at its beginning — and stays at the reading edge of its box. */ .drawer-title { font-weight: 650; font-size: 13px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } [dir="rtl"] .drawer-title { text-align: right; } .drawer-bar > .chip, .drawer-bar > .btn { flex: 0 0 auto; } /* …AND ON A PHONE THE BUTTONS HAVE A ROW OF THEIR OWN. With the title at no width at all the chip and the three buttons are 466 px of a 390 px screen in German, so one row cannot hold them in any order: the title and the job's state take the first row (the title all of what the chip leaves), the spacer ends that row, and the buttons follow at the far edge — on a third row too, in a language where three do not fit on one. */ @media (max-width: 860px) { .drawer-bar { flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; } .drawer-title { flex: 1 1 0; } .drawer-bar > .spacer { flex: 0 0 100%; } } .drawer-log { flex: 1; margin: 0; padding: 12px 16px; overflow: auto; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--console-text); background: var(--console-bg); } /* =========================================================================== modals ======================================================================== */ .modal-wrap { /* ABOVE EVERY OVERLAY, including the ones that are themselves fixed. This was 100 while .login-wrap is 200 and .wz / .setup-wrap are 150 — so a modal opened from the first-run wizard rendered BEHIND it. "Exit setup" looked dead: the confirmation was in the DOM, waiting on a click nobody could see. A modal is the frontmost thing on screen by definition; toasts (110) sit above it because they report what it did. */ position: fixed; inset: 0; z-index: 260; background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade-in .18s ease-out; } .modal { width: 480px; max-width: 100%; max-height: 88vh; overflow: auto; background: var(--surface); border-radius: var(--r-modal); padding: 24px; box-shadow: var(--shadow-2); animation: rise-in .18s ease-out; } /* a click on the backdrop does not close a modal: the box nudges instead */ .modal.modal-nudge { animation: modal-nudge .22s ease-out; } @keyframes modal-nudge { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.018); } } @media (prefers-reduced-motion: reduce) { .modal.modal-nudge { animation: none; } } .modal h3 { margin-bottom: 10px; font-size: 16px; } .modal-body { color: var(--muted); margin: 0 0 14px; font-size: 13px; } .modal-body b, .modal-body code { color: var(--text); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } /* A LONG MODAL KEEPS ITS BUTTONS IN VIEW. The box scrolls past 88vh, and a wizard step that grew (a deploy key, a branch list, a verdict) pushed Continue below the fold — the one control the step exists for. Stuck to the bottom edge, flush with the box's own padding, and identical to before when nothing scrolls. */ .modal .modal-actions { position: sticky; bottom: -24px; z-index: 1; margin-top: 6px; margin-bottom: -24px; padding: 12px 0 24px; background: var(--surface); } .modal.wide { width: 640px; } .typed-hint { font-size: 13px; color: var(--muted); margin: 0 0 8px; } .typed-hint b { color: var(--err-fg); font-family: var(--mono); } /* =========================================================================== toasts (top end corner, colored accent bar per type) ======================================================================== */ #toasts { /* ABOVE THE MODAL (260). A toast reports what an action did, and the action is usually a modal's confirm button — so a toast behind that modal is a message nobody reads. It was 110, which sat under the modal the moment the modal was raised to 260 for the wizard. */ position: fixed; top: 16px; inset-inline-end: 16px; z-index: 300; display: flex; flex-direction: column; gap: 10px; /* WIDER, because these carry sentences and not words. The panel's own error text names a host and says what to do about it ("alllllcom.com is already on this project's admin list"); at 400px that wrapped mid-hostname. */ max-width: min(460px, calc(100vw - 32px)); /* The stack must not swallow clicks on the page behind it — only the toasts themselves are interactive. */ pointer-events: none; } #toasts > * { pointer-events: auto; } /* ON A PHONE it spans the width and sits below the sticky header, rather than clinging to one corner where a 460px card cannot fit anyway. */ @media (max-width: 560px) { #toasts { top: 12px; inset-inline: 12px; max-width: none; } } /* A NOTIFICATION HAS TO LOOK LIKE ONE. Kevin's report, with a screenshot: "notification shi se dikhta nai" — it did not read as an arriving message at all. Three things were wrong and all three were about weight, not wording: * it wore the SAME surface, border and radius as every card on the page, so it looked like part of the layout that happened to be floating; * the only mark of a failure was a 20px circle at 13.5px text — an error and a success differed by the colour of one small glyph; * nothing said WHAT it was. The reader had to infer "this is an error" from that glyph, while the sentence itself just named a host. So: a tinted ground per kind, a heavier shadow that lifts it off the page, a 4px accent edge, and a one-word heading above the message. */ .toast { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 11px; row-gap: 2px; background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); color: var(--text); font-size: 13.5px; line-height: 1.5; border-radius: 12px; padding: 13px 14px; /* Deeper and wider than a card's. A notification arrives ON TOP of the page and the shadow is what says so. */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .12), 0 4px 6px -4px rgba(0, 0, 0, .1), 0 20px 40px -12px rgba(0, 0, 0, .18); animation: toast-in .22s ease-out; } .toast.out { opacity: 0; translate: 0 -6px; transition: opacity .18s ease-in, translate .18s ease-in; } /* the verdict icon: bigger, and on the tint of its own kind, so the kind reads from across the screen rather than at reading distance */ .toast-ico { grid-row: 1 / span 2; align-self: start; flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); } .toast-ico svg { width: 15px; height: 15px; } /* THE ONE-WORD VERDICT. "Error" over the sentence is the difference between a reader deducing what happened and being told. */ .toast-title { grid-column: 2; grid-row: 1; font-weight: 650; font-size: 13px; letter-spacing: .01em; color: var(--text); } .toast-msg { grid-column: 2; grid-row: 2; min-width: 0; overflow-wrap: break-word; color: var(--muted); } /* A toast with no heading (the plain informational kind) keeps its message on the first row rather than leaving a gap where the title would have been. */ .toast:not(:has(.toast-title)) .toast-msg { grid-row: 1 / span 2; align-self: center; } .toast-x { grid-column: 3; grid-row: 1; flex: 0 0 auto; border: 0; background: none; padding: 3px; margin-block-start: -3px; margin-inline-end: -3px; color: var(--muted); cursor: pointer; border-radius: 6px; line-height: 0; } .toast-x:hover { color: var(--text); background: var(--surface-2); } /* the one way on a notice can carry ("Review"): under the sentence, in its column */ .toast-act { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; } .toast-x svg { width: 14px; height: 14px; } /* THE GROUND IS TINTED PER KIND. This is the change that stops a toast reading as a floating card: the whole surface says what happened, not one small glyph on it. The tint is the same --*-soft token the rest of the panel uses for this, mixed toward the surface so body text keeps its contrast — an error is unmistakably an error without becoming a red box that is hard to read. */ .toast.ok { border-inline-start-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 22%, var(--border)); } .toast.ok .toast-ico { background: var(--ok-soft, var(--accent-soft)); color: var(--ok-fg, var(--ok)); } .toast.ok .toast-title { color: var(--ok-fg, var(--ok)); } .toast.err { border-inline-start-color: var(--err); background: color-mix(in srgb, var(--err-soft) 60%, var(--surface)); border-color: color-mix(in srgb, var(--err) 24%, var(--border)); } .toast.err .toast-ico { background: var(--err-soft, transparent); color: var(--err-fg, var(--err)); } .toast.err .toast-title { color: var(--err-fg, var(--err)); } .toast.warn { border-inline-start-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 22%, var(--border)); } .toast.warn .toast-ico { background: var(--warn-soft, transparent); color: var(--warn-fg, var(--warn)); } .toast.warn .toast-title { color: var(--warn-fg, var(--warn)); } /* AN ERROR STAYS UNTIL IT IS READ OR DISMISSED — see toast() in core.js, which gives it no timer at all. This is the visual half of that decision: a message that persists needs its dismiss control to be obvious. */ .toast.err .toast-x { color: var(--err-fg, var(--err)); opacity: .8; } .toast.err .toast-x:hover { opacity: 1; background: color-mix(in srgb, var(--err) 12%, transparent); } /* PRESSED WITH A FINGER IT IS 24 PX EITHER WAY, like every other control (the rule of the 860 px block further up): it was 20 × 23, on every notice of every page (the UI audit, --press on a phone, 9 Oct 2026). The padding grows and the margins take the same back, so the notice is laid out as it was — the sentence's column is not a pixel narrower — and at a desk's width nothing changes at all. */ @media (max-width: 860px) { .toast-x { min-width: 24px; min-height: 24px; padding: 5px; margin-block-start: -5px; margin-inline: -2px -5px; } } /* Reduced motion: no slide-in, and no fade-translate on the way out. */ @media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.out { transition: opacity .12s linear; translate: none; } } /* =========================================================================== misc states ======================================================================== */ .loading { color: var(--muted); padding: 34px 0; text-align: center; } .empty { color: var(--muted); font-size: 13px; padding: 8px 0; } .empty-inline { color: var(--muted); } .step-list { margin: 0; padding-inline-start: 20px; color: var(--muted); font-size: 13px; } .step-list li { margin-bottom: 9px; } .step-list b { color: var(--text); } /* an unadorned list (self-heal reports): the class always said "plain" */ ul.plain { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; } ul.plain li { margin-bottom: 8px; } /* loading skeletons */ .skel { pointer-events: none; } .skel-bar { height: 13px; border-radius: 7px; margin: 13px 0; background: linear-gradient(90deg, var(--well) 25%, var(--border) 50%, var(--well) 75%); background-size: 200% 100%; animation: skel-slide 1.2s ease-in-out infinite; } @keyframes skel-slide { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* =========================================================================== health page + verdict banner ======================================================================== */ .health-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid transparent; } .health-banner.ok { border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: color-mix(in srgb, var(--ok-soft) 40%, var(--surface)); } .health-banner.warnish { border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: color-mix(in srgb, var(--warn-soft) 40%, var(--surface)); } .health-banner.bad { border-color: color-mix(in srgb, var(--err) 42%, transparent); background: color-mix(in srgb, var(--err-soft) 40%, var(--surface)); } .health-banner.info { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); } .health-light { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; } .health-banner.ok .health-light { background: var(--ok); box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 70%, transparent); } .health-banner.warnish .health-light { background: var(--warn); box-shadow: 0 0 12px color-mix(in srgb, var(--warn) 70%, transparent); } .health-banner.bad .health-light { background: var(--err); box-shadow: 0 0 12px color-mix(in srgb, var(--err) 70%, transparent); } .health-banner.info .health-light { background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); } .health-verdict { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .health-banner .hint { margin: 2px 0 0; } .health-row { padding: 12px 0; border-bottom: 1px dashed var(--border); } .health-row:last-child { border-bottom: none; padding-bottom: 0; } /* wraps, and long paths break anywhere: a finding's chip beside its title, or a path like /var/www//react/next.config.js, must not widen a phone page */ .health-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; } .health-detail { color: var(--muted); font-size: 13px; margin: 3px 0 0; overflow-wrap: anywhere; } .health-fix { font-size: 13px; margin: 5px 0 0; overflow-wrap: anywhere; } .health-fix::before { content: "→ "; color: var(--accent); } /* SixChecker: the "Fix this from the panel" button. Right-aligned on its own line, and `.primary` in the markup, because the previous drawing (a bare grey `.btn sm`, left-aligned directly under a paragraph of text) did not read as a control — it looked like part of the sentence above it. On a narrow screen it goes full width rather than sitting in the middle of nowhere. */ .pf-fix-row { justify-content: flex-end; margin-top: 10px; } @media (max-width: 560px) { .pf-fix-row { justify-content: stretch; } .pf-fix-row > .btn { flex: 1; } } /* A row measured as already fixed: still legible, visibly no longer the point of the page. The chip carries the meaning; this only lowers the emphasis. */ .health-row.pf-fixed .health-row-head > span:not(.chip) { font-weight: 600; opacity: 0.75; } .health-row.pf-fixed .health-detail { opacity: 0.75; } /* verdict banner: text column + the signal points it was made of */ .vd-text { flex: 1 1 260px; min-width: 0; } /* max-width, not flex-shrink alone: a row of three buttons wanted 391px inside a 358px phone card (SixChecker's verdict, demo box 30 Sep 2026) and widened the whole page. Capped at its card, the .btn-row wraps its buttons instead. */ .vd-actions { flex: 0 1 auto; max-width: 100%; } .vd-points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .vd-point { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; padding: 3.5px 10px; border-radius: 999px; } .vd-point b { font-weight: 800; font-size: 11px; } .vd-point.ok { color: var(--ok-fg); background: var(--ok-soft); } .vd-point.warn { color: var(--warn-fg); background: var(--warn-soft); } .vd-point.bad { color: var(--err-fg); background: var(--err-soft); } .vd-point.off { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); } /* an action and the cost of pressing it, side by side */ .act-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; } .act-row + .act-row { border-top: 1px dashed var(--border); } .act-btn { flex: 0 0 auto; } .act-impact { margin: 0; flex: 1 1 240px; min-width: 0; font-size: 12.5px; color: var(--muted); } .act-row.danger .act-impact { color: var(--warn-fg); } /* a term the rest of the world uses, with its meaning spelled out next to it */ .say { color: var(--muted); font-size: 12.5px; } .say b { color: var(--text); font-weight: 600; } /* =========================================================================== auto-tune / websocket helpers ======================================================================== */ .tune-changed { color: var(--accent); font-weight: 700; } .sep-line { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .sub-h { font-size: 13px; margin: 0 0 4px; font-weight: 650; } .ws-warn { color: var(--warn-fg); font-size: 13px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent); border-radius: var(--r-ctl); padding: 9px 12px; margin: 10px 0 0; } /* =========================================================================== setup wizard (existing full-screen flow) + modal wizards ======================================================================== */ .setup-wrap { position: fixed; inset: 0; z-index: 150; background: radial-gradient(46% 38% at 8% 0%, color-mix(in srgb, var(--accent) var(--mesh-a), transparent), transparent 70%), radial-gradient(42% 36% at 100% 100%, color-mix(in srgb, var(--warm) var(--mesh-b), transparent), transparent 70%), var(--bg); overflow-y: auto; display: flex; justify-content: center; padding: 36px 18px 64px; } /* horizontal step bar (wizBarHtml in core.js) */ .wiz-progress { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 22px; gap: 4px; } .wiz-node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; position: relative; } .wiz-node::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--border); } .wiz-node:first-child::before { display: none; } .wiz-node.done::before { background: color-mix(in srgb, var(--accent) 45%, var(--border)); } .wiz-dot { width: 26px; height: 26px; border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted); transition: background var(--tick), border-color var(--tick), color var(--tick); } .wiz-node.cur .wiz-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: ring-pulse 2.2s ease-out infinite; } .wiz-node.done .wiz-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .wiz-name { font-size: 11px; color: var(--muted); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wiz-node.cur .wiz-name { color: var(--text); font-weight: 600; } .wiz-node.done .wiz-name { color: var(--accent); } .wiz-done-note { color: var(--ok-fg); font-size: 13px; margin: 4px 0 12px; font-weight: 600; } /* choice / type-picker cards inside wizards */ .type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .type-card { display: flex; flex-direction: column; gap: 4px; text-align: start; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; cursor: pointer; color: var(--text); font: 13px/1.5 var(--font); transition: border-color var(--tick), background var(--tick), box-shadow var(--tick); } .type-card:hover { border-color: var(--accent); } .type-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .type-card b { font-size: 13px; } .chan-cards .chan-ver { font-size: 12px; color: var(--muted); } .chan-cards .type-card.off { opacity: .6; cursor: not-allowed; } .chan-cards .type-card.off:hover { border-color: var(--border); } .chan-cards .chan-why { color: var(--warn-fg); } .type-card span { color: var(--muted); font-size: 12px; } .type-card.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); box-shadow: 0 0 0 1px var(--accent); } .type-card b .chip { margin-inline-start: 6px; } /* copyable value row (secrets, urls) */ .copy-row { display: flex; gap: 6px; margin: 6px 0; } /* The value has to be readable WHOLE, not just present. A TOTP secret is 32 characters and at 12px monospace it needed 255px inside a 250px box — five pixels of overflow, which is exactly enough to hide the last character behind the edge and let someone paste 31 of 32 into their authenticator and be told the code is wrong. min-width:0 lets the field shrink inside the flex row instead of pushing the Copy button, and the size steps down just enough to fit; below that it scrolls, which is honest, rather than silently clipping. */ .copy-row .input { font-family: var(--mono); font-size: 11.5px; min-width: 0; letter-spacing: -.01em; } /* A hand-off block is several lines (address / username / password) and is held in a