MediaWiki:Common.css: Unterschied zwischen den Versionen

Aktuelle Version vom 27. Juli 2026, 17:22 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 !important;
}

/* 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;
}
.mw-anon #t-specialpages,
.mw-anon #t-upload {
    display: none;
}
/* ═══════════════════════════════════════════════
   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: responsive */
.ext-gallery-wrapper {
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}
.ext-gallery {
    width: 100%;
}
@media screen and (max-width: 768px) {
    .ext-gallery {
        max-width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .ext-gallery-item,
    .ext-gallery-thumb {
        width: 100% !important;
    }
    .ext-gallery-thumb {
        height: auto !important;
    }
    .ext-gallery-thumb img {
        width: 100% !important;
        height: 100% !important;
    }
}
@media screen and (max-width: 400px) {
    .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;
    }
}

@media screen and (max-width: 768px) {
    .wiki-overview-grid {
        grid-template-columns: 1fr !important;
    }
    .wiki-overview-grid .ext-gallery {
        max-width: 100% !important;
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .wiki-overview-grid .ext-gallery-thumb {
        width: 100% !important;
    }
}

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

/* ExternalImage: Caption unter dem Bild */
.ext-external-image-wrapper {
    display: inline-block;
    max-width: 100%;
}
.ext-external-image-caption {
    text-align: center;
    font-size: 0.85em;
    padding: 4px 2px 2px;
    color: #555;
    word-break: break-word;
}

/* Light/Dark Bildwechsel */
.img-theme-light { display: block; }
.img-theme-dark  { display: none; }

@media (prefers-color-scheme: dark) {
  .img-theme-light { display: none; }
  .img-theme-dark  { display: block; }
}

.skin-citizen-dark .img-theme-light { display: none; }
.skin-citizen-dark .img-theme-dark  { display: block; }
.skin-citizen-light .img-theme-light { display: block; }
.skin-citizen-light .img-theme-dark  { display: none; }

/* Icon für eigenen Sidebar-Link */
.citizen-menu__item a[href*="/Komponenten"]::before {
    content: "\eadf"; /* Codicon Unicode */
    font-family: "codicon";
    margin-right: 6px;
}

/* ============================================================
   SGPGGB – External Social Links
   ============================================================ */

.sgpggb-external-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.sgpggb-external-menu #n-sidebar-label-contactus,
.sgpggb-external-menu #n-sidebar-label-supportus {
    flex-basis: 100% !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-base--subtle) !important;
    margin-top: 0.5rem !important;
}

.sgpggb-external-menu #n-sidebar-label-contactus a,
.sgpggb-external-menu #n-sidebar-label-supportus a {
    pointer-events: none !important;
    color: var(--color-base--subtle) !important;
    text-decoration: none !important;
    font-size: 0.7rem !important;
}

#n-Discord a,
#n-Facebook a,
#n-Instagram a,
#n-X a,
#n-YouTube a,
#n-Twitch a,
#n-E-Mail a,
#n-Support-us a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 4px !important;
    transition: background 0.15s !important;
    font-size: 1.1rem !important;
    color: var(--color-base) !important;
}

#n-Discord a:hover,
#n-Facebook a:hover,
#n-Instagram a:hover,
#n-X a:hover,
#n-YouTube a:hover,
#n-Twitch a:hover,
#n-E-Mail a:hover,
#n-Support-us a:hover {
    background: var(--color-surface-2) !important;
}