Feeds und Podcast-Seite im Browser auf die Farbvariablen (docs/theme.md)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

static/js/feeds.js

@@ -1077,8 +1077,8 @@
     '#tab-feeds .fd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 14px; }',
     '#tab-feeds .fd-seg { display: flex; border: 1px solid var(--border, #2a2a2a); border-radius: 6px; overflow: hidden; }',
     '#tab-feeds .fd-seg button { background: none; border: none; color: inherit; font: inherit; padding: 9px 14px; cursor: pointer; }',
-    '#tab-feeds .fd-seg button.on { background: var(--accent, #e63946); color: #fff; }',
+    '#tab-feeds .fd-seg button.on { background: var(--accent, #e63946); color: var(--on-accent, #fff); }',
-    '#tab-feeds .fd-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(255,255,255,0.18); font-size: 11px; text-align: center; }',
+    '#tab-feeds .fd-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--raised, rgba(255,255,255,0.18)); font-size: 11px; text-align: center; }',
     '#tab-feeds .fd-actions { display: flex; gap: 4px; }',
     '.fd-icon { background: none; border: none; color: inherit; font: inherit; font-size: 20px; min-width: 40px; min-height: 40px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }',
     '.fd-icon.on { color: var(--accent, #e63946); }',
@@ -1089,7 +1089,7 @@
     '#tab-feeds .fd-empty { text-align: center; padding: 40px 0; }',
     '#tab-feeds h3 { margin: 18px 0 6px; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nui-muted, #9a9a9a); }',
     '#tab-feeds h3 small { font-size: 11px; }',
-    '#tab-feeds .fd-brief { border: 1px solid var(--border, #2a2a2a); border-radius: 6px; padding: 12px 14px 14px; margin-bottom: 18px; background: #0b0b0b; }',
+    '#tab-feeds .fd-brief { border: 1px solid var(--border, #2a2a2a); border-radius: 6px; padding: 12px 14px 14px; margin-bottom: 18px; background: var(--card, #0b0b0b); box-shadow: var(--shadow, none); }',
     '#tab-feeds .fd-brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }',
     '#tab-feeds .fd-brief-head h2 { margin: 0; font-size: 16px; color: var(--accent, #e63946); }',
     '#tab-feeds .fd-seen { width: 100%; margin-top: 14px; min-height: 42px; }',
@@ -1098,7 +1098,7 @@
     '#tab-feeds .fd-row-title { font-size: 14px; line-height: 1.35; }',
     '.fd-row-meta { font-size: 12px; font-weight: 400; color: var(--nui-muted, #9a9a9a); }',
     '#tab-feeds .fd-more-src { color: var(--accent, #e63946); }',
-    '#tab-feeds .fd-badge { flex: none; min-width: 26px; height: 26px; border-radius: 13px; background: var(--accent, #e63946); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }',
+    '#tab-feeds .fd-badge { flex: none; min-width: 26px; height: 26px; border-radius: 13px; background: var(--accent, #e63946); color: var(--on-accent, #fff); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }',
     '#tab-feeds .fd-link { background: none; border: none; color: var(--nui-muted, #9a9a9a); font: inherit; font-size: 12px; padding: 8px 0; cursor: pointer; }',
     '#tab-feeds .fd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; align-items: center; }',
     // The reports of a story: one row that scrolls sideways, however many there are.
@@ -1114,16 +1114,16 @@
     '.fd-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #e63946); margin-right: 6px; vertical-align: middle; }',
     '#tab-feeds .fd-modes .fd-chip { font-size: 12px; padding: 5px 10px; }',
     '#tab-feeds .fd-blogbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }',
-    '#tab-feeds .fd-new { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--accent, #e63946); color: #fff; font-size: 10px; letter-spacing: 0.05em; vertical-align: 2px; }',
+    '#tab-feeds .fd-new { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--accent, #e63946); color: var(--on-accent, #fff); font-size: 10px; letter-spacing: 0.05em; vertical-align: 2px; }',
     '#tab-feeds .fd-hidden { opacity: 0.6; }',
-    '#tab-feeds .fd-prog { display: block; height: 3px; margin-top: 4px; background: #2a2a2a; border-radius: 2px; overflow: hidden; }',
+    '#tab-feeds .fd-prog { display: block; height: 3px; margin-top: 4px; background: var(--raised, #2a2a2a); border-radius: 2px; overflow: hidden; }',
     '#tab-feeds .fd-prog > span { display: block; height: 100%; background: var(--accent, #e63946); }',
     '#tab-feeds .fd-folders { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }',
     '#tab-feeds .fd-folders legend { font-size: 12px; color: var(--nui-muted, #9a9a9a); margin-bottom: 4px; }',
     '#tab-feeds .fd-folders input[name=newfolder] { flex-basis: 100%; }',
     '#tab-feeds .fd-folder-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border, #2a2a2a); flex-wrap: wrap; }',
-    '#fd-sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 995; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; }',
+    '#fd-sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 995; background: var(--scrim, rgba(0,0,0,0.5)); display: flex; align-items: flex-end; justify-content: center; }',
-    '#fd-sheet .fd-sheet-box { width: 100%; max-width: 480px; background: var(--bg, #000); border: 1px solid var(--border, #2a2a2a); border-bottom: none; border-radius: 10px 10px 0 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }',
+    '#fd-sheet .fd-sheet-box { width: 100%; max-width: 480px; background: var(--panel, #000); border: 1px solid var(--border, #2a2a2a); border-bottom: none; border-radius: 10px 10px 0 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }',
     '#fd-sheet .fd-sheet-title { padding: 10px 18px; font-size: 13px; color: var(--nui-muted, #9a9a9a); }',
     '#fd-sheet button { display: block; width: 100%; padding: 14px 18px; background: none; border: none; color: var(--fg, #fff); font: inherit; text-align: left; cursor: pointer; }',
     'body.eink #tab-feeds .fd-prog > span { background: #000; }',
@@ -1132,7 +1132,7 @@
     'body.eink #tab-feeds .fd-new, body.eink .fd-dot { background: #000; }',
     '#tab-feeds .fd-day { margin-top: 16px; }',
     '#tab-feeds .fd-card { display: flex; gap: 12px; width: 100%; padding: 12px 0; background: none; border: none; border-bottom: 1px solid var(--border, #2a2a2a); color: inherit; font: inherit; text-align: left; cursor: pointer; }',
-    '#tab-feeds .fd-thumb { width: 92px; height: 66px; flex: none; object-fit: cover; border-radius: 4px; background: #1a1a1a; order: 2; }',
+    '#tab-feeds .fd-thumb { width: 92px; height: 66px; flex: none; object-fit: cover; border-radius: 4px; background: var(--raised, #1a1a1a); order: 2; }',
     '#tab-feeds .fd-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }',
     '#tab-feeds .fd-card-title { font-size: 15px; font-weight: 700; line-height: 1.35; }',
     '#tab-feeds .fd-card-sum { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--nui-muted, #bdbdbd); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }',
@@ -1172,14 +1172,14 @@
     '#fd-article .fd-art-body a { color: var(--accent, #e63946); }',
     '#fd-article .fd-art-body figure { margin: 12px 0; }',
     '#fd-article .fd-art-body figcaption { font-size: 0.8em; color: var(--nui-muted, #9a9a9a); }',
-    '#fd-article .fd-art-body blockquote { margin: 12px 0; padding-left: 14px; border-left: 3px solid var(--border, #444); }',
+    '#fd-article .fd-art-body blockquote { margin: 12px 0; padding-left: 14px; border-left: 3px solid var(--border-strong, #444); }',
     '#fd-article .fd-art-body pre { white-space: pre-wrap; font-size: 0.85em; }',
     '#fd-article .fd-art-body table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.85em; }',
     '#fd-article .fd-art-body td, #fd-article .fd-art-body th { border: 1px solid var(--border, #333); padding: 4px 6px; }',
     '#fd-article .fd-sources { font-family: var(--font); }',
     '#fd-article .fd-art-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 28px; font-family: var(--font); }',
     'html.fd-reading #nui-dock { display: none; }',
-    '@media (hover: hover) { #tab-feeds .fd-card:hover, #tab-feeds .fd-row:hover, #tab-feeds .fd-post:hover, #tab-feeds .fd-src:hover { background: #111; } }',
+    '@media (hover: hover) { #tab-feeds .fd-card:hover, #tab-feeds .fd-row:hover, #tab-feeds .fd-post:hover, #tab-feeds .fd-src:hover { background: var(--hover, #111); } }',
     // Bright pages and e-ink: black on white, no grey boxes, no thumbnails to flicker.
     'body.bright-bg #tab-feeds .fd-brief, body.eink #tab-feeds .fd-brief { background: #fff; }',
     'body.eink #tab-feeds .fd-thumb { display: none; }',

static/podcasts/podcasts-web.css

@@ -7,10 +7,10 @@
 
 html.dpw {
   --nui-tap: 44px;
-  --nui-muted: #9a9a9a;
+  --nui-muted: var(--muted, #9a9a9a);
-  --nui-panel: #111;
+  --nui-panel: var(--panel, #111);
-  --dpw-surface: #0b0b0b;
+  --dpw-surface: var(--card, #0b0b0b);
-  --dpw-hover: #111;
+  --dpw-hover: var(--hover, #111);
   --dpw-col: 760px;
 }
 
@@ -170,12 +170,12 @@ html.dpw.nui-pod-mini-open:not(.dpw-in-bar) #nui-pod-undo { bottom: calc(var(--d
 @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-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: #141414; }
+  html.dpw .nui-pod-seg:hover { background: var(--hover, #141414); }
 }
 html.dpw .nui-row,
 html.dpw .nui-pod-tab,