fix(vu): clip grid arc to match needle swing range so rest = proper zero

The grid pattern was a 360° repeating conic gradient (visible across
the full upper 180° arc), while the needle only swings -45..+45.
That made the rest position at -45 sit *inside* the visible arc
rather than at the leftmost gridline — looked wrong.

Now:
- Grid lines start at the -45 angle (matches needle origin)
- Conic-gradient mask clips visibility to the 90° active wedge
- Leftmost gridline now coincides with the needle's rest rotation
  → looks like a real VU meter at zero (silence)
This commit is contained in:
2026-04-25 02:41:29 +03:00
parent d7f488ac70
commit 3de2b4496e
+14 -4
View File
@@ -7056,10 +7056,20 @@ body.audio-spectrum-live .now-playing .spectrum span {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: repeating-conic-gradient(from 195deg at 50% 100%, /* Grid lines every 9°, only inside the -45..+45 needle swing
transparent 0deg 4deg, so the leftmost line aligns with the rest position (proper zero). */
rgba(242, 235, 220, 0.08) 4deg 5deg, background: repeating-conic-gradient(from -45deg at 50% 100%,
transparent 5deg 9deg); rgba(242, 235, 220, 0.10) 0deg 0.6deg,
transparent 0.6deg 9deg);
/* Clip mask: only show the 90° active arc. */
-webkit-mask-image: conic-gradient(from -45deg at 50% 100%,
black 0deg,
black 90deg,
transparent 90deg 360deg);
mask-image: conic-gradient(from -45deg at 50% 100%,
black 0deg,
black 90deg,
transparent 90deg 360deg);
} }
.now-playing .vu-meter::after { .now-playing .vu-meter::after {
content: "VU"; content: "VU";