got-feedBack/feedBack
1
0
Fork 0
mirror of https://github.com/got-feedBack/feedBack.git synced 2026-08-11 11:19:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(player): stop song name/timer overlapping the section map bar (#567)

Browse Source 
The section_map plugin injects #section-map as #player's first child — a
~20px bar pinned to top:0 (z-index:5). #player-hud is also top:0/absolute
but at z-index:10 with only py-3 (12px) top padding, so its song name
(top-left) and timer (top-right) paint on top of that bar.

Push the HUD's content below the bar when it is present. The general-
sibling combinator only matches when #section-map precedes #player-hud —
exactly how the plugin inserts it — so the bar-less layout is untouched.
ID-on-ID specificity overrides Tailwind's .py-3 top padding.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Byron Gamatos
2026-06-22 14:04:06 +02:00
committed by GitHub
co-authored by Claude Opus 4.8
parent 187d0bb978
commit 820a18648a
1 changed files with 11 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+11
View File
@@ -25,6 +25,17 @@ html { scroll-behavior: smooth; }
}
#highway { flex: 1; width: 100%; min-height: 0; }
/* The section_map plugin injects #section-map as #player's first child, a
~20px bar pinned to top:0. #player-hud is also top:0/absolute but at a
higher z-index, so its song name (top-left) and timer (top-right) would
paint on top of that bar. When the bar is present, push the HUD's content
below it, preserving the HUD's original py-3 (0.75rem) inset *under* the
bar (bar height + py-3). The general-sibling combinator only matches when
#section-map precedes #player-hud — which is exactly how the plugin inserts
it (#highway sits between them) — so the bar-less layout is untouched.
ID-on-ID specificity overrides Tailwind's .py-3 top padding. */
#section-map ~ #player-hud { padding-top: calc(20px + 0.75rem); }
/* Player controls need their own stacking context so visualization
plugins that paint absolutely-positioned overlays (e.g. the bundled
3D Highway's WebGL wrap at z-index:2, or any community viz plugin)