Gespräcch:Vector-2022.css MediaWiki-Santinizer gemäße Fehlerbehebung/MediaWiki:Vector-2022.css 02
Erscheinungsbild
/* --------------------------------------------------------------
MediaWiki:Vector-2022.css — konsolidierte Fassung
Zweck: Lesbarkeit (Dark), XCharter im Content, minimaler Umfang
Hinweis: XCharter © Michael Sharpe (Erweiterung von Bitstream Charter)
Lizenzhinweis liegt unter /mediawiki/resources/fonts/xcharter/LICENSE.txt
Projektseite: AufEinWort:Schriften
Stand: 2025‑11‑15
-------------------------------------------------------------- */
/* ==============================================================
1) Links – dunkel‑Profil (neutral im Ruhezustand, Farbe nur bei Hover)
– dunkel‑Profil (neutral im Ruhezustand, Farbe nur bei Hover)
============================================================== */
/* Basis: neutral (nah am Fließtext) */
.skin-theme-clientpref-night .mw-parser-output a {
color: #f2f2f2;
}
.skin-theme-clientpref-night .mw-parser-output a:visited {
color: #e6e6e6;
}
/* Hover: intern = mattes Blau */
.skin-theme-clientpref-night .mw-parser-output a:hover {
color: #7fa7ff; /* mattes Blau */
}
/* Extern: ohne Icon; Hover = mattes Grün */
.skin-theme-clientpref-night .mw-parser-output a.external {
background-image: none; /* Icon aus */
}
.skin-theme-clientpref-night .mw-parser-output a.external:hover {
color: #6fcf94; /* mattes Grün */
}
/* Redlinks: etwas heller im Ruhezustand, Hover = matte Rotnuance */
.skin-theme-clientpref-night .mw-parser-output a.new {
color: #c4c4c4;
}
.skin-theme-clientpref-night .mw-parser-output a.new:visited {
color: #d2d2d2;
}
.skin-theme-clientpref-night .mw-parser-output a.new:hover {
color: #ff8c8c; /* mattes Rot */
}
/* ==============================================================
2.5) Night-Overlay-Custom-Properties (Vector-spezifische UI)
Definiert nur im Night-Kontext; keine verbotenen Funktionen.
============================================================== */
.skin-theme-clientpref-night {
--overlay-bg: #1f1f1f;
--overlay-fg: #dddddd;
--overlay-border: #606060;
--overlay-accent: rgba(127,167,255,0.18);
--background-color-base-fixed: #1f1f1f; /* OOUI Basis-Hintergrund dunkel */
--background-color-backdrop-dark: rgba(0,0,0,0.65);
}
/* ==============================================================
3) AufEinWort – Bereichfenster
============================================================= */
.bereichfenster-content p:empty { display: none; }
.bereichfenster-content br:last-child { display: none; }
/* ==============================================================
4) Technisches / Editor (Day + Night)
============================================================= */
/* Sitenotice nur für angemeldete Nutzer ausblenden (anonyme sehen Hinweise weiter) */
.logged-in .vector-sitenotice-container { display: none; }
/* Namespace & Separator nur in der Leseansicht („action=view“) ausblenden */
/*body.action-view.skin-vector-2022 #firstHeading .mw-page-title-namespace,*/
/*body.action-view.skin-vector-2022 #firstHeading .mw-page-title-separator { display: none; } */
/* Verhindere vererbtes Tracking in der MediaWiki-Codeansicht (Zeilennummern-Gutter) */
.skin-theme-clientpref-night .mw-code,
.skin-theme-clientpref-night .mw-code * {
letter-spacing: 0; /* kein breiteres Rendering → keine Überlappung */
font-variant-ligatures: none; /* keine Ligaturen in Mono-Code */
}
/* Gleiches für hell-Profil, damit symmetrisch */
.skin-theme-clientpref-day .mw-code,
.skin-theme-clientpref-day .mw-code * {
letter-spacing: 0;
font-variant-ligatures: none;
}
/* OOUI Theme‑Variablen – minimaler Fix: Weiß‑Basis im Dark auf Dunkel setzen
(Viele Widgets nutzen var(--background-color-base-fixed) → war #fff) */
.skin-theme-clientpref-night {
--background-color-base-fixed: #1f1f1f; /* angleichen an Panel‑Hintergrund */
/* optional, falls Overlay zu hell wirkt: */
--background-color-backdrop-dark: rgba(0,0,0,0.65);
}
/* === OOUI / VE – Overlays, Popups, Menüs, Tooltips (global) === */
html.skin-theme-clientpref-night .oo-ui-defaultOverlay,
html.skin-theme-clientpref-night .oo-ui-windowManager,
html.skin-theme-clientpref-night .oo-ui-window,
html.skin-theme-clientpref-night .oo-ui-window-body,
html.skin-theme-clientpref-night .oo-ui-window-head,
html.skin-theme-clientpref-night .oo-ui-window-foot,
html.skin-theme-clientpref-night .oo-ui-popupWidget,
html.skin-theme-clientpref-night .oo-ui-popupWidget-body,
html.skin-theme-clientpref-night .oo-ui-tooltipWidget,
html.skin-theme-clientpref-night .oo-ui-menuSelectWidget,
html.skin-theme-clientpref-night .oo-ui-selectWidget,
html.skin-theme-clientpref-night .oo-ui-dropdownWidget,
html.skin-theme-clientpref-night .oo-ui-lookupElement-menu,
html.skin-theme-clientpref-night .ve-ui-overlay,
html.skin-theme-clientpref-night .ve-ui-overlay-global,
html.skin-theme-clientpref-night .ve-ui-overlay-local {
background-color: var(--overlay-bg) !important;
color: var(--overlay-fg) !important;
border-color: var(--overlay-border) !important;
}
/* Menüeinträge – Hover/Selected */
html.skin-theme-clientpref-night .oo-ui-optionWidget.oo-ui-optionWidget-selected,
html.skin-theme-clientpref-night .oo-ui-optionWidget.oo-ui-optionWidget-highlighted {
background-color: #2a2a2a !important;
color: var(--overlay-fg) !important;
border-color: var(--overlay-border) !important;
}
/* === VisualEditor – Resizer & Badge beim Ziehen von Bildern === */
html.skin-theme-clientpref-night .ve-ce-resizeHandle,
html.skin-theme-clientpref-night .ve-ce-resizeHandles,
html.skin-theme-clientpref-night .ve-ce-resizeBox,
html.skin-theme-clientpref-night .ve-ui-resizeOverlay,
html.skin-theme-clientpref-night .ve-ui-resizeWidget {
background-color: var(--overlay-bg) !important;
color: var(--overlay-fg) !important;
border-color: var(--overlay-border) !important;
}
/* === VisualEditor – aktive/hoverte Annotationen (z. B. Link-Highlight) === */
html.skin-theme-clientpref-night .ve-ce-surface .ve-ce-annotation-active,
html.skin-theme-clientpref-night .ve-ce-surface .ve-ce-annotation:hover,
html.skin-theme-clientpref-night .ve-ce-surface .ve-ce-selectedNode {
background-color: var(--overlay-accent) !important;
outline: 1px solid var(--overlay-border);
color: inherit;
}
/* ==============================================================
5) VE/OOUI – weitere Dunkel-Fixes (Label/Handles/Link-Highlight)
============================================================= */
/* === VE-Highlights & Overlays: Blend neutralisieren + Hintergründe hart setzen === */
/* A) Container-Ebene: mögliche Aufhell-Mischung abschalten */
.ve-ui-overlay-local,
.ve-ui-overlay,
.ve-ui-surface-selections,
.ve-ce-surface-highlights,
.ve-ce-surface-highlights-focused {
mix-blend-mode: normal !important;
opacity: 1 !important; /* falls der Layer halbtransparent gesetzt ist */
background: transparent !important; /* Container selbst durchsichtig halten */
}
/* B) Fokus-/Selectable-Highlights (Bilder/Tabellen etc.) */
.ve-ce-focusableNode-highlight,
.ve-ce-focusableNode-highlight-selectable,
.ve-ce-selectedNode {
background: var(--overlay-accent) !important; /* shorthand → überschreibt background-* */
background-image: none !important;
box-shadow: 0 0 0 1px var(--overlay-border) inset !important;
color: var(--fg) !important;
}
/* C) Link-Annotationen im VE (Markierung beim Setzen/Bearbeiten) */
.ve-ce-linkAnnotation,
.ve-ce-annotation-active,
.ve-ce-annotation:hover {
background: var(--overlay-accent) !important;
background-image: none !important;
color: var(--fg) !important;
}
/* D) Bild-Resizing – Badge/Griffe (einige Versionen nutzen images/gradients) */
.ve-ui-resizeWidget,
.ve-ui-resizeWidget *,
.ve-ui-resizeWidget-label,
.ve-ui-resizeWidget-handle,
.ve-ui-resizeOverlay,
.ve-ce-resizeHandle,
.ve-ce-resizeHandles,
.ve-ce-resizeBox {
background: var(--overlay-bg) !important;
background-image: none !important;
color: var(--overlay-fg) !important;
border-color: var(--overlay-border) !important;
}
.ext-replacetext-searchoptions, .oojsplus-data-gridWidget {
background-color: var(--surface);
}