MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 31. Mai 2026, 16:39 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)
   ========================================================================== */
.citizen-footer {
    background-color: #171717 !important; /* Permanentes, tiefes Anthrazit/Schwarz */
    background-image: none !important;
    border-top: 1px solid #2b2b2b !important;
    padding: 30px 20px !important;
}

/* Textausrichtungen und Farben im Footer */
.citizen-footer, 
.citizen-footer p,
.citizen-footer__title {
    color: #94a3b8 !important; /* Angenehmes Hellgrau auf der dunklen Fläche */
}

/* Logo und Titel im Footer nebeneinander via Flexbox */
.citizen-footer__header {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
}

.citizen-footer__logo {
    display: inline-block !important;
    margin: 0 !important;
}

.citizen-footer__title {
    display: inline-block !important;
    margin: 0 !important;
    text-transform: uppercase; /* Auch den Titel im Footer in All-Caps */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Links im Footer bei Hover */
.citizen-footer a:hover {
    color: #0dcaf0 !important; /* Leuchtet beim Drüberfahren im Kontrastblau */
}

/* ==========================================================================
   5. OPTISCHE CLEAN-UPS (Buttons)
   ========================================================================== */
/* Diskussion-Button (Talk Page) komplett ausblenden */
#ca-talk, .citizen-action-talk, a[href*="Diskussion:"] {
    display: none !important;
}

/* Doppelte Standard-Logos im Footer eliminieren */
.footer-icons, .mw-footer-impl-poweredby, .citizen-footer__poweredby {
    display: none !important;
}