/* * radio.css — all colors/fonts come from CSS variables defined in * (see partials/head.php, fed by .env). Restyle a station without editing CSS. * When THEME_DYNAMIC_BG is on, player.js overrides --text and the background * colors at runtime to match the album art. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg); color: var(--text); font-family: var(--font); text-align: center; -webkit-font-smoothing: antialiased; transition: background-color .6s ease; } a { color: var(--muted); text-decoration: none; } a:hover, a:focus { color: var(--text); text-decoration: underline; } /* -------------------------------------------------------------- layout */ .player-wrap { width: 100%; max-width: 660px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .player-card { width: 100%; padding: 24px; background: var(--surface); border-radius: calc(var(--radius) + 10px); display: flex; flex-direction: column; align-items: center; gap: 16px; transition: background-color .6s ease; } /* ----------------------------------------------------------- album art */ .art-wrap { position: relative; width: 100%; } .album-art { width: 100%; max-width: 600px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); filter: drop-shadow(0 0 calc(var(--glow, 0) * 55px) var(--accent)) drop-shadow(0 0 calc(var(--glow, 0) * 18px) var(--accent)); opacity: 0.92; transition: opacity .2s ease-in-out, border-radius .2s ease-in-out; } .album-art:hover { opacity: 1; border-radius: 0; } /* ---------------------------------------------------------- track meta */ .track-meta { width: 100%; margin-top: 10px; } .track-name { font-size: 1.25rem; font-weight: 700; line-height: 1.3; word-break: break-word; } .track-artist { font-size: 1rem; opacity: 0.9; margin-top: 2px; word-break: break-word; } .track-album { font-size: 0.85rem; opacity: 0.65; margin-top: 2px; word-break: break-word; } /* ------------------------------------------------------------ controls */ .controls { display: flex; justify-content: center; } /* Sized well past the 64px button so the ring visualizer's ticks (drawn radiating outward from the button edge) have room to show. */ .playpause-wrap { position: relative; width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; } .art-ring { position: absolute; inset: 0; pointer-events: none; } .art-ring[hidden] { display: none; } .playpause { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--accent); color: var(--accent-text); cursor: pointer; transition: background .15s ease, transform .1s ease; } .playpause:hover, .playpause:focus { background: var(--accent-hover); outline: 0; } .playpause:active { transform: scale(0.94); } .icon-btn { background: none; border: none; color: var(--text); cursor: pointer; padding: 4px; display: inline-flex; opacity: 0.85; } .icon-btn:hover { opacity: 1; } /* ---------------------------------------------------- seek / volume rows */ .seek-row, .vol-row { width: 100%; display: flex; align-items: center; gap: 10px; } .vol-row { justify-content: center; } .time { font-variant-numeric: tabular-nums; font-size: 0.8rem; opacity: 0.8; min-width: 40px; } .live-badge { display: inline-flex; align-items: center; gap: 6px; } .live-badge[hidden] { display: none; } /* the [hidden] attr must beat display:inline-flex */ .live-text { color: #ffffff; font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #21d05f; animation: live-pulse 2.6s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { box-shadow: 0 0 3px 0 rgba(33, 208, 95, 0.5); opacity: 0.85; } 50% { box-shadow: 0 0 11px 3px rgba(33, 208, 95, 0.95); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; box-shadow: 0 0 6px rgba(33, 208, 95, 0.9); } } .range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, 0.35); outline: none; cursor: pointer; } .seek { flex: 1; } .volume { width: 140px; } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; } .range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; } .range:disabled { opacity: 0.45; cursor: default; } /* native