MediaWiki:Common.css
MediaWiki-Schnittstellenseite
Weitere Optionen
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* Einheitlicher vertikaler Abstand für alle Listenelemente */
li ul, li ol {
margin-top: 0!important ;
margin-bottom: 0!important ;
margin-left: 30px!important;
}
.mw-logo-tagline {
display: none;
}
/* blendet die Links "Mobile Ansicht" und "Nach oben" im Footer aus */
#footer-places-mobileview, #footer-places-toplink {
display: none;
}
/* ---- Hauptseite ---- */
/* GfWM-Banner */
.gfwm-banner,
figure.gfwm-banner,
.mw-parser-output .gfwm-banner {
display: block !important;
margin: 0 auto 1.75rem !important;
border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.07) !important;
overflow: hidden;
line-height: 0;
width: fit-content;
max-width: 100%;
}
.gfwm-banner img,
img.gfwm-banner {
display: block;
max-width: 100%;
height: auto;
border-radius: 8px;
}
/* Citizen-Zoomeffekt beim Hover unterbinden */
.gfwm-banner,
.gfwm-banner a,
.gfwm-banner img,
img.gfwm-banner {
transform: none !important;
transition: none !important;
}
.gfwm-banner:hover img,
img.gfwm-banner:hover {
transform: none !important;
scale: none !important;
}
/* GfWM-Akzentfarbe, wikiweit verfügbar.
Muss auf :root stehen, sonst greift überall nur der Literal-Fallback
in den var()-Aufrufen und die Farbe ist nicht zentral änderbar. */
:root {
--gfwm-teal: #1883a5;
--gfwm-teal-hover: #146c88;
}
/* Intro-Zeile */
.gfwm-intro {
margin: 0 auto 0.7em;
max-width: 100%;
font-size: 1.05em;
text-align: center;
}
/* Statistik-Zeile */
.gfwm-statline {
margin: 0 0 1.4em;
text-align: center;
color: var(--color-subtle, #656d76);
font-size: 0.9em;
}
.gfwm-statline b {
color: var(--gfwm-teal, #1883a5);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
/* Suche */
.gfwm-suche {
max-width: 520px;
margin: 0 auto 0.5em;
}
.gfwm-suche form {
display: flex;
gap: 0;
align-items: stretch;
border: 1px solid var(--border-color-base, #c8ccd1);
border-radius: 8px;
overflow: hidden;
background: var(--color-surface-1, #fff);
}
.gfwm-suche input:not([type="submit"]):not([type="button"]) {
flex: 1 1 auto;
width: 100% !important;
min-width: 0;
box-sizing: border-box !important;
padding: 0.6em 1em !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: inherit;
font-size: 0.95em;
box-shadow: none !important;
}
.gfwm-suche input:not([type="submit"]):not([type="button"]):focus {
outline: none !important;
box-shadow: none !important;
}
.gfwm-suche input[type="submit"],
.gfwm-suche button {
flex: 0 0 auto;
padding: 0.6em 1.3em !important;
border: 0 !important;
border-left: 1px solid var(--border-color-base, #c8ccd1) !important;
border-radius: 0 !important;
background: var(--gfwm-teal, #1883a5) !important;
color: #fff !important;
font-size: 0.93em;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.gfwm-suche input[type="submit"]:hover,
.gfwm-suche button:hover {
background: var(--gfwm-teal-hover, #146c88) !important;
}
.gfwm-suche form {
width: fit-content;
max-width: 100%;
margin: 0 auto;
}
/* Hinweisbox "Neu im Wiki?" */
.gfwm-hinweis {
margin: 1.5em 0 1.5em;
padding: 0.7em 1.25em;
border-left: 3px solid var(--gfwm-teal, #1883a5);
border-radius: 4px;
background: var(--color-surface-2, var(--background-color-interactive-subtle, #f4f6f8));
color: inherit;
font-size: 0.95em;
}
/* Video-Tutorials */
.gfwm-videos {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 0 0 1.5rem;
}
.gfwm-video {
display: flex;
flex: 1 1 340px;
align-items: center;
gap: 1rem;
min-width: 0;
padding: 0.9rem;
border: 1px solid var(--border-color-subtle, #d8dee4);
border-radius: 8px;
background: var(--color-surface-1, var(--background-color-base, #fff));
transition: border-color 0.15s ease;
}
.gfwm-video:hover {
border-color: var(--gfwm-teal, #1883a5);
}
/* Play-Markierung zum Wiederverwenden auf normalen Inhaltsseiten.
Ein <div class="gfwm-play"> um ein verlinktes Bild legen, mehr nicht.
Bringt nur das Play-Overlay mit, kein Layout und keinen Rahmen. */
.gfwm-play {
position: relative;
display: inline-block;
max-width: 100%;
line-height: 0;
}
.gfwm-play a,
.gfwm-play img {
display: block;
max-width: 100%;
height: auto;
/* Citizen-Zoomeffekt beim Hover unterbinden */
transform: none !important;
transition: none !important;
}
/* Pfeil-Icon externer Links unterdruecken */
.gfwm-play a.external {
background: none !important;
padding-right: 0 !important;
}
.gfwm-play a.external::after {
content: none !important;
}
/* Bildrahmen, traegt das Play-Overlay */
.gfwm-videobild {
position: relative;
flex: 0 0 176px;
overflow: hidden;
border: 1px solid var(--border-color-subtle, #d8dee4);
border-radius: 6px;
line-height: 0;
}
.gfwm-videobild a,
.gfwm-videobild img {
display: block;
width: 100%;
height: auto;
/* Citizen-Zoomeffekt beim Hover unterbinden */
transform: none !important;
transition: none !important;
}
/* Pfeil-Icon externer Links unterdruecken */
.gfwm-videobild a.external,
.gfwm-videotitel a.external {
background: none !important;
padding-right: 0 !important;
}
.gfwm-videobild a.external::after,
.gfwm-videotitel a.external::after {
content: none !important;
}
/* Play-Button, kommt aus dem CSS und nicht aus der Bilddatei.
Das SVG enthaelt Kreis und Dreieck, damit alles mitskaliert.
pointer-events: none, damit der Klick auf den Link darunter geht. */
.gfwm-videobild::before,
.gfwm-play::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%23ffffff' fill-opacity='0.95' stroke='%23000000' stroke-opacity='0.12' stroke-width='1.5'/%3E%3Cpath d='M40 32 L71 50 L40 68 Z' fill='%231883a5'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
transition: transform 0.15s ease;
}
/* Video-Vorschau auf normalen Inhaltsseiten: kleine Boxen nebeneinander,
Vorschaubild oben, Titel und Kapitel darunter. */
.gfwm-videoreihe {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1em 0 1.5em;
}
.gfwm-videokarte {
flex: 1 1 260px;
max-width: 380px;
min-width: 0;
overflow: hidden;
border: 1px solid var(--border-color-subtle, #d8dee4);
border-radius: 8px;
background: var(--color-surface-1, var(--background-color-base, #fff));
transition: border-color 0.15s ease;
}
.gfwm-videokarte:hover {
border-color: var(--gfwm-teal, #1883a5);
}
/* Vorschaubild fuellt die Box */
.gfwm-videokarte .gfwm-play {
display: block;
width: 100%;
}
.gfwm-videokarte .gfwm-play img {
width: 100%;
}
.gfwm-videokarte .gfwm-play::before {
width: 18%;
}
/* Textteil der Box */
.gfwm-videokartentext {
padding: 0.65rem 0.85rem 0.8rem;
font-size: 0.9em;
line-height: 1.45;
}
.gfwm-videokartentext .gfwm-kapitel {
display: block;
margin-top: 0.2em;
color: var(--color-subtle, #656d76);
font-size: 0.92em;
}
.gfwm-video:hover .gfwm-videobild::before,
.gfwm-play:hover::before {
transform: translate(-50%, -50%) scale(1.07);
}
/* Textspalte */
.gfwm-videotext {
min-width: 0;
}
.gfwm-videotitel {
font-size: 1.02em;
font-weight: 600;
line-height: 1.3;
}
.gfwm-videosub {
margin-top: 0.25em;
color: var(--color-subtle, #656d76);
font-size: 0.87em;
line-height: 1.45;
}
.gfwm-videometa {
margin-top: 0.45em;
color: var(--color-subtle, #656d76);
font-size: 0.8em;
opacity: 0.8;
}
/* Schmale Bildschirme: Bild ueber den Text */
@media screen and (max-width: 560px) {
.gfwm-video {
flex-wrap: wrap;
}
.gfwm-videobild {
flex: 1 1 100%;
}
}
/* Kartenraster */
.gfwm-karten {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 0 0 1.5rem;
}
.gfwm-karte {
display: flex;
flex-direction: column;
flex: 1 1 260px;
min-width: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--border-color-subtle, #d8dee4);
border-radius: 8px;
background: var(--color-surface-1, var(--background-color-base, #fff));
color: inherit;
box-shadow: none;
transition: border-color 0.15s ease;
}
.gfwm-karte:hover {
border-color: var(--gfwm-teal, #1883a5);
}
/* Kartenkopf, abgesetzt */
.gfwm-karte h2 {
margin: 0;
padding: 0.85rem 1.1rem 0.1rem;
border: 0;
background: var(--color-surface-2, #f6f8fa);
color: inherit;
font-family: inherit;
font-size: 0.95em;
font-weight: 600;
letter-spacing: 0;
}
.gfwm-karte .gfwm-sub {
display: block;
margin: 0;
padding: 0 1.1rem 0.85rem;
border-bottom: 1px solid var(--border-color-subtle, #d8dee4);
background: var(--color-surface-2, #f6f8fa);
color: var(--color-subtle, #656d76);
font-size: 0.8em;
}
/* Listen in den Karten */
.gfwm-karte ul {
flex: 1 1 auto;
margin: 0;
padding: 0.4rem 0;
list-style: none;
}
.gfwm-karte li {
margin: 0;
padding: 0.45em 1.1rem;
overflow: hidden;
font-size: 0.9em;
line-height: 1.45;
white-space: nowrap;
text-overflow: ellipsis;
transition: background 0.1s ease;
}
.gfwm-karte li:hover {
background: var(--color-surface-2, #f6f8fa);
}
/* Absätze in den Karten */
.gfwm-karte > p {
flex: 1 1 auto;
margin: 0;
padding: 0.6rem 1.1rem;
font-size: 0.9em;
}
/* Fusszeile der Karte */
.gfwm-karte .gfwm-mehr {
display: block;
margin: 0;
padding: 0.7rem 1.1rem;
border-top: 1px solid var(--border-color-subtle, #d8dee4);
background: var(--color-surface-2, #f6f8fa);
font-size: 0.85em;
font-weight: 600;
line-height: 1.4;
}
/* Button */
.gfwm-button {
display: inline-block;
padding: 0.55em 1.3em;
border: 1px solid var(--gfwm-teal, #1883a5);
border-radius: 6px;
color: var(--gfwm-teal, #1883a5);
font-size: 0.95em;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.gfwm-button:hover {
background: var(--gfwm-teal, #1883a5);
color: #fff;
text-decoration: none;
}
/* Aufruf unter den Karten */
.gfwm-cta {
margin: 0.5rem 0 1rem;
text-align: center;
}
.gfwm-cta p {
margin: 0 0 0.9em;
font-size: 1.02em;
font-weight: 600;
}
/* Kategorienleiste auf der Hauptseite ausblenden */
.page-Hauptseite .catlinks {
display: none;
}
/* ---- Skin-Fallbacks ---- */
/* Vector 2022 und andere Skins ohne Citizen-Variablen, heller Modus */
.skin-vector-2022,
.skin-vector {
--color-surface-1: #fff;
--color-surface-2: #f8f9fa;
--color-subtle: #54595d;
--border-color-base: #a2a9b1;
--border-color-subtle: #c8ccd1;
}
/* Vector 2022, Dark Mode manuell gewählt */
html.skin-theme-clientpref-night .skin-vector-2022,
.skin-vector-2022.skin-theme-clientpref-night {
--color-surface-1: #101418;
--color-surface-2: #202122;
--color-subtle: #a2a9b1;
--border-color-base: #72777d;
--border-color-subtle: #404244;
}
/* Vector 2022, Dark Mode über Systemeinstellung */
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .skin-vector-2022,
.skin-vector-2022.skin-theme-clientpref-os {
--color-surface-1: #101418;
--color-surface-2: #202122;
--color-subtle: #a2a9b1;
--border-color-base: #72777d;
--border-color-subtle: #404244;
}
}
/* ================================================================
Infobox KnowledgeCamp (Vorlage:Infobox KnowledgeCamp)
Skins: Citizen (Standard) und Vector 2022, jeweils inkl. Dark Mode.
Farben kommen bewusst aus dem Skin, nicht aus dem GfWM-CD.
Der Kopf ist wie bei der Wikipedia-Infobox nicht eingefaerbt,
sondern nur durch Groesse und Gewicht abgesetzt.
Hex-Werte sind reine Fallbacks, falls ein Token fehlt.
================================================================ */
.gkc-infobox {
--gkc-ib-bg: var( --color-surface-1, #ffffff );
--gkc-ib-bg-alt: var( --color-surface-2, #f6f7f8 );
--gkc-ib-border: var( --border-color-base, #c8ccd1 );
--gkc-ib-line: var( --border-color-subtle, #e2e5e8 );
--gkc-ib-text: var( --color-base, #202122 );
--gkc-ib-muted: var( --color-subtle, #54595d );
--gkc-ib-titel: var( --color-emphasized, var( --color-base, #101418 ) );
float: right;
clear: right;
width: 320px;
max-width: 100%;
margin: 0 0 1em 1.5em;
border: 1px solid var( --gkc-ib-border );
border-radius: 8px;
overflow: hidden;
background-color: var( --gkc-ib-bg );
color: var( --gkc-ib-text );
border-collapse: separate;
border-spacing: 0;
font-size: 0.9rem;
line-height: 1.45;
}
/* Kopfbereich: keine Flaeche, nur Typografie */
.gkc-infobox .gkc-infobox-kopf {
padding: 0.75em 0.9em 0.65em 0.9em;
background-color: transparent;
color: var( --gkc-ib-titel );
font-size: 1.2em;
font-weight: 600;
letter-spacing: -0.01em;
text-align: center;
text-wrap: balance;
line-height: 1.25;
}
/* Banner */
.gkc-infobox .gkc-infobox-bild {
padding: 0.2em 0.9em 0.4em 0.9em;
text-align: center;
background-color: var( --gkc-ib-bg );
}
.gkc-infobox .gkc-infobox-bild img {
max-width: 100%;
height: auto;
border-radius: 4px;
/* Citizen-Hover-Zoom auf Bildern deaktivieren */
transform: none !important;
}
/* Motto */
.gkc-infobox .gkc-infobox-motto {
padding: 0.2em 0.9em 0.85em 0.9em;
color: var( --gkc-ib-muted );
font-style: italic;
text-align: center;
text-wrap: balance;
}
/* Datenzeilen. Die obere Linie der ersten Zeile trennt den Kopf ab. */
.gkc-infobox .gkc-infobox-label,
.gkc-infobox .gkc-infobox-wert {
padding: 0.45em 0.9em;
border-top: 1px solid var( --gkc-ib-line );
vertical-align: top;
text-align: left;
}
/* Leere Parameter hinterlassen Leerzeilen im Vorlagenquelltext, daraus entsteht
am Ende der Zelle ein leerer Absatz mit Zeilenumbruch, der die Zeile aufbläht. */
.gkc-infobox .gkc-infobox-wert > p {
margin: 0;
}
.gkc-infobox .gkc-infobox-wert > p > br:only-child {
display: none;
}
.gkc-infobox .gkc-infobox-label {
width: 40%;
background-color: var( --gkc-ib-bg-alt );
color: var( --gkc-ib-muted );
font-weight: 600;
hyphens: auto;
}
.gkc-infobox .gkc-infobox-wert {
background-color: var( --gkc-ib-bg );
overflow-wrap: anywhere;
}
/* Links bekommen bewusst keine eigene Farbe, sie erben die des Skins. */
/* ---------------- Dark Mode Fallback fuer Vector 2022 ----------------
Citizen setzt die Tokens selbst, die Regeln hier greifen nur,
wo sie fehlen. */
html.skin-theme-clientpref-night .gkc-infobox {
--gkc-ib-bg: var( --color-surface-1, #1b1c1d );
--gkc-ib-bg-alt: var( --color-surface-2, #26282a );
--gkc-ib-border: var( --border-color-base, #4a4d50 );
--gkc-ib-line: var( --border-color-subtle, #3a3d40 );
--gkc-ib-text: var( --color-base, #eaecf0 );
--gkc-ib-muted: var( --color-subtle, #a2a9b1 );
--gkc-ib-titel: var( --color-emphasized, var( --color-base, #f8f9fa ) );
}
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os .gkc-infobox {
--gkc-ib-bg: var( --color-surface-1, #1b1c1d );
--gkc-ib-bg-alt: var( --color-surface-2, #26282a );
--gkc-ib-border: var( --border-color-base, #4a4d50 );
--gkc-ib-line: var( --border-color-subtle, #3a3d40 );
--gkc-ib-text: var( --color-base, #eaecf0 );
--gkc-ib-muted: var( --color-subtle, #a2a9b1 );
--gkc-ib-titel: var( --color-emphasized, var( --color-base, #f8f9fa ) );
}
}
/* ---------------- Schmale Bildschirme ---------------- */
@media screen and ( max-width: 720px ) {
.gkc-infobox {
float: none;
clear: both;
width: 100%;
margin: 0 0 1em 0;
}
}
/* ================================================================
Mermaid-Diagramme (Extension:Mermaid, Parserfunktion {{#mermaid:}})
Stand: Extension 3.1.0 mit Mermaid-JS 8.14.0.
Orientiert sich an der Formensprache von Citizen:
Knoten wie .mw-message-box (surface-2 + border-color-base +
border-radius-base), Container wie .wikitable (box-shadow-border +
border-radius-medium + overflow-x), Typografie auf font-size-small
mit font-weight-medium, Farben ausschliesslich aus Skin-Tokens.
Citizen setzt die Tokens je nach Theme selbst, Dark Mode laeuft
dadurch ohne Zusatzregeln mit. Die Dark-Mode-Bloecke unten
korrigieren nur die Hex-Fallbacks fuer Skins ohne diese Tokens
(Vector 2022).
Mermaid schreibt seine Theme-Regeln als <style>-Block in das SVG
und praefixt sie mit der SVG-ID (#mermaid-1234 .node rect).
Diese Spezifitaet (1,2,0) schlaegt jeden Selektor, der hier mit
.ext-mermaid beginnt. Alles, was Mermaid selbst setzt, braucht
deshalb !important. Wo es NICHT noetig ist, steht es auch nicht.
Alle Selektoren sind auf .ext-mermaid beschraenkt, den Wrapper der
Extension. Andere SVGs im Wiki sind nicht betroffen.
ACHTUNG bei Extension-Upgrades: Ab Extension 5.x/6.x laeuft
Mermaid-JS 9.x/10.x mit teils anderen Klassennamen. Dieser Block
ist dann zu pruefen.
================================================================ */
/* ---- 1. Tokens ----
Einziger Ort, an dem Werte angepasst werden sollten.
Kein !important noetig, das sind eigene Variablen.
Die zweiten Werte in var() sind Fallbacks fuer Skins ohne
Citizen-Tokens, nicht die Zielwerte. */
.ext-mermaid {
--gfwm-mm-node-bg: var( --color-surface-2, #f6f8fa );
--gfwm-mm-node-border: var( --border-color-base, #c8ccd1 );
--gfwm-mm-node-text: var( --color-emphasized, #101418 );
--gfwm-mm-line: var( --color-subtle, #54595d );
--gfwm-mm-label-text: var( --color-subtle, #54595d );
--gfwm-mm-label-bg: var( --color-surface-0, var( --color-surface-1, #ffffff ) );
--gfwm-mm-cluster-bg: var( --color-surface-1, #ffffff );
--gfwm-mm-cluster-border: var( --border-color-subtle, #d8dee4 );
--gfwm-mm-radius: var( --border-radius-medium, 8px );
--gfwm-mm-radius-small: var( --border-radius-base, 4px );
}
/* Dark Mode, manuell gewaehlt. Citizen braucht das nicht, dort
stimmen die Tokens bereits. Relevant sind nur die Hex-Fallbacks. */
html.skin-theme-clientpref-night .ext-mermaid {
--gfwm-mm-node-bg: var( --color-surface-2, #202122 );
--gfwm-mm-node-border: var( --border-color-base, #72777d );
--gfwm-mm-node-text: var( --color-emphasized, #f8f9fa );
--gfwm-mm-line: var( --color-subtle, #a2a9b1 );
--gfwm-mm-label-text: var( --color-subtle, #a2a9b1 );
--gfwm-mm-label-bg: var( --color-surface-0, var( --color-surface-1, #101418 ) );
--gfwm-mm-cluster-bg: var( --color-surface-1, #101418 );
--gfwm-mm-cluster-border: var( --border-color-subtle, #404244 );
}
/* Dark Mode ueber Systemeinstellung */
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os .ext-mermaid {
--gfwm-mm-node-bg: var( --color-surface-2, #202122 );
--gfwm-mm-node-border: var( --border-color-base, #72777d );
--gfwm-mm-node-text: var( --color-emphasized, #f8f9fa );
--gfwm-mm-line: var( --color-subtle, #a2a9b1 );
--gfwm-mm-label-text: var( --color-subtle, #a2a9b1 );
--gfwm-mm-label-bg: var( --color-surface-0, var( --color-surface-1, #101418 ) );
--gfwm-mm-cluster-bg: var( --color-surface-1, #101418 );
--gfwm-mm-cluster-border: var( --border-color-subtle, #404244 );
}
}
/* ---- 2. Schrift ----
Citizen laeuft auf Roboto Flex (--font-family-base) und setzt
abgesetzte Inhalte auf --font-size-small. Mermaid setzt dagegen
#mermaid-id { font-family: trebuchet ms, verdana, arial } in 16px,
deshalb !important.
EINSCHRAENKUNG: Mermaid misst die Textbreite in einem temporaeren
Container ausserhalb von .ext-mermaid, dort greifen diese Regeln
nicht. Wenn Texte aus den Kaesten laufen, ist dieser Block die
Ursache und muss raus. */
.ext-mermaid svg,
.ext-mermaid text,
.ext-mermaid .label,
.ext-mermaid .nodeLabel,
.ext-mermaid .edgeLabel {
font-family: var( --font-family-base, inherit ) !important;
font-size: var( --font-size-small, 0.875rem ) !important;
line-height: var( --line-height-small, 1.375rem ) !important;
}
/* ---- 3. Container ----
Optik wie .wikitable in Citizen: 1px-Schatten statt Rahmen,
Radius medium, horizontal scrollbar.
KEIN max-width: max-content. Das SVG hat keine intrinsische
Breite, max-content faellt deshalb auf 300px zurueck und das
Diagramm skaliert sich selbst winzig. Der Container laeuft
stattdessen ueber die volle Spaltenbreite, die tatsaechliche
Diagrammbreite begrenzt Mermaid selbst per Inline-max-width.
Kein !important, Mermaid setzt am Wrapper nichts.
Wer das Diagramm ohne Rahmen will, loescht box-shadow,
border-radius und padding. */
.ext-mermaid {
margin-block: var( --space-content-unit, 1em );
margin-inline: var( --border-width-base, 1px );
padding: var( --space-md, 1rem );
overflow: auto hidden;
border-radius: var( --gfwm-mm-radius );
box-shadow: var( --box-shadow-border, var( --border-color-base, #c8ccd1 ) 0 0 0 1px );
}
.ext-mermaid > div {
overflow: auto hidden;
}
/* SVG-Hintergrund transparent, damit die Containerflaeche durchkommt.
!important, weil Mermaid das Theme-Background setzt. */
.ext-mermaid svg {
max-width: 100%;
height: auto;
background: transparent !important;
}
/* ---- 4. Knoten ----
Muster von .mw-message-box: Flaeche surface-2, feine Kontur in
border-color-base, Radius base. Alle Formen abgedeckt, damit
Rauten, Kreise und Stadien gleich aussehen.
!important zwingend. */
.ext-mermaid .node rect,
.ext-mermaid .node circle,
.ext-mermaid .node ellipse,
.ext-mermaid .node polygon,
.ext-mermaid .node path {
fill: var( --gfwm-mm-node-bg ) !important;
stroke: var( --gfwm-mm-node-border ) !important;
stroke-width: 1px !important;
}
/* Radius wie bei Citizen-Containern.
Kein !important noetig, Mermaid setzt rx/ry nur als
Praesentationsattribut, CSS schlaegt das. */
.ext-mermaid .node rect {
rx: var( --gfwm-mm-radius );
ry: var( --gfwm-mm-radius );
}
/* ---- 5. Knotenbeschriftungen ----
Citizen setzt Labels in Tabellen und Karten auf --color-emphasized
mit --font-weight-medium. Mermaid rendert sie als HTML im
foreignObject und setzt dort color UND fill, beides ueberschreiben.
!important zwingend. */
.ext-mermaid .nodeLabel,
.ext-mermaid .node .label,
.ext-mermaid .node .label span,
.ext-mermaid .node .label text,
.ext-mermaid .node .label div {
color: var( --gfwm-mm-node-text ) !important;
fill: var( --gfwm-mm-node-text ) !important;
font-weight: var( --font-weight-medium, 500 ) !important;
}
/* ---- 6. Kanten und Pfeile ----
Linien in --color-subtle, duenn. .flowchart-link und
.edgePath .path decken beide Renderer ab, .marker und
.arrowheadPath beide Marker-Varianten von Mermaid 8.
!important zwingend. */
.ext-mermaid .flowchart-link,
.ext-mermaid .edgePath .path,
.ext-mermaid .edge-thickness-normal {
stroke: var( --gfwm-mm-line ) !important;
stroke-width: 1.5px !important;
fill: none !important;
}
.ext-mermaid .marker,
.ext-mermaid .arrowheadPath,
.ext-mermaid .arrowMarkerPath,
.ext-mermaid marker path {
fill: var( --gfwm-mm-line ) !important;
stroke: var( --gfwm-mm-line ) !important;
}
/* ---- 7. Kantenbeschriftungen ----
Der graue Kasten kommt von Mermaids edgeLabelBackground (#e8e8e8
im Forest-Theme). Er wird nicht entfernt, sondern auf die
Containerfarbe gesetzt, weil er die Linie darunter verdecken soll.
Optik wie ein Citizen-Label: --color-subtle, klein, Radius base.
Fuer vollstaendige Transparenz --gfwm-mm-label-bg auf transparent
setzen, dann laeuft die Linie allerdings durch den Text.
!important zwingend. */
.ext-mermaid .edgeLabel,
.ext-mermaid .edgeLabel span,
.ext-mermaid .edgeLabel div,
.ext-mermaid .edgeLabel p {
background-color: var( --gfwm-mm-label-bg ) !important;
color: var( --gfwm-mm-label-text ) !important;
fill: var( --gfwm-mm-label-text ) !important;
}
.ext-mermaid .edgeLabel rect {
fill: var( --gfwm-mm-label-bg ) !important;
opacity: 1 !important;
}
/* Polsterung und Radius, damit das Label als Chip auf der Linie
sitzt. Kein !important noetig, Mermaid setzt hier nichts. */
.ext-mermaid .edgeLabel span,
.ext-mermaid .edgeLabel div {
padding: 0 var( --space-xxs, 0.25rem );
border-radius: var( --gfwm-mm-radius-small );
}
/* ---- 8. Subgraphen (Cluster) ----
Eine Stufe unter den Knoten, damit die Hierarchie stimmt:
Cluster surface-1, Knoten darin surface-2.
!important zwingend. */
.ext-mermaid .cluster rect {
fill: var( --gfwm-mm-cluster-bg ) !important;
stroke: var( --gfwm-mm-cluster-border ) !important;
stroke-width: 1px !important;
rx: var( --border-radius-large, 12px );
ry: var( --border-radius-large, 12px );
}
.ext-mermaid .cluster text,
.ext-mermaid .cluster-label,
.ext-mermaid .cluster-label span {
color: var( --gfwm-mm-node-text ) !important;
fill: var( --gfwm-mm-node-text ) !important;
font-weight: var( --font-weight-semi-bold, 600 ) !important;
}
/* ---- 9. Opt-in: breite Diagramme nicht herunterskalieren ----
Mermaid skaliert Diagramme per useMaxWidth auf die Spaltenbreite.
Das laesst sich ohne den Config-Block nicht global abschalten.
Workaround: auf der Seite umschliessen mit
<div class="gfwm-mermaid-breit">{{#mermaid:...}}</div>
Dann gilt eine Mindestbreite und der Container scrollt.
min-width je nach Diagramm anpassen.
!important noetig, max-width ist ein Inline-Style am SVG. */
.gfwm-mermaid-breit .ext-mermaid svg {
width: 100% !important;
max-width: none !important;
min-width: 900px;
height: auto !important;
}