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:
2026-07-12 20:12:25 +02:00
parent 2004ab004e
commit cfd02ba471
6 changed files with 108 additions and 173 deletions
+1 -4
View File
@@ -90,12 +90,11 @@ export default function PlexInfo({
t(`plex.info.stripSource.${src}`, { defaultValue: src.toUpperCase() });
return (
<div className={overlay ? "relative w-full max-w-3xl" : "relative"}>
<div className={overlay ? "relative w-full max-w-3xl" : "relative glass-media"}>
<div className={overlay ? "p-5" : "flex flex-col gap-4 p-3 sm:p-4"}>
{/* Hero block: floats as a frosted glass panel over the fixed art backdrop (page variant). */}
<div
className={overlay ? "" : "glass rounded-2xl p-4 sm:p-6"}
style={overlay ? undefined : { background: "color-mix(in srgb, var(--surface) 55%, transparent)" }}
>
{/* Header: close (overlay) / customize */}
<div className="mb-4 flex items-start gap-3">
@@ -302,7 +301,6 @@ export default function PlexInfo({
{cast.length > 0 && (
<div
className={overlay ? "mt-5" : "glass-card rounded-2xl p-4 sm:p-5"}
style={overlay ? undefined : { background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
>
<h2 className={`mb-2 text-sm font-semibold ${overlay ? "text-white/80" : ""}`}>
{t("plex.info.cast")}
@@ -365,7 +363,6 @@ export default function PlexInfo({
<div
key={col.id}
className={overlay ? "mt-6" : "glass-card rounded-2xl p-4 sm:p-5"}
style={overlay ? undefined : { background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
>
<div className="mb-2 flex items-center justify-between gap-3">
<h2 className={`text-sm font-semibold ${overlay ? "text-white/80" : ""}`}>{col.title}</h2>