/* ═══════════════════════════════════════════════════════════════════ PopUp CMS — Audio Player, 70's Technics Hi-Fi edition Layout: spectrum window (waveform + EQ) full-width on top; bottom bar with the title left and the transport key + countdown counter right. THEME SYSTEM — each palette defined exactly ONCE ────────────────────────────────────────────────── All themeable values are CSS custom properties; the components below only ever read var(--pp-*). Two palette blocks cover every state via a specificity ladder (no !important, no duplication): tier 0 (0,1,0) :root → dark default* tier 1 (0,2,0) :root[data-force-color-mode] → site mode tier 2 (0,2,1+) html:root[data-popup-player-theme] → force / invert element .popup-player[data-popup-player-theme] → per instance * dark is the DEFAULT, mirroring site.css (:root = dark palette there too). The light palette applies when the site mode is light, when the player is forced light, when "invert" meets a dark/default site, or per-instance. The light block comes AFTER the dark block so, at equal or lower tier, it wins where both match. USAGE ───── • Do nothing: player follows the site color mode. • Force (from config.php): compiles to with value light | dark | invert. • Override one player: ═══════════════════════════════════════════════════════════════════ */ /* ── DARK palette — default, site dark, forced dark, invert-on-light, per-instance dark ─────────────────────────────────────────────── */ :root, :root[data-force-color-mode="dark"], html:root[data-popup-player-theme="dark"], html:root[data-popup-player-theme="invert"][data-force-color-mode="light"], .popup-player[data-popup-player-theme="dark"] { --pp-bg: linear-gradient(180deg, #17171a 0%, #101013 60%, #0b0b0d 100%); --pp-border: #26262b; --pp-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.45); --pp-spectrum-bg: #000; --pp-spectrum-padding: 3px 12px; --pp-spectrum-radius: 6px; --pp-spectrum-border: 1px solid rgba(108,108,108,.31); --pp-spectrum-shadow: inset 0 1px 5px rgba(0,0,0,.9), inset 0 0 0 1px #1a1a1e; --pp-wave-fill: #33343a; --pp-wave-played-fill: #51525b; --pp-progress-stroke: #8a8b9322; --pp-title-color: #8f8f98; --pp-btn-bg: linear-gradient(180deg, #3c3c41 0%, #26262b 55%, #17171a 100%); --pp-btn-border: #0b0b0d; --pp-btn-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -3px 5px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.5); --pp-btn-shadow-hover: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 -3px 5px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.55); --pp-icon-color: #e8e6df; --pp-focus-outline: #6f6f78; --pp-time-color: rgb(164, 164, 164); --pp-time-shadow: 0 0 8px rgba(255,182,77,.35); --pp-time-full-color: rgb(210, 210, 210); --pp-fake-wave-fill: #232327; --pp-fake-wave-played-fill: #303036; --pp-comingsoon-bg: #101013; --pp-comingsoon-border: #33343a; --pp-comingsoon-color: #8f8f98; } /* ── LIGHT palette — site light, forced light, invert-on-dark/default, per-instance light (kept after dark so it wins at its tiers) ──── */ :root[data-force-color-mode="light"], html:root[data-popup-player-theme="light"], html:root[data-popup-player-theme="invert"]:not([data-force-color-mode="light"]), .popup-player[data-popup-player-theme="light"] { --pp-bg: linear-gradient(180deg, #f6f3ea 0%, #ece8dc 60%, #e4dfd1 100%); --pp-border: #b8b2a2; --pp-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 10px rgba(0,0,0,.10); --pp-spectrum-bg: transparent; --pp-spectrum-padding: 0; --pp-spectrum-radius: 0; --pp-spectrum-border: none; --pp-spectrum-shadow: none; --pp-wave-fill: #b0aaa0; --pp-wave-played-fill: #7a746a; --pp-progress-stroke: #4a4a4a22; --pp-title-color: #6e685c; --pp-btn-bg: linear-gradient(180deg, #fbfaf7 0%, #eae6db 55%, #d9d4c5 100%); --pp-btn-border: #b0aa9a; --pp-btn-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.16); --pp-btn-shadow-hover: inset 0 0 0 2px rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.10), 0 3px 7px rgba(0,0,0,.20); --pp-icon-color: #3f3e39; --pp-focus-outline: #8a8577; --pp-time-color: #5a5449; --pp-time-shadow: none; --pp-time-full-color: #3f3a30; --pp-fake-wave-fill: #ded9cd; --pp-fake-wave-played-fill: #cec8ba; --pp-comingsoon-bg: #f0ede4; --pp-comingsoon-border: #b0aaa0; --pp-comingsoon-color: #7a746a; } /* ═══════════════════════════════════════════════════════════════════ COMPONENTS — read the variables above, never repeat a themed value. ═══════════════════════════════════════════════════════════════════ */ /* ── Console face ─────────────────────────────────────────────────── */ .pp-root { background: var(--pp-bg); border: 1px solid var(--pp-border); border-radius: 10px; padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; max-width: 900px; width: 100%; box-shadow: var(--pp-shadow); margin: 2em auto; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ── Spectrum window (waveform + aligned EQ overlay) ──────────────── */ .pp-middle-col { position: relative; display: flex; align-items: center; width: 100%; height: 64px; /* fixed height keeps wave + EQ centered */ min-width: 0; background: var(--pp-spectrum-bg); padding: var(--pp-spectrum-padding); border-radius: var(--pp-spectrum-radius); border: var(--pp-spectrum-border); box-shadow: var(--pp-spectrum-shadow); box-sizing: border-box; } .pp-waveform-container { position: relative; /* anchor for the EQ overlay */ cursor: pointer; user-select: none; height: 100%; width: 100%; display: flex; align-items: center; } .pp-waveform-svg { width: 100%; height: 100%; display: block; } .pp-wave-bar { fill: var(--pp-wave-fill); transition: fill 0.15s ease; } .pp-wave-bar.played { fill: var(--pp-wave-played-fill); } .pp-progress-line { stroke: var(--pp-progress-stroke); stroke-width: 1.5; pointer-events: none; } /* ── Bottom bar: title · transport key · counter ──────────────────── */ .pp-footer { display: flex; align-items: center; gap: 16px; padding-top: 10px; min-height: 42px; } /* Cassette-label title */ .pp-title-display { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pp-title-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Transport key — horizontal deck button, brushed face, amber lamp */ .pp-play-btn { flex: 0 0 auto; width: 44px; height: 22px; border-radius: 8px; background: var(--pp-btn-bg); border: 1px solid var(--pp-btn-border); box-shadow: var(--pp-btn-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; position: relative; padding: 0; } .pp-play-btn:hover { filter: brightness(1.04); box-shadow: var(--pp-btn-shadow-hover); } .pp-play-btn:focus-visible { outline: 2px solid var(--pp-focus-outline); outline-offset: 3px; } .pp-play-btn:focus { outline: none; } .pp-icon { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 8px; border-color: transparent transparent transparent var(--pp-icon-color); margin-left: 3px; transition: all 0.15s ease; } .pp-play-btn.playing .pp-icon { border-width: 0 2px 0 2px; border-color: transparent var(--pp-icon-color) transparent var(--pp-icon-color); width: 6px; height: 8px; margin-left: 0; } /* VFD-style counter: −MM:SS countdown; full readout on hover (.is-full) */ .pp-time-display { flex: 0 0 auto; min-width: 58px; text-align: right; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; color: var(--pp-time-color); text-shadow: var(--pp-time-shadow); cursor: default; } .pp-time-display.is-full { color: var(--pp-time-full-color); } /* ── Fake / Dummy SVG States ────────────────────────────────────────── */ .pp-root.is-fake .pp-wave-bar { fill: var(--pp-fake-wave-fill); } .pp-root.is-fake .pp-wave-bar.played { fill: var(--pp-fake-wave-played-fill); } .pp-root.is-fake .pp-progress-line { /* Intentionally static (not themed) — original design kept this muted/dashed in both modes. */ stroke: #c4bfb2; stroke-dasharray: 3, 3; } /* ── Coming Soon State ──────────────────────────────────────────────── */ .pp-coming-soon { background: var(--pp-comingsoon-bg); border: 1px dashed var(--pp-comingsoon-border); border-radius: 10px; padding: 40px 50px; text-align: center; color: var(--pp-comingsoon-color); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin: 2em auto; max-width: 900px; } .pp-coming-soon small { display: block; margin-top: 8px; font-size: 11px; opacity: 0.7; letter-spacing: 0.5px; } /* ── Mobile ─────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .pp-root { padding: 12px 12px 9px; gap: 8px; } .pp-middle-col { height: 56px; } .pp-footer { gap: 10px; padding-top: 8px; } .pp-title-display { font-size: 10px; letter-spacing: 1px; } .pp-play-btn { width: 44px; height: 22px; border-radius: 7px; } .pp-time-display { font-size: 13px; min-width: 50px; } } /* ── Raw editor / no-JS placeholder ─────────────────────────────────── Approximates the console: key on top, title bar, counter below. Themes automatically — the vars inherit from :root, so this needs no theme rules of its own anymore. ──────────────────────────────── */ #popup-live-editor .popup-player { background: var(--pp-bg); border: 1px solid var(--pp-border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 900px; width: 100%; box-shadow: var(--pp-shadow); margin: 2em auto; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Transport key placeholder */ #popup-live-editor .popup-player::before { content: ""; display: block; width: 60px; height: 38px; border-radius: 7px; background-color: var(--pp-btn-bg); border: 1px solid var(--pp-btn-border); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: 42% center; background-size: 12px; flex-shrink: 0; } /* Title placeholder */ #popup-live-editor .popup-player a { color: var(--pp-title-color); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; text-align: center; width: 100%; border-top: 1px solid rgba(0,0,0,.10); padding-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Counter placeholder */ #popup-live-editor .popup-player::after { content: "−00:00"; color: var(--pp-time-color); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; flex-shrink: 0; } a.popup-player{text-decoration:none;}