feat(theme): SVOS retheme — concept-round candidate
Re-skins every Booth surface in the SVOS design system (design-systems palettes/svos @ ed2f8d8). Visual and interaction layer only: no route, no copy, no ordering and no information-architecture change. - _svos_tokens.css: SVOS semantic tokens vendored by copy, with the four [data-theme] scopes re-scoped onto prefers-color-scheme and prefers-contrast (dark, light, dark-hc, light-hc). Included into base.html's <style>; cached at startup like every other template. - base.html: the accreted Australis sheet is rewritten against semantic tokens only. It also fixes four undefined variables (--line, --bg, --fg, --muted) that the keep/blur/reveal controls had been reading. The three SVOS devices each have exactly one job: reticle = selection (grid cursor, :target, picked option), hazard = irreversible (Wipe now, armed bulk delete), glow = live power (service dot, live bench). - The flag list renders as wrapped chips, so a large flag set no longer pushes the grid below the fold. The list order is unchanged. - IBM Plex Sans + JetBrains Mono load via Google Fonts with display=swap and system fallbacks (approved by booth-dev). - view.html, doc.html: inline styles moved onto tokens. - embed.js: fragment palette as custom properties scoped to .bk-ask; `.bk-ask-opt:has(input:checked)` still appears exactly once. - Favicon (base.html + app.FAVICON_HREF, kept in sync): graphite tile with reticle corners. Verified: 642 passed, the same count as the pre-change baseline. Visual order matches document order on 32 renders (4 booths x 4 widths x 2 schemes). A positive control, one tile given `order:-1`, is detected by the same check.
This commit is contained in:
@@ -47,17 +47,19 @@
|
||||
</div>
|
||||
<style>
|
||||
.vnav{position:fixed;top:50%;transform:translateY(-50%);z-index:40;display:flex;
|
||||
align-items:center;justify-content:center;width:2.6rem;height:3.4rem;font-size:2rem;
|
||||
line-height:1;text-decoration:none;color:var(--fg-1);background:rgba(20,23,32,.55);
|
||||
border:1px solid rgba(255,255,255,.10);border-radius:10px;margin:0 .5rem;user-select:none;
|
||||
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s,border-color .15s}
|
||||
.vnav:hover{background:rgba(28,33,46,.92);border-color:var(--aus-bright-cyan,#42dcd1)}
|
||||
align-items:center;justify-content:center;width:40px;height:56px;font-size:28px;
|
||||
line-height:1;text-decoration:none;color:oklch(0.91 0.008 216);background:oklch(0.17 0.01 250 / .6);
|
||||
border:1px solid rgb(255 255 255 / .12);border-radius:var(--radius-lg);margin:0 8px;user-select:none;
|
||||
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
|
||||
transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
|
||||
.vnav:hover{background:oklch(0.21 0.01 248 / .92);border-color:rgb(255 255 255 / .3);text-decoration:none;
|
||||
color:oklch(0.91 0.008 216)}
|
||||
.vprev{left:0}.vnext{right:0}
|
||||
/* Bottom bar rather than the top chrome: a caption can run to CAPTION_MAX
|
||||
(800 chars), which would shove the filename and the Fit/1:1 toggle around. */
|
||||
.vcap{flex:0 0 auto;max-height:22vh;overflow-y:auto;padding:.6rem clamp(12px,3vw,20px);
|
||||
font-size:.85rem;line-height:1.5;color:var(--fg-1);background:var(--rk-surface,rgba(20,23,32,.92));
|
||||
border-top:1px solid rgba(255,255,255,.10);white-space:pre-wrap}
|
||||
.vcap{flex:0 0 auto;max-height:22vh;overflow-y:auto;padding:10px clamp(12px,3vw,20px);
|
||||
font-size:var(--size-body);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-base);
|
||||
border-top:1px solid var(--border-subtle);white-space:pre-wrap}
|
||||
@media print{.vcap{max-height:none;overflow:visible}}
|
||||
@media print{.vnav{display:none}}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user