Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* 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.10em !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;
}
}
/* 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;
}