diff --git a/web/src/App.tsx b/web/src/App.tsx
index db602fa..2d37d1d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -586,7 +586,20 @@ export default function App() {
onChange={(e)=>{ e.stopPropagation(); toggleSelect(key, e.target.checked); }}
/>
)}
-
handlePlay(s.name, s.relativePath)}>
+
{
+ // 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);
+ }}>
{s.name}
{Array.isArray((s as any).badges) && (s as any).badges!.map((b:string, i:number)=> (
diff --git a/web/src/styles.css b/web/src/styles.css
index f85685e..21b4a9c 100644
--- a/web/src/styles.css
+++ b/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;