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:
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 |
@@ -167,15 +167,6 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
|
|||||||
|
|
||||||
return (
|
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="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">
|
<div className="max-w-6xl mx-auto flex items-center gap-3">
|
||||||
{/* Play/Pause */}
|
{/* Play/Pause */}
|
||||||
|
|||||||
@@ -12,7 +12,16 @@ export default {
|
|||||||
'lyria-accent': '#ff6b35',
|
'lyria-accent': '#ff6b35',
|
||||||
'lyria-text': '#e0e0e0',
|
'lyria-text': '#e0e0e0',
|
||||||
'lyria-muted': '#6b6b7b',
|
'lyria-muted': '#6b6b7b',
|
||||||
}
|
},
|
||||||
|
keyframes: {
|
||||||
|
'marquee-scroll': {
|
||||||
|
'0%': { transform: 'translateX(0)' },
|
||||||
|
'100%': { transform: 'translateX(-50%)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'marquee': 'marquee-scroll linear infinite',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|||||||
Reference in new issue
Block a user