alexei.dolgolyov/media-player-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 20 Wiki Activity

fix(vu): drop conic-gradient mask, draw lines explicitly in 0-90 range

Browse Source 
The mask + repeating-conic-gradient combo was rendering the visible
arc shifted to the right (mask appeared centred on 12-3 o'clock
instead of 10:30-1:30). Cause unclear — likely a browser quirk
around `from -45deg` interaction between the two conic-gradients.

Replaced with a single non-repeating conic-gradient using `from 315deg`
(the positive equivalent of -45deg). Lines are drawn explicitly at
every 9° from 0° to 90° in the gradient (-45° to +45° in standard
orientation) — 11 lines total, with the centre line (at 0°) slightly
brighter so it reads as the meter's "0 VU" mark. Outside the 90°
active wedge the gradient is transparent, so no mask is needed.

Result: the leftmost gridline now sits exactly where the needle rests
at -45°, like a real VU meter at silence.
This commit is contained in:
Admin
2026-04-25 02:44:57 +03:00
parent 3de2b4496e
commit 9b84fdd0e5
1 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
media_server/static/css/styles.css
+27 -14
View File
@@ -7056,20 +7056,33 @@ body.audio-spectrum-live .now-playing .spectrum span {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
/* Grid lines every 9°, only inside the -45..+45 needle swing /* 11 grid lines (every 9°) drawn ONLY in the needle's -45°..+45°
so the leftmost line aligns with the rest position (proper zero). */ swing range. No mask — the conic-gradient is explicitly transparent
background: repeating-conic-gradient(from -45deg at 50% 100%, outside the 90° active wedge so the leftmost line aligns with the
rgba(242, 235, 220, 0.10) 0deg 0.6deg, needle's rest position (proper zero). */
transparent 0.6deg 9deg); background: conic-gradient(from 315deg at 50% 100%,
/* Clip mask: only show the 90° active arc. */ rgba(242, 235, 220, 0.18) 0deg 0.5deg,
-webkit-mask-image: conic-gradient(from -45deg at 50% 100%, transparent 0.5deg 9deg,
black 0deg, rgba(242, 235, 220, 0.18) 9deg 9.5deg,
black 90deg, transparent 9.5deg 18deg,
transparent 90deg 360deg); rgba(242, 235, 220, 0.18) 18deg 18.5deg,
mask-image: conic-gradient(from -45deg at 50% 100%, transparent 18.5deg 27deg,
black 0deg, rgba(242, 235, 220, 0.18) 27deg 27.5deg,
black 90deg, transparent 27.5deg 36deg,
transparent 90deg 360deg); 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);
} }
.now-playing .vu-meter::after { .now-playing .vu-meter::after {
content: "VU"; content: "VU";