From 33ca68270916e8ee1474e295914de2b7f1f4058b Mon Sep 17 00:00:00 2001 From: mrwnslz Date: Wed, 14 Oct 2026 17:51:33 +0200 Subject: [PATCH] Feeds und Podcast-Seite im Browser auf die Farbvariablen (docs/theme.md) Co-Authored-By: Claude Opus 5.5 --- static/js/feeds.js | 22 +++++++++++----------- static/podcasts/podcasts-web.css | 12 ++++++------ 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/static/js/feeds.js b/static/js/feeds.js index 20f144c..54e7fdf 100644 --- a/static/js/feeds.js +++ b/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-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-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: 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 .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 { 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(--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; }', diff --git a/static/podcasts/podcasts-web.css b/static/podcasts/podcasts-web.css index b33310b..2cc99d2 100644 --- a/static/podcasts/podcasts-web.css +++ b/static/podcasts/podcasts-web.css @@ -7,10 +7,10 @@ html.dpw { --nui-tap: 44px; - --nui-muted: #9a9a9a; - --nui-panel: #111; - --dpw-surface: #0b0b0b; - --dpw-hover: #111; + --nui-muted: var(--muted, #9a9a9a); + --nui-panel: var(--panel, #111); + --dpw-surface: var(--card, #0b0b0b); + --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,