MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 29. September 2024, 22:09 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 Größe*/

/* Grundlegende Breitenanpassung für das Inhaltsverzeichnis */
#toc {
    width: 100%; /* Nimmt 100% des übergeordneten Containers ein */
    max-width: 400px; /* Maximalbreite des Inhaltsverzeichnisses */
    min-width: 300px; /* Mindestbreite des Inhaltsverzeichnisses */
    margin: 0 auto; /* Zentriert das Inhaltsverzeichnis, wenn nötig */
}

/* Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    #toc {
        width: 90%; /* Reduziert die Breite für kleinere Bildschirme */
        max-width: 250px; /* Begrenzung der Maximalbreite auf schmalen Bildschirmen */
    }
}

/* Anpassungen für sehr kleine Bildschirme */
@media (max-width: 480px) {
    #toc {
        width: 100%; /* Nimmt den gesamten Platz ein */
        max-width: none; /* Keine Begrenzung der Maximalbreite */
        font-size: 14px; /* Optional: Schriftgröße reduzieren */
    }
}