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:
@@ -121,14 +121,10 @@
|
||||
@apply text-xs tabular-nums;
|
||||
}
|
||||
|
||||
@utility theme-transition {
|
||||
transition: background 0.5s ease-out;
|
||||
}
|
||||
@utility glass-bar {
|
||||
background-image: var(--mf-bar-bg);
|
||||
border-top: 1px solid var(--mf-hairline);
|
||||
backdrop-filter: blur(24px);
|
||||
transition: background 0.5s ease-out;
|
||||
}
|
||||
@utility grid-cards {
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user