From 078f7ac6f6d64e71f8a31c3fcc11a597749e55af Mon Sep 17 00:00:00 2001 From: XShine555 Date: Tue, 22 Sep 2026 18:08:58 +0200 Subject: [PATCH] Stop Button's generic transition from lagging its hue-driven background Button used Tailwind's bare `transition` utility, whose default property list includes background-color. Since the button's bg is a CSS custom property recomputed every frame by the same 600ms hue animation the main background uses, that extra transition smoothed it on a different (~150ms) timing, so its color change didn't match the page background's. Add a btn-transition utility that mirrors Tailwind's default transition list minus background-color, so the button's background tracks the hue animation frame-for-frame like the rest of the app, while hover/focus feedback (text color, ring, filter) still transitions normally. --- web-player/src/lib/components/ui/primitives/Button.svelte | 2 +- web-player/src/routes/layout.css | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/web-player/src/lib/components/ui/primitives/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte index 3217b15..dacd71e 100644 --- a/web-player/src/lib/components/ui/primitives/Button.svelte +++ b/web-player/src/lib/components/ui/primitives/Button.svelte @@ -42,7 +42,7 @@ }; const classes = $derived( - `inline-flex items-center justify-center gap-2 rounded-control transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}` + `inline-flex items-center justify-center gap-2 rounded-control btn-transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}` ); diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css index 3c86f43..ffa5a8e 100644 --- a/web-player/src/routes/layout.css +++ b/web-player/src/routes/layout.css @@ -121,6 +121,11 @@ @apply text-xs tabular-nums; } +@utility btn-transition { + transition-property: color, border-color, outline-color, opacity, box-shadow, filter; + transition-timing-function: var(--default-transition-timing-function); + transition-duration: var(--default-transition-duration); +} @utility glass-bar { background-image: var(--mf-bar-bg); border-top: 1px solid var(--mf-hairline);