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

fix: tighten player bar line-height; accent color for artist in bar + NP

Browse Source 
- line-height:1.2 on title and artist rows keeps the text block within
  the 46px art circle so it no longer overflows above/below
- Artist name uses accent color (gold) in both the bottom bar and the
  Now Playing UI, making it immediately distinguishable from the album

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-19 20:39:28 +02:00
1 parent 494361191a
commit ea293a498f
1 file changed
+5 -5
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+5 -5
View File
@@ -238,10 +238,10 @@ button:focus{outline:none}
.player-art.spinning::after{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.player-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
.player-title{font-size:13px;font-weight:600;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-title:hover{color:var(--accent);text-decoration:underline}
#player-artist-name{color:var(--text2)}
#player-artist-name{color:var(--accent-2,#f0b840)}
#player-artist-name span:hover{color:var(--accent-2,#f0b840)}
#player-album-name{color:var(--text3)}
#player-album-name:hover{color:var(--accent)}
@@ -263,7 +263,7 @@ button:focus{outline:none}
.np-sheet-item.danger{color:var(--danger)}
.np-sheet-item.danger svg{color:var(--danger)}
.player-artist{font-size:11px;color:var(--text2);margin-top:1px}
.player-artist{font-size:11px;color:var(--text2);margin-top:1px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-badge{display:inline-block;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle}
.player-controls{display:flex;flex-direction:column;align-items:center;gap:7px;width:420px;padding:0 24px}
.ctrl-buttons{display:flex;align-items:center;gap:10px}
@@ -600,8 +600,8 @@ button:focus{outline:none}
.np-info{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.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-artist{font-size:15px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.np-artist+.np-artist{font-size:13px;margin-top:2px;color:rgba(255,255,255,.45)}
.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-name span:hover,#np-album-name:hover{color:var(--accent);cursor:pointer}
.np-star{
background:none;border:none;cursor:pointer;