895187ac36
v2 unangetastet — v3 überschreibt nur Sub-Blocks. Neue v2-Blocks
für Override-Punkte: antrag_id_section, score_hero_section,
matrix_section, verbesserungen_section, aktions_section,
comments_section.
v3-Anpassungen:
1. Drucksache-ID: "Antrag im Landtag NRW · Drucksache 18/18246" —
"Drucksache" als Glossar-Hinweis klickbar.
2. Score-Hero: großes Wort-Etikett ("Stark gemeinwohlfördernd" /
"Gemischt" / "Widerspricht dem Gemeinwohl") aus verdict_title oder
abgeleitet. Score-Zahl als kleiner Untertitel mit Glossar-Link.
Akzentfarbe links (grün/blau/rot je nach Score).
3. Matrix: 5 Werte als Diverging-Bars (-5..+5) sofort sichtbar;
volle 5×5-Matrix in <details>. Aggregation = Spalten-Mittel über
die 5 Berührungsgruppen.
4. Verbesserungsvorschläge: <details> default zu, Hint-Text mit Anzahl.
5. Aktions-Links: JSON-Export raus — nur PDF + Permalink.
6. Kommentare: <details> default zu (für Erst-Leser:innen unwichtig).
Glossar-System: 6 Begriffe (Drucksache, Fraktion, GWÖ-Score,
GWÖ-Matrix, Heuchelei-Marker, Opportunismus-Marker) mit Klick/Focus-
Tooltip via Modal. Trigger: Element mit class="v3-glossar"
data-glossar="<key>".
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
295 lines
7.1 KiB
CSS
295 lines
7.1 KiB
CSS
/*
|
|
* v3.css — Bürgerinnen-Modus-Erweiterung über v2.css
|
|
*
|
|
* v3 = Sandbox für Issues #184 (CD-Konformität) und #185 (Bürgerinnen-
|
|
* Perspektive). Lädt nach v2.css und überschreibt selektiv. v2-Endpoints
|
|
* bleiben unverändert.
|
|
*
|
|
* Konvention:
|
|
* - Klassen mit Präfix `v3-` sind v3-spezifisch.
|
|
* - Inline-Styles in v3-Templates möglichst vermeiden (Lint-Hook folgt in #184).
|
|
*/
|
|
|
|
/* ── Topbar: Beta-Pill + Modus-Toggle ──────────────────────────────── */
|
|
.v3-beta-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
padding: 2px 7px;
|
|
border-radius: 9px;
|
|
background: var(--ecg-green);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
.v3-modus-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ecg-dark);
|
|
opacity: 0.85;
|
|
border-bottom: 1px solid rgba(0, 157, 165, 0.35);
|
|
padding-bottom: 1px;
|
|
margin-left: auto;
|
|
}
|
|
.v3-modus-toggle:hover { opacity: 1; color: var(--ecg-blue); }
|
|
|
|
/* ── 1. Drucksache-ID: ruhiger Untertitel ──────────────────────────── */
|
|
.v3-antrag-id {
|
|
/* erbt v2-antrag-id; nichts zu ändern auf der Ebene */
|
|
}
|
|
|
|
/* ── 2. Score-Hero: Wort-Etikett vor Zahl ──────────────────────────── */
|
|
.v3-score-hero {
|
|
background: var(--surface);
|
|
border: 1px solid var(--hairline);
|
|
border-left: 6px solid var(--ecg-blue);
|
|
border-radius: 6px;
|
|
padding: 18px 20px;
|
|
margin: 8px 0 18px;
|
|
}
|
|
.v3-score-hero.good { border-left-color: var(--ecg-green); }
|
|
.v3-score-hero.mid { border-left-color: var(--ecg-blue); }
|
|
.v3-score-hero.low { border-left-color: var(--redline-contra, #cf222e); }
|
|
|
|
.v3-score-label {
|
|
font-family: var(--font-sans);
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
line-height: 1.1;
|
|
color: var(--ecg-dark);
|
|
margin-bottom: 4px;
|
|
}
|
|
.v3-score-hero.good .v3-score-label { color: #1a7f37; }
|
|
.v3-score-hero.low .v3-score-label { color: #a40e26; }
|
|
|
|
.v3-score-body {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--ecg-dark);
|
|
margin: 6px 0 10px;
|
|
}
|
|
.v3-score-meta {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--ecg-dark);
|
|
opacity: 0.75;
|
|
border-top: 1px dashed var(--hairline);
|
|
padding-top: 8px;
|
|
}
|
|
.v3-score-meta strong { font-weight: 700; }
|
|
|
|
/* ── 3. 5-Werte-Bars (Matrix-Vereinfachung) ────────────────────────── */
|
|
.v3-werte-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin: 10px 0 16px;
|
|
}
|
|
.v3-wert-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(140px, 1fr) 2.5fr auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 13px;
|
|
}
|
|
.v3-wert-label {
|
|
color: var(--ecg-dark);
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
.v3-wert-bar {
|
|
position: relative;
|
|
height: 10px;
|
|
}
|
|
.v3-wert-track {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--surface);
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.v3-wert-mid {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 1px;
|
|
background: var(--hairline);
|
|
}
|
|
.v3-wert-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-radius: 3px;
|
|
min-width: 2px;
|
|
}
|
|
.v3-wert-fill.pos { background: var(--ecg-green); }
|
|
.v3-wert-fill.neu { background: var(--ecg-dark); opacity: 0.3; }
|
|
.v3-wert-fill.neg { background: var(--redline-contra, #cf222e); }
|
|
|
|
.v3-wert-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--ecg-dark);
|
|
min-width: 36px;
|
|
text-align: right;
|
|
}
|
|
|
|
.v3-matrix-details {
|
|
margin-top: 10px;
|
|
padding: 8px 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 5px;
|
|
}
|
|
.v3-matrix-details > summary {
|
|
cursor: pointer;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.03em;
|
|
color: var(--ecg-dark);
|
|
user-select: none;
|
|
list-style: none;
|
|
}
|
|
.v3-matrix-details > summary::-webkit-details-marker { display: none; }
|
|
.v3-matrix-details > summary::before {
|
|
content: "▸ ";
|
|
display: inline-block;
|
|
margin-right: 4px;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
.v3-matrix-details[open] > summary::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* ── 4. Glossar-Tooltips ───────────────────────────────────────────── */
|
|
.v3-glossar {
|
|
display: inline;
|
|
border-bottom: 1px dotted var(--ecg-blue);
|
|
cursor: help;
|
|
color: var(--ecg-blue);
|
|
}
|
|
.v3-glossar:hover,
|
|
.v3-glossar:focus-visible {
|
|
outline: none;
|
|
background: rgba(0, 157, 165, 0.12);
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
.v3-glossar-modal {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.45);
|
|
z-index: 9100;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.v3-glossar-card {
|
|
background: var(--ecg-card-bg, #fff);
|
|
border: 1px solid var(--ecg-border, #ddd);
|
|
border-radius: 8px;
|
|
padding: 22px 26px;
|
|
min-width: 280px;
|
|
max-width: 480px;
|
|
font-family: var(--font-sans);
|
|
color: var(--ecg-dark);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
|
|
}
|
|
.v3-glossar-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: 10px;
|
|
}
|
|
.v3-glossar-head strong {
|
|
font-family: var(--font-display, inherit);
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
color: var(--ecg-teal, #009da5);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.v3-glossar-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
color: var(--ecg-dark);
|
|
opacity: 0.55;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
.v3-glossar-card p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* ── 5. Collapsible-Sections (Verbesserungen, Kommentare default zu) ─ */
|
|
.v3-collapsible {
|
|
margin-top: 24px;
|
|
padding: 8px 0;
|
|
border-top: 1px solid var(--hairline);
|
|
}
|
|
.v3-collapsible > summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
user-select: none;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
padding: 4px 0;
|
|
}
|
|
.v3-collapsible > summary::-webkit-details-marker { display: none; }
|
|
.v3-collapsible > summary > h3 {
|
|
margin: 0;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
.v3-collapsible > summary > h3::before {
|
|
content: "▸";
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--ecg-dark);
|
|
opacity: 0.55;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
.v3-collapsible[open] > summary > h3::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
.v3-collapsible-hint {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--ecg-dark);
|
|
opacity: 0.5;
|
|
}
|
|
.v3-comments {
|
|
margin-top: 40px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
/* ── 6. Aktions-Links ──────────────────────────────────────────────── */
|
|
.v3-aktions {
|
|
margin-top: 24px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.v3-aktions a {
|
|
color: var(--ecg-blue);
|
|
border-bottom: 1px solid rgba(0, 157, 165, 0.35);
|
|
}
|