MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 1. Juni 2026, 16:28 Uhr

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
h2, h3 {
    margin-block-start: 0.5em;
}

/* Warning-Box: orange, kompatibel mit Light & Dark Mode */
.mw-message-box-warning {
    border: 1px solid #c85000;
    border-left: 4px solid #c85000;
    background-color: color-mix(in srgb, #c85000 12%, transparent);
    color: inherit;
    padding: 0.5em 1em;
    border-radius: 4px;
}
 
/* ExternalImage: verhindert dass Theme-seitiges max-width:100%
   die Höhe proportional mitschrumpft */
.ext-image img,
img[style*="object-fit:cover"] {
    max-width: unset;
}
 
/* ── Mobile-Skalierung für ExternalImage, ExternalSlideshow, ExternalGallery ── */
@media screen and (max-width: 768px) {
 
    /* ExternalImage: feste Breiten auf fluid umschalten */
    img[style*="width:"] {
        width: 100% !important;
    }
    img[style*="height:"][style*="object-fit:cover"] {
        height: 220px !important;
    }
 
    /* ExternalSlideshow: Container auf volle Breite, Höhe begrenzen */
    .ext-slideshow-wrapper {
        width: 100%;
    }
    .ext-slideshow {
        width: 100% !important;
    }
    .ext-slideshow-slide img {
        width: 100% !important;
        height: 220px !important;
    }
 
    /* ExternalGallery: Grid auf 2 Spalten reduzieren */
    .ext-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ext-gallery-item {
        width: 100% !important;
    }
    .ext-gallery-thumb {
        width: 100% !important;
    }
    .ext-gallery-thumb img {
        width: 100% !important;
    }
}
 
@media screen and (max-width: 480px) {
 
    /* Sehr kleine Bildschirme: Gallery auf 1 Spalte */
    .ext-gallery {
        grid-template-columns: repeat(1, 1fr) !important;
    }
 
    /* Slideshow und Einzelbilder: Höhe weiter reduzieren */
    .ext-slideshow-slide img,
    img[style*="height:"][style*="object-fit:cover"] {
        height: 160px !important;
    }
}
 
/* ExternalImage: Bilder nie breiter als ihr Container */
img[style] {
    max-width: 100%;
    display: block;
}