alexei.dolgolyov/media-player-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 20 Wiki Activity

ui(player): replace footer with About dialog + reclaim dead space

Browse Source 
- Move colophon (credit/email/source link) from sticky footer into
  a dedicated About dialog, opened from a new header button
- Drop ~64px of bottom container padding now that the footer is gone
- Loosen vinyl-stage aspect-ratio (1:1 -> 1:0.85) so the disc no
  longer leaves a tall empty band below the sleeve
- Switch tonearm height: 36% to aspect-ratio: 1 to keep proportions
  consistent across the new stage ratio
- Add about.* / dialog.close i18n keys for EN and RU
- Add vinyl-variants-mockup.html as next design reference target
This commit is contained in:
Admin
2026-05-01 11:28:10 +03:00
parent 46af2bb8cc
commit ec5178142e
7 changed files with 1031 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
media_server/static/css/styles.css
+56 -71
View File
@@ -2768,36 +2768,6 @@ button.primary svg {
}
}
/* Footer */
footer {
text-align: center;
padding: 0.75rem 1rem;
margin-top: 0.5rem;
color: var(--text-muted);
font-size: 0.75rem;
transition: padding-bottom 0.3s ease-in-out;
}
body.mini-player-visible footer {
padding-bottom: 70px;
}
footer a {
color: var(--accent);
text-decoration: none;
transition: color 0.2s;
}
footer a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
footer .separator {
margin: 0 0.5rem;
color: var(--text-muted);
}
/* ========================================
Media Browser Styles
======================================== */
@@ -3926,14 +3896,6 @@ html {
padding-right: max(1rem, env(safe-area-inset-right));
}
footer {
padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
body.mini-player-visible footer {
padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}
.connection-banner {
padding-top: max(10px, env(safe-area-inset-top));
}
@@ -3991,13 +3953,17 @@ body.mini-player-visible footer {
════════════════════════════════════════════════════════════════ */
/* ─── Container & header ────────────────────────────────────── */
/* The footer was removed in favour of an About dialog, so the page
bottom is now whatever the active tab content ends with. A 64px
bottom pad left a visible dead band under the player view; 24px
keeps a breath of breathing room without painting an empty page. */
.container {
max-width: 1280px;
padding: 56px 48px 64px;
padding: 56px 48px 24px;
}
@media (max-width: 720px) {
.container { padding: 48px 18px 56px; }
.container { padding: 48px 18px 24px; }
}
/* ─── Folio marks (page corners, all tabs) ────────────────── */
@@ -4450,9 +4416,15 @@ header .brand-sub {
}
/* ─── Vinyl stage ──────────────────────────────────────────── */
/* Aspect-ratio is intentionally wider than tall: the sleeve+disc
composition only fills the top ~82% of a square; a strict 1:1 stage
left an ~18% empty band below the disc and forced the grid row
taller than the masthead column, painting a large dead gap at the
bottom of the page. 1:0.85 trims that band while keeping the disc
(bottom anchor at top:19.4% + 63% = 82.4% of height) safely inside. */
.album-art-container.vinyl-stage {
position: relative;
aspect-ratio: 1;
aspect-ratio: 1 / 0.85;
width: 100%;
max-width: none;
padding: 0;
@@ -4589,7 +4561,7 @@ header .brand-sub {
top: 26%;
right: -6%;
width: 36%;
height: 36%;
aspect-ratio: 1;
pointer-events: none;
transform-origin: 88% 12%;
transform: rotate(-22deg);
@@ -6506,38 +6478,60 @@ dialog::backdrop {
.toast.info { border-color: var(--rule-strong); box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
/* ═══════════════════════════════════════════════════════════════
FOOTER (colophon)
ABOUT DIALOG (colophon)
═══════════════════════════════════════════════════════════════ */
footer {
margin-top: 36px;
padding: 20px 0 0;
border-top: 1px solid var(--rule-strong);
background: transparent;
.about-dialog {
max-width: 520px;
}
.about-credit {
font-family: var(--serif);
font-style: italic;
font-size: 17px;
line-height: 1.5;
color: var(--ink-soft);
margin: 0 0 22px;
font-variation-settings: 'opsz' 30;
}
.about-credit strong {
font-style: italic;
font-weight: 400;
font-size: 22px;
color: var(--ink);
letter-spacing: 0.01em;
font-variation-settings: 'opsz' 60;
display: block;
margin-top: 2px;
}
.about-links {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--rule);
}
.about-links li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 0;
border-bottom: 1px solid var(--rule);
}
.about-links-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
text-align: center;
}
footer a {
.about-links a {
font-family: var(--mono);
font-size: 12px;
color: var(--copper);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 200ms var(--ease);
word-break: break-all;
}
footer a:hover { border-bottom-color: var(--copper); }
footer strong {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 14px;
color: var(--ink-soft);
letter-spacing: 0.01em;
text-transform: none;
font-variation-settings: 'opsz' 30;
}
footer .separator { color: var(--ink-ghost); margin: 0 8px; }
.about-links a:hover { border-bottom-color: var(--copper); }
/* ═══════════════════════════════════════════════════════════════
DISPLAY container (monitors tab)
@@ -6597,7 +6591,6 @@ footer .separator { color: var(--ink-ghost); margin: 0 8px; }
.auth-modal h2 { font-size: 28px; }
.settings-section { padding: 20px; }
.settings-section summary { font-size: 22px; }
footer { font-size: 9px; }
}
/* ════════════════════════════════════════════════════════════════
@@ -8707,14 +8700,6 @@ select option {
padding: 0 !important;
}
/* ─── Footer: ultra-compact ───────────────────────────── */
footer {
font-size: 10px !important;
padding: 12px 12px !important;
letter-spacing: 0.04em;
}
footer .separator { margin: 0 4px !important; }
/* Auth modal: full-bleed feel on phones */
.auth-modal {
width: 92% !important;