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:
1 parent
4c4dee4e55
commit
0e05740df7
3 files changed
+7
-4
No files matched your search
+3
-2
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user