diff --git a/style.css b/style.css index 2ebbf43..8d5b6f4 100644 --- a/style.css +++ b/style.css @@ -222,7 +222,6 @@ header h1 { /* Adjust based on header height */ min-height: 0; overflow: hidden; - background: var(--bg-dark); /* Prevent deck box-shadows bleeding into padding gaps */ } /* LIBRARY SECTION */ @@ -390,20 +389,20 @@ header h1 { #deck-A { border: 2px solid var(--primary-cyan); - box-shadow: 0 0 25px rgba(0, 243, 255, 0.3); + box-shadow: inset 0 0 25px rgba(0, 243, 255, 0.3); } #deck-B { border: 2px solid var(--secondary-magenta); - box-shadow: 0 0 25px rgba(188, 19, 254, 0.3); + box-shadow: inset 0 0 25px rgba(188, 19, 254, 0.3); } .deck.playing { - box-shadow: 0 0 45px rgba(0, 243, 255, 0.5); + box-shadow: inset 0 0 45px rgba(0, 243, 255, 0.5); } #deck-B.playing { - box-shadow: 0 0 45px rgba(188, 19, 254, 0.5); + box-shadow: inset 0 0 45px rgba(188, 19, 254, 0.5); } .deck-header { @@ -547,14 +546,11 @@ canvas { border: 1px solid #333; } -/* VU meter canvases — transparent when idle so they don't show as black blocks */ +/* VU meter canvases — hidden by default to prevent black-block gap; + JS can show them during playback if desired */ #viz-A, #viz-B { - background: transparent !important; - border: none !important; - border-top: 1px solid rgba(255, 255, 255, 0.05) !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; - margin: 2px 0 6px 0 !important; + display: none !important; } @@ -1241,6 +1237,7 @@ input[type=range] { #viz-A, #viz-B, #viz-listener { + /* viz-A/B hidden globally; only viz-listener needs height */ height: 80px !important; } @@ -3040,10 +3037,10 @@ body.listening-active .landscape-prompt { gap: 6px; } - /* Smaller VU meters */ + /* Smaller VU meters — now hidden globally, rule kept for listener canvas fallback */ canvas#viz-A, canvas#viz-B { - height: 60px; + display: none !important; } /* Compact library */