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

feat(ui): Rainbow-Theme mit animiertem Farbverlauf für Seitentitel; 420-Theme Titel in #22C55E; Klasse .site-title hinzugefügt

Browse source
This commit is contained in:
vibe-bot 2025-08-10 21:38:07 +02:00
parent a27eb76777
commit d810c30f73
2 changed files with 15 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/App.tsx
View file

@ -345,7 +345,7 @@ export default function App() {
<header className="flex items-center justify-between p-6"> <header className="flex items-center justify-between p-6">
<div className="flex items-center"> <div className="flex items-center">
<div> <div>
<h1 className="text-4xl font-bold"> <h1 className="text-4xl font-bold site-title">
Jukebox 420 Jukebox 420
{import.meta.env.VITE_BUILD_CHANNEL === 'nightly' && ( {import.meta.env.VITE_BUILD_CHANNEL === 'nightly' && (
<div className="text-sm font-normal mt-1 opacity-70"> <div className="text-sm font-normal mt-1 opacity-70">

14
web/src/styles.css
View file

@ -362,6 +362,20 @@ header h1 {
color: inherit; color: inherit;
} }
/* Titel-Effekte pro Theme */
[data-theme="rainbow"] .site-title {
background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-size: 400% 400%;
animation: chaos-rainbow-animation 2s ease-in-out infinite;
}
[data-theme="420"] .site-title {
color: #22C55E;
}
/* Nightly Badge Farbe (Fallback) */ /* Nightly Badge Farbe (Fallback) */
.nightly-badge { color: #ff4d4f; } .nightly-badge { color: #ff4d4f; }