fix(web): center NowPlaying star vertically with the whole track-info block
The favorite star lived inside .np-title-row, so it sat pinned to the title line rather than centered against the title + album + artist block. Move it out to be a flex sibling of .np-text inside .np-info (align-items:center), so it centers on the full text block. Bump SW cache to ns-v43. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
1 parent
e78ce43019
commit
179e0eb902
3 files changed
+6
-6
No files matched your search
+3
-3
@@ -1067,9 +1067,6 @@
|
|||||||
<div class="np-text">
|
<div class="np-text">
|
||||||
<div class="np-title-row">
|
<div class="np-title-row">
|
||||||
<div class="np-title" id="np-title">Kein Titel</div>
|
<div class="np-title" id="np-title">Kein Titel</div>
|
||||||
<button class="np-star" id="np-star-btn" onclick="npToggleStar()">
|
|
||||||
<svg id="np-star-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="2" style="transition:fill .2s,stroke .2s"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="np-artist">
|
<div class="np-artist">
|
||||||
<span id="np-album-name" onclick="npGoAlbum()" style="cursor:pointer;opacity:.8">—</span>
|
<span id="np-album-name" onclick="npGoAlbum()" style="cursor:pointer;opacity:.8">—</span>
|
||||||
@@ -1078,6 +1075,9 @@
|
|||||||
<span id="np-artist-name">—</span>
|
<span id="np-artist-name">—</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button class="np-star" id="np-star-btn" onclick="npToggleStar()">
|
||||||
|
<svg id="np-star-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="2" style="transition:fill .2s,stroke .2s"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="np-progress">
|
<div class="np-progress">
|
||||||
|
|||||||
+1
-1
@@ -1,4 +1,4 @@
|
|||||||
const CACHE = 'ns-v42';
|
const CACHE = 'ns-v43';
|
||||||
const PRECACHE = ['/', 'index.html', 'manifest.json', 'icon.svg'];
|
const PRECACHE = ['/', 'index.html', 'manifest.json', 'icon.svg'];
|
||||||
const SKIP_PATHS = ['/rest/stream', '/rest/download', '/config.js'];
|
const SKIP_PATHS = ['/rest/stream', '/rest/download', '/config.js'];
|
||||||
// Auth token params stripped from cache keys so artwork survives across sessions/token refreshes.
|
// Auth token params stripped from cache keys so artwork survives across sessions/token refreshes.
|
||||||
|
|||||||
+2
-2
@@ -680,8 +680,8 @@ button:focus{outline:none}
|
|||||||
.np-cover .no-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px}
|
.np-cover .no-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px}
|
||||||
|
|
||||||
/* Song info */
|
/* Song info */
|
||||||
.np-info{width:100%;margin-bottom:24px}
|
.np-info{width:100%;margin-bottom:24px;display:flex;align-items:center;gap:10px}
|
||||||
.np-text{min-width:0}
|
.np-text{min-width:0;flex:1}
|
||||||
.np-title-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
|
.np-title-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
|
||||||
.np-title{font-size:22px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
|
.np-title{font-size:22px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
|
||||||
.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}
|
||||||
|
|||||||
Reference in new issue
Block a user