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

feat: move now-playing star inline with title

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-24 16:17:54 +02:00
1 parent b63d93114a
commit c03463b66b
2 files changed
+10 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+5 -3
View File
@@ -975,7 +975,12 @@
<div class="np-info"> <div class="np-info">
<div class="np-text"> <div class="np-text">
<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 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>
</div> </div>
@@ -983,9 +988,6 @@
<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="26" height="26" 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">
styles.css
+5 -4
View File
@@ -637,15 +637,16 @@ 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%;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px} .np-info{width:100%;margin-bottom:24px}
.np-text{flex:1;min-width:0} .np-text{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-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-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)} .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;
padding:8px;margin-left:8px;flex-shrink:0; padding:4px;flex-shrink:0;
display:flex;align-items:center; display:flex;align-items:center;
transition:transform .15s; transition:transform .15s;
} }