feat: show title/album/artist order in bottom bar and now playing UI

- Bottom bar: player-info is now a centered flex column so text block
  aligns properly against the art circle
- Now playing: split artist·album line into album (above) + artist (below)
  matching the bottom bar layout; removed np-album-sep reference
- Removed stale np-album-sep style.display call from player.js

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-19 20:20:04 +02:00
1 parent 4c4dee4e55
commit 0e05740df7
3 files changed
+7 -4

No files matched your search

+3 -2
View File
@@ -237,7 +237,7 @@ button:focus{outline:none}
.player-art::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px rgba(255,255,255,.15);pointer-events:none;opacity:0;transition:opacity .3s}
.player-art.spinning::after{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.player-info{min-width:0}
.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 bar clickable title/artist */
.player-title:hover{color:var(--accent);text-decoration:underline}
@@ -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:2px}
.player-artist{font-size:11px;color:var(--text2);margin-top:1px}
.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}
@@ -601,6 +601,7 @@ button:focus{outline:none}
.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-name span:hover,#np-album-name:hover{color:var(--accent);cursor:pointer}
.np-star{
background:none;border:none;cursor:pointer;