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

fix: center player bar content vertically; use theme accent for artist

Browse Source 
padding:0 12px 14px meant zero top padding, so align-items:center placed
content in the top 60px of the 74px bar — visually 7px above center.
Changed to padding:14px 12px (symmetric) so art+text center at exactly
37px, the visual midpoint of the bar. Progress strip stays absolute at bottom.

Artist color changed from hardcoded gold to var(--accent) in both the
bottom bar and Now Playing UI so it follows the active theme.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-19 20:50:24 +02:00
1 parent ea293a498f
commit a5048abd2e
1 file changed
+4 -4
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+4 -4
View File
@@ -241,8 +241,8 @@ button:focus{outline:none}
.player-title{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s} .player-title{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
/* Player bar clickable title/artist */ /* Player bar clickable title/artist */
.player-title:hover{color:var(--accent);text-decoration:underline} .player-title:hover{color:var(--accent);text-decoration:underline}
#player-artist-name{color:var(--accent-2,#f0b840)} #player-artist-name{color:var(--accent)}
#player-artist-name span:hover{color:var(--accent-2,#f0b840)} #player-artist-name span:hover{color:var(--accent)}
#player-album-name{color:var(--text3)} #player-album-name{color:var(--text3)}
#player-album-name:hover{color:var(--accent)} #player-album-name:hover{color:var(--accent)}
@@ -601,7 +601,7 @@ button:focus{outline:none}
.np-text{flex:1;min-width:0} .np-text{flex:1;min-width:0}
.np-title{font-size:22px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px} .np-title{font-size:22px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.np-artist{font-size:14px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s} .np-artist{font-size:14px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.np-artist+.np-artist{font-size:15px;font-weight:600;margin-top:3px;color:var(--accent-2,#f0b840)} .np-artist+.np-artist{font-size:15px;font-weight:600;margin-top:3px;color:var(--accent)}
#np-artist-name span:hover,#np-album-name:hover{color:var(--accent);cursor:pointer} #np-artist-name span:hover,#np-album-name:hover{color:var(--accent);cursor:pointer}
.np-star{ .np-star{
background:none;border:none;cursor:pointer; background:none;border:none;cursor:pointer;
@@ -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:0 12px 14px; padding:14px 12px;
gap:0 10px; gap:0 10px;
align-items:center; align-items:center;
} }