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

UI: Volume-Regler in Toolbar verschoben, Spielt-Anzeige persistent

Browse source 
- Volume-Control von Bottom-Bar in Toolbar verschoben (links von Random)
- Pill-förmiges Design passend zu Size-Slider
- "Spielt" Anzeige bleibt bis Stop oder neuer Sound sichtbar
- Anfangsbuchstaben nur beim ersten Sound jeder Gruppe

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bot 2026-03-01 15:37:40 +01:00
parent 5f0b06550e
commit 4661c366fb
2 changed files with 54 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

43
web/src/styles.css
View file

@ -1025,57 +1025,64 @@ input, select {
.np-wave-bar:nth-child(3) { height: 6px; animation-delay: 240ms; }
.np-wave-bar:nth-child(4) { height: 11px; animation-delay: 80ms; }
/* ── Volume ── */
.volume-section {
/* ── Volume Control (Toolbar) ── */
.volume-control {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
gap: 6px;
padding: 4px 10px;
border-radius: 20px;
background: var(--bg-tertiary);
border: 1px solid rgba(255, 255, 255, .06);
}
.volume-icon {
font-size: 18px;
color: var(--text-muted);
.vol-icon {
font-size: 16px;
color: var(--text-faint);
cursor: pointer;
transition: color var(--transition);
user-select: none;
}
.volume-icon:hover {
.vol-icon:hover {
color: var(--text-normal);
}
.volume-slider {
.vol-slider {
-webkit-appearance: none;
appearance: none;
width: 90px;
width: 80px;
height: 3px;
border-radius: 2px;
background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--vol, 80%), var(--bg-tertiary) var(--vol, 80%));
background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--vol, 80%), var(--bg-modifier-selected) var(--vol, 80%));
outline: none;
cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
.vol-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
background: var(--accent);
cursor: pointer;
transition: transform var(--transition);
}
.volume-slider::-moz-range-thumb {
.vol-slider::-webkit-slider-thumb:hover {
transform: scale(1.3);
}
.vol-slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
background: var(--accent);
border: none;
cursor: pointer;
}
.volume-pct {
.vol-pct {
font-size: 11px;
color: var(--text-faint);
min-width: 28px;