MediaWiki:Foreground.css

/* =========================================================
   Wiki / Foreground Anpassungen
   Farbe: #e2001a
   Ziel:
   - obere Leiste dauerhaft rot
   - Hauptmenü rot/weiß
   - Untermenü bei Hover: weiß/rot
   - Suchfeld als saubere Einheit
   - Foreground/Foundation-Defaults (#333) überschreiben
   ========================================================= */


/* =========================================================
   1) Grundfarbe der oberen Leiste
   Diese Regeln färben die komplette Kopf-/Navigationsleiste rot.
   ========================================================= */

.top-bar,
.top-bar-section > ul,
.top-bar-section > ul > li,
.contain-to-grid,
.tab-bar,
.fixed {
    background: #e2001a !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   2) Hauptmenü (erste Ebene)
   Die obere Menüleiste bleibt rot mit weißer Schrift.
   Beim Hover nur leichte Transparenz, kein Farbwechsel.
   ========================================================= */

.top-bar-section > ul > li > a {
    background: #e2001a !important;
    color: #ffffff !important;
}

.top-bar-section > ul > li:not(.has-form) > a:hover {
    background: #e2001a !important;
    color: #ffffff !important;
    opacity: 0.85;
}


/* =========================================================
   3) Untermenüs / Dropdowns
   Standard: rot mit weißer Schrift
   Hover/Aktiv: Farben tauschen -> weißer Hintergrund, roter Text
   ========================================================= */

.top-bar-section .dropdown li > a {
    background: #e2001a !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.top-bar-section .dropdown li > a:hover,
.top-bar-section .dropdown li:hover > a,
.top-bar-section .dropdown li.active > a {
    background: #ffffff !important;
    color: #e2001a !important;
    opacity: 1 !important;
}


/* =========================================================
   4) Suchformular ausrichten
   Das Suchformular wird als Flex-Zeile behandelt, damit
   Eingabefeld und Button sauber nebeneinander sitzen.
   ========================================================= */

.top-bar .has-form form {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Vertikale Feinjustierung des Suchformulars */
#searchform {
    padding-top: 7px !important;
}


/* =========================================================
   5) Suchfeld
   - Höhe 30px
   - links abgerundet
   - 280px breit
   ========================================================= */

.top-bar input,
.top-bar input[type="text"],
.top-bar input[type="search"],
#searchInput {
    height: 30px !important;
    line-height: 30px !important;
    width: 280px !important;
    margin: 0 !important;
    padding: 0 14px !important;

    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #444444 !important;

    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* =========================================================
   6) Suchbutton
   - gleiche Höhe wie das Eingabefeld
   - rechts abgerundet
   - weiße Fläche mit roter Schrift
   ========================================================= */

.top-bar .button.search,
.top-bar button.search,
#searchButton {
    height: 30px !important;
    line-height: 30px !important;
    margin: 0 0 0 -1px !important;
    padding: 0 16px !important;

    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #e2001a !important;

    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}


/* =========================================================
   7) Foreground/Foundation-Desktop-Defaults überschreiben
   Foreground setzt ab Desktop-Breite teilweise wieder #333333.
   Diese Regeln erzwingen auch dort dein Rot.
   ========================================================= */

@media only screen and (min-width: 40.0625em) {
    .top-bar {
        background: #e2001a !important;
        overflow: visible;
    }

    .top-bar-section .has-form {
        background: #e2001a !important;
        height: 2.8125rem;
        padding: 0 0.9375rem;
    }

    .top-bar-section ul li {
        background: #e2001a !important;
    }

    .top-bar .has-form form {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .top-bar input,
    .top-bar input[type="text"],
    .top-bar input[type="search"],
    #searchInput {
        height: 30px !important;
        line-height: 30px !important;
        width: 280px !important;
        margin: 0 !important;
        padding: 0 14px !important;

        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #444444 !important;

        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 15px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .top-bar .button.search,
    .top-bar button.search,
    #searchButton {
        height: 30px !important;
        line-height: 30px !important;
        margin: 0 0 0 -1px !important;
        padding: 0 16px !important;

        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #e2001a !important;

        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: 15px !important;
        border-bottom-right-radius: 15px !important;
    }
}