MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →
Version vom 8. Juni 2026, 16:01 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;
}
/* H2 vor dem Übersichts-Grid: Abstand nach unten reduzieren */
h2.ueberschrift-zentriert {
    margin-bottom: 0.25em;
}
/* Zentrierte Überschrift */
.ueberschrift-zentriert,
h1.ueberschrift-zentriert,
h2.ueberschrift-zentriert,
h3.ueberschrift-zentriert,
h4.ueberschrift-zentriert,
h5.ueberschrift-zentriert {
    text-align: center !important;
}
/* Abstand über Hinweis- und Warnungsboxen */
.mw-message-box {
    margin-top: 0.75em !important;
}
/* ═══════════════════════════════════════════════
   Mobile-Skalierung für alle Wiki-Extensions
   ═══════════════════════════════════════════════ */
/* ExternalImage: nie breiter als Container */
img[style*="width:"] {
    max-width: 100%;
}
/* ExternalImage + ExternalSlideshow: proportionale Skalierung auf Mobile */
@media screen and (max-width: 768px) {
    center img[style*="width:"],
    .ext-slideshow-slide img {
        height: auto !important;
    }
    .wiki-overview-grid img[style*="width:"] {
        height: revert !important;
    }
}

/* Übersichts-Grid (Hauptseite) */
.wiki-overview-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0 10px;
    align-items: start;
}
.wiki-overview-col {
    min-width: 0;
}
@media screen and (max-width: 1000px) {
    .wiki-overview-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 640px) {
    .wiki-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 400px) {
    .wiki-overview-grid {
        grid-template-columns: 1fr;
    }
}
/* ExternalGallery: proportionale Bildgröße auf Mobile */
@media screen and (max-width: 768px) {
    .ext-gallery-thumb {
        height: auto !important;
        aspect-ratio: 4/3;
    }
    .ext-gallery-thumb img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ExternalGallery: responsive Spalten (nicht im Übersichts-Grid) */
@media screen and (max-width: 900px) {
    .ext-gallery:not(.wiki-overview-grid .ext-gallery) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ext-gallery:not(.wiki-overview-grid .ext-gallery) .ext-gallery-item,
    .ext-gallery:not(.wiki-overview-grid .ext-gallery) .ext-gallery-thumb {
        width: 100% !important;
    }
}
@media screen and (max-width: 600px) {
    .ext-gallery:not(.wiki-overview-grid .ext-gallery) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ext-gallery:not(.wiki-overview-grid .ext-gallery) .ext-gallery-item,
    .ext-gallery:not(.wiki-overview-grid .ext-gallery) .ext-gallery-thumb {
        width: 100% !important;
    }
    .ext-gallery:not(.wiki-overview-grid .ext-gallery) .ext-gallery-thumb img {
        width: 100% !important;
        height: 80px !important;
    }
}
@media screen and (max-width: 360px) {
    .ext-gallery:not(.wiki-overview-grid .ext-gallery) {
        grid-template-columns: 1fr !important;
    }
}
/* Kacheltabellen: responsive (tile-grid) */
.tile-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
}
.tile-grid td {
    width: 33%;
}
@media screen and (max-width: 700px) {
    .tile-grid,
    .tile-grid tbody,
    .tile-grid tr {
        display: block;
        width: 100%;
    }
    .tile-grid td {
        display: inline-block;
        width: calc(50% - 10px);
        box-sizing: border-box;
        vertical-align: top;
        margin: 3px;
    }
}
@media screen and (max-width: 420px) {
    .tile-grid td {
        display: block;
        width: calc(100% - 6px);
        margin: 3px;
    }
}
/* Kacheltabellen: 4-spaltig mit 2-Spalten-Umbruch auf Mobile (tile-grid-4) */
.tile-grid-4 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
}
@media screen and (max-width: 700px) {
    .tile-grid-4,
    .tile-grid-4 tbody,
    .tile-grid-4 tr {
        display: block;
        width: 100%;
    }
    .tile-grid-4 td {
        display: inline-block;
        width: calc(50% - 10px) !important;
        box-sizing: border-box;
        vertical-align: top;
        margin: 3px;
    }
}
@media screen and (max-width: 420px) {
    .tile-grid-4 td {
        display: inline-block;
        width: calc(50% - 10px) !important;
    }
}
/* Kacheltabellen: 5-spaltig (tile-grid-5) */
.tile-grid-5 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
    table-layout: fixed;
}
.tile-grid-5 td {
    width: 20%;
}
@media screen and (max-width: 700px) {
    .tile-grid-5,
    .tile-grid-5 tbody,
    .tile-grid-5 tr {
        display: block;
        width: 100%;
    }
    .tile-grid-5 td {
        display: inline-block;
        width: calc(50% - 10px);
        box-sizing: border-box;
        vertical-align: top;
        margin: 3px;
    }
}
@media screen and (max-width: 420px) {
    .tile-grid-5 td {
        display: block;
        width: calc(100% - 6px);
        margin: 3px;
    }
}
/* Loot Crate Tabellen: Mobile */
@media screen and (max-width: 600px) {
    .loot-table thead,
    .loot-table th {
        display: none;
    }
    .loot-table,
    .loot-table tbody,
    .loot-table tr {
        display: block;
        width: 100%;
    }
    .loot-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        padding: 6px 10px;
        border-top: 2px solid transparent;
    }
    .loot-table td[style*="#939393"] { border-top-color: #939393; }
    .loot-table td[style*="#4caed8"] { border-top-color: #4caed8; }
    .loot-table td[style*="#2539a5"] { border-top-color: #2539a5; }
    .loot-table td[style*="#6c05cd"] { border-top-color: #6c05cd; }
    .loot-table td[style*="#a60b0b"] { border-top-color: #a60b0b; }
    .loot-table td[style*="#dca40d"] { border-top-color: #dca40d; }
    .loot-table td[style*="#939393"]::before { content: "Gewöhnlich"; display: block; font-weight: 500; font-size: 0.85em; color: #939393; margin-bottom: 4px; }
    .loot-table td[style*="#4caed8"]::before { content: "Ungewöhnlich"; display: block; font-weight: 500; font-size: 0.85em; color: #4caed8; margin-bottom: 4px; }
    .loot-table td[style*="#2539a5"]::before { content: "Selten"; display: block; font-weight: 500; font-size: 0.85em; color: #2539a5; margin-bottom: 4px; }
    .loot-table td[style*="#6c05cd"]::before { content: "Sehr selten"; display: block; font-weight: 500; font-size: 0.85em; color: #6c05cd; margin-bottom: 4px; }
    .loot-table td[style*="#a60b0b"]::before { content: "Episch"; display: block; font-weight: 500; font-size: 0.85em; color: #a60b0b; margin-bottom: 4px; }
    .loot-table td[style*="#dca40d"]::before { content: "Legendär"; display: block; font-weight: 500; font-size: 0.85em; color: #dca40d; margin-bottom: 4px; }
}

/* ExternalSlideshow: Caption-Abstand reduzieren */
.ext-slideshow-caption {
    height: auto;
    min-height: 0;
    padding: 2px 0 0;
}