ui(vu): narrower 44deg swing, peak-based level, faster response; mini progress bar fix

- VU needle swings -22..+22deg instead of -45..+45 for a more realistic VU look
- Switch from RMS to peak frequency reading so the needle catches musical hits
- Faster attack (0.7) and release (0.25) so it swings rather than pinning
- Replace explicit grid lines with subtle repeating-conic-gradient ticks
- Scope mini progress bar styles to .mini-player; taller (3px), clickable
This commit is contained in:
2026-04-25 11:41:32 +03:00
parent 588a303c44
commit f2c82164e8
2 changed files with 26 additions and 51 deletions
+13 -32
View File
@@ -5377,12 +5377,17 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
}
#mini-current-time { color: var(--copper); font-weight: 500; }
.mini-progress-bar {
height: 2px;
.mini-player .mini-progress-bar {
flex: 0 0 auto;
height: 3px;
background: var(--rule-strong);
border-radius: 0;
cursor: pointer;
position: relative;
min-width: 0;
}
.mini-progress-fill {
.mini-player .mini-progress-fill {
height: 100%;
background: var(--copper);
box-shadow: 0 0 8px var(--copper-glow);
border-radius: 0;
@@ -7062,33 +7067,10 @@ body.audio-spectrum-live .now-playing .spectrum span {
content: "";
position: absolute;
inset: 0;
/* 11 grid lines (every 9°) drawn ONLY in the needle's -45°..+45°
swing range. No mask — the conic-gradient is explicitly transparent
outside the 90° active wedge so the leftmost line aligns with the
needle's rest position (proper zero). */
background: conic-gradient(from 315deg at 50% 100%,
rgba(242, 235, 220, 0.18) 0deg 0.5deg,
transparent 0.5deg 9deg,
rgba(242, 235, 220, 0.18) 9deg 9.5deg,
transparent 9.5deg 18deg,
rgba(242, 235, 220, 0.18) 18deg 18.5deg,
transparent 18.5deg 27deg,
rgba(242, 235, 220, 0.18) 27deg 27.5deg,
transparent 27.5deg 36deg,
rgba(242, 235, 220, 0.18) 36deg 36.5deg,
transparent 36.5deg 45deg,
rgba(242, 235, 220, 0.25) 45deg 45.5deg, /* slightly brighter centre line at 0 */
transparent 45.5deg 54deg,
rgba(242, 235, 220, 0.18) 54deg 54.5deg,
transparent 54.5deg 63deg,
rgba(242, 235, 220, 0.18) 63deg 63.5deg,
transparent 63.5deg 72deg,
rgba(242, 235, 220, 0.18) 72deg 72.5deg,
transparent 72.5deg 81deg,
rgba(242, 235, 220, 0.18) 81deg 81.5deg,
transparent 81.5deg 90deg,
rgba(242, 235, 220, 0.18) 90deg 90.5deg,
transparent 90.5deg 360deg);
background: repeating-conic-gradient(from 195deg at 50% 100%,
transparent 0deg 4deg,
rgba(242, 235, 220, 0.08) 4deg 5deg,
transparent 5deg 9deg);
}
.now-playing .vu-meter::after {
content: "VU";
@@ -7109,8 +7091,7 @@ body.audio-spectrum-live .now-playing .spectrum span {
height: 88%;
background: linear-gradient(to top, var(--copper) 0%, var(--copper-hi) 70%, var(--ink) 100%);
transform-origin: bottom center;
/* Rest at full-left like a real VU meter at silence (-∞ dB) */
transform: rotate(-45deg);
transform: rotate(-22deg);
transition: transform 350ms var(--ease);
box-shadow: 0 0 8px var(--copper-glow);
}