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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user