troogs/duempelkas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(readability): add scalable text and responsive high-contrast layouts (U13)

Browse Source
This commit is contained in:
troogs
2026-11-02 19:33:50 +01:00
parent 45fe327840
commit 9f8c4b7af1
8 changed files with 80 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Duempelkas.Desktop/wwwroot/css/app.css
+39
View File
@@ -658,3 +658,42 @@ body:has(dialog[open]) .toast-stack:not(.modal-toasts) { display: none; }
.history-toggle { display: block; padding: .75rem 0; }
.entry-deleted { opacity: 1 !important; }
.deleted-status { text-decoration: none; color: var(--color-text-muted); margin: .3rem 0; }
/* Readable theme roles, also used when external styles are unavailable. */
:root { --color-bg: #f1f5f9; --color-income: #166534; --color-expense: #b91c1c; --color-transfer: #1d4ed8; --color-text-muted: #475569; --color-border: #94a3b8; }
html[data-ui-theme="dark"] { --color-income: #4ade80; --color-expense: #fca5a5; --color-transfer: #93c5fd; --color-text-muted: #cbd5e1; --color-border: #64748b; }
html { font-size: var(--app-font-size, 16px); }
body { line-height: 1.5; }
h1,h2,h3,h4,h5,h6 { font-family: inherit; }
small, .text-muted { color: var(--color-text-muted) !important; }
small { font-size: .9rem; }
.form-label, .table thead th { text-transform: none; letter-spacing: normal; font-size: 1rem; }
.app-shell { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.app-navbar, .app-footer { flex-wrap: wrap; gap: .5rem; height: auto; min-height: 2.5rem; }
.app-footer { font-size: .9rem; }
.reading-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.reading-controls select { padding: .35rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); }
.page-heading, .card-title { overflow-wrap: anywhere; white-space: normal; }
.app-modal { box-sizing: border-box; width: min(38rem, calc(100vw - 2rem)); min-width: 0; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); }
.app-modal p, .app-modal label { overflow-wrap: anywhere; }
.app-modal .dialog-actions, .app-modal form > .d-flex { flex-wrap: wrap; position: sticky; bottom: -1rem; background: var(--color-surface); padding: .75rem 0; }
.form-container { max-width: none; }
.btn-primary { background: #4338ca; border-color: #4338ca; color: #fff; }
.btn-success { background: #166534; border-color: #166534; color: #fff; }
.btn-info { background: #1e40af; border-color: #1e40af; color: #fff; }
.btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-warning { background: #fbbf24; border-color: #fbbf24; color: #111827; }
.btn-secondary { background: var(--color-surface-hover); color: var(--color-text); border-color: var(--color-border); }
.btn:hover { filter: brightness(.92); }
input,select,textarea,button { font: inherit; }
button,summary { touch-action: manipulation; }
@media (max-width: 1000px) {
.form-container { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.form-container label,.form-container input,.form-container select,.form-container textarea { grid-column: auto; }
.action-toolbar { gap: .5rem; }
}
.btn-primary:hover { background: #4338ca; border-color: #4338ca; color: #fff; }
.btn-success:hover { background: #166534; border-color: #166534; color: #fff; }
.btn-info:hover { background: #1e40af; border-color: #1e40af; color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
src/Duempelkas.Desktop/wwwroot/js/app.js
+11
View File
@@ -30,3 +30,14 @@ window.duempelkasDialog = {
close(dialog) { if (dialog?.open) dialog.close(); },
focus(dialog, selector) { dialog.querySelector(selector)?.focus(); }
};
window.duempelkasReading = {
get() { let value = 100; try { value = Number(localStorage.getItem('duempelkas-text-scale')) || 100; } catch (_) {} return this.set(value, false); },
set(value, persist = true) {
const scale = [100,125,150,200].includes(Number(value)) ? Number(value) : 100;
document.documentElement.style.setProperty('--app-font-size', (16 * scale / 100) + 'px');
if (persist) { try { localStorage.setItem('duempelkas-text-scale', String(scale)); } catch (_) {} }
return scale;
}
};
window.duempelkasReading.get();