MediaWiki:Foreground.css
Aus Geodäsie Knowledge Hub
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
/* =========================================================
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;
}
}