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:
@@ -7056,10 +7056,20 @@ body.audio-spectrum-live .now-playing .spectrum span {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: repeating-conic-gradient(from 195deg at 50% 100%,
|
||||
transparent 0deg 4deg,
|
||||
rgba(242, 235, 220, 0.08) 4deg 5deg,
|
||||
transparent 5deg 9deg);
|
||||
/* Grid lines every 9°, only inside the -45..+45 needle swing
|
||||
so the leftmost line aligns with the rest position (proper zero). */
|
||||
background: repeating-conic-gradient(from -45deg at 50% 100%,
|
||||
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 {
|
||||
content: "VU";
|
||||
|
||||
Reference in New Issue
Block a user