From b822f19e1b5bd9e30cfe3f2e20be7ad71df32633 Mon Sep 17 00:00:00 2001 From: InstaZDLL Date: Sun, 21 Jun 2026 00:11:51 +0200 Subject: [PATCH] fix(skins): preserve Liquid mood tile gradient from shadow-lg capture MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "modals + tooltips + popovers" rule substring-matches [class*="shadow-lg"] to repaint Tailwind popovers as Big-Sur frosted material. The Mood Radio tile button in MoodRadioGrid carries `hover:shadow-lg`, which the matcher catches — so in light mode every tile inherits the 92%-opaque white panel treatment and the colored ::before gradient drowns under it. Same specificity tie (0,2,1) on both rules; source order let the later modal rule win deterministically in release builds (Lightning CSS) while dev's CSS injection order happened to preserve the .liquid-mood-tile rule's precedence. Exclude `.liquid-mood-tile` from both shadow-lg modal captures (dark + light) so the tile's own background-color (8% glass tint) survives and the colored gradient backdrop reads again. Closes #290 --- src/styles/skins/liquid.css | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/styles/skins/liquid.css b/src/styles/skins/liquid.css index e293c8d..52a47c7 100644 --- a/src/styles/skins/liquid.css +++ b/src/styles/skins/liquid.css @@ -701,14 +701,29 @@ SmartPlaylistEditor). Without all three, the modal we miss keeps its raw `bg-white dark:bg-surface-dark-elevated` and reads as a flat dark slab instead of glass — every internal - text + tinted button then fights the wrong bg. */ + text + tinted button then fights the wrong bg. + + `:not(.liquid-mood-tile)` excludes the Mood Radio tiles whose + button carries `hover:shadow-lg` — that substring matches + `[class*="shadow-lg"]` and would otherwise paint a near-opaque + white-92% (light) / cool-grey-92% (dark) slab over the + colored gradient `.liquid-mood-tile::before` paints, bleaching + every tile down to a faintly-tinted white card. The + `.liquid-mood-tile` rule above has the same specificity + (0,2,1) so source order would otherwise let this modal rule + win. + + Studio / Editorial / Lounge / Pulse skin tiles don't need an + exclusion — none of them paint a base bg via a `.liquid-*` + class so the substring capture lands on a tile that already + carries its own gradient, with no conflict. */ :root[data-skin="liquid"] :where( [role="dialog"], [role="tooltip"], [class*="shadow-lg"], [class*="shadow-xl"], [class*="shadow-2xl"] -) { +):not(.liquid-mood-tile) { color: var(--liq-ink) !important; /* Mirror what Big Sur / iOS Control Center actually do for content-heavy panels: a DENSE dark-tinted base (not pure @@ -748,7 +763,7 @@ [class*="shadow-lg"], [class*="shadow-xl"], [class*="shadow-2xl"] -) { +):not(.liquid-mood-tile) { /* 82% → 92% in light. Same Audio-Pipeline-popover bleed-through fix as the dark branch above — content-heavy panels over a saturated cover lose every line of text at 82% even with