Skip to content

fix(skins): preserve Liquid mood tile gradient from shadow-lg capture#291

Open
InstaZDLL wants to merge 1 commit into
mainfrom
fix/liquid-mood-tile-bleached
Open

fix(skins): preserve Liquid mood tile gradient from shadow-lg capture#291
InstaZDLL wants to merge 1 commit into
mainfrom
fix/liquid-mood-tile-bleached

Conversation

@InstaZDLL

@InstaZDLL InstaZDLL commented Jun 20, 2026

Copy link
Copy Markdown
Owner

Summary

  • Excludes .liquid-mood-tile from both [class*="shadow-lg"] modal-capture rules in src/styles/skins/liquid.css so the Mood Radio tiles' colored ::before gradient survives in Liquid + light theme on release builds.
  • No JSX change — the tile button still ships hover:shadow-lg for its hover elevation, which is what triggered the false-positive capture.

Root cause

The "modals / popovers" rule substring-matches [class*="shadow-lg"] to repaint Tailwind popovers as Big-Sur frosted material. The Mood Radio tile button in MoodRadioGrid.tsx carries hover:shadow-lg, which the matcher catches — so in light mode every tile inherits background-color: color-mix(white 92%, transparent) !important, drowning the gradient.

Specificity tie at (0,2,1) on both .liquid-mood-tile and the modal rule; source order broke the tie in favour of the (later) modal rule deterministically in release builds (Lightning CSS reorder), while Vite's dev CSS injection happened to preserve the .liquid-mood-tile rule's precedence — hence "works in dev, broken in release".

Test plan

  • bun run tauri build → install → switch to Liquid skin + a light theme (Émeraude / Lavender / Sunset) → Mood Radio tiles show the colored gradient again, text readable.
  • Dark Liquid theme unchanged (mood tiles already worked there).
  • No regression on actual popovers / modals (AudioPipelinePopover, MoreActionsMenu, SmartPlaylistEditor, settings dropdowns).

Closes #290

Summary by CodeRabbit

Bug Fixes

  • Correction de l'apparence des tuiles Mood Radio - le gradient d'arrière-plan est désormais préservé et la lisibilité est améliorée dans le thème liquid.

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
@InstaZDLL InstaZDLL added this to the v1.6.0 milestone Jun 20, 2026
@coderabbitai

coderabbitai Bot commented Jun 20, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Deux sélecteurs CSS dans liquid.css qui appliquent un fond « verre opacifié » aux modals/tooltips/popovers reçoivent chacun un filtre :not(.liquid-mood-tile). Cela empêche les tuiles Mood Radio — qui portent hover:shadow-lg — d'hériter du fond blanc à 92 % et de perdre leur gradient coloré en build de production.

Changes

Correction du sélecteur glass dans liquid.css

Layer / File(s) Summary
Exclusion .liquid-mood-tile des deux règles glass
src/styles/skins/liquid.css
Le sélecteur global (thèmes sombre et clair) et la branche thème clair reçoivent tous deux :not(.liquid-mood-tile) sur les règles `[class*="shadow-lg

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

  • InstaZDLL/WaveFlow#275 : Modifie également liquid.css pour les tuiles Mood Radio, en ajustant l'opacité du ::before en thème clair — directement lié au même composant visuel.

Suggested labels

type: fix, size: s, scope: frontend

Poem

🎨 Les tuiles Mood avaient pris le blanc du frigo,
Étouffant leurs dégradés sous un voile trop rigide.
Un :not() bien placé, et hop, l'espoir surgit :
Focus, Chill, Énergie retrouvent leur couleur limpide.
Le sélecteur glass cède enfin sa place au gradient ! 🌈

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed Le titre suit les conventions de commits et résume clairement le changement principal : corriger la préservation du gradient des tuiles Mood dans le skin Liquid.
Linked Issues check ✅ Passed Le code répond entièrement aux critères d'acceptation : exclusion de .liquid-mood-tile des deux règles de capture [class*="shadow-lg"] dans liquid.css pour préserver le gradient des tuiles en Liquid light.
Out of Scope Changes check ✅ Passed Le changement est rigoureusement limité au problème décrit : modification CSS ciblée dans liquid.css, aucune modification JSX ni code non-lié. Pas de dérive de scope détectée.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed La description du PR couvre bien les points essentiels : changement CSS, cause racine, plan de test. Tous les éléments requis du template sont présents et suffisamment détaillés.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/liquid-mood-tile-bleached

Comment @coderabbitai help to get the list of available commands and usage tips.

@InstaZDLL InstaZDLL added scope: frontend React/Vite frontend (src/) type: fix Bug fix size: s 10-50 lines labels Jun 20, 2026
@InstaZDLL InstaZDLL self-assigned this Jun 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: frontend React/Vite frontend (src/) size: s 10-50 lines type: fix Bug fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Liquid light: Mood Radio tiles bleached white in release builds

1 participant