aboutsummaryrefslogtreecommitdiff
path: root/src/main
diff options
context:
space:
mode:
Diffstat (limited to 'src/main')
-rw-r--r--src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java56
-rw-r--r--src/main/resources/eu/mulk/aendggner/web/favicon.svg8
-rw-r--r--src/main/resources/eu/mulk/aendggner/web/style.css55
3 files changed, 66 insertions, 53 deletions
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 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="ÄndGgner">
- <!-- Farben wie in style.css: heller Grund, brauner Akzent. Ein Favicon erbt keine
+ <!-- Farben wie in style.css: Papier, Haarlinie, schwarzes Zeichen. Ein Favicon erbt keine
CSS-Variablen, deshalb stehen die Werte hier ausgeschrieben. -->
- <rect width="32" height="32" rx="6" fill="#fdfdfb"/>
- <rect x="0.75" y="0.75" width="30.5" height="30.5" rx="5.25" fill="none" stroke="#d8d3c4"
+ <rect width="32" height="32" fill="#fff"/>
+ <rect x="0.75" y="0.75" width="30.5" height="30.5" fill="none" stroke="#bbb"
stroke-width="1.5"/>
- <text x="16" y="17" fill="#6b4423" font-family="Georgia, 'Times New Roman', serif"
+ <text x="16" y="17" fill="#111" font-family="Georgia, 'Times New Roman', serif"
font-size="22" text-anchor="middle" dominant-baseline="central">§</text>
</svg>
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;
}
generated by cgit v1.2.1 (git 2.18.0) at 2026-08-25 11:53:58 +0000