From 9b84fdd0e566d49aae6eff52039c0a543e26592d Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 25 Apr 2026 02:44:57 +0300
Subject: [PATCH] fix(vu): drop conic-gradient mask, draw lines explicitly in
 0-90 range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 media_server/static/css/styles.css | 41 ++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css
index ac0f65c..d142033 100644
--- a/media_server/static/css/styles.css
+++ b/media_server/static/css/styles.css
@@ -7056,20 +7056,33 @@ body.audio-spectrum-live .now-playing .spectrum span {
     content: "";
     position: absolute;
     inset: 0;
-    /* 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);
+    /* 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);
 }
 .now-playing .vu-meter::after {
     content: "VU";