Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix: collapse status-badge row when inactive so player-info centers correctly

Browse Source 
.player-status-row had min-height:16px + margin-top:3px = 19px of permanent
invisible space, making player-info ~63px tall on desktop. Centered in 112px
this pushed the title to ~25px from top instead of ~34px.

Switched badges from opacity:0 (still in layout) to display:none, removed
min-height — row collapses to 0 when no badge is active so player-info
is only as tall as the visible title+album+artist rows (~44px), and
align-items:center on player-track places them at the true bar midpoint.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-19 20:59:56 +02:00
1 parent bc068551de
commit 32036b7312
1 file changed
+3 -3
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+3 -3
View File
@@ -714,9 +714,9 @@ button:focus{outline:none}
/* ── ARTIST PAGE ── */ /* ── ARTIST PAGE ── */
/* ── SHUFFLE/REPEAT STATUS BADGES ── */ /* ── SHUFFLE/REPEAT STATUS BADGES ── */
.player-status-row{display:flex;align-items:center;gap:6px;margin-top:3px;min-height:16px} .player-status-row{display:flex;align-items:center;gap:6px;margin-top:3px}
.status-badge{font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:10px;text-transform:uppercase;opacity:0;transition:opacity .2s,transform .2s;transform:scale(.8);pointer-events:none} .status-badge{display:none;font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:10px;text-transform:uppercase}
.status-badge.on{opacity:1;transform:scale(1)} .status-badge.on{display:inline-flex}
.badge-shuffle{background:var(--accent-dim);color:var(--accent)} .badge-shuffle{background:var(--accent-dim);color:var(--accent)}
.badge-repeat{background:var(--blue-dim);color:var(--blue)} .badge-repeat{background:var(--blue-dim);color:var(--blue)}