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

Volume slider: visible accent fill across themes (CSS var + custom track); fix CSS lints

Browse source
This commit is contained in:
vibe-bot 2025-08-08 23:40:26 +02:00
parent d0786b8d3f
commit ed66adaa26
2 changed files with 37 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/src/App.tsx
View file

@ -168,7 +168,21 @@ export default function App() {
</div> </div>
<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 className="w-full h-2 rounded-lg appearance-none cursor-pointer" style={{background:'var(--bg-tertiary)'}} type="range" min={0} max={1} step={0.01} value={volume} onChange={async (e)=>{ const v=parseFloat(e.target.value); setVolume(v); if(selected){ const [guildId]=selected.split(':'); try{ await setVolumeLive(guildId, v);}catch{} }}} /> <input
className="w-full h-2 rounded-lg appearance-none cursor-pointer"
type="range" min={0} max={1} step={0.01}
value={volume}
onChange={async (e)=>{
const v = parseFloat(e.target.value);
setVolume(v);
// CSS-Variable setzen, um die Füllbreite zu steuern
const percent = `${Math.round(v * 100)}%`;
try { (e.target as HTMLInputElement).style.setProperty('--_fill', percent); } catch {}
if(selected){ const [guildId]=selected.split(':'); try{ await setVolumeLive(guildId, v);}catch{} }
}}
// Initiale Füllbreite, falls State geladen ist
style={{ ['--_fill' as any]: `${Math.round(volume*100)}%` }}
/>
<span className="text-sm font-semibold w-8 text-center" style={{color:'var(--text-secondary)'}}>{Math.round(volume*100)}%</span> <span className="text-sm font-semibold w-8 text-center" style={{color:'var(--text-secondary)'}}>{Math.round(volume*100)}%</span>
</div> </div>
<div className="relative md:col-span-2 lg:col-span-1"> <div className="relative md:col-span-2 lg:col-span-1">

35
web/src/styles.css
View file

@ -47,7 +47,7 @@ body {
[data-theme="light"] .input-field:focus { box-shadow: 0 0 0 3px rgba(0,122,255,.25); border-color: transparent; } [data-theme="light"] .input-field:focus { box-shadow: 0 0 0 3px rgba(0,122,255,.25); border-color: transparent; }
[data-theme="light"] .sound-btn { background: #ffffff; border: 1px solid #e8e8ed; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s ease; } [data-theme="light"] .sound-btn { background: #ffffff; border: 1px solid #e8e8ed; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s ease; }
[data-theme="light"] .sound-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #007aff; } [data-theme="light"] .sound-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #007aff; }
.gradient-text { background: -webkit-linear-gradient(45deg, #333, #555); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gradient-text { background: -webkit-linear-gradient(45deg, #333, #555); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Rainbow Chaos Theme */ /* Rainbow Chaos Theme */
[data-theme="rainbow"] body { [data-theme="rainbow"] body {
@ -91,7 +91,7 @@ body {
[data-theme="rainbow"] .input-field:focus { box-shadow: 0 0 10px #23a6d5, 0 0 5px #e73c7e; border-color:#fff; } [data-theme="rainbow"] .input-field:focus { box-shadow: 0 0 10px #23a6d5, 0 0 5px #e73c7e; border-color:#fff; }
[data-theme="rainbow"] .sound-btn { background: rgba(30,30,30,.75); border:1px solid #3a3a3c; box-shadow: 0 1px 2px rgba(0,0,0,.2); backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .2s; } [data-theme="rainbow"] .sound-btn { background: rgba(30,30,30,.75); border:1px solid #3a3a3c; box-shadow: 0 1px 2px rgba(0,0,0,.2); backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .2s; }
[data-theme="rainbow"] .sound-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 30px rgba(0,0,0,.5); border-color:#fff; } [data-theme="rainbow"] .sound-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 30px rgba(0,0,0,.5); border-color:#fff; }
[data-theme="rainbow"] .gradient-text { background: -webkit-linear-gradient(45deg,#ff8a00,#e52e71,#9c27b0); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow: 0 0 10px rgba(255,255,255,.2) } [data-theme="rainbow"] .gradient-text { background: -webkit-linear-gradient(45deg,#ff8a00,#e52e71,#9c27b0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow: 0 0 10px rgba(255,255,255,.2) }
/* Dark (Stitch) */ /* Dark (Stitch) */
[data-theme="dark"] .control-panel { background-color:#1e1e1e; border:1px solid #3a3a3c } [data-theme="dark"] .control-panel { background-color:#1e1e1e; border:1px solid #3a3a3c }
@ -101,11 +101,10 @@ body {
[data-theme="dark"] .input-field { width:100%; background:#2c2c2c; border:1px solid #3a3a3c; border-radius:.5rem; padding:.5rem 1rem; color:#e0e0e0 } [data-theme="dark"] .input-field { width:100%; background:#2c2c2c; border:1px solid #3a3a3c; border-radius:.5rem; padding:.5rem 1rem; color:#e0e0e0 }
[data-theme="dark"] .sound-btn { background:#1e1e1e; border:1px solid #3a3a3c; box-shadow:0 1px 2px rgba(0,0,0,.2) } [data-theme="dark"] .sound-btn { background:#1e1e1e; border:1px solid #3a3a3c; box-shadow:0 1px 2px rgba(0,0,0,.2) }
[data-theme="dark"] .sound-btn:hover { transform: translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.4); border-color:#0a84ff } [data-theme="dark"] .sound-btn:hover { transform: translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.4); border-color:#0a84ff }
[data-theme="dark"] .gradient-text { background: -webkit-linear-gradient(45deg,#e0e0e0,#a0a0a0); -webkit-background-clip:text; -webkit-text-fill-color:transparent } [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; } .container { width: 90vw; max-width: 1800px; margin: 0 auto; padding: 28px; }
header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.
.header-row { .header-row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -206,8 +205,15 @@ header p { opacity: .8; }
border-radius: 5px; border-radius: 5px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
/* Sichtbarer Füllbalken über ein Hintergrund-Gradient, Breite via --_fill gesteuert */
background: linear-gradient(var(--range-accent), var(--range-accent)) 0/var(--_fill, 0%) 100% no-repeat, var(--range-track-bg, #2c2c2c);
} }
/* 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-thumb { .control.volume input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
@ -229,9 +235,10 @@ 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"] {
accent-color: #0a84ff; --range-accent: #0a84ff;
background: #2c2c2c; --range-track-bg: #2c2c2c;
accent-color: #0a84ff;
border-radius: 5px; border-radius: 5px;
height: 8px; height: 8px;
} }
@ -245,9 +252,10 @@ header p { opacity: .8; }
} }
/* Volume Slider - Light Theme */ /* Volume Slider - Light Theme */
[data-theme="light"] .control.volume input[type="range"] { [data-theme="light"] .control.volume input[type="range"] {
accent-color: #007aff; --range-accent: #007aff;
background: #e8e8ed; --range-track-bg: #e8e8ed;
accent-color: #007aff;
border-radius: 5px; border-radius: 5px;
height: 8px; height: 8px;
} }
@ -261,9 +269,10 @@ header p { opacity: .8; }
} }
/* Volume Slider - Rainbow Theme */ /* Volume Slider - Rainbow Theme */
[data-theme="rainbow"] .control.volume input[type="range"] { [data-theme="rainbow"] .control.volume input[type="range"] {
accent-color: #23a6d5; --range-accent: #23a6d5;
background: rgba(44,44,44,.8); --range-track-bg: rgba(44,44,44,.8);
accent-color: #23a6d5;
border-radius: 5px; border-radius: 5px;
height: 8px; height: 8px;
border: 1px solid #3a3a3c; border: 1px solid #3a3a3c;