nate/hub
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now Playing card on the Music tab; Signal alerts (chime, desktop notification, unread count in tab title and app icon)
build-container / build (push) Successful in 7m4s
Details

Browse Source 
- Music: a card with art, seek bar and controls above the albums, artists and playlists
- Signal: chime, optional desktop notification when the app is in the background, (n) in the tab title, app badge; Settings -> Signal alerts (per device)
- README, player test stand-in updated

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-10-21 10:47:15 -04:00
1 parent d0070aa0bb
commit 522fdba4cd
4 files changed
+111 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/style.css
+23
View File
@@ -423,3 +423,26 @@ body:not(.editing) #view { padding-top: 8px; }
.sgdockin .sgm .sgmsgs { padding: 8px 4px; }
.sgdockin .sgb { max-width: 86%; }
@media (display-mode: standalone) { #sgfab { bottom: calc(var(--ph, 0px) + 22px + var(--sab, 0px)); } }
/* Now Playing card on the Music tab */
.npcard { display: grid; grid-template-columns: 112px 1fr; grid-template-areas: "art text" "art seek" "art ctl"; gap: 4px 18px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin: 12px 0 20px; }
.npc-art { grid-area: art; border: 0; padding: 0; background: var(--panel2); width: 112px; height: 112px; border-radius: 14px; overflow: hidden; cursor: pointer; align-self: start; }
.npc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.npc-text { grid-area: text; min-width: 0; align-self: end; }
.npc-text b, .npc-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npc-text b { font-size: 18px; } .npc-text small { color: var(--muted); }
.npc-lbl { font-size: 11px; letter-spacing: .08em; color: var(--accent) !important; font-weight: 700; margin-bottom: 2px; }
.npc-seek { grid-area: seek; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.npc-seek input { flex: 1; accent-color: var(--accent); min-width: 0; }
.npc-ctl { grid-area: ctl; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.npc-ctl .ibtn.on { color: var(--accent); position: relative; }
.npc-ctl .ibtn { position: relative; }
.npc-ctl .ibtn[data-r="1"]::after { content: '1'; position: absolute; font-size: 10px; font-weight: 700; right: 8px; bottom: 6px; }
.npc-ctl .ibtn.big { width: 52px; height: 52px; } .npc-ctl .ibtn.big svg { width: 26px; height: 26px; }
.npc-q { margin-left: auto; min-height: 38px; font-size: 14px; }
@media (max-width: 560px) {
.npcard { grid-template-columns: 76px 1fr; grid-template-areas: "art text" "seek seek" "ctl ctl"; padding: 12px; gap: 8px 12px; }
.npc-art { width: 76px; height: 76px; border-radius: 12px; align-self: center; }
.npc-text { align-self: center; } .npc-text b { font-size: 16px; }
.npc-ctl { justify-content: space-between; } .npc-q { display: none; }
}