feat(glass): bake two-tier defaults (Adaptive chrome + media scope), add Starship/Matrix schemes
From UAT: glass reads strongest where there's content behind it, so split the look into two tiers instead of one global compromise. - index.css: global :root defaults are now the 'Adaptive' baseline (solid-enough dark glass for content-less chrome). New .glass-media scope class carries the UAT-tuned translucent values (blur 10 / surface 50% / card 60% / scrim 30% / edge 25%) for surfaces that float over real artwork. - Apply .glass-media to the art-backed Plex detail views (PlexInfo page variant, PlexShowView, PlexSeasonView) and drop PlexInfo's hard-coded inline 55% overrides so those panels are scope-driven and consistent (hero no longer reads solid while the season strips are translucent). - Two new colour schemes: Starship (deep-space blue, azure accent) and Matrix (near-black, phosphor green), each with dark+light tokens + swatches. - Remove the thumbnail-mosaic backdrop (did nothing usefully; its home is the future 'videos behind glass' phase) — deletes MosaicBackdrop, mosaic vars/CSS, and the tuner's mosaic controls. GlassTuner presets resynced to the new baseline (Current / Media / Max-readable).
This commit is contained in:
npeter83
parent
22cce807a0
commit
dc51aeeae9
6 changed files with 108 additions and 173 deletions
|
|
@ -6,27 +6,38 @@
|
|||
--font-scale: 1.06;
|
||||
|
||||
/* ===== Glass tunables — every value that materially drives the look lives here so it can be
|
||||
tuned in ONE place (and live-driven by the dev GlassTuner during UAT). Defaults below equal
|
||||
the historical hard-coded values, so nothing changes until a value is bumped. When the user
|
||||
signs off on tuned values, bake the finals right here. ===== */
|
||||
--glass-blur: 30px; /* backdrop blur radius (2026 sweet spot is ~8–16px; 30 is heavy) */
|
||||
tuned in ONE place (and live-driven by the dev GlassTuner during UAT). ===== */
|
||||
/* GLOBAL baseline = "Adaptive": solid-enough dark glass that reads well on content-less chrome
|
||||
(nav/header/dialogs/filters/settings — where there's nothing behind the glass to refract).
|
||||
Baked from UAT 2026-07-12. Rich-backdrop surfaces override these via `.glass-media` below. */
|
||||
--glass-blur: 20px; /* backdrop blur radius */
|
||||
--glass-saturate: 1.8; /* backdrop saturation */
|
||||
--glass-dark-bright: 1.4; /* extra brightness lift applied to .glass/.glass-menu in dark mode only */
|
||||
--glass-surface-alpha: 78%; /* .glass panel translucency (higher = more solid = "adaptive") */
|
||||
--glass-card-alpha: 84%; /* .glass-card translucency */
|
||||
--glass-menu-alpha: 92%; /* .glass-menu translucency */
|
||||
--glass-dark-bright: 1.25; /* extra brightness lift applied to .glass/.glass-menu in dark mode only */
|
||||
--glass-surface-alpha: 94%; /* .glass panel translucency (higher = more solid = "adaptive") */
|
||||
--glass-card-alpha: 94%; /* .glass-card translucency */
|
||||
--glass-menu-alpha: 98%; /* .glass-menu translucency */
|
||||
--glass-border-alpha: 78%; /* .glass border opacity */
|
||||
--glass-inset: 16%; /* top specular highlight strength (#fff N%) */
|
||||
--glass-edge: 0%; /* extra edge-light mixed into the TOP border (#fff N%) — 0 = off */
|
||||
--glass-scrim: 0%; /* under-content scrim: darkens surfaces toward --bg for text contrast — 0 = off */
|
||||
--ambient: 1; /* multiplier on the ambient accent backdrop pools */
|
||||
--glass-edge: 10%; /* extra edge-light mixed into the TOP border (#fff N%) — 0 = off */
|
||||
--glass-scrim: 14%; /* under-content scrim: darkens surfaces toward --bg for text contrast — 0 = off */
|
||||
--ambient: 1.1; /* multiplier on the ambient accent backdrop pools */
|
||||
}
|
||||
|
||||
/* Optional muted thumbnail-mosaic backdrop (off unless <MosaicBackdrop/> mounts). Conservative
|
||||
defaults: heavy blur + low saturation + darkened so it reads as subtle texture, never a rainbow. */
|
||||
--mosaic-blur: 64px;
|
||||
--mosaic-sat: 0.7;
|
||||
--mosaic-bright: 0.5;
|
||||
--mosaic-opacity: 0.5;
|
||||
/* ===== Rich-backdrop scope: surfaces that float over real imagery (Plex art hero/detail, and
|
||||
later channel-page banners) want MORE translucency so the picture shows through — the "glass
|
||||
over content" look. Put `.glass-media` on such a page root; every .glass* inside inherits these
|
||||
(UAT-tuned 2026-07-12). Global chrome stays solid via the :root defaults above. ===== */
|
||||
.glass-media {
|
||||
--glass-blur: 10px;
|
||||
--glass-saturate: 1.6;
|
||||
--glass-dark-bright: 1.2;
|
||||
--glass-surface-alpha: 50%;
|
||||
--glass-card-alpha: 60%;
|
||||
--glass-menu-alpha: 66%;
|
||||
--glass-border-alpha: 80%;
|
||||
--glass-edge: 25%;
|
||||
--glass-inset: 15%;
|
||||
--glass-scrim: 30%;
|
||||
}
|
||||
|
||||
/* Make native controls (date picker, scrollbars) follow the theme. */
|
||||
|
|
@ -133,37 +144,6 @@ html[data-theme="dark"] .toast-card {
|
|||
border-color: color-mix(in srgb, #fff 50%, transparent);
|
||||
}
|
||||
|
||||
/* ===== Optional muted thumbnail-mosaic backdrop (mounted by <MosaicBackdrop/>) =====
|
||||
Gives dark glass real content to refract. Kept conservative: heavy blur + low saturation +
|
||||
darkened, so it reads as a soft texture behind everything, never a colourful collage. When it
|
||||
is present, the ambient accent pools on <body> are dimmed so the two don't fight. */
|
||||
.mosaic-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.mosaic-backdrop .mosaic-tiles {
|
||||
position: absolute;
|
||||
inset: -10%;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
filter: blur(var(--mosaic-blur)) saturate(var(--mosaic-sat)) brightness(var(--mosaic-bright));
|
||||
opacity: var(--mosaic-opacity);
|
||||
}
|
||||
.mosaic-backdrop .mosaic-tiles > span {
|
||||
display: block;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
html[data-mosaic="1"] body {
|
||||
background: var(--bg);
|
||||
}
|
||||
html[data-perf="1"] .mosaic-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */
|
||||
html[data-perf="1"] .glass,
|
||||
html[data-perf="1"] .glass-menu,
|
||||
|
|
@ -316,6 +296,50 @@ html[data-scheme="youtube"][data-theme="light"] {
|
|||
--accent-fg: #ffffff;
|
||||
}
|
||||
|
||||
/* Starship — deep space blue-black with a bright azure "LCARS/computer" accent */
|
||||
html[data-scheme="starship"][data-theme="dark"] {
|
||||
--bg: #050b16;
|
||||
--surface: #0b1728;
|
||||
--card: #101f36;
|
||||
--border: #1f3557;
|
||||
--fg: #dfeaff;
|
||||
--muted: #8aa6cc;
|
||||
--accent: #38b6ff;
|
||||
--accent-fg: #04101f;
|
||||
}
|
||||
html[data-scheme="starship"][data-theme="light"] {
|
||||
--bg: #eef4fb;
|
||||
--surface: #ffffff;
|
||||
--card: #ffffff;
|
||||
--border: #d3e0f0;
|
||||
--fg: #0b1b30;
|
||||
--muted: #4a5f7d;
|
||||
--accent: #0b6bd6;
|
||||
--accent-fg: #ffffff;
|
||||
}
|
||||
|
||||
/* Matrix — near-black with a phosphor-green terminal accent */
|
||||
html[data-scheme="matrix"][data-theme="dark"] {
|
||||
--bg: #030a06;
|
||||
--surface: #08130d;
|
||||
--card: #0b1c12;
|
||||
--border: #163d27;
|
||||
--fg: #d6ffe4;
|
||||
--muted: #6fae86;
|
||||
--accent: #2fe36e;
|
||||
--accent-fg: #02160a;
|
||||
}
|
||||
html[data-scheme="matrix"][data-theme="light"] {
|
||||
--bg: #f0f7f1;
|
||||
--surface: #ffffff;
|
||||
--card: #ffffff;
|
||||
--border: #cfe6d6;
|
||||
--fg: #08130b;
|
||||
--muted: #4c6b56;
|
||||
--accent: #12a150;
|
||||
--accent-fg: #ffffff;
|
||||
}
|
||||
|
||||
/* Toast auto-dismiss countdown bar (shrinks left-to-right to zero) */
|
||||
@keyframes toastbar {
|
||||
from {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue