MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 7. Juni 2026, 19:26 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%;
}
/* Ü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: responsive Spalten */
@media screen and (max-width: 900px) {
    .ext-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ext-gallery-item,
    .ext-gallery-thumb {
        width: 100% !important;
    }
}
@media screen and (max-width: 600px) {
    .ext-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ext-gallery-item,
    .ext-gallery-thumb {
        width: 100% !important;
    }
    .ext-gallery-thumb img {
        width: 100% !important;
        height: 80px !important;
    }
}
@media screen and (max-width: 360px) {
    .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;
    }
}

    .wikitable[style*="table-layout:fixed"] tbody tr {
        display: block;
        margin-bottom: 0;
    }
    .wikitable[style*="table-layout:fixed"] td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        border-top: none !important;
        padding: 6px 10px;
    }
    .wikitable[style*="table-layout:fixed"] td[style*="#939393"] { border-top: 2px solid #939393 !important; }
    .wikitable[style*="table-layout:fixed"] td[style*="#4caed8"] { border-top: 2px solid #4caed8 !important; }
    .wikitable[style*="table-layout:fixed"] td[style*="#2539a5"] { border-top: 2px solid #2539a5 !important; }
    .wikitable[style*="table-layout:fixed"] td[style*="#6c05cd"] { border-top: 2px solid #6c05cd !important; }
    .wikitable[style*="table-layout:fixed"] td[style*="#a60b0b"] { border-top: 2px solid #a60b0b !important; }
    .wikitable[style*="table-layout:fixed"] td[style*="#dca40d"] { border-top: 2px solid #dca40d !important; }
    .wikitable[style*="table-layout:fixed"] td::before {
        display: block;
        font-weight: 500;
        font-size: 0.85em;
        margin-bottom: 4px;
        opacity: 0.9;
    }
    .wikitable[style*="table-layout:fixed"] td[style*="#939393"]::before { content: "Gewöhnlich"; color: #939393; }
    .wikitable[style*="table-layout:fixed"] td[style*="#4caed8"]::before { content: "Ungewöhnlich"; color: #4caed8; }
    .wikitable[style*="table-layout:fixed"] td[style*="#2539a5"]::before { content: "Selten"; color: #2539a5; }
    .wikitable[style*="table-layout:fixed"] td[style*="#6c05cd"]::before { content: "Sehr selten"; color: #6c05cd; }
    .wikitable[style*="table-layout:fixed"] td[style*="#a60b0b"]::before { content: "Episch"; color: #a60b0b; }
    .wikitable[style*="table-layout:fixed"] td[style*="#dca40d"]::before { content: "Legendär"; color: #dca40d; }
}