MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 31. Mai 2026, 18:03 Uhr

/* ==========================================================================
   1. SCHRIFTEN & GLOBALE ÜBERSCHRIFTEN (Gilt für Hell UND Dunkel)
   ========================================================================== */
@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;
}

/* Überschriften: Montserrat, sehr schlank und in ALL CAPS */
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 200 !important;
    text-transform: uppercase !important; /* All Caps */
    letter-spacing: 1.5px;
    position: relative;
    display: table; /* Korrekte Längenberechnung für die Unterstreichung */
    margin-bottom: 25px;
    padding-bottom: 8px;
    border-bottom: none !important; /* MediaWiki-Standard entfernen */
}

/* ==========================================================================
   2. STANDARD / HELL (Elegantes Weiß mit angenehmer Dunkelschrift)
   ========================================================================== */
:root, body, .mw-body, #content {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #001b4c !important; /* Augenfreundliches Tiefblau statt Hartschwarz */
}

/* Textfarben im hellen Layout */
p, li, dd, span, td, th {
    color: #001b4c !important;
}

h1, h2, h3 { 
    color: #001b4c !important; 
}

/* Hyperlinks im hellen Layout (Verwendung des Kontrastblaus #0dcaf0) */
a, a.external {
    color: #0dcaf0 !important;
}

/* Unterstreichung im hellen Layout */
h1::after, h2::after, h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 120%; /* 20% Überhang */
    background: linear-gradient(to right, #0dcaf0 0%, #0dcaf0 60%, #e5e5e5 60%, #e5e5e5 100%);
}

/* ==========================================================================
   3. DARK DESIGN (Go-Medical Dark Schema)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root, body, .mw-body, #content, .citizen-page-container {
        background-color: #1a222d !important;
        background-image: none !important;
        color: #cbd5e1 !important; /* Vorgabe für Standard-Text */
    }

    /* Standard-Textelemente im Dark Mode */
    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;
    }

    /* Überschriften im Dark Mode (Weiß für maximale Lesbarkeit vor Dunkelblau) */
    h1, h2, h3 { 
        color: #ffffff !important; 
    }

    /* Hyperlinks im Dark Layout (Kontrastblau #0dcaf0) */
    a, a.external { 
        color: #0dcaf0 !important; 
    }

    /* Unterstreichung im Dark Mode (Rechter Auslauf angepasst) */
    h1::after, h2::after, h3::after {
        background: linear-gradient(to right, #0dcaf0 0%, #0dcaf0 60%, #2e3c4e 60%, #2e3c4e 100%) !important;
    }

    /* Suchfeld-Korrekturen für das Dark Layout */
    .mw-search-form-wrapper, .oo-ui-textInputWidget-type-search input {
        background-color: #131a22 !important;
        color: #cbd5e1 !important;
        border-color: #2e3c4e !important;
    }
}

/* ==========================================================================
   4. PERMANENTER FUSSTEXT-BEREICH (Egal ob Hell oder Dunkel immer #171717)
   ========================================================================== */
/* Den gesamten Footer-Hintergrund auf das gewünschte tiefe Anthrazit fixieren */
.citizen-footer {
    background-color: #171717 !important;
    background-image: none !important;
    border-top: 1px solid #2b2b2b !important;
    padding: 30px 20px !important;
}

/* --- REINIGUNG: Überflüssige Elemente ausblenden --- */

/* 1. Die alte Wortmarke ("GO Medical Wiki") im Footer komplett ausblenden */
.citizen-footer__sitetitle .mw-logo-wordmark {
    display: none !important;
}

/* 2. Das überflüssige "Powered-by"-Icon unten rechts komplett entfernen */
#footer-icons, .citizen-footer__bottom {
    display: none !important;
}

/* --- RESTRUKTURIERUNG: Neues Kombi-Logo einsetzen --- */

/* Das alte quadratische Icon im Footer unsichtbar machen */
.citizen-footer__sitetitle .mw-logo-icon {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
}

/* Den Container nutzen, um dein großes Kombi-Logo als Hintergrund zu laden */
.citizen-footer__sitetitle {
    display: block !important;
    width: 260px !important; /* Breite des neuen Kombi-Logos */
    height: 100px !important;  /* Höhe des Logos – falls nötig leicht anpassen */
    background-image: url('/resources/assets/GOMedicalWiki-gross.png') !important;
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}

/* Textfarben für die verbleibenden Links (Datenschutz, Impressum etc.) */
#footer-places li a {
    color: #94a3b8 !important;
}

#footer-places li a:hover {
    color: #0dcaf0 !important; /* Leuchtet im Kontrastblau beim Drüberfahren */
}

/* Links im Footer (Datenschutz, Impressum etc.) untereinander statt nebeneinander listig anordnen */
#footer-places ul {
    display: flex !important;
    flex-direction: column !important; /* Erzwingt die Anordnung untereinander */
    gap: 4px !important; /* Angenehmer vertikaler Abstand zwischen den Links */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important; /* Entfernt eventuelle Standard-Aufzählungspunkte */
}

#footer-places li {
    display: block !important;
    margin: 0 !important;
}
/* ==========================================================================
   Logo-Wortmarke im Seitenmenü durch Grafik ersetzen
   ========================================================================== */
/* Den Standard-Text "GO Medical Wiki" im Menümodal unsichtbar machen */
.citizen-drawer .mw-logo-wordmark {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-block !important;
    /* Deine neue Wortmarken-Grafik als Hintergrund laden */
    background-image: url('/resources/assets/GOMedicalWiki-word.png') !important;
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    /* Dimensionen der Grafik steuern (ggf. leicht anpassen) */
    width: 180px !important;
    height: 35px !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
}
/* ==========================================================================
   AUFRÄUMEN DER SEITEN-NAVIGATION (Tabs oben)
   ========================================================================== */

/* 1. Diskussion-Button komplett entfernen (Systemweit) */
#ca-talk, 
.citizen-action-talk, 
#ca-namespaces-talk, 
.mw-portlet-namespaces #ca-talk {
    display: none !important;
}

/* 2. 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; /* All-Caps für den einheitlichen Look */
    letter-spacing: 1px !important;
    padding: 8px 12px !important;
    transition: color 0.2s ease !important;
}

/* 3. Farbliche Abstimmung auf deine Vorgaben */
/* Hell-Layout */
.citizen-action-tabs a, #p-views li a {
    color: #001b4c !important; /* Augenfreundliches Tiefblau */
}

/* Dark-Layout */
@media (prefers-color-scheme: dark) {
    .citizen-action-tabs a, #p-views li a {
        color: #cbd5e1 !important; /* Standard-Textfarbe im Dark Mode */
    }
}

/* 4. Hover-Effekt: Tabs leuchten beim Drüberfahren im Kontrastblau */
.citizen-action-tabs a:hover, 
#p-views li a:hover,
.citizen-action-tabs .selected a {
    color: #0dcaf0 !important; /* Dein Kontrastblau */
}

/* ==========================================================================
   1. STICKY-HEADER AUFRÄUMEN (Diskussion restlos entfernen)
   ========================================================================== */
/* Blendet das spezifische SpeechBubbles-Icon im gesamten Wiki aus */
.mw-ui-icon-speechBubbles,
.citizen-ui-icon-speechBubbles,
.citizen-sticky-header .mw-ui-icon-wikimedia-speechBubbles {
    display: none !important;
}

/* Blendet den gesamten Menüpunkt/Button im Sticky-Header aus, in dem das Icon sitzt */
.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;
}

/* ==========================================================================
   2. SEITENHINTERGRUND (Dezentes Off-White im hellen Layout)
   ========================================================================== */
:root, body, .mw-body, #content, .citizen-page-container {
    background-color: #f8fafc !important; /* Edles, sehr dezentes Off-White */
}
/* ==========================================================================
   3. EDITOR & TEXTFELDER ALS SCHWEBENDE KARTEN (Klassische & CodeMirror Ansicht)
   ========================================================================== */

/* Globale Wrapper-Hintergründe im Editor auf transparent setzen, damit die Karte wirkt */
.wikiEditor-ui, 
.wikiEditor-ui-view, 
.wikiEditor-ui-left, 
.wikiEditor-ui-top,
.mw-editform,
#editform {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Die echten Container für den Editor (CodeMirror und Standard-Textbox) */
.CodeMirror, 
#wpTextbox1,
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
    background-color: #ffffff !important; /* Absolut reines Weiß */
    color: #001b4c !important; /* Augenfreundliche dunkle Schrift */
    border: 1px solid #e2e8f0 !important; /* Sehr feiner, sauberer Rahmen */
    border-radius: 8px !important; /* Leicht abgerundete Ecken */
    
    /* Starker, weicher Schatten für den schwebenden Karten-Effekt */
    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;
}

/* Damit die Zeilennummern im CodeMirror links nicht grau hinterlegt sind */
.CodeMirror-gutters {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
}

/* Fokus-Zustand: Wenn du in den Editor hineinklickst */
.CodeMirror-focused,
#wpTextbox1:focus,
.oo-ui-textInputWidget-focused .oo-ui-inputWidget-input {
    border-color: #0dcaf0 !important; /* Rahmen leuchtet im Kontrastblau auf */
    box-shadow: 0 20px 25px -5px rgba(0, 27, 76, 0.12), 
                0 10px 10px -5px rgba(0, 27, 76, 0.06) !important; /* Schatten wird tiefer */
}

/* ==========================================================================
   4. COMPATIBILITY: Dark Mode Schutz für Editor-Karten
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    /* Im Dark Mode setzen wir auf tiefe Kontraste statt Off-White */
    :root, body, .mw-body, #content, .citizen-page-container {
        background-color: #1a222d !important;
    }
    
    /* Dunkles Feld im Dark Mode für CodeMirror, Textboxen und Zeilennummern */
    .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;
    }
}