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

Automatically prepare the bundled Navidrome sidecar and replace demo content with real-library scan states and polling

Browse Source 
Hop-State: A_06FNEE4FJ502PSGDYQ3272G
Hop-Proposal: R_06FNED6AR1ZZM7CJH7ETC9G
Hop-Task: T_06FNEAPFW0DYEP35V3BMAHG
Hop-Attempt: AT_06FNEAPFW1QY3KAF1QM61N0
This commit is contained in:
cyph3rasi
2026-07-12 09:45:52 -07:00
committed by Hop
parent ed99fc7f09
commit 0168767819
9 changed files with 151 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+19
View File
@@ -153,6 +153,18 @@ main { min-width: 0; height: calc(100vh - var(--player-height)); overflow-y: aut
.empty-state h3 { margin: 12px 0 3px; color: var(--ink); font-size: 0.9rem; }
.empty-state p { margin: 0; font-size: 0.75rem; }
.library-status { display: grid; min-height: min(610px, calc(100vh - var(--player-height) - 120px)); max-width: 620px; place-items: center; align-content: center; margin: 0 auto; text-align: center; }
.library-status-icon { display: grid; width: 58px; height: 58px; margin-bottom: 22px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); }
.library-status-icon.is-scanning { color: var(--accent-bright); animation: scan-turn 3s linear infinite; }
.library-status h1 { margin: 11px 0 10px; color: var(--ink); font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 600; letter-spacing: -0.055em; }
.library-status p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 0.87rem; line-height: 1.65; }
.library-status > .button-secondary { margin-top: 25px; }
.scan-progress { display: flex; align-items: center; gap: 6px; margin-top: 26px; color: var(--faint); }
.scan-progress > span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); animation: scan-pulse 1.2s ease-in-out infinite; }
.scan-progress > span:nth-child(2) { animation-delay: 150ms; }
.scan-progress > span:nth-child(3) { animation-delay: 300ms; }
.scan-progress small { margin-left: 6px; font-size: 0.68rem; }
.settings-view { width: min(760px, calc(100% - 64px)); margin: 70px auto 120px; }
.settings-view h1 { margin: 10px 0 9px; font-size: 2.35rem; font-weight: 600; letter-spacing: -0.055em; }
.settings-view > p { max-width: 58ch; margin: 0 0 32px; color: var(--muted); line-height: 1.6; }
@@ -208,6 +220,11 @@ input[type="range"]::-webkit-slider-thumb { width: 10px; height: 10px; appearanc
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { opacity: 1; }
.player-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); }
.player-tools input { max-width: 90px; }
.player-bar--library-status { grid-template-columns: minmax(0, 1fr) auto; }
.player-library-status { display: flex; min-width: 0; align-items: center; gap: 12px; }
.player-library-status strong, .player-library-status small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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.is-open { transform: translateX(0); }
@@ -228,6 +245,8 @@ input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visib
.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); } }
@media (max-width: 1080px) {
.album-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }