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

Header: Neues Google Stitch Design implementiert - horizontales Layout mit Zählern und Buttons

Browse source
This commit is contained in:
vibe-bot 2025-08-09 00:41:13 +02:00
parent bf9d6d60e3
commit 664af110a8
2 changed files with 60 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

47
web/src/styles.css
View file

@ -108,15 +108,46 @@ body {
[data-theme="dark"] .gradient-text { background: -webkit-linear-gradient(45deg,#e0e0e0,#a0a0a0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.container { width: 90vw; max-width: 1800px; margin: 0 auto; padding: 28px; }
header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
/* Neuer Header-Style basierend auf Google Stitch Design */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
margin-bottom: 18px;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Light Theme Header */
[data-theme="light"] header {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #1d1d1f;
}
/* Rainbow Theme Header */
[data-theme="rainbow"] header {
background: rgba(30, 30, 30, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
}
/* Header-Titel und Uhrzeit */
header h1 {
margin: 0;
font-weight: 800;
letter-spacing: .3px;
color: inherit;
}
header p {
margin: 0;
opacity: .9;
color: inherit;
}
header h1 { margin: 0; font-weight: 800; letter-spacing: .3px; }
header p { opacity: .8; }
.clock {
font-size: 48px;
font-weight: 800;