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

fix(ui): refine desktop player layout

Browse Source
This commit is contained in:
nvrl committed 2026-11-04 22:51:23 +01:00
1 parent 158df8657d
commit 9a316514d5
2 files changed
+15 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/index.html
+2 -2
View File
@@ -61,8 +61,8 @@
</div>
</header>
<div id="discovery-options" hidden>
<label>chart <select id="chart-kind"><option value="sales">best sellers</option><option value="free">top free downloads</option></select></label>
<label>period <select id="chart-period"><option value="week">this week</option><option value="year">this year</option><option value="all-time">all time</option></select></label>
<label><span class="sr-only">chart</span><select id="chart-kind"><option value="sales">best sellers</option><option value="free">top free downloads</option></select></label>
<label><span class="sr-only">period</span><select id="chart-period"><option value="week">this week</option><option value="year">this year</option><option value="all-time">all time</option></select></label>
</div>
<button type="button" id="active-filters" hidden></button>
web/src/style.css
+13 -3
View File
@@ -86,6 +86,7 @@ body.zen #bar { display: none; }
#discovery-options { top: 4.2rem; display: flex; gap: 0.5rem; align-items: center; }
#discovery-options label { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.75rem; }
#discovery-options select { color: var(--fg); background: #18181b; border: 1px solid #ffffff40; border-radius: 8px; padding: 0.45rem; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#active-filters { top: 7.3rem; padding: 0.35rem 0.7rem; background: #19191de8; border-radius: 8px; font-size: 0.75rem; white-space: nowrap; }
body:has(#discovery-options[hidden]) #active-filters { top: 4.3rem; }
body.zen :is(#discovery-options, #active-filters) { display: none; }
@@ -1344,6 +1345,13 @@ body.zen .content { gap: 0.3rem; }
.bar-end { gap: 0.45rem; }
.bar-end .icon-btn, .avatar-btn { flex-shrink: 0; border-radius: 50%; }
#discovery-options { top: 4.8rem; }
#discovery-options { gap: 0; padding: 0.2rem; border: 1px solid #ffffff18; border-radius: 999px; background: #161619d9; backdrop-filter: blur(12px); }
#discovery-options label { position: relative; }
#discovery-options label + label { border-left: 1px solid #ffffff20; }
#discovery-options label::after { content: ''; position: absolute; right: 0.85rem; top: 50%; width: 0.35rem; height: 0.35rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
#discovery-options select { appearance: none; min-height: 2rem; padding: 0.4rem 2rem 0.4rem 0.8rem; border: 0; border-radius: 999px; background: transparent; font-size: 0.8rem; cursor: pointer; }
#discovery-options select:hover { background: #ffffff12; }
#discovery-options select option { color: #fff; background: #18181b; }
#active-filters { top: 7.8rem; }
.time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem 0.5rem; }
.time .cur { grid-column: 1; grid-row: 1; justify-self: start; }
@@ -1355,7 +1363,7 @@ body.zen .content { gap: 0.3rem; }
.art { width: min(14rem, 29dvh, 58vw); }
.card.liquid .art { margin-bottom: 1.5rem; }
.content { margin-top: 2.5rem; }
#discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); gap: 0.75rem; }
#discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); gap: 0; }
#active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 9.2rem); }
}
@media (max-width: 640px) and (max-height: 700px) {
@@ -1383,7 +1391,7 @@ button.danger:not(.link) { background: var(--danger); color: #111; }
.content .actions {
position: relative; inset: auto; translate: none; transform: none;
width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding: 0.75rem 0 0;
align-items: center; gap: 0.5rem; margin-top: 0.65rem; padding: 0.75rem 0 0;
border: none; border-top: 1px solid #ffffff26; border-radius: 0;
background: none;
}
@@ -1405,8 +1413,10 @@ button.danger:not(.link) { background: var(--danger); color: #111; }
.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); }
.art { width: min(calc(16 * var(--u)), 39vh); }
.content { gap: 0.65rem; }
.card.liquid .art { margin-bottom: 1.25rem; }
.content .time { min-height: 1.2rem; }
}
@media (max-width: 640px) {
.content { margin-bottom: 4.5rem; }