From 8d178884d4f0aafa0ff071f0f885ecd91b90f455 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 18:01:25 +0200
Subject: [PATCH] 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.
---
 web-player/src/lib/components/layout/Sidebar.svelte | 2 +-
 web-player/src/lib/components/player/Queue.svelte   | 2 +-
 web-player/src/lib/theme/theme.css                  | 2 ++
 web-player/src/routes/+page.svelte                  | 4 ++--
 web-player/src/routes/layout.css                    | 4 ----
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index 5a3bbc7..06261ff 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -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">
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 86c1375..22d620a 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -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">
diff --git a/web-player/src/lib/theme/theme.css b/web-player/src/lib/theme/theme.css
index c397b6e..bdd79e8 100644
--- a/web-player/src/lib/theme/theme.css
+++ b/web-player/src/lib/theme/theme.css
@@ -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);
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 3a9643f..dfbc03b 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -135,7 +135,7 @@
 
 <Page>
 	<div
-		class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 theme-transition sm:px-9 sm:py-8.5"
+		class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5"
 	>
 		<div
 			class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
@@ -211,7 +211,7 @@
 		{#if spotlight}
 			<section>
 				<div
-					class="grid grid-cols-1 overflow-hidden rounded-panel-lg spotlight-surface theme-transition lg:grid-cols-2"
+					class="grid grid-cols-1 overflow-hidden rounded-panel-lg spotlight-surface lg:grid-cols-2"
 				>
 					<div class="flex flex-col justify-center p-8 sm:p-9">
 						<div
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 9a6cb67..c41fcbd 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -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;