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

fix: desktop player-track stretch + mobile padding breathing room

Browse Source 
Desktop: player-track had align-self:center (from grid align-items:center),
collapsing it to 52px content height. align-items:center inside it then
centered against 52px, not the full 112px bar — text appeared at top.
align-self:stretch forces player-track to fill the bar height so internal
centering works correctly.

Mobile: padding:14px 12px was too symmetric — art filled the 46px content
area exactly and touched the progress strip. Changed to padding:6px 12px 14px
(6px top breathing room, 14px bottom for progress strip, ~54px content area).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-19 20:56:16 +02:00
1 parent a5048abd2e
commit bc068551de
1 file changed
+2 -2
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+2 -2
View File
@@ -228,7 +228,7 @@ button:focus{outline:none}
.player{position:fixed;bottom:0;left:0;right:0;height:var(--player-h);background:rgba(8,8,20,.93);backdrop-filter:blur(28px);border-top:1px solid var(--border2);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;padding:0 20px;z-index:100;will-change:transform} .player{position:fixed;bottom:0;left:0;right:0;height:var(--player-h);background:rgba(8,8,20,.93);backdrop-filter:blur(28px);border-top:1px solid var(--border2);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;padding:0 20px;z-index:100;will-change:transform}
.player-drag-handle{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:32px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .2s,width .2s;pointer-events:none} .player-drag-handle{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:32px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .2s,width .2s;pointer-events:none}
.player.dragging .player-drag-handle{background:rgba(255,255,255,.45);width:44px} .player.dragging .player-drag-handle{background:rgba(255,255,255,.45);width:44px}
.player-track{min-width:0;display:flex;align-items:center;gap:10px;overflow:visible} .player-track{min-width:0;display:flex;align-items:center;gap:10px;overflow:visible;align-self:stretch}
.player-art{width:52px;height:52px;border-radius:50%;background:var(--surface2);flex-shrink:0;overflow:hidden;position:relative;box-shadow:0 0 0 2px var(--surface2),0 0 0 4px rgba(255,255,255,.08)} .player-art{width:52px;height:52px;border-radius:50%;background:var(--surface2);flex-shrink:0;overflow:hidden;position:relative;box-shadow:0 0 0 2px var(--surface2),0 0 0 4px rgba(255,255,255,.08)}
.player-art img{width:100%;height:100%;object-fit:cover;border-radius:50%} .player-art img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.player-art .no-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text3)} .player-art .no-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text3)}
@@ -817,7 +817,7 @@ button:focus{outline:none}
display:grid!important; display:grid!important;
grid-template-columns:1fr auto!important; grid-template-columns:1fr auto!important;
grid-template-rows:1fr!important; grid-template-rows:1fr!important;
padding:14px 12px; padding:6px 12px 14px;
gap:0 10px; gap:0 10px;
align-items:center; align-items:center;
} }