MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 29. September 2024, 22:31 Uhr

/* 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 */
}


/* 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: 18px; /* Größe für Bildschirmbreiten ab 1024px */
    }
}

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

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

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

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

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