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">
<span className="material-icons" style={{color:'var(--text-secondary)'}}>volume_up</span>
<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}
value={volume}
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; }
/* Volume Slider - Base Styles */
.control.volume input[type="range"] {
.control.volume input[type="range"],
.volume-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
@ -217,11 +218,15 @@ header p { opacity: .8; }
}
/* 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"]::-moz-range-track { height: 8px; background: transparent; border-radius: 5px; }
.control.volume input[type="range"]::-moz-range-progress { background: transparent; }
.control.volume input[type="range"]::-webkit-slider-runnable-track,
.volume-slider::-webkit-slider-runnable-track { height: 8px; background: transparent; border-radius: 5px; }
.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;
appearance: none;
width: 20px;
@ -232,7 +237,8 @@ header p { opacity: .8; }
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;
height: 20px;
border-radius: 50%;
@ -242,7 +248,8 @@ header p { opacity: .8; }
}
/* 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-track-bg: #2c2c2c;
accent-color: #0a84ff;
@ -250,16 +257,19 @@ header p { opacity: .8; }
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;
}
[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;
}
/* 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-track-bg: #e8e8ed;
accent-color: #007aff;
@ -267,16 +277,19 @@ header p { opacity: .8; }
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;
}
[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;
}
/* 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-track-bg: rgba(44,44,44,.8);
accent-color: #23a6d5;
@ -285,11 +298,13 @@ header p { opacity: .8; }
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);
}
[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);
}