fix: Register marquee animation in Tailwind config

The marquee scroll effect wasn't working because 'animate-marquee'
was defined as an inline CSS class, not a Tailwind utility. Tailwind's
JIT compiler strips unknown classes, so group-hover:animate-marquee
was being removed at build time.

Fix: Added 'marquee-scroll' keyframes and 'marquee' animation to
tailwind.config.js theme.extend. Now 'animate-marquee' is a proper
Tailwind utility that works with group-hover and responsive variants.

Also removed the inline <style> block from Player.tsx since the
animation is now handled by Tailwind.
This commit is contained in:
rin.kagamine committed 2026-05-29 20:50:36 -04:00
1 parent a33df8a4ef
commit a14ec40872
3 files changed
+10 -10

No files matched your search

Binary file not shown.

Before

Width:  |  Height:  |  Size: 824 KiB

After

Width:  |  Height:  |  Size: 32 KiB

-9
View File
@@ -167,15 +167,6 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
return (
<>
<style>{`
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee {
animation: marquee-scroll linear infinite;
}
`}</style>
<div className="fixed bottom-0 left-0 right-0 bg-lyria-panel border-t border-white/10 px-4 py-3 z-40">
<div className="max-w-6xl mx-auto flex items-center gap-3">
{/* Play/Pause */}
+10 -1
View File
@@ -12,7 +12,16 @@ export default {
'lyria-accent': '#ff6b35',
'lyria-text': '#e0e0e0',
'lyria-muted': '#6b6b7b',
}
},
keyframes: {
'marquee-scroll': {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(-50%)' },
},
},
animation: {
'marquee': 'marquee-scroll linear infinite',
},
},
},
plugins: [],