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";