GnosysLabs/Resonant
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Let playback traverse the full loaded library and show accessible checkmark feedback when tracks are added to the queue.

Browse Source 
Hop-State: A_06FNP2RD4Z5F8MM3JJDGC90
Hop-Proposal: R_06FNP2QTMQDCQ4AD45XGSN8
Hop-Task: T_06FNP1W0F7R3YK8AM2XH0EG
Hop-Attempt: AT_06FNP1W0F4Z53V2FHTSWX7R
This commit is contained in:
cyph3rasi
2026-07-13 03:34:38 -07:00
committed by Hop
parent a4b66954bd
commit 00832b4eda
4 changed files with 68 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+5 -1
View File
@@ -147,6 +147,8 @@ main { min-width: 0; height: calc(100vh - var(--player-height)); overflow-y: aut
.track-time { color: var(--faint); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.track-row .icon-button { width: 29px; height: 29px; }
.track-row .icon-button.is-active { background: transparent; }
.track-row .queue-add-button.is-confirmed { color: var(--success); background: oklch(0.72 0.12 145 / 0.1); }
.queue-add-button.is-confirmed svg { animation: queue-confirm 180ms cubic-bezier(.22, 1, .36, 1); }
.empty-state { display: grid; min-height: 220px; place-items: center; align-content: center; border-top: 1px solid var(--line); color: var(--faint); text-align: center; }
.empty-state h3 { margin: 12px 0 3px; color: var(--ink); font-size: 0.9rem; }
@@ -229,7 +231,7 @@ input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visib
.player-library-status strong { color: var(--ink); font-size: 0.76rem; }
.player-library-status small { max-width: 70vw; margin-top: 3px; color: var(--faint); font-size: 0.65rem; }
.queue-panel { position: fixed; z-index: 45; top: 0; right: 0; bottom: var(--player-height); width: min(370px, 92vw); padding: 25px; border-left: 1px solid var(--line); background: oklch(0.17 0.01 275); box-shadow: -24px 0 70px oklch(0.05 0.016 275 / 0.4); transform: translateX(105%); transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.queue-panel { position: fixed; z-index: 45; top: 0; right: 0; bottom: var(--player-height); width: min(370px, 92vw); overflow-y: auto; padding: 25px; border-left: 1px solid var(--line); background: oklch(0.17 0.01 275); box-shadow: -24px 0 70px oklch(0.05 0.016 275 / 0.4); transform: translateX(105%); transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.queue-panel.is-open { transform: translateX(0); }
.queue-header { display: flex; align-items: flex-start; justify-content: space-between; }
.queue-header h2 { margin: 5px 0 0; font-size: 1.35rem; letter-spacing: -0.04em; }
@@ -245,11 +247,13 @@ input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visib
.queue-item strong, .queue-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item strong { font-size: 0.72rem; }
.queue-item small { margin-top: 3px; color: var(--faint); font-size: 0.63rem; }
.queue-remainder { margin: 0; padding: 15px 0; color: var(--faint); font-size: 0.68rem; text-align: center; }
.nav-scrim { display: none; }
@keyframes pulse { 50% { opacity: 0.45; transform: scale(0.82); } }
@keyframes scan-turn { to { transform: rotate(360deg); } }
@keyframes scan-pulse { 50% { opacity: 0.3; transform: translateY(-2px); } }
@keyframes queue-confirm { from { opacity: 0.45; transform: scale(0.62); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 1080px) {
.album-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }