From 13c71c56785e9c0d2634b96be2aefd4421b7447b Mon Sep 17 00:00:00 2001 From: Matthias Andreas Benkard Date: Sun, 16 Aug 2026 10:12:01 +0200 Subject: =?UTF-8?q?Das=20Erscheinungsbild=20wird=20schwarzwei=C3=9F=20wie?= =?UTF-8?q?=20ein=20Gesetzblatt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Das Werkzeug stellt amtliche Rechtstexte dar, trat dabei aber in einem warmen Braun auf, mit abgerundeten Kästen und einer rot-grünen Synopse. Fortan tritt es in reinen Graustufen auf, hell wie dunkel. Die Schmuckfarbe entfällt ersatzlos; weil sie es war, die die Verweise kenntlich machte, sind diese nunmehr unterstrichen, und die drei Zustände der Meldung scheiden sich durch matten Text, kräftigen Rahmen und doppelt starken Rahmen nebst Fettung statt durch Rot. Die Umstellung der Synopse hat einen Mangel offengelegt, der schon vorher bestand: Die Einfügung hob die ihr vom Browser zugedachte Unterstreichung ausdrücklich auf (text-decoration: none). Damit war der grüne Grund das einzige Merkmal, an dem eine Einfügung überhaupt zu erkennen war — wer Farben nicht oder anders wahrnimmt oder die Synopse schwarzweiß ausdruckte, sah sie nicht. Solange Grün danebenlag, fiel das nicht auf; ohne Grün wäre die Einfügung unsichtbar geworden. Die Unterstreichung ist wiederhergestellt und tritt nun gegen die Durchstreichung der Löschung, beide auf gemeinsamer Hinterlegung und in ihrer je eigenen Spalte. Die Abzeichen scheiden sich ebenso durch die Form: gefüllt, durchgestrichen, schlicht gerahmt. Beiläufig erhält der Körper der Synopse ausdrückliche Schrift- und Grundfarbe. Der klebende Spaltenkopf bezog seinen Grund bisher durch Vererbung und hatte mithin keinen verlässlichen; für den Druck wird die Hinterlegung festgelegt, damit sie nicht fortfällt. Sämtliche dreihundertzwölf Testfälle bestehen unverändert; die Auszeichnung ist dieselbe geblieben, geändert sind allein die Stilblätter. Die Synopse des Gebäudeenergiegesetzes ergibt weiterhin achtundsechzig angewandte Befehle, einundfünfzig zur manuellen Prüfung und siebenundvierzig geänderte Normen. Seiten und Synopse sind in Hell- und Dunkelfassung in Augenschein genommen worden. Das eingebettete Stilblatt steckt im Wasm-Erzeugnis; die öffentliche Fassung zeigt die neue Synopse daher erst nach einem Lauf des Profils -Pwasm nebst deploy/webpaket.sh. Co-Authored-By: Claude Opus 5 Change-Id: Ib34164c7cbb77b71baba133c5244a1f52326ae87 --- .../eu/mulk/aendggner/synopse/HtmlRenderer.java | 56 +++++++++++++--------- .../resources/eu/mulk/aendggner/web/favicon.svg | 8 ++-- src/main/resources/eu/mulk/aendggner/web/style.css | 55 ++++++++++----------- 3 files changed, 66 insertions(+), 53 deletions(-) (limited to 'src/main') diff --git a/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java b/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java index 834423a..84446c1 100644 --- a/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java +++ b/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java @@ -206,23 +206,24 @@ public final class HtmlRenderer { private static final String CSS = """ + /* Schwarz auf Papier wie ein Gesetzblatt. Streichung und Einfügung unterscheiden + sich deshalb nicht durch Farbe, sondern durch Form: durchgestrichen gegen + unterstrichen, dazu die Spalte, in der sie stehen. */ :root { color-scheme: light dark; - --del-bg: #ffd7d7; - --del-fg: #8b0000; - --ins-bg: #d7f5d7; - --ins-fg: #005f00; - --rand: #ccc; - --dezent: #666; + --fg: #111; + --bg: #fff; + --rand: #bbb; + --dezent: #595959; + --hinterlegung: #ececec; } @media (prefers-color-scheme: dark) { :root { - --del-bg: #5a1f1f; - --del-fg: #ffb3b3; - --ins-bg: #1f4a1f; - --ins-fg: #b3ffb3; - --rand: #555; - --dezent: #aaa; + --fg: #e6e6e6; + --bg: #141414; + --rand: #4a4a4a; + --dezent: #a0a0a0; + --hinterlegung: #333; } } body { @@ -231,13 +232,15 @@ public final class HtmlRenderer { max-width: 90rem; margin: 0 auto; padding: 1rem 2rem; + color: var(--fg); + background: var(--bg); } header h1 { margin-bottom: 0.2rem; } .langue { font-style: italic; margin-top: 0; } .quelle, .statistik, .gliederung, .ursachen { color: var(--dezent); font-size: 0.9rem; } .entwurfshinweis { border: 1px solid var(--rand); - border-left: 4px solid var(--del-fg); + border-left: 4px solid var(--fg); padding: 0.5rem 0.75rem; margin: 0.6rem 0; font-size: 0.95rem; @@ -267,32 +270,41 @@ public final class HtmlRenderer { font-size: 0.95rem; } del, .alt del { - background: var(--del-bg); - color: var(--del-fg); + background: var(--hinterlegung); + color: inherit; text-decoration: line-through; } ins, .neu ins { - background: var(--ins-bg); - color: var(--ins-fg); - text-decoration: none; + background: var(--hinterlegung); + color: inherit; + text-decoration: underline; } .leer { color: var(--dezent); font-style: italic; } + /* Gerahmte Kästchen in Versalien; die drei Arten trennt die Form, nicht die Farbe. + Beschriftet sind sie ohnehin. */ .badge { font-family: system-ui, sans-serif; font-size: 0.7rem; font-weight: normal; - border-radius: 0.6rem; + text-transform: uppercase; + letter-spacing: 0.06em; + border: 1px solid var(--rand); + color: var(--dezent); padding: 0.1rem 0.55rem; vertical-align: middle; } - .neu-badge { background: var(--ins-bg); color: var(--ins-fg); } - .aufgehoben-badge { background: var(--del-bg); color: var(--del-fg); } - .geaendert-badge { border: 1px solid var(--rand); color: var(--dezent); } + .neu-badge { background: var(--fg); color: var(--bg); border-color: var(--fg); } + .aufgehoben-badge { text-decoration: line-through; } + /* .geaendert-badge trägt bereits den schlichten Rahmen aus .badge. */ section.manuell { margin-top: 2rem; } section.manuell li { margin-bottom: 0.7rem; } .originaltext { color: var(--dezent); font-size: 0.85rem; } @media print { .vergleich { break-inside: avoid; } + /* Ohne diese Festlegung wirft der Druck die Hinterlegung weg; Durchstreichung + und Unterstreichung überstehen ihn ohnehin. */ + :root { --hinterlegung: #e4e4e4; } + del, ins, .neu-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } """; } diff --git a/src/main/resources/eu/mulk/aendggner/web/favicon.svg b/src/main/resources/eu/mulk/aendggner/web/favicon.svg index 4f6a847..5b19c76 100644 --- a/src/main/resources/eu/mulk/aendggner/web/favicon.svg +++ b/src/main/resources/eu/mulk/aendggner/web/favicon.svg @@ -1,9 +1,9 @@ - - - + - § diff --git a/src/main/resources/eu/mulk/aendggner/web/style.css b/src/main/resources/eu/mulk/aendggner/web/style.css index c9d6db1..d770551 100644 --- a/src/main/resources/eu/mulk/aendggner/web/style.css +++ b/src/main/resources/eu/mulk/aendggner/web/style.css @@ -1,19 +1,18 @@ +/* Schwarz auf Papier wie ein Gesetzblatt: keine Buntheit, nur Graustufen. */ :root { color-scheme: light dark; - --fg: #1b1b1b; - --bg: #fdfdfb; - --muted: #5a5a54; - --accent: #6b4423; - --border: #d8d3c4; + --fg: #111; + --bg: #fff; + --muted: #595959; + --border: #bbb; } @media (prefers-color-scheme: dark) { :root { - --fg: #e8e6df; - --bg: #1c1b18; - --muted: #a6a296; - --accent: #c99a6c; - --border: #3a382f; + --fg: #e6e6e6; + --bg: #141414; + --muted: #a0a0a0; + --border: #4a4a4a; } } @@ -62,8 +61,10 @@ address { margin: 0.5rem 0; } +/* Ohne Schmuckfarbe trägt allein die Unterstreichung das Klick-Signal. */ a { - color: var(--accent); + color: var(--fg); + text-decoration: underline; } .field { @@ -93,7 +94,6 @@ input[type="file"] { width: 100%; padding: 0.4rem; border: 1px solid var(--border); - border-radius: 4px; background: transparent; color: inherit; } @@ -102,22 +102,23 @@ button { font: inherit; font-weight: bold; padding: 0.6rem 1.5rem; - border: 1px solid var(--accent); - border-radius: 4px; - background: var(--accent); + border: 1px solid var(--fg); + background: var(--fg); color: var(--bg); cursor: pointer; } +/* Umkehr statt brightness(): Ein schwarzer Knopf wird davon nicht heller. */ button:hover { - filter: brightness(1.1); + background: var(--bg); + color: var(--fg); } +/* Warnung ohne Rot: der doppelt starke Rahmen trägt das Gewicht. */ .noscript { margin: 0 0 2rem; padding: 1rem; - border: 1px solid #a33; - border-radius: 6px; + border: 2px solid var(--fg); font-size: 0.875rem; } @@ -127,13 +128,12 @@ button:hover { margin: 0 0 1.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border); - border-radius: 6px; font-size: 0.875rem; } .einfuehrung summary { font-weight: bold; - color: var(--accent); + text-decoration: underline; cursor: pointer; } @@ -164,7 +164,6 @@ button:hover { margin-top: 2rem; padding: 1rem; border: 1px solid var(--border); - border-radius: 6px; font-size: 0.875rem; color: var(--muted); } @@ -178,18 +177,19 @@ footer { } footer a { - color: var(--accent); + color: var(--muted); } .nebenquelle { font-size: 0.8125rem; } +/* Die drei Zustände unterscheiden sich ohne Farbe: matter Text, kräftiger Rahmen, + doppelt starker Rahmen mit Fettung. */ .meldung { margin-top: 1.25rem; padding: 0.75rem 1rem; border: 1px solid var(--border); - border-radius: 6px; font-size: 0.9375rem; } @@ -198,15 +198,16 @@ footer a { } .meldung.fertig { - border-color: var(--accent); + border-color: var(--fg); } .meldung.fehler { - border-color: #a33; - color: #a33; + border: 2px solid var(--fg); + font-weight: bold; } +/* grayscale() ist an einem grauen Knopf wirkungslos. */ button[disabled] { - filter: grayscale(0.6); + opacity: 0.5; cursor: progress; } -- cgit v1.2.1