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
/* ==========================================================================
1. SCHRIFTEN & GLOBALE ÜBERSCHRIFTEN (Systemweit)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&family=Open+Sans&display=swap');
body {
font-family: 'Open Sans', sans-serif !important;
}
/* Den umschließenden Heading-Container von Citizen bändigen */
.mw-heading,
.citizen-section-heading {
display: block !important;
width: 100% !important;
}
/* Überschriften: Montserrat, sehr schlank und in ALL CAPS */
h1, h2, h3,
.mw-body h1, .mw-body h2, .mw-body h3,
.mw-heading h1, .mw-heading h2, .mw-heading h3 {
font-family: 'Montserrat', sans-serif !important;
font-weight: 200 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px;
position: relative;
/* Zwingt das Element im Citizen-Skin auf Textbreite */
display: inline-flex !important;
width: max-content !important;
max-width: 100% !important;
margin-bottom: 25px !important;
padding-bottom: 8px !important;
/* Entfernt restlos alle Linien-Ansätze von MediaWiki und Citizen */
border: none !important;
border-bottom: none !important;
}
/* Entfernt die native Citizen-Unterstreichung komplett */
.mw-heading::after,
.mw-heading h1::after, .mw-heading h2::after, .mw-heading h3::after,
h1::after, h2::after, h3::after {
background: none !important;
border: none !important;
width: 0 !important;
height: 0 !important;
display: none !important;
}
/* Schriftgröße für Fließtext global leicht anheben */
body,
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd {
font-size: 1.1rem !important; /* Etwas größer als Standard */
line-height: 1.6 !important; /* Mehr Zeilenabstand für bessere Lesbarkeit */
}
/* ==========================================================================
2. STANDARD / HELL LAYOUT (Edles Off-White & Augenfreundliches Tiefblau)
========================================================================== */
:root, body, .mw-body, #content, .citizen-page-container {
background-color: #f8fafc !important; /* Edles, sehr dezentes Off-White */
background-image: none !important;
color: #001b4c !important; /* Augenfreundliches Tiefblau statt Hartschwarz */
}
/* Textfarben im hellen Layout */
p, li, dd, span, td, th, h1, h2, h3 {
color: #001b4c !important;
}
/* Hyperlinks im hellen Layout (Verwendung des Kontrastblaus #0dcaf0) */
a, a.external {
color: #0dcaf0 !important;
}
/* Unterstreichung im hellen Layout (Verwendung von ::before statt ::after) */
h1::before, h2::before, h3::before,
.mw-heading h1::before, .mw-heading h2::before, .mw-heading h3::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
height: 2px !important;
width: 120% !important; /* 20% Überhang */
background: linear-gradient(to right, #0dcaf0 0%, #0dcaf0 60%, #e5e5e5 60%, #e5e5e5 100%) !important;
display: block !important;
}
/* ==========================================================================
3. SEITEN-NAVIGATION & STICKY-HEADER (Aufräumen & Tabs)
========================================================================== */
/* Diskussion-Button systemweit komplett entfernen */
#ca-talk,
.citizen-action-talk,
#ca-namespaces-talk,
.mw-portlet-namespaces #ca-talk,
.mw-ui-icon-speechBubbles,
.citizen-ui-icon-speechBubbles,
.citizen-sticky-header .mw-ui-icon-wikimedia-speechBubbles {
display: none !important;
}
/* Menüpunkt/Button im Sticky-Header restlos komprimieren */
.citizen-sticky-header-actions [href*="Diskussion:"],
.citizen-sticky-header-actions [href*="talk"],
.citizen-sticky-header-actions button[title*="Diskussion"],
.citizen-sticky-header-actions .citizen-action-talk {
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Tabs optisch beruhigen (Keine harten Rahmen, schlankes Design) */
.citizen-action-tabs a,
#p-views li a,
#p-cactions li a {
border: none !important;
background: transparent !important;
font-size: 0.85em !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 8px 12px !important;
transition: color 0.2s ease !important;
color: #001b4c !important; /* Standardfarbe Hell */
}
/* Hover-Effekt: Tabs leuchten im Kontrastblau */
.citizen-action-tabs a:hover,
#p-views li a:hover,
.citizen-action-tabs .selected a {
color: #0dcaf0 !important;
}
/* Logo-Wortmarke im ausklappbaren Seitenmenü durch Grafik ersetzen */
.citizen-drawer .mw-logo-wordmark {
font-size: 0 !important;
color: transparent !important;
display: inline-block !important;
background-image: url('/resources/assets/GOMedicalWiki-word.png') !important;
background-size: contain !important;
background-position: left center !important;
background-repeat: no-repeat !important;
width: 180px !important;
height: 35px !important;
vertical-align: middle !important;
margin-left: 10px !important;
}
/* ==========================================================================
4. PERMANENTER FUSSTEXT-BEREICH (Fixes Anthrazit #171717)
========================================================================== */
.citizen-footer {
background-color: #171717 !important;
background-image: none !important;
border-top: 1px solid #2b2b2b !important;
padding: 30px 20px !important;
}
/* Überflüssige Standard-Elemente im Footer ausblenden */
.citizen-footer__sitetitle .mw-logo-wordmark,
#footer-icons,
.citizen-footer__bottom,
.citizen-footer__sitetitle .mw-logo-icon {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
}
/* Container für das große Kombi-Logo im Footer nutzen */
.citizen-footer__sitetitle {
display: block !important;
width: 260px !important;
height: 100px !important;
background-image: url('/resources/assets/GOMedicalWiki-gross.png') !important;
background-size: contain !important;
background-position: left center !important;
background-repeat: no-repeat !important;
}
/* Links im Footer untereinander anordnen & farblich anpassen */
#footer-places ul {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
#footer-places li {
display: block !important;
margin: 0 !important;
}
#footer-places li a {
color: #94a3b8 !important;
}
#footer-places li a:hover {
color: #0dcaf0 !important;
}
/* ==========================================================================
5. EDITOR & TEXTFELDER ALS SCHWEBENDE KARTEN (Cards View)
========================================================================== */
/* Globale Wrapper-Hintergründe im Editor für den Schwebeeffekt säubern */
.wikiEditor-ui,
.wikiEditor-ui-view,
.wikiEditor-ui-left,
.wikiEditor-ui-top,
.mw-editform,
#editform {
background: transparent !important;
background-color: transparent !important;
border: none !important;
}
/* Schwebende Karten für CodeMirror, Standard-Textareas und Inputs */
.CodeMirror,
#wpTextbox1,
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: #ffffff !important;
color: #001b4c !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
box-shadow: 0 10px 25px -5px rgba(0, 27, 76, 0.08),
0 8px 10px -6px rgba(0, 27, 76, 0.08) !important;
padding: 15px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
/* Zeilennummern im CodeMirror rein weiß hinterlegen */
.CodeMirror-gutters {
background-color: #ffffff !important;
border-right: 1px solid #e2e8f0 !important;
}
/* Fokus-Zustand bei aktivem Editieren */
.CodeMirror-focused,
#wpTextbox1:focus,
.oo-ui-textInputWidget-focused .oo-ui-inputWidget-input {
border-color: #0dcaf0 !important;
box-shadow: 0 20px 25px -5px rgba(0, 27, 76, 0.12),
0 10px 10px -5px rgba(0, 27, 76, 0.06) !important;
}
/* ==========================================================================
6. DARK DESIGN MEDIA QUERY (Umfassender Schutz für alle Elemente)
========================================================================== */
@media (prefers-color-scheme: dark) {
/* Hintergrund & Text */
:root, body, .mw-body, #content, .citizen-page-container {
background-color: #1a222d !important;
color: #cbd5e1 !important;
}
p, li, dd, span, td, th {
color: #cbd5e1 !important;
}
.mw-header, .citizen-sidebar, .citizen-drawer, .mw-portlet {
background-color: #131a22 !important;
border-color: #2e3c4e !important;
}
h1, h2, h3 {
color: #ffffff !important;
}
/* Links & Überschriften-Linien */
a, a.external {
color: #0dcaf0 !important;
}
h1::after, h2::after, h3::after {
background: linear-gradient(to right, #0dcaf0 0%, #0dcaf0 60%, #2e3c4e 60%, #2e3c4e 100%) !important;
}
/* Suchfeld & Navigation-Tabs */
.mw-search-form-wrapper, .oo-ui-textInputWidget-type-search input {
background-color: #131a22 !important;
color: #cbd5e1 !important;
border-color: #2e3c4e !important;
}
.citizen-action-tabs a, #p-views li a {
color: #cbd5e1 !important;
}
.citizen-action-tabs a:hover, #p-views li a:hover {
color: #0dcaf0 !important;
}
/* Editor-Karten im Dark Mode */
.CodeMirror,
.CodeMirror-gutters,
#wpTextbox1,
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: #131a22 !important;
color: #cbd5e1 !important;
border-color: #2e3c4e !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
.CodeMirror-focused,
#wpTextbox1:focus,
.oo-ui-textInputWidget-focused .oo-ui-inputWidget-input {
border-color: #0dcaf0 !important;
}
}
/* Erweitertes Ausblenden für anonyme Nutzer (Citizen-Skin spezifisch) */
/* Zuletzt geändert Info */
body.anon #footer-info-lastmod,
body.anon .page-info__item {
display: none !important;
}
/* Kopf-Actions (Versionen/Quelltext) */
body.anon #ca-viewsource,
body.anon #ca-history,
body.anon .citizen-tab-history,
body.anon .citizen-tab-viewsource {
display: none !important;
}
/* Seiten-Werkzeuge */
body.anon #t-recentchangeslinked,
body.anon #t-info,
body.anon .mw-portlet-tb {
display: none !important;
}