danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Mobile: only show sidebar visualizer when the drawer is open

Browse source 
The visualizer is fixed at the desktop sidebar's edge; on mobile it floated over
the page content whenever music played, even with the off-canvas sidebar closed.
Hide it unless .sidebar.mobile-open (sibling selector, 3-class + !important to
beat the .active/.viz-* display rules). When the drawer opens it shows again.
This commit is contained in:
BoulderBadgeDad 2026-06-04 20:41:13 -07:00
parent 604c308e5c
commit 982653798f
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
webui/static/mobile.css
View file

@ -3516,3 +3516,15 @@
.adl-cancel-all-btn, .adl-cancel-all-btn,
.adl-clear-btn { flex: 1 1 auto; } .adl-clear-btn { flex: 1 1 auto; }
} }
@media (max-width: 768px) {
/* Sidebar visualizer is pinned at the (desktop) sidebar's right edge, so on
mobile it floats over the page content when the off-canvas sidebar drawer
is closed. Show it ONLY while the drawer is open. The .active/.viz-* rules
set display with 2-class specificity, so this 3-class + !important selector
is needed to beat them; when the drawer IS open it doesn't match, so the
visualizer's normal display rules take over again. */
.sidebar:not(.mobile-open) ~ .sidebar-visualizer {
display: none !important;
}
}