MediaWiki:Common.css

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
• Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Strg+F5

/* Das folgende CSS wird für alle Benutzeroberflächen geladen.*/

/* Entfernt den weißen Rand um Miniaturansichten.  i.O */

.mw-filepage-thumb, .thumbinner, .gallerybox {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* Dropdown-Menü des Navigationsmenüs anpassen i.O */

#p-cosmos-navigation ul, #p-cosmos-navigation .dropdown-menu, #p-cosmos-navigation .vector-menu-content, #p-cosmos-navigation .mw-portlet {
    background-color: #1c1c1c !important; /* Hintergrund transparent setzen, falls gewünscht */
    border: none !important;
    box-shadow: none !important; /* Entfernt den Schatten */
    padding: 0 !important; /* Entfernt eventuelles Padding */
    margin: 0 !important; /* Entfernt eventuelle Ränder außerhalb */
}

/* Links innerhalb des Navigationsmenüs anpassen i.O */
#p-cosmos-navigation ul li a {
    background-color: #1c1c1c !important; /* Transparenter Hintergrund für Links */
    color: #ffffff !important; /* Textfarbe der Links */
}

/* Hintergrundfarbe bei Hover für Menülinks i.O */
#p-cosmos-navigation ul li a:hover {
    background-color: #1c1c1c !important; /* Hintergrundfarbe bei Hover */
    color: #ff4040 !important; /* Textfarbe bei Hover */
}



/* Hintergrundfarbe gallery */
.gallerybox {
    background-color: #1c1c1c !important; /* Ersetzt Weiß durch die gewünschte Farbe */
}

.gallerybox .thumb {
    background-color: #1c1c1c !important; /* Hintergrundfarbe für den Bereich der Miniaturansichten */
}

.gallerybox .thumb a {
    background-color: #1c1c1c !important; /* Hintergrundfarbe für den Link um die Miniaturansicht */
}

.gallerybox .thumb img {
    background-color: #1c1c1c !important; /* Hintergrundfarbe für das Bild selbst */
}





/* Dropdown Menü Designs*/

.wds-dropdown__toggle,
.wds-dropdown__content {
    background-color: #1c1c1c !important;
    color: #ffffff !important; 
}


/* Hintergrundfarbe und Textfarbe der cosmo-toolbar ändern */
.cosmo-toolbar, .cosmo-toolbar ul, .cosmo-toolbar li, .cosmo-toolbar a {
    background-color: #1c1c1c !important; /* Hintergrund für Links */
    color: #ffffff !important; /* Textfarbe der Links */
}

/* Hover-Zustand für cosmo-toolbar */
.cosmo-toolbar a:hover {
    background-color: #1c1c1c !important; /* Hintergrundfarbe bei Hover */
    color: #ff4040 !important; /* Textfarbe bei Hover */
}

/* Hintergrundfarbe und Textfarbe der wds-tabs__tab */
.wds-tabs__tab, .wds-tabs__tab a {
    background-color: #1c1c1c !important; /* Hintergrund für Links */
    color: #ffffff !important; /* Textfarbe der Links */
}

/* Hover-Zustand für Tabs */
.wds-tabs__tab:hover, .wds-tabs__tab a:hover {
    background-color: #1c1c1c !important; /* Hintergrundfarbe bei Hover */
    color: #ff4040 !important; /* Textfarbe bei Hover */
}



/* Anpassung der Liste innerhalb von Menüs */
.cosmo-toolbar ul, .cosmo-toolbar li, .wds-tabs__tab ul, .wds-tabs__tab li {
    background-color: #1c1c1c !important; /* Hintergrund für Links */
    color: #ffffff !important; /* Textfarbe der Links */
}

/* Optional: Auch für die übergeordnete Navigation hinzufügen */
#p-cosmo-navigation ul, #p-cosmo-navigation li {
    background-color: #1c1c1c !important; /* Hintergrund für Links */
    color: #ffffff !important; /* Textfarbe der Links */
}

.cosmo-toolbar ul li a, .wds-tabs__tab ul li a {
    background-color: #1c1c1c !important;
    color: #ffffff !important; 
}

.wds-tabs__tab a:active {
    background-color: #1c1c1c !important;
    color: #ffffff !important; 
}

/* Hintergrund und Textfarbe des Bearbeiten-Menüs und Dropdowns ändern */
.cosmos-actions-edit, 
.cosmos-button, 
.cosmos-button-primary, 
.cosmos-button-action,
.cosmos-dropdown {
    background-color: #1c1c1c !important; /* Dunkler Hintergrund */
    color: #ffffff !important; /* Weiße Textfarbe */
    border: none !important; /* Optional: Rand entfernen */
}

/* Dropdown-Elemente anpassen */
.cosmos-actions-edit ul, 
.cosmos-actions-edit li, 
.cosmos-actions-edit a,
.cosmos-dropdown ul, 
.cosmos-dropdown li, 
.cosmos-dropdown a {
    background-color: #1c1c1c !important;
    color: #ffffff !important;
    border: none !important;
}

/* Hover-Zustand für Dropdown-Menü */
.cosmos-actions-edit a:hover, 
.cosmos-dropdown a:hover {
    background-color: #333333 !important; /* Dunklerer Hintergrund bei Hover */
    color: #ff4040 !important; /* Rote Schriftfarbe bei Hover */
}

/* Inhaltsverzeichnis über die gesamte Breite */
#toc {
    width: 100% !important; /* Breite auf 100% der verfügbaren Breite setzen */
    margin: 0 auto !important; /* Automatische Zentrierung */
    padding: 10px; /* Optional: etwas Abstand um das Inhaltsverzeichnis */
    box-sizing: border-box; /* Damit Padding/Breite korrekt berechnet wird */
}

/* Optional: Schriftgröße und Textausrichtung für bessere Lesbarkeit */
#toc ul {
    font-size: 17px; /* Vergrößerte Schrift */
    text-align: left; /* Text linksbündig */
}

/* Optional: Anpassung für verschiedene Bildschirmgrößen */

/* Schriftgröße für mittlere Auflösungen */
@media (min-width: 1024px) {
    #toc ul {
        font-size: 16px; /* Größe für Bildschirmbreiten ab 1024px */
    }
}

/* Schriftgröße für hohe Auflösungen */
@media (min-width: 1440px) {
    #toc ul {
        font-size: 17px; /* Größe für Bildschirmbreiten ab 1440px */
    }
}

/* Schriftgröße für sehr hohe Auflösungen */
@media (min-width: 2560px) {
    #toc ul {
        font-size: 24px; /* Größe für Bildschirmbreiten ab 1024px */
    }
}

/* Schriftgröße für extrem Auflösungen */
@media (min-width: 3840px) {
    #toc ul {
        font-size: 36px; /* Größe für Bildschirmbreiten ab 1440px */
    }
}

@media (max-width: 768px) {
    #toc {
        font-size: 14px; /* Etwas kleinere Schrift für schmalere Bildschirme */
    }
}

@media (max-width: 480px) {
    #toc {
        font-size: 12px; /* Noch kleiner auf sehr kleinen Bildschirmen */
    }
}