From 5b8f0f0a86dd962197f6fef2fa8ed05d664686d0 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sat, 8 Aug 2026 23:20:10 +0200 Subject: [PATCH] fix(glass): split backdrop-on tier from Plex-art; make app-wide glass near-opaque MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Root cause: html[data-backdrop="on"] and .glass-media shared ONE translucent tier, so a value tuned for Plex art (meant to show its poster through) was forced onto the whole app — over the feed, the nav and popovers read straight through it. Split them: the app-wide background-image tier is now near-opaque (surface 88% / card 90% / menu 93% / blur 22px), while the Plex-art tier stays translucent (72/80/85/14). Tuned live on the user's prod session (50% -> 72% was still too see-through; 88% reads clean). 0.60.2. --- VERSION | 2 +- frontend/src/index.css | 23 +++++++++++++++++++---- frontend/src/lib/releaseNotes.ts | 7 +++++++ 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/VERSION b/VERSION index 47474fe6..53c9cab1 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.60.1 \ No newline at end of file +0.60.2 \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index f52eb26e..35122b31 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -97,11 +97,26 @@ (`html[data-backdrop="on"]`), and on the Plex art-backed detail views (`.glass-media`, which have their own art backdrop even when the global image is off). When there's nothing behind the glass (image off / perf), the :root defaults keep it solid & readable. ===== */ -html[data-backdrop="on"], +/* App-wide background image: the glass sits over the FEED (and menus over it), so readability wins. + Near-opaque with a strong blur — the backdrop image still tints through as soft colour, but the feed + behind the nav/popovers no longer punches through. This is SEPARATE from .glass-media below: the two + used to share one tier, which was the root cause — a value tuned for Plex art was forced onto the + whole app. (Tuned live on prod, 2026-08-08: 50% → 72% still too see-through; 88% reads clean.) */ +html[data-backdrop="on"] { + --glass-blur: 22px; + --glass-saturate: 1.6; + --glass-dark-bright: 1.2; + --glass-surface-alpha: 88%; + --glass-card-alpha: 90%; + --glass-menu-alpha: 93%; + --glass-border-alpha: 80%; + --glass-edge: 25%; + --glass-inset: 15%; + --glass-scrim: 30%; +} +/* Plex art-backed detail views: the glass sits over the item's OWN poster/art, which is MEANT to show + through richly — keep this tier translucent (unlike the app-wide one above). */ .glass-media { - /* Solidified after user feedback (2026-08-08): 50%/10px let the feed read straight THROUGH the nav - and popovers — distractingly transparent. Higher alpha + a stronger blur keep the backdrop image - showing through as soft colour without the content behind punching through. */ --glass-blur: 14px; --glass-saturate: 1.6; --glass-dark-bright: 1.2; diff --git a/frontend/src/lib/releaseNotes.ts b/frontend/src/lib/releaseNotes.ts index eee43a36..fe961d02 100644 --- a/frontend/src/lib/releaseNotes.ts +++ b/frontend/src/lib/releaseNotes.ts @@ -14,6 +14,13 @@ export interface ReleaseEntry { } export const RELEASE_NOTES: ReleaseEntry[] = [ + { + version: "0.60.2", + date: "2026-08-08", + fixes: [ + "Follow-up: made the frosted panels solid enough over a background image that the feed no longer shows through the sidebar and menus.", + ], + }, { version: "0.60.1", date: "2026-08-08",