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

fix(ui): Volume Slider sichtbar gemacht; System Theme entfernt; theme-spezifische Slider Styles

Browse source
This commit is contained in:
vibe-bot 2025-08-08 23:05:58 +02:00
parent 7b8cb11819
commit 12a7e4380d
2 changed files with 25 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/src/App.tsx
View file

@ -182,7 +182,6 @@ export default function App() {
<div className="flex items-center space-x-3 lg:col-span-2">
<div className="relative flex-grow">
<select className="input-field appearance-none pl-10" value={theme} onChange={(e)=>setTheme(e.target.value)}>
<option value="system">System</option>
<option value="dark">Dark</option>
<option value="rainbow">Rainbow Chaos</option>
<option value="light">Light</option>

26
web/src/styles.css
View file

@ -196,7 +196,31 @@ header p { opacity: .8; }
.control.volume { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.control.volume label { font-weight: 700; opacity: .9; }
.control.volume input[type="range"] { accent-color: #60a5fa; }
/* Volume Slider - Dark Theme */
[data-theme="dark"] .control.volume input[type="range"] {
accent-color: #0a84ff;
background: #2c2c2c;
border-radius: 5px;
height: 8px;
}
/* Volume Slider - Light Theme */
[data-theme="light"] .control.volume input[type="range"] {
accent-color: #007aff;
background: #e8e8ed;
border-radius: 5px;
height: 8px;
}
/* Volume Slider - Rainbow Theme */
[data-theme="rainbow"] .control.volume input[type="range"] {
accent-color: #23a6d5;
background: rgba(44,44,44,.8);
border-radius: 5px;
height: 8px;
border: 1px solid #3a3a3c;
}
.error { background: rgba(255, 99, 99, .12); color: #ffd1d1; border: 1px solid rgba(255, 99, 99, .3); padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; }