NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Stop Button's generic transition from lagging its hue-driven background

Browse Source 
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.
This commit is contained in:
Admin
2026-09-22 18:08:58 +02:00
parent b168df6ca6
commit 078f7ac6f6
2 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/routes/layout.css
+5
View File
@@ -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);