Sync sidebar/queue/player bar color transitions with the main background

Sidebar, Queue, PlayerBar, TabsBar, and the hero/spotlight surfaces all
had an extra CSS `transition: background 0.5s ease-out` (theme-transition/
glass-bar) layered on top of backgrounds that are already animated
frame-by-frame over 600ms by the hue-interpolation loop in +layout.svelte.
That extra transition made them visibly lag behind and take a different
amount of time than the main app-backdrop, which has no such transition
and therefore tracks the JS animation exactly. Drop the redundant
transition so every hue-driven surface updates in lockstep.

Also fixes a dangling --color-btn-hover: var(--mf-btn-bg-hover) that
referenced an undefined custom property (theme.css never defined
--mf-btn-bg-hover after an earlier partial commit), which silently
broke the secondary button's hover background.
This commit is contained in:
2026-09-22 18:01:25 +02:00
parent cd2131ef6f
commit 8d178884d4
5 changed files with 6 additions and 8 deletions
+2
View File
@@ -14,6 +14,7 @@
--mf-surface: rgba(255, 255, 255, 0.022);
--mf-surface-2: rgba(255, 255, 255, 0.045);
--mf-surface-hover: rgba(255, 255, 255, 0.06);
--mf-btn-bg-hover: var(--mf-surface-hover);
--mf-border: rgba(255, 255, 255, 0.04);
--mf-border-strong: rgba(255, 255, 255, 0.09);
@@ -78,6 +79,7 @@
--mf-surface: rgba(0, 0, 0, 0.035);
--mf-surface-2: rgba(0, 0, 0, 0.06);
--mf-surface-hover: #e8eceb;
--mf-btn-bg-hover: var(--mf-surface-hover);
--mf-scrollbar: rgba(0, 0, 0, 0.18);
--mf-scrollbar-hover: rgba(0, 0, 0, 0.32);