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:
@@ -31,7 +31,7 @@
|
||||
</script>
|
||||
|
||||
<aside
|
||||
class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 theme-transition lg:flex"
|
||||
class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 lg:flex"
|
||||
style="width:var(--mf-sidebar-w)"
|
||||
>
|
||||
<nav class="flex flex-col gap-1">
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
{#if queuePanel.open}
|
||||
<aside
|
||||
transition:fly={{ x: 24, duration: 220, easing: cubicOut }}
|
||||
class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 theme-transition sm:flex"
|
||||
class="hidden shrink-0 flex-col border-l border-hairline bg-bg px-4 pt-5 sm:flex"
|
||||
style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
|
||||
>
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user