fix(glass): split backdrop-on tier from Plex-art; make app-wide glass near-opaque
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.
This commit is contained in:
+19
-4
@@ -97,11 +97,26 @@
|
|||||||
(`html[data-backdrop="on"]`), and on the Plex art-backed detail views (`.glass-media`, which
|
(`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
|
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. ===== */
|
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 {
|
.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-blur: 14px;
|
||||||
--glass-saturate: 1.6;
|
--glass-saturate: 1.6;
|
||||||
--glass-dark-bright: 1.2;
|
--glass-dark-bright: 1.2;
|
||||||
|
|||||||
@@ -14,6 +14,13 @@ export interface ReleaseEntry {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const RELEASE_NOTES: 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",
|
version: "0.60.1",
|
||||||
date: "2026-08-08",
|
date: "2026-08-08",
|
||||||
|
|||||||
Reference in New Issue
Block a user