Podcast-Oberfläche aus diora-android 339de8f (Podcast-Seite mit ⚙, Wischgesten, Schrift, Farben, Startseite); „Neu“ zählt alle neuen Folgen, sw v66
- state/ liefert inbox_total (alle neuen Folgen) und inbox_limit neben der gekürzten Liste; Test dazu. - Browser: Startseite (nui_start_page) beim Öffnen, „Rückgängig“-Leiste über der Radioleiste, helle Ansicht für die neuen Teile. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
54fbd58293
commit
e097e13a11
7 changed files with 1083 additions and 375 deletions
|
|
@ -337,6 +337,19 @@ class RefreshAllTests(TestCase):
|
|||
'keep_sorted': '', 'auto_download_default': False,
|
||||
**PLAYBACK_DEFAULTS})
|
||||
|
||||
def test_state_counts_the_whole_inbox(self):
|
||||
# The list is capped (inbox_limit); inbox_total counts every new episode of this user.
|
||||
eps = [PodcastEpisode.objects.create(feed=self.a, guid=f'n{i}', title=f'N{i}', audio_url=f'https://example.org/{i}.mp3',
|
||||
pub_date=datetime.now(timezone.utc) - timedelta(days=i)) for i in range(5)]
|
||||
EpisodeProgress.objects.create(user=self.user, episode=eps[0], played=True)
|
||||
EpisodeProgress.objects.create(user=self.user, episode=eps[1], dismissed=True)
|
||||
EpisodeProgress.objects.create(user=self.user, episode=eps[2], position_seconds=30)
|
||||
PodcastEpisode.objects.create(feed=self.bobs, guid='b', title='Bobs', audio_url='https://example.org/b.mp3')
|
||||
data = self.client.get('/podcasts/state/?inbox_limit=2').json()
|
||||
self.assertEqual([e['id'] for e in data['inbox']], [eps[2].id, eps[3].id])
|
||||
self.assertEqual((data['inbox_total'], data['inbox_limit']), (3, 2))
|
||||
self.assertEqual(self.client.get('/podcasts/state/').json()['inbox_total'], 3)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Shownotes, chapters, transcripts
|
||||
|
|
|
|||
|
|
@ -1569,8 +1569,9 @@ def refresh_all_feeds(request):
|
|||
@csrf_exempt
|
||||
def podcast_state(request):
|
||||
"""Everything a client shows first, in one response: feeds, queue, the
|
||||
first page of the inbox, the settings and how many AntennaPod downloads
|
||||
wait to be offered (import-downloads/)."""
|
||||
first page of the inbox (inbox_limit of inbox_total new episodes), the
|
||||
settings and how many AntennaPod downloads wait to be offered
|
||||
(import-downloads/)."""
|
||||
if not request.user.is_authenticated:
|
||||
return JsonResponse({'error': 'authentication required'}, status=401)
|
||||
try:
|
||||
|
|
@ -1583,6 +1584,8 @@ def podcast_state(request):
|
|||
'feeds': _feeds_data(request.user),
|
||||
'queue': _queue_data(request.user),
|
||||
'inbox': _inbox_data(request.user, 0, limit, with_description=False),
|
||||
'inbox_total': _inbox_episodes(request.user).count(),
|
||||
'inbox_limit': limit,
|
||||
'settings': _settings_data(s),
|
||||
'import_downloads': {'count': len(downloads), 'bytes': sum(e['size'] for e in downloads)},
|
||||
'server_time': timezone.now().isoformat(),
|
||||
|
|
@ -1984,20 +1987,19 @@ def _add_user_state(user, episodes):
|
|||
return episodes
|
||||
|
||||
|
||||
def _inbox_episodes(user):
|
||||
"""The inbox: the user's episodes neither played nor dismissed."""
|
||||
hidden = EpisodeProgress.objects.filter(user=user).filter(
|
||||
Q(played=True) | Q(dismissed=True)
|
||||
).values('episode_id')
|
||||
return PodcastEpisode.objects.filter(feed__user=user).exclude(id__in=hidden)
|
||||
|
||||
|
||||
def _inbox_data(user, offset, limit, with_description=True):
|
||||
"""Inbox episodes. Shownotes can be large (up to 50 KB each); the apps'
|
||||
state/ leaves them out and loads one episode's at a time."""
|
||||
hidden_ids = set(
|
||||
EpisodeProgress.objects.filter(
|
||||
user=user,
|
||||
).filter(
|
||||
Q(played=True) | Q(dismissed=True)
|
||||
).values_list('episode_id', flat=True)
|
||||
)
|
||||
|
||||
episodes = list(
|
||||
PodcastEpisode.objects.filter(feed__user=user)
|
||||
.exclude(id__in=hidden_ids)
|
||||
_inbox_episodes(user)
|
||||
.select_related('feed')
|
||||
.order_by('-pub_date')
|
||||
.values(*_inbox_fields(with_description))[offset:offset + limit]
|
||||
|
|
|
|||
|
|
@ -1684,6 +1684,18 @@
|
|||
// The shared player: what plays on the other devices, and from now on every change.
|
||||
startSync();
|
||||
|
||||
// The start page chosen in the podcasts' settings (nui_start_page, this browser; none: the
|
||||
// last used tab, the web's way). Opening diora shows it; reloading and back/forward keep the tab.
|
||||
(function openStartPage() {
|
||||
let start = '';
|
||||
try { start = localStorage.getItem('nui_start_page') || ''; } catch (e) {}
|
||||
if (!start || typeof showTab !== 'function') return;
|
||||
const nav = performance.getEntriesByType ? performance.getEntriesByType('navigation')[0] : null;
|
||||
if (nav && nav.type !== 'navigate') return;
|
||||
const tab = start === 'queue' || start === 'inbox' ? 'podcasts' : start === 'radio' ? 'radio' : 'books';
|
||||
if (typeof _currentTopTab === 'undefined' || _currentTopTab !== tab) showTab(tab);
|
||||
})();
|
||||
|
||||
// The page (copied from the app) comes last, once all of the above is in place.
|
||||
const script = document.createElement('script');
|
||||
script.src = UI_SCRIPT;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* diora service worker — caches the app shell for offline use.
|
||||
*/
|
||||
|
||||
const CACHE = 'diora-v65';
|
||||
const CACHE = 'diora-v66';
|
||||
const SHELL = [
|
||||
'/static/css/app.css',
|
||||
'/static/js/app.js',
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,9 +1,15 @@
|
|||
/* Copied from diora-android 99528f2 2026-10-02: the podcast parts of web-native/static/native.css
|
||||
/* Copied from diora-android 339de8f 2026-10-02: the podcast parts of web-native/static/native.css
|
||||
(bottom sheet, podcasts) by tools/sync_podcast_ui.py. Do not edit here.
|
||||
The web's own additions are in podcasts-web.css. */
|
||||
|
||||
/* ---- bottom sheet ---------------------------------------------------------------- */
|
||||
|
||||
/* Monospace stays the brand's (headings, tabs, numbers); reading text — titles, episode
|
||||
lines, show notes, descriptions, hints — is the system's sans (no font download). */
|
||||
:root {
|
||||
--nui-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
#nui-sheet {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
|
|
@ -81,13 +87,18 @@
|
|||
}
|
||||
|
||||
.nui-row-hint {
|
||||
font-size: 12px;
|
||||
font-family: var(--nui-sans);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
line-height: 1.35;
|
||||
color: var(--nui-muted);
|
||||
}
|
||||
|
||||
/* Red only where it's meant: the destructive choice in a confirmation. What is set is bright and bold. */
|
||||
.nui-danger { color: var(--accent); }
|
||||
.nui-active .nui-row-label { color: var(--accent); }
|
||||
.nui-active .nui-row-label { color: var(--fg, #fff); font-weight: 700; }
|
||||
.nui-active .nui-row-hint { color: var(--fg, #fff); }
|
||||
|
||||
.nui-row-split {
|
||||
padding: 0 16px 0 0;
|
||||
|
|
@ -150,84 +161,103 @@ html.nui-one-player #nui-mini { display: none !important; }
|
|||
scrollbar-width: none;
|
||||
}
|
||||
.nui-pod-tab {
|
||||
flex: 1 0 auto;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
min-height: var(--nui-tap);
|
||||
padding: 0 10px;
|
||||
padding: 0 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: none;
|
||||
color: var(--nui-muted);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nui-pod-tab.active { color: inherit; font-weight: 700; border-bottom-color: var(--accent); }
|
||||
.nui-pod-tab.active { color: var(--fg, #fff); font-weight: 700; border-bottom-color: var(--fg, #fff); }
|
||||
.nui-pod-count {
|
||||
min-width: 20px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
min-width: 18px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 9px;
|
||||
background: #2a2a2a;
|
||||
font-size: 11px;
|
||||
color: #ddd;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.nui-pod-tab.active .nui-pod-count { background: var(--accent); color: #fff; }
|
||||
.nui-pod-count-queue { background: var(--accent); color: #fff; }
|
||||
|
||||
.nui-pod-summary { padding: 6px 2px 10px; font-size: 12px; color: var(--nui-muted); }
|
||||
.nui-pod-empty { padding: 32px 12px; color: var(--nui-muted); text-align: center; line-height: 1.5; }
|
||||
.nui-pod-empty { padding: 32px 12px; color: var(--nui-muted); text-align: center; line-height: 1.5; font-family: var(--nui-sans); letter-spacing: normal; font-weight: 400; font-size: 14px; }
|
||||
|
||||
.nui-pod-list { display: flex; flex-direction: column; }
|
||||
.nui-pod-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 72px;
|
||||
padding: 8px 0;
|
||||
gap: 10px;
|
||||
min-height: 58px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.nui-pod-row:active { background: #141414; }
|
||||
.nui-pod-row.nui-pod-played .nui-pod-title { color: var(--nui-muted); font-weight: 400; }
|
||||
.nui-pod-row.nui-pod-gone { display: none; }
|
||||
.nui-pod-row.nui-pod-current .nui-pod-title { color: var(--accent); }
|
||||
.nui-pod-row.nui-pod-current .nui-pod-title::before { content: '▶ '; }
|
||||
|
||||
.nui-pod-art {
|
||||
flex: none;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #1c1c1c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* No cover anywhere: the podcast's initial on a neutral tile. */
|
||||
.nui-pod-initial { font-size: 20px; font-weight: 700; color: #6a6a6a; line-height: 1; }
|
||||
.nui-pod-art-big .nui-pod-initial { font-size: 30px; }
|
||||
.nui-pod-art-player .nui-pod-initial { font-size: 96px; }
|
||||
.nui-pod-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.nui-pod-art-big { width: 72px; height: 72px; }
|
||||
.nui-pod-art-big { width: 64px; height: 64px; }
|
||||
.nui-pod-art-mini { width: 44px; height: 44px; margin-left: 10px; }
|
||||
.nui-pod-art-player { width: min(72vw, 320px); height: min(72vw, 320px); border-radius: 8px; align-self: center; }
|
||||
|
||||
.nui-pod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
||||
.nui-pod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||||
.nui-pod-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
font-family: var(--nui-sans);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: normal;
|
||||
line-height: 1.22;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.nui-pod-meta {
|
||||
font-family: var(--nui-sans);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--nui-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nui-pod-progress { height: 3px; margin-top: 4px; border-radius: 2px; background: #2a2a2a; overflow: hidden; max-width: 160px; }
|
||||
.nui-pod-progress { height: 3px; margin-top: 2px; border-radius: 2px; background: #2a2a2a; overflow: hidden; max-width: 160px; }
|
||||
.nui-pod-progress > span { display: block; height: 100%; background: var(--accent); }
|
||||
.nui-pod-badge {
|
||||
flex: none;
|
||||
|
|
@ -260,18 +290,10 @@ html.nui-one-player #nui-mini { display: none !important; }
|
|||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.nui-pod-feedhead { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
|
||||
.nui-pod-switch {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 14px;
|
||||
}
|
||||
.nui-pod-switch input { width: 20px; height: 20px; accent-color: var(--accent); }
|
||||
.nui-pod-switch .nui-pod-meta { grid-column: 2; }
|
||||
.nui-pod-feedhead { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
|
||||
.nui-pod-feedhead > .nui-icon:first-child { min-width: 32px; margin-left: -6px; }
|
||||
.nui-pod-feedhead .nui-pod-title { font-size: 16px; }
|
||||
.nui-pod-feedhead .nui-pod-infobtn { min-width: 38px; }
|
||||
|
||||
.nui-pod-search { display: flex; gap: 8px; margin: 4px 0 10px; }
|
||||
.nui-pod-search input { flex: 1; min-width: 0; min-height: var(--nui-tap); font-size: 16px; }
|
||||
|
|
@ -316,8 +338,8 @@ html.nui-one-player #nui-mini { display: none !important; }
|
|||
}
|
||||
.nui-pod-player-top { display: flex; justify-content: center; }
|
||||
.nui-pod-player-top .nui-icon { font-size: 26px; color: var(--nui-muted); }
|
||||
.nui-pod-player-title { font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center; }
|
||||
.nui-pod-player-feed { margin-top: -6px; font-size: 13px; color: var(--nui-muted); text-align: center; }
|
||||
.nui-pod-player-title { font-family: var(--nui-sans); font-size: 18px; font-weight: 600; letter-spacing: normal; line-height: 1.3; text-align: center; }
|
||||
.nui-pod-player-feed { margin-top: -6px; font-family: var(--nui-sans); font-size: 13.5px; font-weight: 400; letter-spacing: normal; color: var(--nui-muted); text-align: center; }
|
||||
.nui-pod-seek { width: 100%; accent-color: var(--accent); height: 28px; }
|
||||
.nui-pod-times { display: flex; justify-content: space-between; margin-top: -8px; font-size: 12px; color: var(--nui-muted); font-variant-numeric: tabular-nums; }
|
||||
.nui-pod-controls { display: flex; align-items: center; justify-content: center; gap: 28px; }
|
||||
|
|
@ -366,7 +388,7 @@ body.eink .nui-pod-art { background: #eee; }
|
|||
.nui-pod-head .nui-pod-summary { padding: 6px 2px; }
|
||||
.nui-pod-tools { display: flex; align-items: center; margin-right: -6px; }
|
||||
.nui-pod-tools .nui-icon { font-size: 18px; color: var(--nui-muted); }
|
||||
.nui-pod-lock.on { color: var(--accent) !important; }
|
||||
.nui-pod-lock.on { color: var(--fg, #fff) !important; }
|
||||
.nui-pod-selbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -385,14 +407,13 @@ body.eink .nui-pod-art { background: #eee; }
|
|||
.nui-pod-selactions .btn { min-height: 38px; flex: 1 0 auto; }
|
||||
.nui-pod-selactions .btn:disabled { opacity: 0.4; }
|
||||
.nui-pod-check { flex: none; width: 28px; font-size: 22px; color: var(--nui-muted); text-align: center; }
|
||||
.nui-pod-check.on { color: var(--accent); }
|
||||
.nui-pod-check.on { color: var(--fg, #fff); }
|
||||
.nui-pod-row.nui-pod-selecting { user-select: none; -webkit-user-select: none; }
|
||||
body.eink .nui-pod-check.on,
|
||||
body.eink .nui-pod-lock.on { color: #000 !important; }
|
||||
body.eink .nui-pod-selbar { background: #fff; }
|
||||
|
||||
/* podcast playback: per-podcast chips, sleep timer */
|
||||
.nui-pod-feedprefs { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
|
||||
/* podcast chips (the list filters), sleep timer */
|
||||
.nui-pod-chip {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
|
|
@ -407,28 +428,9 @@ body.eink .nui-pod-selbar { background: #fff; }
|
|||
font-size: 13px;
|
||||
}
|
||||
.nui-pod-chip strong { color: inherit; font-weight: 700; }
|
||||
.nui-pod-chip.on { border-color: var(--accent); color: inherit; }
|
||||
.nui-pod-chip.on strong { color: var(--accent); }
|
||||
.nui-pod-chip.on { border-color: #8a8a8a; color: var(--fg, #fff); font-weight: 700; }
|
||||
.nui-pod-sleep { font-size: 15px !important; white-space: nowrap; }
|
||||
.nui-pod-sleep.on { color: var(--accent) !important; font-weight: 700; }
|
||||
/* unsubscribing: a quiet link, asked once more in place */
|
||||
.nui-pod-unsub { display: flex; justify-content: flex-end; padding: 6px 0; border-bottom: 1px solid var(--border); }
|
||||
.nui-pod-unsub-btn {
|
||||
min-height: var(--nui-tap, 44px);
|
||||
padding: 0 4px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--nui-muted);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
.nui-pod-unsub-ask { display: block; padding: 12px 0; }
|
||||
.nui-pod-unsub-ask .nui-pod-title { display: block; overflow: visible; }
|
||||
.nui-pod-unsub-ask .nui-pod-meta { margin-top: 4px; line-height: 1.4; white-space: normal; overflow: visible; }
|
||||
.nui-pod-unsub-actions { display: flex; gap: 8px; margin-top: 10px; }
|
||||
.nui-pod-unsub-actions .btn { min-height: var(--nui-tap, 44px); }
|
||||
.nui-pod-unsub-yes { color: var(--accent); border-color: var(--accent); font-weight: 700; }
|
||||
body.eink .nui-pod-unsub-yes { color: #000; border-color: #000; }
|
||||
body.eink .nui-pod-chip.on { border-color: #000; }
|
||||
body.eink .nui-pod-chip.on strong,
|
||||
body.eink .nui-pod-sleep.on { color: #000 !important; }
|
||||
|
|
@ -446,7 +448,7 @@ body.eink .nui-pod-sleep.on { color: #000 !important; }
|
|||
font: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
.nui-pod-subtab.active { color: inherit; font-weight: 700; border-bottom-color: var(--accent); }
|
||||
.nui-pod-subtab.active { color: inherit; font-weight: 700; border-bottom-color: var(--fg, #fff); }
|
||||
.nui-pod-chapters { list-style: none; margin: 0; padding: 0; }
|
||||
.nui-pod-chapter {
|
||||
display: grid;
|
||||
|
|
@ -458,12 +460,14 @@ body.eink .nui-pod-sleep.on { color: #000 !important; }
|
|||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nui-pod-chapter-title { font-family: var(--nui-sans); letter-spacing: normal; font-weight: 400; font-size: 14.5px; }
|
||||
.nui-pod-chapter.current .nui-pod-chapter-title { font-weight: 600; }
|
||||
.nui-pod-chapter-t { color: var(--nui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
||||
.nui-pod-chapter.current { color: var(--accent); font-weight: 700; }
|
||||
.nui-pod-chapter.current .nui-pod-chapter-t { color: var(--accent); }
|
||||
.nui-pod-notes { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
|
||||
.nui-pod-notes { font-family: var(--nui-sans); font-size: 14.5px; font-weight: 400; letter-spacing: normal; line-height: 1.55; overflow-wrap: anywhere; }
|
||||
.nui-pod-notes img { max-width: 100%; height: auto; }
|
||||
.nui-pod-notes a { color: var(--accent); }
|
||||
.nui-pod-notes a { color: inherit; text-decoration: underline; text-decoration-color: #777; }
|
||||
.nui-pod-notes .nui-pod-stamp { font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; }
|
||||
.nui-pod-notes table { display: block; overflow-x: auto; }
|
||||
.nui-pod-notes-sheet .nui-pod-player-panel { max-height: 88%; }
|
||||
|
|
@ -506,7 +510,7 @@ body.eink .nui-pod-subtab.active { border-bottom-color: #000; color: #000; }
|
|||
color: var(--nui-muted);
|
||||
background:
|
||||
radial-gradient(closest-side, var(--bg) 78%, transparent 80% 100%),
|
||||
conic-gradient(var(--accent) var(--p, 0%), #2a2a2a 0);
|
||||
conic-gradient(#d0d0d0 var(--p, 0%), #2a2a2a 0);
|
||||
}
|
||||
body.eink .nui-pod-dl-done { color: #000; }
|
||||
body.eink .nui-pod-dl-done::after { border-color: #000; }
|
||||
|
|
@ -518,7 +522,7 @@ body.eink .nui-pod-dl-ring > span {
|
|||
}
|
||||
|
||||
/* the top bar's "↓ 3/68" and the downloads overview (openDownloads) */
|
||||
.nui-pod-dlind { min-width: 0 !important; padding: 0 8px; font-size: 13px !important; font-weight: 700; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
|
||||
.nui-pod-dlind { min-width: 0 !important; padding: 0 8px; font-size: 13px !important; font-weight: 700; color: var(--fg, #fff); white-space: nowrap; font-variant-numeric: tabular-nums; }
|
||||
.nui-pod-dlind[hidden] { display: none !important; }
|
||||
.nui-pod-dls .nui-pod-player-panel { min-height: 50%; }
|
||||
.nui-pod-dls-head { display: flex; flex-direction: column; gap: 2px; }
|
||||
|
|
@ -558,13 +562,11 @@ body.eink .nui-pod-star, body.eink .nui-pod-fav.on { color: #000 !important; }
|
|||
|
||||
/* feed errors, chapter navigation, transcript */
|
||||
.nui-pod-feederr { font-size: 12px; color: var(--yellow); }
|
||||
.nui-pod-offer { padding: 10px 12px; margin: 8px 0; border: 1px solid var(--nui-muted); border-radius: 6px; line-height: 1.45; font-size: 14px; }
|
||||
.nui-pod-offer { padding: 10px 12px; margin: 8px 0; border: 1px solid var(--nui-muted); border-radius: 6px; line-height: 1.45; font-size: 14px; font-family: var(--nui-sans); letter-spacing: normal; font-weight: 400; }
|
||||
.nui-pod-offer-row { display: flex; gap: 8px; margin-top: 8px; }
|
||||
.nui-pod-feederr-box { padding: 8px 10px; margin: 4px 0 8px; border: 1px solid var(--yellow); border-radius: 6px; line-height: 1.4; }
|
||||
.nui-pod-chapnav { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
|
||||
.nui-pod-chapnow { flex: 1; min-width: 0; text-align: center; font-size: 13px; color: var(--nui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.nui-pod-transcript { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
|
||||
.nui-pod-seg { margin: 0; padding: 6px 4px; font-size: 14px; line-height: 1.5; color: var(--nui-muted); border-radius: 4px; cursor: pointer; }
|
||||
.nui-pod-seg { margin: 0; padding: 6px 4px; font-family: var(--nui-sans); letter-spacing: normal; font-weight: 400; font-size: 14.5px; line-height: 1.5; color: var(--nui-muted); border-radius: 4px; cursor: pointer; }
|
||||
.nui-pod-seg.current { color: inherit; background: #1a1a1a; }
|
||||
.nui-pod-speaker { color: inherit; }
|
||||
body.eink .nui-pod-feederr { color: #000; }
|
||||
|
|
@ -579,13 +581,164 @@ body.eink .nui-pod-seg.current { color: #000; background: #e6e6e6; }
|
|||
.nui-pod-sec-note { padding: 10px 2px; font-size: 13px; color: var(--nui-muted); }
|
||||
.nui-pod-feedcount { flex: none; }
|
||||
.nui-pod-infobtn { flex: none; font-size: 20px; color: var(--nui-muted); }
|
||||
.nui-pod-info-desc { font-size: 14px; font-weight: 400; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
|
||||
.nui-pod-info-desc { font-family: var(--nui-sans); letter-spacing: normal; font-size: 14.5px; font-weight: 400; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
|
||||
.nui-pod-facts { font-weight: 400; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 10px 0 4px; font-size: 14px; }
|
||||
.nui-pod-facts dt { color: var(--nui-muted); }
|
||||
.nui-pod-facts dd { margin: 0; min-width: 0; font-weight: 400; overflow-wrap: anywhere; }
|
||||
.nui-pod-facts a { color: var(--accent); }
|
||||
.nui-pod-facts a { color: inherit; text-decoration: underline; text-decoration-color: #777; }
|
||||
.nui-pod-info-url { display: block; font-size: 12px; color: var(--nui-muted); }
|
||||
.nui-pod-info-actions { display: flex; gap: 8px; margin-top: 6px; }
|
||||
.nui-pod-info-actions .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
|
||||
body.eink .nui-pod-sec { color: #000; border-bottom-color: #000; }
|
||||
body.eink .nui-pod-facts a { color: #000; text-decoration: underline; }
|
||||
|
||||
/* ---- UI round: rows, swipes, the feed page's line, the player's chapters ------------------ */
|
||||
|
||||
/* the row's one action, its menu, the download mark */
|
||||
.nui-pod-row > .nui-icon { min-width: 40px; }
|
||||
.nui-pod-row > .nui-pod-menu { min-width: 34px; font-size: 18px; color: var(--nui-muted); margin-right: -4px; }
|
||||
.nui-pod-playbtn { font-size: 17px !important; color: var(--accent); }
|
||||
.nui-pod-row > .nui-pod-dl { min-width: 40px !important; margin-left: 0; }
|
||||
.nui-pod-dlmark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
vertical-align: -2px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #8a8a8a;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #cfcfcf;
|
||||
}
|
||||
.nui-pod-dlmark-done { background: #3a3a3a; border-color: #3a3a3a; color: #fff; }
|
||||
.nui-pod-dlmark-failed { border-color: var(--yellow); color: var(--yellow); }
|
||||
.nui-pod-dlmark-queued,
|
||||
.nui-pod-dlmark-downloading {
|
||||
border: none;
|
||||
background:
|
||||
radial-gradient(closest-side, var(--bg) 62%, transparent 66% 100%),
|
||||
conic-gradient(#d0d0d0 var(--p, 0%), #3a3a3a 0);
|
||||
}
|
||||
.nui-pod-queued { font-size: 18px !important; }
|
||||
|
||||
/* swiping a row: it moves, what the swipe does shows underneath */
|
||||
.nui-pod-list { position: relative; }
|
||||
.nui-pod-list > .nui-pod-row { touch-action: pan-y; }
|
||||
.nui-pod-row.nui-pod-swiping { position: relative; z-index: 1; will-change: transform; }
|
||||
.nui-pod-swipebg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 18px;
|
||||
background: #161616;
|
||||
color: var(--nui-muted);
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
.nui-pod-swipebg.armed { background: #2c2c2c; color: var(--fg, #fff); font-weight: 700; }
|
||||
#nui-pod-undo {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: calc(var(--nui-dock-h, 124px) + 12px + env(safe-area-inset-bottom, 0px));
|
||||
transform: translateX(-50%);
|
||||
z-index: 950;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
max-width: calc(100% - 24px);
|
||||
padding: 4px 6px 4px 16px;
|
||||
border-radius: 8px;
|
||||
background: #262626;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.18s;
|
||||
}
|
||||
#nui-pod-undo.nui-show { opacity: 1; pointer-events: auto; }
|
||||
.nui-pod-undo-text { font-family: var(--nui-sans); letter-spacing: normal; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.nui-pod-undo-btn {
|
||||
min-height: 40px;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* the top bar's search */
|
||||
.nui-pod-searchbtn svg { display: block; }
|
||||
.nui-pod-searchbtn.on { color: var(--fg, #fff); }
|
||||
|
||||
/* the feed page: one quiet line instead of the settings, the ⚙ sheet's parts */
|
||||
.nui-pod-feedsum {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: -2px 0 6px;
|
||||
padding: 2px 0 8px;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: none;
|
||||
color: var(--nui-muted);
|
||||
font-family: var(--nui-sans);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nui-pod-gear { font-size: 22px !important; }
|
||||
.nui-pod-sheetsep { height: 1px; margin: 6px 20px; background: var(--border); }
|
||||
.nui-pod-sheetnote { padding: 2px 20px 10px; white-space: normal; line-height: 1.45; font-size: 13px; }
|
||||
|
||||
/* the player's chapters, right under the title */
|
||||
.nui-pod-chapbox { margin-top: -4px; border: 1px solid var(--border); border-radius: 8px; padding: 2px 4px 2px 10px; }
|
||||
.nui-pod-chapbox[hidden] { display: none; }
|
||||
.nui-pod-chaphead { display: flex; align-items: center; gap: 2px; min-height: 40px; }
|
||||
.nui-pod-chapcount { flex: 1; min-width: 0; font-size: 12px; color: var(--nui-muted); font-variant-numeric: tabular-nums; }
|
||||
.nui-pod-chapbtn { min-width: 40px !important; min-height: 40px !important; font-size: 16px !important; }
|
||||
.nui-pod-chaplist { position: relative; max-height: 168px; overflow-y: auto; margin: 0 -4px 4px -10px; padding: 0 4px 0 10px; border-top: 1px solid var(--border); }
|
||||
.nui-pod-chaplist .nui-pod-chapter { padding: 8px 4px; }
|
||||
.nui-pod-chaplist .nui-pod-chapter:last-child { border-bottom: none; }
|
||||
.nui-pod-art-player { width: min(64vw, 300px); height: min(64vw, 300px); }
|
||||
.nui-pod-withchapters .nui-pod-art-player { width: min(46vw, 220px); height: min(46vw, 220px); }
|
||||
|
||||
/* the downloads overview: the finished ones as a list */
|
||||
.nui-pod-dls-donerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.nui-pod-dls-show { min-height: 36px; padding: 0 12px; font-size: 14px !important; }
|
||||
|
||||
body.eink .nui-pod-count-queue { background: #000; color: #fff; }
|
||||
body.eink .nui-pod-tab.active .nui-pod-count { background: #000; color: #fff; }
|
||||
body.eink .nui-pod-playbtn { color: #000; }
|
||||
body.eink .nui-pod-dlmark { border-color: #000; color: #000; }
|
||||
body.eink .nui-pod-dlmark-done { background: #000; color: #fff; }
|
||||
body.eink .nui-pod-dlmark-queued,
|
||||
body.eink .nui-pod-dlmark-downloading {
|
||||
background:
|
||||
radial-gradient(closest-side, #fff 62%, transparent 66% 100%),
|
||||
conic-gradient(#000 var(--p, 0%), #ccc 0);
|
||||
}
|
||||
body.eink .nui-pod-swipebg { background: #eee; color: #444; }
|
||||
body.eink .nui-pod-swipebg.armed { background: #000; color: #fff; }
|
||||
body.eink #nui-pod-undo { background: #000; box-shadow: none; }
|
||||
body.eink .nui-pod-initial { color: #555; }
|
||||
body.eink .nui-pod-feedsum { color: #444; border-bottom-color: #000; }
|
||||
body.eink .nui-pod-chapbox { border-color: #000; }
|
||||
body.eink .nui-pod-chip.on { border-color: #000; color: #000; }
|
||||
body.eink .nui-pod-notes a,
|
||||
body.eink .nui-pod-facts a { text-decoration-color: #000; }
|
||||
|
|
|
|||
|
|
@ -161,6 +161,9 @@ html.dpw .nui-mini-toggle { font-size: 22px; color: var(--accent); }
|
|||
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 --------------------------------- */
|
||||
|
||||
|
|
@ -231,5 +234,11 @@ 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-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); }
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue