From 87cd63e373f8caa1cf5189d0c8b34f276c622056 Mon Sep 17 00:00:00 2001 From: AliceDarkest Date: Sun, 12 Jul 2026 23:40:16 +0200 Subject: [PATCH] =?UTF-8?q?Accessibility-Trigger=20ohne=20Inhalts=C3=BCber?= =?UTF-8?q?lagerung=20andocken?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 ++ src/main/resources/static/css/accessibility.css | 5 +++-- src/main/resources/static/js/theme.js | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1287613..1fa4ed7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,8 @@ Docker/CI-Härtung und erste Tests. großer Cursor und ein zentraler Reset. - Floating-Button an die Mindflux-Palette angepasst; der Schrift-Schalter heißt nun transparent „Lesemodus (Dyslexie)“ und weist auf Verdana plus vergrößerte Abstände hin. +- Der dauerhaft erreichbare Auslöser besitzt nun reservierten Layoutplatz statt Spielkarten oder + Formulare zu überdecken: seitlich auf Desktop und in einer unteren Schutzzone auf kleinen Displays. - Das Panel besitzt Dialogsemantik, sichtbaren Tastaturfokus, Escape-Schließen und verständliche Aktivzustände; Spielzustände oder Benutzerkonten werden dabei nicht verändert. - **DevLab-Spielansicht nutzt große Bildschirme aus:** Die bisherige starre Begrenzung auf diff --git a/src/main/resources/static/css/accessibility.css b/src/main/resources/static/css/accessibility.css index 079bfe0..c966318 100644 --- a/src/main/resources/static/css/accessibility.css +++ b/src/main/resources/static/css/accessibility.css @@ -5,5 +5,6 @@ html[data-mf-color="safe"]{--success:#2f9bff;--danger:#ff8a3d;--secondary:#c58cf html[data-mf-mono="true"] body{filter:grayscale(1)}html[data-mf-links="true"] a{text-decoration:underline!important;text-underline-offset:.18em;text-decoration-thickness:.12em} html[data-mf-motion="false"] *,html[data-mf-motion="false"] *::before,html[data-mf-motion="false"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important} html[data-mf-cursor="true"],html[data-mf-cursor="true"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 1v25l7-7 5 11 5-2-5-10h10z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 2 1,auto!important} -.mf-a11y-trigger{position:fixed;left:18px;bottom:18px;z-index:1800;width:56px;height:56px;border:1px solid var(--border-accent);border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);box-shadow:0 0 22px var(--glow-s),0 7px 24px rgba(0,0,0,.38);cursor:pointer}.mf-a11y-trigger svg{width:31px;height:31px}.mf-a11y-trigger:focus-visible,.mf-a11y-panel button:focus-visible{outline:3px solid var(--accent);outline-offset:3px} -.mf-a11y-panel{position:fixed;left:18px;bottom:84px;z-index:1801;width:min(450px,calc(100vw - 24px));max-height:min(720px,calc(100dvh - 110px));overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 45px rgba(0,0,0,.55)}.mf-a11y-panel[hidden]{display:none}.mf-a11y-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.65rem;background:#07121f;color:#fff;z-index:1}.mf-a11y-head h2{font:800 1.05rem Arial,sans-serif;margin:0 auto}.mf-a11y-close{width:44px;height:44px;border:0;border-radius:6px;background:#fff;color:#07121f;font-size:1.8rem;cursor:pointer}.mf-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface)}.mf-a11y-option{min-height:88px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer}.mf-a11y-option strong{font-size:1.35rem}.mf-a11y-option[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mf-a11y-option small{color:var(--muted)}@media(max-width:520px){.mf-a11y-trigger{left:10px;bottom:10px}.mf-a11y-panel{left:6px;bottom:74px}.mf-a11y-grid{grid-template-columns:1fr 1fr}.mf-a11y-option{min-height:78px;font-size:.82rem}} +body{padding-left:72px}.mf-a11y-dock{position:fixed;inset:0 auto 0 0;z-index:1799;width:72px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 18px;background:color-mix(in srgb,var(--panel) 94%,transparent);border-right:1px solid var(--border);box-shadow:5px 0 18px rgba(0,0,0,.16)} +.mf-a11y-trigger{position:fixed;left:8px;bottom:18px;z-index:1800;width:56px;height:56px;flex:0 0 auto;border:1px solid var(--border-accent);border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);box-shadow:0 0 22px var(--glow-s),0 7px 24px rgba(0,0,0,.38);cursor:pointer}.mf-a11y-trigger svg{width:31px;height:31px}.mf-a11y-trigger:focus-visible,.mf-a11y-panel button:focus-visible{outline:3px solid var(--accent);outline-offset:3px} +.mf-a11y-panel{position:fixed;left:82px;bottom:18px;z-index:1801;width:min(450px,calc(100vw - 100px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 45px rgba(0,0,0,.55)}.mf-a11y-panel[hidden]{display:none}.mf-a11y-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.65rem;background:#07121f;color:#fff;z-index:1}.mf-a11y-head h2{font:800 1.05rem Arial,sans-serif;margin:0 auto}.mf-a11y-close{width:44px;height:44px;border:0;border-radius:6px;background:#fff;color:#07121f;font-size:1.8rem;cursor:pointer}.mf-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface)}.mf-a11y-option{min-height:88px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer}.mf-a11y-option strong{font-size:1.35rem}.mf-a11y-option[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mf-a11y-option small{color:var(--muted)}@media(max-width:700px){body{padding-left:0;padding-bottom:68px}.mf-a11y-dock{inset:auto 0 0 0;width:auto;height:68px;padding:0 10px;justify-content:flex-start;align-items:center;border-right:0;border-top:1px solid var(--border);box-shadow:0 -5px 18px rgba(0,0,0,.18)}.mf-a11y-trigger{width:52px;height:52px}.mf-a11y-panel{left:6px;bottom:74px;width:calc(100vw - 12px);max-height:calc(100dvh - 86px)}.mf-a11y-grid{grid-template-columns:1fr 1fr}.mf-a11y-option{min-height:78px;font-size:.82rem}} diff --git a/src/main/resources/static/js/theme.js b/src/main/resources/static/js/theme.js index 0f7ed8e..274f1db 100644 --- a/src/main/resources/static/js/theme.js +++ b/src/main/resources/static/js/theme.js @@ -27,13 +27,13 @@ if (!document.querySelector('link[data-accessibility]')) { var accessibilityCss = document.createElement('link'); accessibilityCss.rel = 'stylesheet'; - accessibilityCss.href = '/css/accessibility.css?v=2'; + accessibilityCss.href = '/css/accessibility.css?v=3'; accessibilityCss.setAttribute('data-accessibility', ''); document.head.appendChild(accessibilityCss); } if (!document.querySelector('script[data-accessibility]')) { var accessibilityScript = document.createElement('script'); - accessibilityScript.src = '/js/accessibility.js?v=2'; + accessibilityScript.src = '/js/accessibility.js?v=3'; accessibilityScript.defer = true; accessibilityScript.setAttribute('data-accessibility', ''); document.head.appendChild(accessibilityScript);