244 lines
8.8 KiB
CSS
244 lines
8.8 KiB
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: var(--muted, #9a9a9a);
|
|
--nui-panel: var(--panel, #111);
|
|
--dpw-surface: var(--card, #0b0b0b);
|
|
--dpw-hover: var(--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 bar for both: the player (podcast or station, with play / stop / save)
|
|
sits in the radio bar in place of its "now playing"; volume, votes, focus
|
|
mode and the timer stay on the right. Focus mode shows the station big as
|
|
before. */
|
|
html.dpw.nui-one-player body:not(.dnd-mode) #now-playing-bar .now-playing-info,
|
|
html.dpw.nui-one-player body:not(.dnd-mode) #play-stop-btn,
|
|
html.dpw.nui-one-player body:not(.dnd-mode) #save-station-btn { display: none !important; }
|
|
html.dpw.dpw-in-bar #now-playing-bar > #nui-dock {
|
|
position: static;
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: none;
|
|
margin: 0 0 0 -1.5rem; /* the cover starts at the edge, like the bar's line */
|
|
align-self: stretch;
|
|
z-index: auto;
|
|
}
|
|
html.dpw.dpw-in-bar #now-playing-bar #nui-pod-mini {
|
|
height: 100%;
|
|
min-height: 56px;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
}
|
|
/* The progress (or live) line runs along the whole bar's top edge. */
|
|
html.dpw.dpw-in-bar #now-playing-bar #nui-pod-mini { position: static; }
|
|
html.dpw.dpw-in-bar #now-playing-bar .nui-pod-mini-bar { top: -1px; }
|
|
html.dpw.dpw-in-bar #now-playing-bar .nui-pod-art-mini { width: 40px; height: 40px; margin-left: 1.5rem; }
|
|
/* The page keeps clear of the bar by its real height (two rows on phones,
|
|
the player in it or not). */
|
|
html.dpw.dpw-in-bar .main-content,
|
|
html.dpw.dpw-in-bar.nui-pod-mini-open .main-content {
|
|
padding-bottom: calc(var(--dpw-bar-h, 72px) + 2rem);
|
|
}
|
|
@media (max-width: 600px) {
|
|
/* The bar is two rows on phones: the player, then the radio's tools. */
|
|
html.dpw.dpw-in-bar #now-playing-bar > #nui-dock { width: 100%; margin: -0.5rem 0 0; flex: none; }
|
|
html.dpw.dpw-in-bar #now-playing-bar .nui-pod-art-mini { margin-left: 0; }
|
|
html.dpw.dpw-in-bar #now-playing-bar #nui-pod-mini { min-height: 52px; }
|
|
/* Below the player one row: focus mode and stations left, the timer right. */
|
|
html.dpw.dpw-in-bar body:not(.dnd-mode) #now-playing-bar { flex-direction: row; flex-wrap: wrap; row-gap: 0.25rem; }
|
|
html.dpw.dpw-in-bar body:not(.dnd-mode) #now-playing-bar .now-playing-controls { width: auto; flex: none; gap: 0.5rem; }
|
|
html.dpw.dpw-in-bar body:not(.dnd-mode) #now-playing-bar .timer-widget { margin-left: auto; }
|
|
}
|
|
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; }
|
|
/* The swipe's „Rückgängig“ bar: above the radio bar, like the toast. */
|
|
html.dpw #nui-pod-undo { bottom: calc(var(--dpw-bar-h, 72px) + 80px); }
|
|
html.dpw.nui-pod-mini-open:not(.dpw-in-bar) #nui-pod-undo { bottom: calc(var(--dpw-bar-h, 72px) + 64px + 16px); }
|
|
|
|
/* ---- 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: var(--hover, #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: var(--hover, #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-count { color: var(--fg); }
|
|
html.dpw body.bright-bg .nui-pod-count-queue { background: var(--accent); color: #fff; }
|
|
html.dpw body.bright-bg .nui-pod-swipebg { background: #ececec; }
|
|
html.dpw body.bright-bg .nui-pod-swipebg.armed { background: #d6d6d6; }
|
|
html.dpw body.bright-bg .nui-pod-dlmark-done { background: #d4d4d4; border-color: #d4d4d4; color: #000; }
|
|
html.dpw body.bright-bg .nui-pod-initial { color: #888; }
|
|
html.dpw body.bright-bg .nui-pod-chip.on { border-color: #555; }
|
|
html.dpw body.bright-bg #nui-pod-mini { box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12); }
|