mrwnslz/diora-web
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Reader: Marker-Farben mit color:inherit statt UA-Default-Schwarz (SW v30)
All checks were successful
Build and push Docker image / build (push) Successful in 16s
Details
Test / test (push) Successful in 15s
Details

Browse source 
mark-Elemente haben browserseitig einen UA-Default (color:black), der bislang
nicht überschrieben wurde — beim Markieren von Text im dunklen Standard-Theme
(weißer Fließtext) sprang die Markierung dadurch abrupt auf schwarzen Text.
Jetzt color:inherit, damit markierter Text immer die Farbe des umgebenden
Texts behält; die vier Hintergrundfarben sind dafür kräftiger/dunkler gewählt,
sodass sie in allen drei Themes (dunkel/weißer Text, Sepia, Hell) ausreichend
Kontrast zum inherited Text bieten (WCAG-Kontrastwerte 4.8:1–11.7:1, per
Playwright-Screenshot in allen drei Themes gegengeprüft).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
marwin 2026-08-04 18:44:09 +02:00
parent b805d62b11
commit 42bc090a28
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
static/css/app.css
View file

@ -1812,11 +1812,17 @@ body.reader-immersive.reader-show-bottom .reader-overlay { bottom: var(--bar-h)
/* Highlight marks */ /* Highlight marks */
.reader-no-bold * { font-weight: normal !important; } .reader-no-bold * { font-weight: normal !important; }
.reader-content img { max-width: 100%; height: auto; display: block; } .reader-content img { max-width: 100%; height: auto; display: block; }
.epub-highlight { border-radius:2px; cursor:pointer; } /* color:inherit overrides the browser's UA-default `mark { color: black }` —
.epub-highlight[data-color="yellow"] { background:rgba(241,196,15,.4); } without it, highlighted text abruptly flips to black regardless of the
.epub-highlight[data-color="green"] { background:rgba(46,204,113,.35); } reader theme's own text color (jarring on the default dark theme, whose
.epub-highlight[data-color="blue"] { background:rgba(52,152,219,.35); } body text is white). Inheriting keeps highlighted text the same color as
.epub-highlight[data-color="red"] { background:rgba(230,57,70,.35); } the text around it in every theme; the background tones below are chosen
dark/saturated enough to stay readable specifically against white text. */
.epub-highlight { border-radius:2px; cursor:pointer; color:inherit; }
.epub-highlight[data-color="yellow"] { background:rgba(184,134,11,.55); }
.epub-highlight[data-color="green"] { background:rgba(30,140,90,.55); }
.epub-highlight[data-color="blue"] { background:rgba(41,110,180,.55); }
.epub-highlight[data-color="red"] { background:rgba(190,50,60,.55); }
/* Margin ("page margin") panel — left of the reader content. Highlights without /* Margin ("page margin") panel — left of the reader content. Highlights without
a note show as a small color dot; anything with note text (freeform notes or a note show as a small color dot; anything with note text (freeform notes or

2
static/js/sw.js
View file

@ -2,7 +2,7 @@
* diora service worker — caches the app shell for offline use. * diora service worker — caches the app shell for offline use.
*/ */
const CACHE = 'diora-v29'; const CACHE = 'diora-v30';
const PODCAST_CACHE = 'diora-podcast-v1'; const PODCAST_CACHE = 'diora-podcast-v1';
const SHELL = [ const SHELL = [
'/static/css/app.css', '/static/css/app.css',