From 3de2b4496e969a8b4acb2b23309d8b4c61704133 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 25 Apr 2026 02:41:29 +0300 Subject: [PATCH] fix(vu): clip grid arc to match needle swing range so rest = proper zero MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- media_server/static/css/styles.css | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css index aa20e50..ac0f65c 100644 --- a/media_server/static/css/styles.css +++ b/media_server/static/css/styles.css @@ -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";