diora-web/static/podcasts/podcasts-web.css

/* Podcasts in the browser (static/js/podcasts-web.js): the app's podcast page
   — its styles are podcast-ui.css, copied from diora-android's native.css by
   tools/sync_podcast_ui.py — set into the web layout. The app's look stays
   (black, monospace, red accent); on wide screens the podcast page, its mini
   player and its sheets keep to one centred column. Only loaded in browsers;
   everything is scoped to html.dpw. */

html.dpw {
  --nui-tap: 44px;
  --nui-muted: #9a9a9a;
  --nui-panel: #111;
  --dpw-surface: #0b0b0b;
  --dpw-hover: #111;
  --dpw-col: 760px;
}

/* The placeholder shown until the page is there. */
html.nui-podcasts #tab-podcasts > :not(#nui-pod) { display: none !important; }
.dpw-loading { padding: 2rem 0; text-align: center; }

html.dpw #nui-pod {
  max-width: var(--dpw-col);
  margin: 0 auto;
}

/* ---- what the app has in its other native styles ---------------------------------- */

html.dpw .nui-icon {
  min-width: var(--nui-tap);
  min-height: var(--nui-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding: 0;
}
html.dpw .nui-icon:hover { color: var(--fg); }

html.dpw .nui-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---- the dock: mini player right above the radio bar ----------------------------- */

html.dpw #nui-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dpw-bar-h, 72px);
  z-index: 190; /* under the reader (200), the sidebar and the sheets */
  max-width: var(--dpw-col);
  margin: 0 auto;
}
html.dpw body.dnd-mode #nui-dock { display: none; }
/* One player for both: what plays (and play / stop / save) is in the bar
   above; the radio bar keeps volume, votes, focus mode and the timer. */
html.dpw.nui-one-player #now-playing-bar .now-playing-info,
html.dpw.nui-one-player #play-stop-btn,
html.dpw.nui-one-player #save-station-btn { display: none !important; }
html.dpw #nui-pod-mini {
  background: var(--dpw-surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5);
}
html.dpw .nui-pod-mini-bar { top: 0; }
html.dpw.nui-pod-mini-open .main-content {
  padding-bottom: calc(var(--dpw-bar-h, 72px) + 64px + 2rem);
}

html.dpw .nui-mini-text {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: 0 14px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html.dpw .nui-mini-station,
html.dpw .nui-mini-track {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dpw .nui-mini-station { font-size: 15px; font-weight: 700; }
html.dpw .nui-mini-track { font-size: 12px; font-weight: 400; color: var(--nui-muted); }
html.dpw .nui-mini-track:empty { display: none; }
html.dpw .nui-mini-toggle { font-size: 22px; color: var(--accent); }

#nui-radio-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dpw-bar-h, 72px) + 80px);
  transform: translateX(-50%);
  z-index: 950;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 14px;
  text-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#nui-radio-toast.nui-show { opacity: 1; }

/* ---- a mouse: hover states the phone doesn't need --------------------------------- */

@media (hover: hover) {
  html.dpw #nui-pod .nui-pod-row { cursor: pointer; }
  html.dpw #nui-pod .nui-pod-row:hover { background: var(--dpw-hover); }
  html.dpw .nui-row:hover { background: #1a1a1a; }
  html.dpw .nui-pod-chip:hover,
  html.dpw .nui-pod-tab:hover,
  html.dpw .nui-pod-subtab:hover { color: var(--fg); }
  html.dpw .nui-pod-chapter:hover,
  html.dpw .nui-pod-seg:hover { background: #141414; }
}
html.dpw .nui-row,
html.dpw .nui-pod-tab,
html.dpw .nui-pod-chip,
html.dpw .nui-pod-subtab { cursor: pointer; }

/* ---- wide screens: sheets and the player in the column ------------------------------ */

@media (min-width: 761px) {
  html.dpw .nui-panel {
    margin: 0 auto;
    max-width: 560px;
    border: 1px solid var(--border);
    border-bottom: none;
  }
  html.dpw #nui-pod-player { justify-content: center; }
  html.dpw .nui-pod-player-panel {
    max-width: var(--dpw-col);
    max-height: 92vh;
    border: 1px solid var(--border);
    border-bottom: none;
  }
  html.dpw .nui-pod-art-player { width: 240px; height: 240px; }
  html.dpw .nui-pod-selbar { margin: 0 0 4px; padding: 6px 0 8px; }
}

/* Phones: the dock spans the screen like in the app. */
@media (max-width: 760px) {
  html.dpw #nui-pod-mini { border-left: none; border-right: none; border-radius: 0; box-shadow: none; }
  html.dpw .nui-pod-selbar { margin: 0 -0.75rem 4px; padding: 6px 0.75rem 8px; }
}

/* ---- the web's light scheme (◑, body.bright-bg) ------------------------------------- */

html.dpw body.bright-bg {
  --nui-muted: #555;
  --nui-panel: #f4f4f4;
  --dpw-surface: #f7f7f7;
  --dpw-hover: #f0f0f0;
}
/* app.css resolves --text-muted (the colour of .btn-icon) on :root, so it stays
   white under body.bright-bg; inside the podcast parts it follows --fg. */
html.dpw body.bright-bg #nui-pod,
html.dpw body.bright-bg #nui-dock,
html.dpw body.bright-bg #nui-sheet,
html.dpw body.bright-bg #nui-pod-player { --text-muted: var(--fg); --text: var(--fg); }
html.dpw body.bright-bg .nui-pod-player-panel { background: var(--dpw-surface); }
html.dpw body.bright-bg .nui-pod-row:active,
html.dpw body.bright-bg .nui-row:active,
html.dpw body.bright-bg .nui-row:hover,
html.dpw body.bright-bg .nui-pod-chapter:hover,
html.dpw body.bright-bg .nui-pod-seg:hover,
html.dpw body.bright-bg .nui-pod-seg.current,
html.dpw body.bright-bg .nui-pod-queue .nui-pod-row.nui-pod-dragging { background: #e8e8e8; }
html.dpw body.bright-bg .nui-pod-art { background: #e4e4e4; }
html.dpw body.bright-bg .nui-pod-count,
html.dpw body.bright-bg .nui-pod-progress,
html.dpw body.bright-bg .nui-pod-mini-bar { background: #d4d4d4; }
html.dpw body.bright-bg .nui-pod-tab.active .nui-pod-count { background: var(--accent); color: #fff; }
html.dpw body.bright-bg #nui-pod-mini { box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12); }