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

Reader: Toast-Optik repariert — Button-Font und doppelter Textschatten (SW v35)
All checks were successful
Build and push Docker image / build (push) Successful in 13s
Details
Test / test (push) Successful in 15s
Details

Browse source 
.reader-toast-btn hatte keine font-family gesetzt; Buttons erben das
anders als normaler Text nicht vom body, dadurch fiel "Zurückspringen"
auf die System-Schrift statt Courier New zurück.

.reader-toast/.reader-toast-action erbten außerdem den globalen
Halo-Textschatten (--outline), der eigentlich Text gegen wechselnde
Hintergründe absetzen soll. Die Toasts tauschen Vorder-/Hintergrund
aber bewusst (weiße Pille, schwarzer Text) und sitzen bereits auf
eigenem, blickdichtem Hintergrund — der geerbte Schatten hatte
dadurch exakt die Textfarbe und verdickte die Schrift nur unnötig,
statt einen Kontrast-Effekt zu erzielen. Jetzt wie die übrigen
Elemente mit eigenem farbigen Hintergrund (.btn-play etc.) explizit
mit text-shadow:none von diesem Effekt ausgenommen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
marwin 2026-08-15 00:02:05 +02:00
parent 5053d0036a
commit bb143a249b
2 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
static/css/app.css
View file

@ -77,7 +77,8 @@ html, body {
.btn-lastfm, .btn-lastfm,
.btn-danger, .btn-danger,
.btn-primary, .btn-primary,
.navbar-brand { .navbar-brand,
.reader-toast {
text-shadow: none; text-shadow: none;
} }
@ -1935,7 +1936,7 @@ mark.reader-search-match.active { background:rgba(230,57,70,.7); }
@keyframes toast-fade { 0%,70%{opacity:1} 100%{opacity:0} } @keyframes toast-fade { 0%,70%{opacity:1} 100%{opacity:0} }
.reader-toast-action { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; animation:toast-slide-up 0.2s ease forwards; pointer-events:auto; } .reader-toast-action { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; animation:toast-slide-up 0.2s ease forwards; pointer-events:auto; }
.reader-toast-btn { background:var(--accent,#e63946); color:#fff; border:none; border-radius:calc(var(--radius) - 2px); padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; } .reader-toast-btn { background:var(--accent,#e63946); color:#fff; border:none; border-radius:calc(var(--radius) - 2px); padding:5px 12px; font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.reader-toast-btn:hover { filter:brightness(1.1); } .reader-toast-btn:hover { filter:brightness(1.1); }
@keyframes toast-slide-up { 0%{opacity:0; transform:translate(-50%, 8px);} 100%{opacity:1; transform:translate(-50%, 0);} } @keyframes toast-slide-up { 0%{opacity:0; transform:translate(-50%, 8px);} 100%{opacity:1; transform:translate(-50%, 0);} }

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-v34'; const CACHE = 'diora-v35';
const PODCAST_CACHE = 'diora-podcast-v1'; const PODCAST_CACHE = 'diora-podcast-v1';
const SHELL = [ const SHELL = [
'/static/css/app.css', '/static/css/app.css',