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

UI: Volume-Slider Füllbalken fix eigene Klasse (.volume-slider) und CSS-Gradient unabhängig von Container

Browse source
This commit is contained in:
vibe-bot 2025-08-09 00:09:03 +02:00
parent a0a45c97f9
commit 02e37c5426
2 changed files with 31 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/App.tsx
View file

@ -169,7 +169,7 @@ export default function App() {
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<span className="material-icons" style={{color:'var(--text-secondary)'}}>volume_up</span> <span className="material-icons" style={{color:'var(--text-secondary)'}}>volume_up</span>
<input <input
className="w-full h-2 rounded-lg appearance-none cursor-pointer" className="volume-slider w-full h-2 rounded-lg appearance-none cursor-pointer"
type="range" min={0} max={1} step={0.01} type="range" min={0} max={1} step={0.01}
value={volume} value={volume}
onChange={async (e)=>{ onChange={async (e)=>{

45
web/src/styles.css
View file

@ -204,7 +204,8 @@ header p { opacity: .8; }
.control.volume label { font-weight: 700; opacity: .9; } .control.volume label { font-weight: 700; opacity: .9; }
/* Volume Slider - Base Styles */ /* Volume Slider - Base Styles */
.control.volume input[type="range"] { .control.volume input[type="range"],
.volume-slider {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 100%; width: 100%;
@ -217,11 +218,15 @@ header p { opacity: .8; }
} }
/* Tracks transparent halten, damit der Hintergrund-Gradient sichtbar ist */ /* Tracks transparent halten, damit der Hintergrund-Gradient sichtbar ist */
.control.volume input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: transparent; border-radius: 5px; } .control.volume input[type="range"]::-webkit-slider-runnable-track,
.control.volume input[type="range"]::-moz-range-track { height: 8px; background: transparent; border-radius: 5px; } .volume-slider::-webkit-slider-runnable-track { height: 8px; background: transparent; border-radius: 5px; }
.control.volume input[type="range"]::-moz-range-progress { background: transparent; } .control.volume input[type="range"]::-moz-range-track,
.volume-slider::-moz-range-track { height: 8px; background: transparent; border-radius: 5px; }
.control.volume input[type="range"]::-moz-range-progress,
.volume-slider::-moz-range-progress { background: transparent; }
.control.volume input[type="range"]::-webkit-slider-thumb { .control.volume input[type="range"]::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 20px; width: 20px;
@ -232,7 +237,8 @@ header p { opacity: .8; }
box-shadow: 0 2px 6px rgba(0,0,0,0.3); box-shadow: 0 2px 6px rgba(0,0,0,0.3);
} }
.control.volume input[type="range"]::-moz-range-thumb { .control.volume input[type="range"]::-moz-range-thumb,
.volume-slider::-moz-range-thumb {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
@ -242,7 +248,8 @@ header p { opacity: .8; }
} }
/* Volume Slider - Dark Theme */ /* Volume Slider - Dark Theme */
[data-theme="dark"] .control.volume input[type="range"] { [data-theme="dark"] .control.volume input[type="range"],
[data-theme="dark"] .volume-slider {
--range-accent: #0a84ff; --range-accent: #0a84ff;
--range-track-bg: #2c2c2c; --range-track-bg: #2c2c2c;
accent-color: #0a84ff; accent-color: #0a84ff;
@ -250,16 +257,19 @@ header p { opacity: .8; }
height: 8px; height: 8px;
} }
[data-theme="dark"] .control.volume input[type="range"]::-webkit-slider-thumb { [data-theme="dark"] .control.volume input[type="range"]::-webkit-slider-thumb,
[data-theme="dark"] .volume-slider::-webkit-slider-thumb {
background: #0a84ff; background: #0a84ff;
} }
[data-theme="dark"] .control.volume input[type="range"]::-moz-range-thumb { [data-theme="dark"] .control.volume input[type="range"]::-moz-range-thumb,
[data-theme="dark"] .volume-slider::-moz-range-thumb {
background: #0a84ff; background: #0a84ff;
} }
/* Volume Slider - Light Theme */ /* Volume Slider - Light Theme */
[data-theme="light"] .control.volume input[type="range"] { [data-theme="light"] .control.volume input[type="range"],
[data-theme="light"] .volume-slider {
--range-accent: #007aff; --range-accent: #007aff;
--range-track-bg: #e8e8ed; --range-track-bg: #e8e8ed;
accent-color: #007aff; accent-color: #007aff;
@ -267,16 +277,19 @@ header p { opacity: .8; }
height: 8px; height: 8px;
} }
[data-theme="light"] .control.volume input[type="range"]::-webkit-slider-thumb { [data-theme="light"] .control.volume input[type="range"]::-webkit-slider-thumb,
[data-theme="light"] .volume-slider::-webkit-slider-thumb {
background: #007aff; background: #007aff;
} }
[data-theme="light"] .control.volume input[type="range"]::-moz-range-thumb { [data-theme="light"] .control.volume input[type="range"]::-moz-range-thumb,
[data-theme="light"] .volume-slider::-moz-range-thumb {
background: #007aff; background: #007aff;
} }
/* Volume Slider - Rainbow Theme */ /* Volume Slider - Rainbow Theme */
[data-theme="rainbow"] .control.volume input[type="range"] { [data-theme="rainbow"] .control.volume input[type="range"],
[data-theme="rainbow"] .volume-slider {
--range-accent: #23a6d5; --range-accent: #23a6d5;
--range-track-bg: rgba(44,44,44,.8); --range-track-bg: rgba(44,44,44,.8);
accent-color: #23a6d5; accent-color: #23a6d5;
@ -285,11 +298,13 @@ header p { opacity: .8; }
border: 1px solid #3a3a3c; border: 1px solid #3a3a3c;
} }
[data-theme="rainbow"] .control.volume input[type="range"]::-webkit-slider-thumb { [data-theme="rainbow"] .control.volume input[type="range"]::-webkit-slider-thumb,
[data-theme="rainbow"] .volume-slider::-webkit-slider-thumb {
background: linear-gradient(45deg, #23a6d5, #e73c7e); background: linear-gradient(45deg, #23a6d5, #e73c7e);
} }
[data-theme="rainbow"] .control.volume input[type="range"]::-moz-range-thumb { [data-theme="rainbow"] .control.volume input[type="range"]::-moz-range-thumb,
[data-theme="rainbow"] .volume-slider::-moz-range-thumb {
background: linear-gradient(45deg, #23a6d5, #e73c7e); background: linear-gradient(45deg, #23a6d5, #e73c7e);
} }