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

web/src/App.tsx

@@ -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)=> (

web/src/styles.css

@@ -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;