Fix platform charts and accessibility overrides

2026-07-14 15:12:41 +02:00
parent bd76cd11de
commit 7a97e6f24e
5 changed files with 30 additions and 3 deletions
@@ -7,6 +7,10 @@ Versionierung [semantisch](https://semver.org/lang/de/).
 ## [Unreleased] – 2026-07-14 · SysnaptiK Neural Rebrand

 ### Marke & Plattform
+- **Fortschritt & Barrierefreiheit repariert:** Die Diagramme warten jetzt auf die
+  Neural-Plattformklasse und erscheinen dadurch in Mint statt im alten Orange.
+  Hochkontrast und Farbenblind-Modus überschreiben nun auch lokale Plattform- und
+  Spieltokens; der Farbenblind-Modus nutzt eine klar unterscheidbare Palette.
 - **Echter Lernnetz-Status:** Der Dashboard-Status prüft nun serverseitig den
  Fortschrittsspeicher und zeigt nachvollziehbar „bereit“ oder „eingeschränkt“ samt
  Zeitstempel und registrierten Lernmodulen. Der dekorative 100%-Ring wurde entfernt.
@@ -105,6 +105,8 @@ Accessibility-Widget soll anschließend jeweils den lokalen Akzent übernehmen.
 > sichtbare FluxTimer-/Zeitreise-Copy. Domain-/DNS-Umzug und technische Paket-/Tabellennamen
 > bleiben bewusst separate Schritte. Der Dashboard-Status ist als echter Lernnetz-Status
 > umgesetzt: Er prüft den Fortschrittsspeicher statt eine feste Verfügbarkeit vorzutäuschen.
+> Die Plattformdiagramme und Accessibility-Modi berücksichtigen die Neural-Tokens auch
+> dann, wenn einzelne Seiten oder Spiele eigene lokale Akzente setzen.

 ### Ziel und Abgrenzung

@@ -1,7 +1,24 @@
 html[data-mf-font="115"]{font-size:115%!important}html[data-mf-font="130"]{font-size:130%!important}html[data-mf-font="150"]{font-size:150%!important}
 html[data-mf-readable="true"] body,html[data-mf-readable="true"] button,html[data-mf-readable="true"] input,html[data-mf-readable="true"] select,html[data-mf-readable="true"] textarea{font-family:Verdana,Arial,sans-serif!important;letter-spacing:.025em;word-spacing:.1em;line-height:1.65}
-html[data-mf-contrast="true"]{--bg:#000;--panel:#050505;--surface:#090909;--surface-2:#111;--text:#fff;--heading:#fff;--muted:#e7e7e7;--border:#fff;--border-accent:#ffd21a;--accent:#ffd21a;--accent-2:#fff}
-html[data-mf-color="safe"]{--success:#2f9bff;--danger:#ff8a3d;--secondary:#c58cff;--esc-accent:#ffd166}
+/* Die Tokens liegen je nach Spiel auf body bzw. der jeweiligen Spielwurzel.
+   Deshalb müssen die Overrides auf der ganzen Oberfläche gelten – ein Override
+   nur auf html wurde von den lokalen Themes bislang wieder überschrieben. */
+html[data-mf-contrast="true"] body,html[data-mf-contrast="true"] body *{--bg:#000!important;--panel:#050505!important;--panel-2:#080808!important;--surface:#0b0b0b!important;--surface-2:#151515!important;--text:#fff!important;--heading:#fff!important;--muted:#f1f1f1!important;--border:#fff!important;--line:#fff!important;--border-accent:#ffd21a!important;--accent:#ffd21a!important;--accent-2:#fff!important;--secondary:#65d9ff!important;--secondary-2:#fff!important;--success:#65d9ff!important;--danger:#ff9d3d!important;--esc-accent:#ffd21a!important;--bh-accent:#ffd21a!important;--sc-accent:#65d9ff!important;--nw-accent:#65d9ff!important;--mm-accent:#ffd21a!important;--mm-secondary:#65d9ff!important;--tt-accent:#ffd21a!important;--tt-secondary:#65d9ff!important;--dl-accent:#ffd21a!important;--dl-secondary:#65d9ff!important;--ss-accent:#ffd21a!important;--ss-secondary:#65d9ff!important;--ff-accent:#ffd21a!important;--ff-secondary:#65d9ff!important;--glow-s:transparent!important;--glow-w:transparent!important;--esc-glow:transparent!important;--bh-glow:transparent!important;--sc-glow:transparent!important;--nw-glow:transparent!important;--mm-glow:transparent!important;--tt-glow:transparent!important;--dl-glow:transparent!important;--ss-glow:transparent!important;--ff-glow:transparent!important}
+html[data-mf-contrast="true"] body{background:#000!important;color:#fff!important;color-scheme:dark}
+html[data-mf-contrast="true"] body *,html[data-mf-contrast="true"] body *::before,html[data-mf-contrast="true"] body *::after{text-shadow:none!important;box-shadow:none!important}
+html[data-mf-contrast="true"] body :focus-visible{outline:3px solid #ffd21a!important;outline-offset:3px}
+/* Okabe-Ito-nahe Palette: die Karten und die Spieltokens ändern sich sichtbar,
+   ohne sich für Rot-/Grün-Sehschwächen nur über Farbe unterscheiden zu müssen. */
+html[data-mf-color="safe"] body,html[data-mf-color="safe"] body *{--success:#0072b2!important;--danger:#e69f00!important;--secondary:#cc79a7!important;--secondary-2:#56b4e9!important;--esc-accent:#e69f00!important;--bh-accent:#d55e00!important;--sc-accent:#56b4e9!important;--nw-accent:#0072b2!important;--mm-accent:#cc79a7!important;--mm-secondary:#56b4e9!important;--tt-accent:#f0e442!important;--tt-secondary:#0072b2!important;--dl-accent:#009e73!important;--dl-secondary:#56b4e9!important;--ss-accent:#0072b2!important;--ss-secondary:#e69f00!important;--ff-accent:#d55e00!important;--ff-secondary:#cc79a7!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-mindmatch{--accent:#cc79a7!important;--accent-2:#f4b9dd!important;--glow-s:rgba(204,121,167,.38)!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-techtacular{--accent:#f0e442!important;--accent-2:#fff6a5!important;--glow-s:rgba(240,228,66,.36)!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-devlab{--accent:#009e73!important;--accent-2:#8de2c6!important;--glow-s:rgba(0,158,115,.38)!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-syntaxsaga{--accent:#0072b2!important;--accent-2:#9dd9fa!important;--glow-s:rgba(0,114,178,.38)!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-codeescape{--accent:#e69f00!important;--accent-2:#ffd889!important;--glow-s:rgba(230,159,0,.38)!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-serviceclash{--accent:#56b4e9!important;--accent-2:#b5e5ff!important;--glow-s:rgba(86,180,233,.38)!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-bughunter{--accent:#d55e00!important;--accent-2:#ffb584!important;--glow-s:rgba(213,94,0,.38)!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-networker{--accent:#0072b2!important;--accent-2:#9dd9fa!important;--glow-s:rgba(0,114,178,.38)!important}
+html[data-mf-color="safe"] body.sn-platform .mf-card-finalprotocol{--accent:#999!important;--accent-2:#e1e1e1!important;--glow-s:rgba(190,190,190,.30)!important}
 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}
@@ -34,7 +34,7 @@
  if (!document.querySelector('link[data-accessibility]')) {
    var accessibilityCss = document.createElement('link');
    accessibilityCss.rel = 'stylesheet';
-    accessibilityCss.href = '/css/accessibility.css?v=3';
+    accessibilityCss.href = '/css/accessibility.css?v=4';
    accessibilityCss.setAttribute('data-accessibility', '');
    document.head.appendChild(accessibilityCss);
    var accessibilityPlacementCss = document.createElement('link');
@@ -81,6 +81,9 @@

 <!-- Diagramme -->
 <script th:inline="javascript">
+  // theme.js setzt die Plattformklasse erst mit DOMContentLoaded. Die Charts müssen
+  // danach entstehen, sonst lesen sie noch die alte globale Akzentfarbe.
+  window.addEventListener('DOMContentLoaded', () => {
    // Die Plattform-Tokens liegen auf body.sn-platform. Von dort lesen, damit die
    // Diagramme nicht auf die alte globale Akzentfarbe zurückfallen.
    const css = getComputedStyle(document.body);
@@ -142,6 +145,7 @@
            }
        }
    });
+  });
 </script>

 <!-- Footer -->