/* =================================================================== app-shell.css — v1.5.2.5 Mobile app shell: bottom navigation, safe-area support, and the expanded (full-screen) player overlay. Scope: this file is additive. It does not redeclare or override any selector from style.css — it only adds new ones (.mn-bottom-nav, .mn-expanded-player, and safe-area helpers). Loaded after style.css on every page. Depends on tokens already defined in style.css :root (--bg, --surface, --surface-2, --line, --steel, --steel-light, --ember, --ember-bright, --bone, --bone-dim, --radius, --ease). =================================================================== */ /* ---------- Safe-area base ---------- */ html { --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --bottom-nav-h: 58px; } /* Standalone/PWA display gets the real device chrome; browser tab doesn't need the extra top inset (status bar already handled by the browser UI itself). */ @media (display-mode: standalone) { .site-header { padding-top: var(--sat); } } /* Reserve room at the bottom of the document for the fixed bottom nav, in addition to (not instead of) the existing has-mini-player padding that player.js already toggles. The two stack: nav sits under the mini bar, mini bar sits above the nav. */ body.mn-has-bottom-nav { padding-bottom: calc(var(--bottom-nav-h) + var(--sab)); } body.mn-has-bottom-nav.has-mini-player { padding-bottom: calc(88px + var(--bottom-nav-h) + var(--sab)); } @media (min-width: 720px) { /* Bottom nav is a mobile-only affordance; desktop keeps the existing header nav and doesn't reserve the space. */ body.mn-has-bottom-nav { padding-bottom: 0; } body.mn-has-bottom-nav.has-mini-player { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } } /* ---------- Bottom navigation ---------- */ .mn-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9997; /* below .mn-player-bar (9999), .mn-expanded-player (10000), and .mn-queue-panel (10001) */ display: flex; align-items: stretch; height: calc(var(--bottom-nav-h) + var(--sab)); padding-bottom: var(--sab); padding-left: var(--sal); padding-right: var(--sar); background: rgba(12, 12, 14, 0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); } @media (min-width: 720px) { .mn-bottom-nav { display: none; } } .mn-bottom-nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--steel-light); text-decoration: none; font-family: var(--font-body); font-size: 11px; font-weight: 500; border: 0; background: none; -webkit-tap-highlight-color: transparent; transition: color 0.15s var(--ease); } .mn-bottom-nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; } .mn-bottom-nav-item.active { color: var(--ember-bright); } .mn-bottom-nav-item:active { color: var(--bone); } /* ---------- Expanded player (full-screen sheet) ---------- */ /* The sheet is position:fixed and visually covers the viewport, but without this the page underneath stays scrollable — that's what was producing a scrollbar while the sheet was open. */ /* Locking overflow on body alone isn't enough: this document's scroll container is (see style.css's html,body rule and its comment on why overflow-x can't be set to hidden there), so the underlying page keeps scrolling via unless it's locked too. Both classes are toggled together in expandPlayer()/ collapseExpandedPlayer() (js/player.js). */ html.mn-expanded-open, body.mn-expanded-open { overflow: hidden; } .mn-expanded-player { position: fixed; inset: 0; z-index: 10000; /* above the mini bar and bottom nav; the queue panel (10001) still opens above this */ background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 60%); padding: calc(var(--sat) + 14px) calc(var(--sar) + 20px) calc(var(--sab) + 20px) calc(var(--sal) + 20px); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.32s var(--ease); } .mn-expanded-player.open { transform: translateY(0); } /* Swipe-down-to-collapse (js/player.js wireExpandedSwipeDown): while dragging, JS sets an inline transform every touchmove to track the finger, so the normal open/close transition needs to be off or it fights the drag. Same pattern as .mn-np-info.swiping in style.css. */ .mn-expanded-player.mn-expanded-dragging { transition: none; } @media (prefers-reduced-motion: reduce) { .mn-expanded-player { transition: none; } } .mn-expanded-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; } .mn-expanded-collapse { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--bone-dim); font-size: 22px; line-height: 1; border-radius: var(--radius); } .mn-expanded-source { color: var(--steel-light); font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; } .mn-expanded-art { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 20px 0; } .mn-expanded-cover { width: min(78vw, 360px); height: min(78vw, 360px); object-fit: cover; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); background: var(--surface); } .mn-expanded-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-bottom: 18px; } .mn-expanded-meta-text { flex: 1 1 auto; min-width: 0; } .mn-expanded-title { display: block; color: var(--bone); font-family: var(--font-display); font-size: 20px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-expanded-artist { display: block; color: var(--steel-light); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-expanded-progress-row { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .mn-expanded-time { font-family: var(--font-mono); font-size: 11px; color: var(--steel-light); min-width: 34px; text-align: center; } .mn-expanded-controls-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex: 0 0 auto; margin: 18px 0; } .mn-expanded-play { width: 64px; height: 64px; border-radius: 50%; background: var(--ember); color: #fff; border: 0; font-size: 22px; display: flex; align-items: center; justify-content: center; } .mn-expanded-bottom-row { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* ---------- Smooth mobile page transitions ---------- */ /* Applied via a class the app-shell script toggles briefly on during same-app navigations that go through it; harmless no-op if nothing ever adds the class (progressive enhancement, not a routing rewrite). */ body.mn-page-enter { animation: mn-page-fade-in 0.18s var(--ease); } @keyframes mn-page-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.mn-page-enter { animation: none; } }