/* * glass.css — GENERATED FILE, DO NOT EDIT. * * Compiled from core/admin/skin/ by control-plane/scripts/generate-skin.js * so the operator console runs the SAME skin engine as every tenant admin * rather than a second copy of it. Edit core, then regenerate: * * node control-plane/scripts/generate-skin.js * * Drift guard: control-plane/functions/test/skin-parity.test.js */ /* ============================================================= WarHorse admin — the three glass surfaces ------------------------------------------------------------- Three classes. Not four, not a per-screen variant. A page adds the class; it does not restate the recipe, and it never writes its own rgba() white. .gl-rail rail / chrome most transparent, hosts no reading .gl-panel secondary panels settings, KPIs, feeds .gl-work working surfaces editor body, tables, anything typed into The rule that keeps this legible, and the reason there are three rather than one: THE MORE READING OR TYPING A SURFACE HOSTS, THE MORE OPAQUE IT IS. 66% for chrome you look past, 92% for a surface you write a press release on. Reach for .gl-work whenever a human will read words or numbers on it for more than a second — that is what the density is for. In dark, every density gains ~6 points instead of losing them. Dark translucent panels over a dark ground have almost no edge definition and text on them smears into whatever blob is behind. tokens.css handles that; nothing here needs a theme branch. REQUIRES tokens.css. Link it first. ============================================================= THE ONE BUG THAT WILL BITE box-shadow on these panels is CROPPED FLAT by any ancestor with overflow:hidden. You get a hard dark edge along one or two sides of every card — it reads as a border you did not write, and it was the single most visible bug during the design of this skin. It shows up because the natural way to build a column that must not push the page taller is: .column { display: flex; flex-direction: column; overflow: hidden; } A flex or grid child will not shrink below its content by default, so the column grows, so somebody reaches for overflow:hidden to stop it. The fix is not to clip — it is to let the child shrink: .column { display: flex; flex-direction: column; min-height: 0; } .row { min-width: 0; } <- the same thing on the inline axis Reserve overflow:hidden for (a) the outer frame and (b) a panel that genuinely clips its own scrolling content — and in that second case put the clip on an inner wrapper, not on the .gl-* element whose shadow you want to keep. Cheap check when something looks wrong: delete overflow:hidden in devtools and watch the dark edge disappear. ============================================================= */ /* ---------------------------------------------------------------- rail */ [data-skin='glass'] .gl-rail { background: var(--glass-rail); -webkit-backdrop-filter: var(--blur-rail); backdrop-filter: var(--blur-rail); border: 1px solid var(--glass-edge); border-radius: var(--r-rail); box-shadow: var(--shadow-rail), var(--glass-inset); } /* ---------------------------------------------------------------- panel */ [data-skin='glass'] .gl-panel { background: var(--glass-panel); -webkit-backdrop-filter: var(--blur-panel); backdrop-filter: var(--blur-panel); border: 1px solid var(--glass-edge-solid); border-radius: var(--r-panel); box-shadow: var(--shadow-panel), var(--glass-inset); } /* ---------------------------------------------------------------- work */ /* Body copy on this surface is --body, and that pairing is what the contrast numbers in the skin report were measured against. If a screen needs quieter text on .gl-work, --mid still passes AA at 11px; --muted and --faint do not, and are for labels and timestamps only. */ [data-skin='glass'] .gl-work { background: var(--glass-work); -webkit-backdrop-filter: var(--blur-work); backdrop-filter: var(--blur-work); border: 1px solid var(--glass-edge-solid); border-radius: var(--r-panel-lg); box-shadow: var(--shadow-work), var(--glass-inset); } /* ---------------------------------------------------------------- type */ /* Not a surface either — the skin's shared type voice, which, like the focus contract below, has to live somewhere every glass page loads. Headings and item titles speak --font-display (Sora — owner's final call 2026-08-25, the strict two-family system); data, tables, labels, numbers and helper copy stay --font-chrome — the title/data contrast is what fixes "everything is mono, nothing outranks anything." Templates mark an item title (a petition name, a row's entity name) with a bare data-ttl attribute — inert under classic, styled only here. The second selector is the CMS's 22 inline-styled panel titles (`font-size:15px;font-weight:600`) — matched by style attribute, the same technique the CMS already uses for its legacy inline greys, because adding a class to classic markup is drift and this is not. A page that WANTS a different heading face restates it in its own glass block (equal specificity, later source order wins — login.html keeps its Bebas Neue title exactly this way). */ [data-skin='glass'] :is(h1, h2, h3, h4) { font-family: var(--font-display); letter-spacing: -0.01em; } [data-skin='glass'] [style*='font-size:15px;font-weight:600'], [data-skin='glass'] [data-ttl] { font-family: var(--font-display); letter-spacing: -0.1px; } /* ---------------------------------------------------------------- focus */ /* Not a fourth surface class — the focus contract, which has to live somewhere every glass page loads. Glass has weak edge definition, so a keyboard user needs the ring here MORE than on a flat UI, not less. The contract's words: keep every focus ring, 2px at 2px offset, on every input, select and button. :focus-visible, so a mouse click on a button does not leave a ring behind it. Pages may override the colour, never the presence. */ [data-skin='glass'] :is(button, input, select, textarea, a[href], summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }