nvrl/pl8list-rewind
1
0 Fork 0
mirror of https://github.com/narrrl/pl8list-rewind.git synced 2026-11-13 17:17:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): unify player controls with pl8list lime

Browse Source
This commit is contained in:
nvrl committed 2026-11-04 20:26:42 +01:00
1 parent 3b89fd792b
commit b0beaa2f0d
10 files changed
+55 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/style.css
+46 -3
View File
@@ -9,7 +9,9 @@
--fg: #f2f2f2;
--muted: #b5b5b8;
--faint: #96969a;
--accent: #ff4d6d;
--accent: #a5d601;
--accent-hover: #b2e51a;
--danger: #ff8585;
--panel: rgba(18, 18, 20, 0.94);
--line: #ffffff1f;
--line-strong: #333;
@@ -1144,8 +1146,8 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
place-items: center;
padding: 1rem;
background:
radial-gradient(60rem 40rem at 20% 10%, #ff4d6d33, transparent 60%),
radial-gradient(50rem 40rem at 90% 90%, #4d6dff2e, transparent 60%),
radial-gradient(60rem 40rem at 20% 10%, #a5d60120, transparent 60%),
radial-gradient(50rem 40rem at 90% 90%, #a5d6010c, transparent 60%),
#050507;
}
@@ -1379,3 +1381,44 @@ body.zen .content { gap: 0.3rem; }
@media (max-width: 640px) and (max-height: 700px) {
body:has(#discovery-options:not([hidden])) .art { width: min(8rem, 18dvh, 44vw); }
}
/* pl8list brand controls; artist accents remain local to each track. */
#mode-tabs button[aria-pressed="true"] { background: var(--accent); color: #111; }
.login-box button[type=submit], .help-box button { color: #111; }
button.primary:hover, .login-box button[type=submit]:hover { background: var(--accent-hover); }
.link.danger, #login-error { color: var(--danger); }
button.danger:not(.link) { background: var(--danger); color: #111; }
/* One listening console, aligned to the waveform on every screen. */
.content .actions {
position: relative; inset: auto; translate: none; transform: none;
width: 100%; display: grid; grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr;
align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.75rem;
border: 1px solid var(--line); border-radius: 16px;
background: #141416d9; backdrop-filter: blur(16px);
}
.content .act { min-width: 0; min-height: 56px; justify-content: center; gap: 0.25rem; border-radius: 8px; }
.content .act .ring { width: 2rem; height: 2rem; background: none; box-shadow: none; border: none; backdrop-filter: none; }
.content .act:hover { background: var(--glass); }
.content .act.like.on { color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.content .act.like.on .ring { color: inherit; background: none; }
.content .actions .to-drop {
margin: 0; min-width: 0; min-height: 48px; padding: 0.5rem;
border-radius: 10px; background: var(--accent); border: 1px solid transparent;
color: #111; justify-content: center; font: 600 1rem/1.2 var(--font);
}
.content .actions .to-drop:hover { background: var(--accent-hover); }
.content .actions .to-drop:disabled { background: #292b28; border-color: var(--line); color: var(--muted); cursor: default; }
.content .time { gap: 0.5rem; }
.byline .pill { min-height: 32px; padding: 0.3rem 0.7rem; border-radius: 8px; border-color: var(--line); background: #ffffff09; }
body.zen .content .actions { display: none; }
@media (min-width: 900px) and (pointer: fine) {
.art { width: min(calc(14 * var(--u)), 35vh); }
.content { gap: 0.65rem; }
}
@media (max-width: 640px) {
.content { margin-bottom: 4.5rem; }
.content .actions { padding: 0.45rem; gap: 0.25rem; margin-top: 0.5rem; }
#up-next { bottom: max(0.8rem, env(safe-area-inset-bottom)); }
#toast { bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 4.6rem); }
}