root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nightly: Rainbow-Theme Soundbutton erhält 1s Regenbogen-Flash beim Klick (analog Partymode)

Browse source
This commit is contained in:
vibe-bot 2025-08-09 21:18:01 +02:00
parent 49a4407bba
commit f50c354ab2
2 changed files with 22 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

15
web/src/App.tsx
View file

@ -586,7 +586,20 @@ export default function App() {
onChange={(e)=>{ e.stopPropagation(); toggleSelect(key, e.target.checked); }}
/>
)}
<div className="sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer" onClick={()=>handlePlay(s.name, s.relativePath)}>
<div className="sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer"
onClick={async ()=>{
// Rainbow-Flash für 1s im Rainbow-Theme
try {
if (theme === 'rainbow') {
const el = (event?.currentTarget as HTMLDivElement | undefined);
if (el) {
el.classList.add('rainbow-flash');
setTimeout(()=> el.classList.remove('rainbow-flash'), 1000);
}
}
} catch {}
await handlePlay(s.name, s.relativePath);
}}>
<span className="text-sm font-medium truncate pr-2">
{s.name}
{Array.isArray((s as any).badges) && (s as any).badges!.map((b:string, i:number)=> (

8
web/src/styles.css
View file

@ -324,6 +324,14 @@ body {
100% { background-position: 0% 50%; }
}
/* Rainbow-Theme: kurzzeitige Flash-Animation für gedrückte Sound-Buttons */
[data-theme="rainbow"] .sound-btn.rainbow-flash {
background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080) !important;
background-size: 400% 400% !important;
animation: chaos-rainbow-animation 1s ease-in-out 1;
color: #ffffff;
}
/* Neuer Header-Style basierend auf Google Stitch Design */
header {
display: flex;