/* =============================================================================
Game Server Manager – gm- prefix stylesheet
Integrates cleanly with the WoltLab Suite 6.2 default theme.
============================================================================= */
/* ── Variables (inherits WCF custom properties) ─────────────────────────── */
:root {
--gm-online-color: #10b981;
--gm-online-soft: rgba(16, 185, 129, .14);
--gm-offline-color: #f43f5e;
--gm-offline-soft: rgba(244, 63, 94, .12);
--gm-pending-color: #f59e0b;
--gm-accent: var(--wcfColor, #6366f1);
--gm-card-radius: 18px;
--gm-card-radius-sm: 14px;
--gm-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
--gm-card-shadow-lg: 0 4px 8px rgba(15, 23, 42, .04), 0 20px 48px rgba(15, 23, 42, .12);
--gm-card-gap: 24px;
--gm-bar-height: 12px;
--gm-bar-radius: 999px;
/* Volle Breite der Leiste = 100 % Kapazität (Track), Füllung = Belegung */
--gm-player-track-border: color-mix(in srgb, var(--wcfContentText) 26%, var(--wcfContentBorderColor));
--gm-player-track-face: color-mix(in srgb, var(--wcfContentText) 14%, var(--wcfContentBackground));
--gm-surface-glass: linear-gradient(145deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 42%);
}
/* ── Status Badges ──────────────────────────────────────────────────────── */
.gm-statusBadge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.gm-statusBadge--online {
background: var(--gm-online-soft);
color: var(--gm-online-color);
border: 1px solid color-mix(in srgb, #7fffd4 64%, var(--gm-online-color));
box-shadow: 0 0 0 1px color-mix(in srgb, #34f5b2 40%, transparent),
0 0 16px color-mix(in srgb, #22d3a2 34%, transparent);
}
.gm-statusBadge--online fa-icon {
font-size: 0.38em;
transform-origin: center;
animation: gmOnlineDotPulse 1.6s ease-in-out infinite;
}
.gm-statusBadge--offline {
background: var(--gm-offline-soft);
color: var(--gm-offline-color);
}
.gm-statusBadge--pending {
background: rgba(243, 156, 18, .15);
color: var(--gm-pending-color);
}
.gm-statusBadge--accepted {
background: rgba(46, 204, 113, .15);
color: var(--gm-online-color);
}
.gm-statusBadge--rejected {
background: rgba(231, 76, 60, .15);
color: var(--gm-offline-color);
}
.gm-statusBadge--banned {
background: rgba(142, 68, 173, .18);
color: #8e44ad;
}
/* Detail-Header: Titel + Status-Badge optisch ausgerichtet, klarer Abstand */
.contentHeaderTitle h1.contentTitle.gm-contentTitle--withStatus {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 14px;
row-gap: 8px;
}
.contentHeaderTitle h1.contentTitle .gm-contentTitle__text {
min-width: 0;
line-height: 1.2;
}
.contentHeaderTitle .gm-statusBadge {
flex-shrink: 0;
}
/* Online-Badge im Seitenkopf: ruhiger als in Karten (weniger Glow) */
.contentHeaderTitle .gm-statusBadge--online {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--gm-online-color) 35%, transparent);
}
.gm-statusDot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.gm-statusDot.gm-statusBadge--online { background: var(--gm-online-color); }
.gm-statusDot.gm-statusBadge--offline { background: var(--gm-offline-color); }
/*
* Meta-Badges (Spiel, Kategorie): gleiche Pillen-Form,
* Spiel mit Marken-Akzent, Kategorie als neutrales Sekundär-Chip.
*/
.gm-metaBadgeRow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Detail-Seite: gleicher Abstand Titel ↔ Labels ↔ Inhalt (kein extra „Loch“ unter den Chips) */
.contentHeaderDescription.gm-metaBadgeRow--detailHeader {
margin-top: 14px;
margin-bottom: 14px;
}
.contentHeader.gm-gameServerDetailHeader {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Detail-Hauptblock: kein doppelter Abstand unter den Meta-Chips */
.section.gm-serverDetail.gm-serverDetail--gamePage {
margin-top: 0 !important;
}
.gm-serverCard__metaBadges {
margin-top: 2px;
}
.gm-metaBadge {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid transparent;
}
/* Spiel: Markenfarbe, leichter Verlauf + Glow (klar vom Kategorie-Chip getrennt) */
.gm-metaBadge--game {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wcfColor) 28%, var(--wcfContentBackground)) 0%,
color-mix(in srgb, var(--wcfColor) 14%, var(--wcfTabularBoxBackground)) 100%
);
color: color-mix(in srgb, var(--wcfColor) 36%, var(--wcfContentText));
border-color: color-mix(in srgb, var(--wcfColor) 52%, var(--wcfContentBorderColor));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--wcfColor) 30%, transparent),
0 0 20px color-mix(in srgb, var(--wcfColor) 20%, transparent);
}
/* Kategorie: neutral / ohne Marken-Glow — optisch eigener Chip-Typ */
.gm-metaBadge--category {
background: color-mix(in srgb, var(--wcfContentText) 7%, var(--wcfContentContainerBackground));
color: var(--wcfContentDimmedText);
border-color: color-mix(in srgb, var(--wcfContentBorderColor) 82%, var(--wcfContentText));
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}
@keyframes gmOnlineDotPulse {
0% {
transform: scale(1);
opacity: 0.88;
filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0));
}
50% {
transform: scale(0.92);
opacity: 1;
filter: drop-shadow(0 0 4px rgba(52, 245, 178, .5));
}
100% {
transform: scale(1);
opacity: 0.88;
filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0));
}
}
/* ── Server Grid ────────────────────────────────────────────────────────── */
.gm-serverGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 352px), 1fr));
gap: var(--gm-card-gap);
margin-top: 8px;
}
/* ── Server Card ────────────────────────────────────────────────────────── */
.gm-serverCard {
position: relative;
border-radius: var(--gm-card-radius);
box-shadow: var(--gm-card-shadow);
background: var(--wcfContentBackground);
background-image:
var(--gm-surface-glass),
linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, transparent 38%);
border: 1px solid var(--wcfContentBorderColor);
transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .2s ease;
overflow: hidden;
isolation: isolate;
}
.gm-serverCard::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
z-index: 2;
background: linear-gradient(90deg, var(--gm-accent), color-mix(in srgb, var(--wcfColor) 55%, #a855f7));
opacity: .95;
}
.gm-serverCard--online::before {
background: linear-gradient(90deg, #059669, var(--gm-online-color), #34d399);
}
.gm-serverCard--offline::before {
background: linear-gradient(90deg, #64748b, #94a3b8);
opacity: .85;
}
.gm-serverCard:hover {
transform: translateY(-4px);
box-shadow: var(--gm-card-shadow-lg);
border-color: color-mix(in srgb, var(--wcfColor) 28%, var(--wcfContentBorderColor));
}
.gm-serverCard--offline {
opacity: .88;
}
.gm-serverCard--offline:hover {
opacity: .95;
}
.gm-serverCard__inner {
display: flex;
flex-direction: column;
height: 100%;
min-height: 228px;
color: inherit;
text-decoration: none;
padding: 22px 22px 20px;
position: relative;
z-index: 1;
}
.gm-serverCard__inner:hover {
text-decoration: none;
color: inherit;
}
.gm-serverCard__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 14px;
gap: 10px;
}
.gm-serverCard__body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.gm-gameBadge {
height: 42px;
width: auto;
max-width: 152px;
object-fit: contain;
border-radius: 12px;
padding: 3px 6px;
background: color-mix(in srgb, var(--wcfContentText) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 80%, transparent);
}
.gm-gameBadgeText {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 12px;
background: color-mix(in srgb, var(--wcfColor) 12%, var(--wcfTabularBoxBackground));
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
color: var(--wcfContentText);
text-transform: uppercase;
letter-spacing: .08em;
border: 1px solid color-mix(in srgb, var(--wcfColor) 22%, transparent);
}
.gm-gameBadgeSmall,
.gm-gameBadgeTextSmall {
height: 20px;
width: auto;
object-fit: contain;
}
.gm-gameBadgeTextSmall {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--wcfContentDimmedText);
}
.gm-serverCard__titleBlock {
margin-bottom: 14px;
}
.gm-serverCard__title {
font-size: 1.22rem;
font-weight: 800;
margin: 0 0 6px;
color: var(--wcfContentText);
line-height: 1.25;
letter-spacing: -0.02em;
}
.gm-serverCard__shortDesc {
margin: 8px 0 0;
font-size: 0.82rem;
line-height: 1.4;
color: var(--wcfContentDimmedText);
white-space: pre-wrap;
word-break: break-word;
}
.gm-serverCard__shortDesc--offline {
margin-bottom: 8px;
}
.gm-serverCard__field {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.875rem;
color: var(--wcfContentDimmedText);
margin-top: 8px;
padding: 8px 10px;
border-radius: var(--gm-card-radius-sm);
background: color-mix(in srgb, var(--wcfContentText) 4%, transparent);
}
.gm-serverCard__fieldLabel {
font-weight: 500;
color: var(--wcfContentText);
opacity: .75;
}
.gm-serverCard__footer {
margin-top: auto;
padding-top: 16px;
margin-left: -4px;
margin-right: -4px;
padding-left: 4px;
padding-right: 4px;
border-top: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 70%, transparent);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
color: var(--wcfContentDimmedText);
gap: 10px;
flex-wrap: wrap;
}
.gm-serverCard__address,
.gm-serverCard__offlineHint {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--wcfContentDimmedText);
font-variant-numeric: tabular-nums;
}
.gm-serverCard__joinHint {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: var(--wcfColor);
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--wcfColor) 14%, transparent);
}
/* ── Player Bar ─────────────────────────────────────────────────────────── */
.gm-playerBar {
margin: 8px 0;
}
.gm-playerBar__label {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
color: var(--wcfContentDimmedText);
margin-bottom: 4px;
}
.gm-playerBar__track {
position: relative;
height: var(--gm-bar-height);
width: 100%;
border-radius: var(--gm-bar-radius);
/* Klare „Rinne“: in Hell/Dunkel als Behälter erkennbar, Füllung wirkt als Segment darin */
background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .18) 100%),
var(--gm-player-track-face);
border: 1px solid var(--gm-player-track-border);
overflow: hidden;
box-sizing: border-box;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35),
inset 0 -1px 1px rgba(255, 255, 255, 0.06);
}
.gm-playerBar__track--inline {
margin-top: 4px;
width: 100%;
}
.gm-playerBar__fill {
display: block;
height: 100%;
border-radius: inherit;
/* Belegung = „Online“-Semantik: feste Smaragd-Töne statt Theme-akzent, damit der Balken immer sichtbar ist */
background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 42%),
linear-gradient(90deg, #047857, var(--gm-online-color, #10b981));
transition: width .45s cubic-bezier(.2, .8, .2, 1);
min-width: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
1px 0 0 rgba(0, 0, 0, 0.18);
}
/* ── List View (row) ────────────────────────────────────────────────────── */
.gm-serverList {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.gm-serverRow {
display: grid;
grid-template-columns: 16px 88px minmax(120px, 1.1fr) minmax(100px, 0.95fr) 96px minmax(110px, 1fr);
align-items: center;
gap: 14px 16px;
padding: 14px 18px;
background: var(--wcfContentBackground);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 40%);
border: 1px solid var(--wcfContentBorderColor);
border-radius: var(--gm-card-radius-sm);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: background .15s ease, box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}
.gm-serverRow:hover {
background: color-mix(in srgb, var(--wcfColor) 5%, var(--wcfContentBackground));
border-color: color-mix(in srgb, var(--wcfColor) 52%, var(--wcfContentBorderColor));
box-shadow: var(--gm-card-shadow);
transform: translateY(-1px);
}
.gm-serverRow--offline {
opacity: .82;
}
@media (max-width: 900px) {
.gm-serverRow {
grid-template-columns: 14px 72px 1fr auto;
grid-auto-flow: dense;
}
.gm-serverRow__gameName {
grid-column: 2 / -1;
}
.gm-serverRow__address {
grid-column: 2 / -1;
font-size: 0.8rem;
}
}
.gm-serverRow__title a {
font-weight: 600;
color: var(--wcfContentText);
}
.gm-serverRow__players,
.gm-serverRow__gameName,
.gm-serverRow__address {
font-size: 0.85rem;
color: var(--wcfContentDimmedText);
word-break: break-word;
}
/* ── Server Detail Page ─────────────────────────────────────────────────── */
.gm-serverDetail {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 370px);
grid-template-areas:
"main sidebar"
"actions actions";
column-gap: 28px;
row-gap: 20px;
align-items: start;
}
.gm-serverDetail__main {
grid-area: main;
}
.gm-serverDetail__sidebar {
grid-area: sidebar;
}
.gm-serverDetail__actions {
grid-area: actions;
min-width: 0;
max-width: 100%;
margin-top: 6px;
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 88%, transparent);
}
.gm-serverDetail__main,
.gm-serverDetail__sidebar {
min-width: 0;
max-width: 100%;
}
/* Unter ~1040px: eine Spalte — Reihenfolge: Sidebar → Hauptinhalt (Tabs) → Aktionsleiste */
@media (max-width: 1040px) {
.gm-serverDetail {
grid-template-columns: 1fr;
grid-template-areas:
"sidebar"
"main"
"actions";
column-gap: 0;
row-gap: 18px;
}
.gm-serverDetail__sidebar {
width: 100%;
max-width: none;
}
.gm-sidebarPanel__title {
font-size: 0.85rem;
}
.gm-sidebarFacts__label {
font-size: 0.85rem;
}
.gm-sidebarFacts__value,
.gm-serverAddress {
font-size: 0.88rem;
}
}
/* Aktionsleiste volle Breite: waagerecht, umbrechend */
.gm-serverDetail__actions .gm-actionLinks--footer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
margin: 0;
padding: 0;
}
/* ── Info Grid (detail overview) ────────────────────────────────────────── */
.gm-infoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
padding: 16px 0;
max-width: 920px;
align-content: start;
}
.gm-infoGrid__item {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 0;
padding: 16px 18px;
background: color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground));
border-radius: var(--gm-card-radius-sm);
border: 1px solid var(--wcfContentBorderColor);
gap: 6px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: border-color .15s ease, transform .15s ease;
}
.gm-infoGrid__item:hover {
border-color: color-mix(in srgb, var(--wcfColor) 25%, var(--wcfContentBorderColor));
transform: translateY(-1px);
}
.gm-infoGrid__icon {
font-size: 1.2rem;
color: var(--wcfColor);
margin-bottom: 2px;
}
.gm-infoGrid__label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--wcfContentDimmedText);
}
.gm-infoGrid__value {
font-size: 1.1rem;
font-weight: 700;
color: var(--wcfContentText);
line-height: 1.35;
word-break: break-word;
}
/* ── Uptime Bar ─────────────────────────────────────────────────────────── */
.gm-uptimeBar {
height: var(--gm-bar-height);
border-radius: var(--gm-bar-radius);
background: var(--wcfTabularBoxBackgroundActive);
overflow: hidden;
margin-bottom: 4px;
}
.gm-uptimeBar__fill {
height: 100%;
border-radius: var(--gm-bar-radius);
background: var(--gm-online-color);
transition: width .3s ease;
}
/* ── Statistics Grid ────────────────────────────────────────────────────── */
.gm-statsGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 16px 0;
}
.gm-statsSwitch {
display: inline-flex;
gap: 8px;
margin: 6px 0 14px;
padding: 4px;
border-radius: 12px;
background: color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground));
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 75%, transparent);
}
.gm-statsSwitch .button {
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: var(--wcfContentDimmedText);
font-weight: 600;
min-height: 32px;
padding: 0 12px;
}
.gm-statsSwitch .button.isActive {
background: color-mix(in srgb, var(--wcfColor) 20%, var(--wcfContentBackground));
border-color: color-mix(in srgb, var(--wcfColor) 40%, var(--wcfContentBorderColor));
color: var(--wcfContentText);
}
.gm-statsGrid--kpis {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 2px;
padding-bottom: 14px;
}
@media (max-width: 700px) {
.gm-statsGrid { grid-template-columns: 1fr; }
.gm-statsGrid--kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gm-statsCard {
padding: 16px;
background: var(--wcfTabularBoxBackground);
border-radius: 6px;
border: 1px solid var(--wcfContentBorderColor);
}
.gm-statsCard__period {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--wcfColor);
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--wcfContentBorderColor);
}
.gm-statsCard__data {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 4px;
margin: 0;
}
.gm-statsCard__data dt {
font-size: 0.8rem;
color: var(--wcfContentDimmedText);
align-self: center;
}
.gm-statsCard__data dd {
font-size: 0.95rem;
font-weight: 700;
color: var(--wcfContentText);
margin: 0;
}
.gm-statsCard__big {
font-size: 1.35rem;
font-weight: 800;
line-height: 1.15;
color: var(--wcfContentText);
}
.gm-chartPanel--stats {
max-width: 100%;
margin-top: 10px;
padding: 16px 18px 14px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 82%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wcfContentBackground) 92%, var(--wcfContentText)) 0%,
color-mix(in srgb, var(--wcfTabularBoxBackground) 90%, var(--wcfContentBackground)) 100%
);
}
.gm-chartPanel--stats .gm-chartPanel__title {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 10px;
}
.gm-chartPanel--stats .gm-chartPanel__canvas {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 65%, transparent);
background: color-mix(in srgb, var(--wcfContentBackground) 96%, #020617);
}
/* ── Detail sidebar panel ───────────────────────────────────────────────── */
.gm-sidebarPanel {
position: relative;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 90%, transparent);
background: var(--wcfContentBackground);
background-image:
var(--gm-surface-glass),
linear-gradient(160deg, color-mix(in srgb, var(--wcfColor) 8%, transparent) 0%, transparent 55%);
box-shadow: var(--gm-card-shadow);
overflow: hidden;
}
.gm-sidebarPanel::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
z-index: 2;
background: linear-gradient(90deg, var(--gm-accent), color-mix(in srgb, var(--wcfColor) 55%, #a855f7));
opacity: .92;
}
.gm-sidebarPanel__hero {
position: relative;
z-index: 1;
padding: 12px 10px 10px;
text-align: center;
background:
radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wcfColor) 14%, transparent) 0%, transparent 62%),
color-mix(in srgb, var(--wcfContentText) 4%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 65%, transparent);
}
/* Sidebar-Heldenzeile: reiner Layout-Slot (zentrieren); Grafik nur über img.gm-serverHeroImage */
.gm-sidebarHeroSlot {
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
max-width: 100%;
}
/* Server-Grafik: nur ![]()
— keine volle Breite erzwingen (width: auto), damit die Box zum Motiv passt */
img.gm-serverHeroImage {
display: block;
margin: 0 auto;
width: auto;
max-width: 100%;
max-height: 260px;
height: auto;
object-fit: contain;
object-position: center;
border-radius: 18px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
/* Theme-„img“-Regeln in der Detail-Sidebar überschreiben */
.gm-serverDetail__sidebar img.gm-serverHeroImage {
width: auto !important;
max-width: 100% !important;
max-height: 260px !important;
border-radius: 18px !important;
object-fit: contain !important;
}
.gm-sidebarHeroSlot__fallback {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 auto;
padding: 14px 20px;
border-radius: 18px;
font-size: 1.02rem;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
line-height: 1.25;
color: var(--wcfButtonText);
background: linear-gradient(135deg, color-mix(in srgb, var(--wcfColor) 92%, #000) 0%, var(--wcfColor) 100%);
box-shadow: 0 6px 20px color-mix(in srgb, var(--wcfColor) 28%, transparent);
}
.gm-sidebarPanel__gameName {
margin: 12px 0 0;
font-size: 0.82rem;
font-weight: 600;
color: var(--wcfContentDimmedText);
line-height: 1.35;
}
.gm-sidebarPanel__body {
position: relative;
z-index: 1;
padding: 12px 16px 14px;
}
.gm-sidebarPanel__title {
margin: 0 0 14px;
padding: 0 2px 14px;
font-size: 0.98rem;
font-weight: 750;
text-transform: none;
letter-spacing: 0;
color: var(--wcfContentText);
border-bottom: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 92%, transparent);
}
/* ── Sidebar Info (Definition List) ─────────────────────────────────────── */
.gm-sidebarInfo {
display: block;
margin: 0;
padding: 0;
}
.gm-sidebarInfo dt {
margin: 16px 0 0;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--wcfContentDimmedText);
}
.gm-sidebarInfo dt:first-child {
margin-top: 0;
}
.gm-sidebarInfo dd {
margin: 0;
padding: 0 0 12px;
color: var(--wcfContentText);
font-size: 0.95rem;
font-weight: 600;
word-break: break-word;
border-bottom: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 55%, transparent);
}
.gm-sidebarInfo dd:last-of-type {
padding-bottom: 4px;
border-bottom: none;
}
.gm-serverAddress {
font-size: 0.82rem;
padding: 6px 10px;
background: color-mix(in srgb, var(--wcfContentText) 6%, var(--wcfTabularBoxBackground));
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 55%, transparent);
user-select: all;
}
.gm-sidebarAddressRow {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 100%;
max-width: 100%;
min-width: 0;
}
.gm-sidebarFacts__value--address .gm-sidebarAddressRow {
justify-content: flex-start;
}
.gm-sidebarAddressRow .gm-serverAddress {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
overflow-x: visible;
overflow-wrap: anywhere;
word-break: break-word;
text-align: left;
}
.gm-sidebarAddressRow .gm-copyAddressTrigger {
flex-shrink: 0;
margin-inline-start: auto;
}
.gm-sidebarCopyIcon {
flex-shrink: 0;
}
.gm-sidebarJoinBtn {
display: flex;
align-items: center;
gap: 8px;
margin-top: 18px;
width: 100%;
justify-content: center;
border-radius: 999px;
padding-top: 12px;
padding-bottom: 12px;
}
/* ── Tables ─────────────────────────────────────────────────────────────── */
.gm-playerTable,
.gm-modTable,
.gm-whitelistTable {
width: 100%;
}
.gm-playerTable.table th,
.gm-playerTable.table td,
.gm-whitelistTable.table th,
.gm-whitelistTable.table td {
overflow: visible;
text-indent: 0;
}
.gm-whitelistActions {
position: relative;
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
width: 1%;
white-space: nowrap;
}
/* ── Category Section ───────────────────────────────────────────────────── */
.gm-categorySection {
margin-top: 8px;
margin-bottom: 8px;
padding: 24px 26px 28px;
border-radius: calc(var(--gm-card-radius) + 4px);
background: color-mix(in srgb, var(--wcfContentText) 3.5%, var(--wcfContentBackground));
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 85%, transparent);
box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, var(--gm-card-shadow);
}
.gm-categorySection + .gm-categorySection {
margin-top: 28px;
}
.gm-categorySection__head {
margin-bottom: 6px;
}
.gm-categorySection__title {
margin: 0;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--wcfContentText);
padding-bottom: 12px;
border-bottom: 2px solid color-mix(in srgb, var(--wcfColor) 45%, transparent);
display: inline-block;
min-width: min(100%, 320px);
}
.gm-categoryDescription {
font-size: 0.95rem;
line-height: 1.55;
color: var(--wcfContentDimmedText);
margin: 12px 0 18px;
max-width: 72ch;
}
/* ── List hub header + view toggle ─────────────────────────────────────── */
.gm-hubHeader {
align-items: flex-end;
flex-wrap: wrap;
gap: 16px 24px;
}
.gm-hubHeader__title {
letter-spacing: -0.03em;
}
.gm-hubHeader__subtitle {
margin: 8px 0 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--wcfContentDimmedText);
max-width: 52ch;
}
.gm-viewToggle {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--wcfContentText) 6%, var(--wcfContentBackground));
border: 1px solid var(--wcfContentBorderColor);
box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.gm-viewToggle__segment .gm-viewToggle__btn {
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
.gm-viewToggle__btn.isActive,
.gm-viewToggle__btn.active {
background: color-mix(in srgb, var(--wcfColor) 18%, var(--wcfContentBackground));
border-color: color-mix(in srgb, var(--wcfColor) 35%, transparent);
color: var(--wcfContentText);
font-weight: 700;
}
.gm-viewToggle__dash {
border-radius: 999px;
}
/* ── Detail: Übersicht (Hero + Statistik-Leiste) ─────────────────────────── */
.gm-overviewHero {
margin: 0 0 18px;
padding: 18px 18px 16px;
border-radius: var(--gm-card-radius-sm);
border: 1px solid color-mix(in srgb, var(--wcfColor) 26%, var(--wcfContentBorderColor));
background: color-mix(in srgb, var(--wcfContentText) 4.5%, var(--wcfContentBackground));
background-image: linear-gradient(165deg, color-mix(in srgb, var(--wcfColor) 10%, transparent) 0%, transparent 52%);
box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.gm-statRail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 10px 12px;
align-items: stretch;
}
.gm-statRail__item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border-radius: 12px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--gm-overview-accent, var(--wcfColor)) 14%, var(--wcfContentBackground)) 0%,
color-mix(in srgb, var(--gm-overview-accent, var(--wcfColor)) 7%, var(--wcfTabularBoxBackground)) 100%
);
border: 1px solid color-mix(in srgb, var(--gm-overview-accent, var(--wcfColor)) 26%, var(--wcfContentBorderColor));
min-height: 64px;
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(2, 6, 23, .14), inset 0 1px 0 rgba(255,255,255,.03);
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gm-statRail__item::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--gm-overview-accent, var(--wcfColor)) 45%, transparent 100%);
opacity: .8;
}
.gm-statRail__item:hover {
border-color: color-mix(in srgb, var(--gm-overview-accent, var(--wcfColor)) 46%, var(--wcfContentBorderColor));
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(2, 6, 23, .24), inset 0 1px 0 rgba(255,255,255,.04);
}
.gm-statRail__item--chart {
grid-column: span 2;
min-width: 200px;
}
@media (max-width: 640px) {
.gm-statRail__item--chart {
grid-column: auto;
}
}
.gm-statRail__k {
font-size: 0.62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: color-mix(in srgb, var(--gm-overview-accent, var(--wcfColor)) 40%, var(--wcfContentDimmedText));
line-height: 1.25;
}
.gm-statRail__v {
font-size: 1.25rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--wcfContentText);
line-height: 1.1;
}
/* Overview cards with same accent concept as stats KPI cards */
.gm-statRail__item:nth-child(1) { --gm-overview-accent: #22c55e; }
.gm-statRail__item:nth-child(2) { --gm-overview-accent: #38bdf8; }
.gm-statRail__item:nth-child(3) { --gm-overview-accent: #a78bfa; }
.gm-statRail__item:nth-child(4) { --gm-overview-accent: #f59e0b; }
.gm-statRail__item:nth-child(5) { --gm-overview-accent: #14b8a6; }
html[data-color-scheme="light"] .gm-statRail__item {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--gm-overview-accent, var(--wcfColor)) 8%, #ffffff) 0%,
color-mix(in srgb, var(--gm-overview-accent, var(--wcfColor)) 4%, #f8fafc) 100%
);
border-color: color-mix(in srgb, var(--gm-overview-accent, var(--wcfColor)) 30%, var(--wcfContentBorderColor));
box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.55);
}
.gm-statRail__v--muted {
font-size: 1.05rem;
font-weight: 700;
color: var(--wcfContentDimmedText);
}
.gm-statRail__v--up {
color: var(--gm-online-color);
}
.gm-statRail__v--down {
color: var(--gm-offline-color);
}
.gm-sparkline {
display: block;
width: 100%;
height: 40px;
margin-top: 2px;
color: color-mix(in srgb, var(--wcfColor) 82%, #38bdf8);
opacity: .95;
}
.gm-playerCapacity {
margin: 0 0 20px;
padding: 14px 16px;
border-radius: var(--gm-card-radius-sm);
border: 1px solid var(--wcfContentBorderColor);
background: color-mix(in srgb, var(--wcfContentText) 3.5%, var(--wcfContentBackground));
}
.gm-playerCapacity__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.gm-playerCapacity__label {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--wcfContentDimmedText);
}
.gm-playerCapacity__nums {
font-size: 0.95rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--wcfContentText);
}
.gm-playerBar__track--hero {
height: 12px;
}
.gm-overviewFold {
margin: 0 0 18px;
padding: 10px 12px;
border-radius: var(--gm-card-radius-sm);
border: 1px dashed color-mix(in srgb, var(--wcfContentBorderColor) 85%, transparent);
background: color-mix(in srgb, var(--wcfContentText) 3%, var(--wcfContentBackground));
}
.gm-overviewFold__summary {
cursor: pointer;
font-weight: 700;
list-style: none;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--wcfContentText);
}
.gm-overviewFold__summary::-webkit-details-marker {
display: none;
}
.gm-overviewFold__badge {
display: inline-flex;
min-width: 26px;
justify-content: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
background: color-mix(in srgb, var(--wcfColor) 16%, transparent);
color: var(--wcfColor);
}
.gm-overviewFold__hint {
margin: 8px 0 10px;
font-size: 0.88rem;
color: var(--wcfContentDimmedText);
line-height: 1.45;
}
.gm-techSection {
margin-top: 4px;
}
.gm-techSection__title {
margin: 0 0 10px;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--wcfContentDimmedText);
}
.gm-infoGrid--dense {
gap: 10px;
}
.gm-infoGrid--dense .gm-infoGrid__item {
padding: 12px 14px;
}
/* ── Sidebar: Faktenliste (Icon + Label + Wert) ─────────────────────────── */
.gm-sidebarFacts {
list-style: none;
margin: 0;
padding: 0;
}
.gm-sidebarFacts__row {
display: grid;
/* Dritte Spalte darf schrumpfen — „max-content“ allein frisst schmalen Platz weg */
grid-template-columns: 36px minmax(0, 1fr) minmax(0, max-content);
gap: 8px 10px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}
.gm-sidebarFacts__row:last-child {
border-bottom: none;
}
/* Adresse: Zeile 1 = Icon + Titel, Zeile 2 = Hostname + Kopieren (eine Flex-Zeile, Text darf umbrechen) */
.gm-sidebarFacts__row--address {
grid-template-columns: 36px minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 6px 10px;
align-items: start;
}
.gm-sidebarFacts__row--address .gm-sidebarFacts__icon {
grid-column: 1;
grid-row: 1;
}
.gm-sidebarFacts__row--address .gm-sidebarFacts__label {
grid-column: 2;
grid-row: 1;
}
.gm-sidebarFacts__row--address .gm-sidebarFacts__value--address {
grid-column: 1 / -1;
grid-row: 2;
padding-left: 46px; /* Icon + column gap: Wert bündig unter dem Label „Adresse“ */
}
/* LiF (u. a.): A2S_RULES-Block unter der Karte — volle Breite, grüner Titel wie „Gameserver-Informationen“ */
.gm-sidebarFacts__row--rulePackHead {
grid-column: 1 / -1;
display: block;
padding: 10px 12px 8px;
margin: 10px 0 4px;
border-radius: 10px;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--gm-online-color) 88%, #047857) 0%,
color-mix(in srgb, var(--gm-online-color) 62%, #0f766e) 100%
);
box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
border: 1px solid color-mix(in srgb, var(--gm-online-color) 55%, #065f46);
}
.gm-sidebarRulePack__title {
display: block;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #f8fafc;
line-height: 1.35;
}
.gm-sidebarFacts__row--rulePack .gm-sidebarFacts__value--rule {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
text-align: right;
}
.gm-sidebarFacts__icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 12px;
background: transparent;
color: color-mix(in srgb, var(--wcfContentDimmedText) 80%, var(--wcfColor));
font-size: 0.98rem;
grid-column: 1;
grid-row: 1;
}
.gm-sidebarFacts__label {
font-size: 0.9rem;
font-weight: 500;
text-transform: none;
letter-spacing: .01em;
color: color-mix(in srgb, var(--wcfContentDimmedText) 96%, #9ca3af);
line-height: 1.35;
grid-column: 2;
grid-row: 1;
margin: 0;
min-width: 0;
word-break: normal;
overflow-wrap: normal;
}
.gm-sidebarFacts__label--titled {
cursor: help;
}
.gm-sidebarFacts__value {
font-size: 0.9rem;
font-weight: 500;
color: var(--wcfContentText);
text-align: right;
word-break: break-word;
min-width: 0;
grid-column: 3;
grid-row: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.gm-sidebarFacts__value--address {
text-align: left;
white-space: normal;
min-width: 0;
max-width: 100%;
justify-self: stretch;
overflow-wrap: anywhere;
}
.gm-sidebarFacts__value--address .gm-sidebarAddressBlock {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* Schmale Viewports: Label + Wert untereinander (kein „Buchstaben-Stapel“) */
@media (max-width: 700px) {
.gm-sidebarFacts__row,
.gm-sidebarFacts__row--address {
grid-template-columns: 40px minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: start;
}
.gm-sidebarFacts__icon {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
}
.gm-sidebarFacts__label {
grid-column: 2;
grid-row: 1;
}
.gm-sidebarFacts__value {
grid-column: 2;
grid-row: 2;
text-align: left;
white-space: normal;
justify-self: stretch;
max-width: 100%;
}
.gm-sidebarFacts__value--address {
justify-self: stretch;
text-align: left;
padding-left: 0;
}
.gm-sidebarFacts__row--address .gm-sidebarFacts__icon {
grid-row: 1 / span 2;
}
.gm-sidebarFacts__row--address .gm-sidebarFacts__value--address {
grid-column: 2;
grid-row: 2;
padding-left: 0;
}
.gm-sidebarAddressRow {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.gm-sidebarAddressRow .gm-serverAddress {
flex: 1 1 auto;
min-width: 0;
width: auto;
text-align: left;
}
.gm-serverDetail__sidebar .gm-sidebarAddressRow .gm-copyAddressBtn.button,
.gm-serverDetail__sidebar button.gm-copyAddressBtn.button {
align-self: center;
}
}
@media (max-width: 520px) {
/* Tabs: waagrecht scrollen statt unleserlicher Mehrspaltigkeit */
.gm-detailTabs .tabMenu > ul {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 0 6px !important;
padding-bottom: 4px;
scrollbar-width: thin;
}
.gm-detailTabs .tabMenu > ul > li {
flex: 0 0 auto;
}
.gm-detailTabs .tabMenu > ul > li > a {
white-space: nowrap !important;
}
}
.gm-sidebarFacts__primary {
display: block;
font-weight: 500;
line-height: 1.3;
}
.gm-sidebarFacts__secondary {
display: block;
margin-top: 2px;
font-size: 0.78rem;
font-weight: 500;
color: var(--wcfContentDimmedText);
line-height: 1.35;
}
.gm-sidebarJoinBtn {
margin-top: 10px;
min-height: 44px;
}
.gm-serverAddress {
font-size: 0.9rem;
line-height: 1.3;
white-space: normal;
overflow-wrap: anywhere;
font-weight: 500;
padding: 0;
background: transparent;
border: 0;
}
/* Nur zwischen Tablet-Breite und Desktop: schmalere Sidebar — nicht auf Mobil (≤1040),
sonst überschreibt diese Regel die Einspurigkeit der folgenden 1040px-Blöcke. */
@media (max-width: 1400px) and (min-width: 1041px) {
.gm-serverDetail {
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
grid-template-areas:
"main sidebar"
"actions actions";
}
}
/* ── Server Rules ───────────────────────────────────────────────────────── */
.gm-serverRules {
padding: 8px 0;
}
/* ── Whitelist Apply Form ────────────────────────────────────────────────── */
.gm-whitelistCheckbox {
display: inline-flex;
align-items: flex-start;
gap: 10px;
line-height: 1.45;
cursor: pointer;
}
.gm-whitelistCheckbox input {
margin-top: 4px;
flex-shrink: 0;
}
.gm-whitelistCheckboxWrap {
display: flex;
flex-direction: column;
gap: 10px;
}
.gm-whitelistCheckboxHint {
margin: 0;
padding: 10px 12px;
border-radius: 8px;
font-size: 0.88em;
line-height: 1.45;
color: color-mix(in srgb, var(--wcfContentText) 78%, transparent);
background: color-mix(in srgb, var(--wcfContentText) 6%, var(--wcfContentBackground));
border: 1px solid var(--wcfContentBorderColor);
}
.gm-whitelistApply,
.gm-whitelistApplyForm {
background: color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground));
border-radius: var(--gm-card-radius-sm);
border: 1px solid var(--wcfContentBorderColor);
padding: 22px 24px;
margin-bottom: 24px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.gm-whitelistApply h3,
.gm-whitelistApplyForm h3 {
margin-top: 0;
}
.gm-fsWhFieldHint {
margin: 8px 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--wcfContentDimmedText);
}
/* ── Whitelist Status Colors ────────────────────────────────────────────── */
.gm-whitelistStatus.gm-statusBadge--accepted { color: var(--gm-online-color); }
.gm-whitelistStatus.gm-statusBadge--rejected { color: var(--gm-offline-color); }
.gm-whitelistStatus.gm-statusBadge--banned { color: #8e44ad; }
.gm-whitelistStatus.gm-statusBadge--pending { color: var(--gm-pending-color); }
/* ── Dashboard (KPI + Charts + Topliste) ─────────────────────────────── */
.gm-dashboard {
margin-top: 4px;
}
.gm-dashboardKpi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--gm-card-gap);
margin-bottom: 28px;
}
.gm-dashboardKpi__card {
position: relative;
border-radius: var(--gm-card-radius);
background: var(--wcfContentBackground);
border: 1px solid var(--wcfContentBorderColor);
box-shadow: var(--gm-card-shadow);
overflow: hidden;
transition: transform .16s ease, box-shadow .16s ease;
}
.gm-dashboardKpi__card:hover {
transform: translateY(-2px);
box-shadow: var(--gm-card-shadow-lg);
}
.gm-dashboardKpi__accent {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: 4px 0 0 4px;
}
.gm-dashboardKpi__card--total .gm-dashboardKpi__accent { background: var(--gm-accent); }
.gm-dashboardKpi__card--online .gm-dashboardKpi__accent { background: var(--gm-online-color); }
.gm-dashboardKpi__card--offline .gm-dashboardKpi__accent { background: var(--gm-offline-color); }
.gm-dashboardKpi__card--players .gm-dashboardKpi__accent { background: color-mix(in srgb, var(--wcfColor) 70%, #6366f1); }
.gm-dashboardKpi__body {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px 18px 22px;
}
.gm-dashboardKpi__icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
background: var(--wcfTabularBoxBackground);
color: var(--wcfContentDimmedText);
}
.gm-dashboardKpi__card--online .gm-dashboardKpi__icon {
background: rgba(46, 204, 113, .12);
color: var(--gm-online-color);
}
.gm-dashboardKpi__card--offline .gm-dashboardKpi__icon {
background: rgba(231, 76, 60, .12);
color: var(--gm-offline-color);
}
.gm-dashboardKpi__meta {
flex: 1;
min-width: 0;
}
.gm-dashboardKpi__value {
font-size: 1.85rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--wcfContentText);
}
.gm-dashboardKpi__label {
font-size: 0.82rem;
color: var(--wcfContentDimmedText);
margin-top: 2px;
}
.gm-dashboardMain {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
gap: 24px;
align-items: start;
}
@media (max-width: 1100px) {
.gm-dashboardMain {
grid-template-columns: 1fr;
}
}
.gm-dashboardMain__charts {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.gm-dashboardChartEmpty {
margin: 0 0 12px;
}
.gm-chartPanel {
position: relative;
border-radius: var(--gm-card-radius);
background: linear-gradient(180deg, var(--wcfContentBackground) 0%, var(--wcfTabularBoxBackground) 120%);
border: 1px solid var(--wcfContentBorderColor);
box-shadow: var(--gm-card-shadow);
padding: 20px 22px 18px;
}
.gm-chartPanel--donut {
max-width: 640px;
}
.gm-chartPanel--top {
position: sticky;
top: 12px;
}
.gm-chartPanel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.gm-chartPanel__title {
margin: 0;
font-size: 0.88rem;
font-weight: 700;
color: var(--wcfContentText);
}
.gm-chartPanel__badge {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
padding: 4px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--wcfColor) 14%, transparent);
color: var(--wcfColor);
}
.gm-chartPanel__hint {
margin: 0 0 14px;
font-size: 0.84rem;
color: var(--wcfContentDimmedText);
line-height: 1.45;
}
.gm-chartPanel__canvasWrap {
width: 100%;
min-height: 260px;
border-radius: 10px;
overflow: hidden;
background: color-mix(in srgb, var(--wcfContentText) 3%, var(--wcfContentBackground));
border: 1px solid var(--wcfContentBorderColor);
}
.gm-chartPanel__canvas {
display: block;
width: 100%;
height: auto;
vertical-align: middle;
}
.gm-donutRow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px 32px;
}
.gm-donutRow__chart {
flex-shrink: 0;
}
.gm-donutLegend {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
min-width: 180px;
}
.gm-donutLegend li {
display: grid;
grid-template-columns: 14px 1fr auto;
gap: 10px 12px;
align-items: center;
padding: 8px 0;
font-size: 0.88rem;
border-bottom: 1px solid var(--wcfContentBorderColor);
}
.gm-donutLegend li:last-child {
border-bottom: none;
}
.gm-donutLegend__swatch {
width: 12px;
height: 12px;
border-radius: 3px;
display: inline-block;
}
.gm-donutLegend__label {
color: var(--wcfContentDimmedText);
}
.gm-donutLegend__val {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--wcfContentText);
}
.gm-donutLegend__pct {
font-weight: 500;
color: var(--wcfContentDimmedText);
font-size: 0.82rem;
}
.gm-dashboardAside {
min-width: 0;
}
.gm-topServerList {
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.gm-topServerList__item {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px 12px;
align-items: center;
padding: 12px 14px;
margin-bottom: 8px;
border-radius: 10px;
border: 1px solid var(--wcfContentBorderColor);
background: var(--wcfContentBackground);
transition: border-color .15s ease, box-shadow .15s ease;
}
.gm-topServerList__item:hover {
border-color: color-mix(in srgb, var(--wcfColor) 35%, var(--wcfContentBorderColor));
box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.gm-topServerList__rank {
width: 32px;
height: 32px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.85rem;
background: var(--wcfTabularBoxBackground);
color: var(--wcfContentDimmedText);
}
.gm-topServerList__body {
min-width: 0;
}
.gm-topServerList__name {
display: block;
font-weight: 700;
color: var(--wcfContentText);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gm-topServerList__name:hover {
color: var(--wcfColor);
}
.gm-topServerList__game {
font-size: 0.78rem;
color: var(--wcfContentDimmedText);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gm-topServerList__players {
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 0.92rem;
color: var(--wcfContentText);
}
/* ── Server-Detail: Kopfzeile nur „Zur Übersicht“ ─────────────────────────── */
.gm-serverDetailHeaderNav ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
/* ── Map tab: Galerie + Giants + Livekarte (moderne Karten-Optik) ─────────── */
.gm-mapTab {
min-width: 0;
padding-block: 4px 8px;
}
.gm-mapTab__layout {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 640px;
margin-inline: auto;
width: 100%;
}
.gm-mapTabStack__block {
min-width: 0;
}
.gm-mapGallery {
max-width: 100%;
margin: 0 auto;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 85%, transparent);
background: color-mix(in srgb, var(--wcfContentBackground) 94%, var(--wcfContentText));
box-shadow: 0 14px 42px rgba(15, 23, 42, .12);
overflow: hidden;
backdrop-filter: blur(0);
}
.gm-mapGallery__main {
padding: 14px 14px 0;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wcfTabularBoxBackground) 88%, transparent) 0%,
var(--wcfTabularBoxBackground) 100%
);
text-align: center;
}
.gm-mapGallery__mainImg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
max-height: min(40vh, 420px);
object-fit: contain;
margin: 0 auto;
border-radius: 14px;
box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
}
.gm-mapGallery__thumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding: 14px 14px 16px;
border-top: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 70%, transparent);
background: var(--wcfContentBackground);
}
.gm-mapGallery__thumb {
-webkit-appearance: none;
appearance: none;
margin: 0;
padding: 0;
border: 2px solid transparent;
border-radius: 12px;
cursor: pointer;
background: color-mix(in srgb, var(--wcfContentBackground) 92%, var(--wcfContentText));
overflow: hidden;
flex: 0 0 auto;
width: 84px;
max-width: calc(20% - 10px);
line-height: 0;
transition: border-color .18s ease, box-shadow .18s ease, transform .14s ease, filter .14s ease;
}
.gm-mapGallery__thumb:hover {
transform: translateY(-2px);
filter: brightness(1.04);
}
.gm-mapGallery__thumb.is-active {
border-color: var(--wcfColor);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcfColor) 35%, transparent);
}
.gm-mapGallery__thumb:focus-visible {
outline: 2px solid var(--wcfColor);
outline-offset: 3px;
}
.gm-mapGallery__thumbImg {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.gm-mapTabStack__block--feed {
max-width: 100%;
margin: 0 auto;
}
/* ── Giants-Kartenbild: dunkle JPEG-Vignette optisch abschwächen ─────────── */
.gm-serverMapWrap {
max-width: 100%;
margin: 0 auto;
border-radius: var(--gm-card-radius-sm);
overflow: hidden;
border: 1px solid var(--wcfContentBorderColor);
background: var(--wcfTabularBoxBackground);
box-shadow: var(--gm-card-shadow);
text-align: center;
}
.gm-serverMapWrap--tab {
max-width: 100%;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 85%, transparent);
background: color-mix(in srgb, var(--wcfTabularBoxBackground) 92%, #0f172a);
box-shadow: 0 14px 42px rgba(15, 23, 42, .22);
overflow: hidden;
}
.gm-serverMapWrap--tab .gm-serverMapImage {
display: block;
width: 100%;
height: auto;
max-height: min(42vh, 440px);
object-fit: contain;
margin: 0 auto;
transform: scale(1.055);
transform-origin: center center;
}
.gm-serverMapImage {
display: block;
width: 100%;
height: auto;
max-height: min(38vh, 380px);
object-fit: contain;
margin: 0 auto;
}
/* ── Livekarte: Call-to-Action ───────────────────────────────────────────── */
.gm-livemapOpen {
display: flex;
justify-content: center;
padding-top: 2px;
}
.gm-livemapOpen__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: min(100%, 360px);
padding: 12px 24px;
border-radius: 9999px;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid color-mix(in srgb, var(--wcfColor) 55%, transparent);
box-shadow: 0 10px 26px color-mix(in srgb, var(--wcfColor) 22%, transparent);
}
/* ── Server description (overview tab) ─────────────────────────────────── */
.gm-serverDescription {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--wcfContentBorderColor, #e5e7eb);
}
.gm-serverDescription__title {
margin: 0 0 12px;
font-size: 1.05rem;
font-weight: 700;
color: var(--wcfContentText);
}
/* ── Optional action link buttons (Forum / Support / Download + extras) ─ */
.gm-actionLinks {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.gm-actionLinks--header {
margin-top: 0;
gap: 6px;
}
.gm-headerActionLinksItem {
display: flex;
align-items: center;
}
.gm-actionLinks--row {
margin-top: 0;
gap: 6px;
justify-content: flex-end;
}
/* Aktionslinks: moderne, flache Kontrollen (WCF-Semantik, hell/dunkel automatisch) */
a.gm-actionLinkBtn {
position: relative;
z-index: 0;
display: inline-flex !important;
align-items: center;
justify-content: stretch;
box-sizing: border-box;
width: auto;
min-height: 44px;
padding: 0;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0;
text-decoration: none !important;
color: var(--wcfContentText) !important;
border: 1px solid var(--wcfContentBorderColor) !important;
background: var(--wcfContentContainerBackground) !important;
box-shadow: 0 1px 0 color-mix(in srgb, var(--wcfContentText) 5%, transparent) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
/* Spezifität + nur rgba in box-shadow: color-mix in Schatten kann sonst die ganze Deklaration ungültig machen */
a.gm-actionLinkBtn:hover,
html body .gm-actionLinks a.gm-actionLinkBtn:hover {
z-index: 2;
color: var(--wcfContentText) !important;
text-decoration: none !important;
border-color: color-mix(in srgb, var(--wcfColor) 42%, var(--wcfContentBorderColor)) !important;
background: color-mix(in srgb, var(--wcfColor) 10%, var(--wcfContentContainerBackground)) !important;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.78),
0 0 0 4px rgba(16, 185, 129, 0.28),
0 0 22px rgba(16, 185, 129, 0.5),
0 0 42px rgba(16, 185, 129, 0.24),
0 2px 10px rgba(15, 23, 42, 0.1) !important;
}
a.gm-actionLinkBtn:focus-visible {
outline: 2px solid var(--wcfColor);
outline-offset: 2px;
}
.gm-actionLinkBtn__inner {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: inherit;
padding: 10px 12px 10px 10px;
box-sizing: border-box;
}
.gm-actionLinkBtn__iconWrap {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 9px;
font-size: 0.98rem;
color: var(--wcfColor);
background: color-mix(in srgb, var(--wcfColor) 14%, var(--wcfContentContainerBackground));
box-shadow: none;
}
a.gm-actionLinkBtn--kind-download .gm-actionLinkBtn__iconWrap {
color: color-mix(in srgb, #22c55e 82%, var(--wcfContentText));
background: color-mix(in srgb, #22c55e 20%, var(--wcfContentContainerBackground));
}
a.gm-actionLinkBtn--kind-forum .gm-actionLinkBtn__iconWrap {
color: color-mix(in srgb, #64748b 75%, var(--wcfContentText));
background: color-mix(in srgb, #64748b 18%, var(--wcfContentContainerBackground));
}
a.gm-actionLinkBtn--kind-ticket .gm-actionLinkBtn__iconWrap {
color: color-mix(in srgb, #f59e0b 78%, var(--wcfContentText));
background: color-mix(in srgb, #f59e0b 22%, var(--wcfContentContainerBackground));
}
a.gm-actionLinkBtn--kind-extra .gm-actionLinkBtn__iconWrap {
color: color-mix(in srgb, #6366f1 78%, var(--wcfContentText));
background: color-mix(in srgb, #818cf8 20%, var(--wcfContentContainerBackground));
}
.gm-actionLinkBtn__label {
flex: 1 1 auto;
min-width: 0;
text-align: left;
font-weight: 700;
}
.gm-actionLinkBtn__ext {
flex: 0 0 auto;
margin-left: auto;
opacity: 0.75;
font-size: 0.85rem;
color: var(--wcfContentDimmedText) !important;
}
.gm-actionLinks--footer .gm-actionLinkBtn--footer {
flex: 1 1 auto;
min-width: min(100%, 120px);
width: auto;
max-width: 100%;
}
.gm-actionLinks--row .gm-actionLinkBtn--row {
min-height: 38px;
border-radius: 10px;
}
.gm-actionLinks--row .gm-actionLinkBtn--row .gm-actionLinkBtn__inner {
padding: 6px 10px 6px 8px;
gap: 8px;
}
.gm-actionLinks--row .gm-actionLinkBtn--row .gm-actionLinkBtn__iconWrap {
width: 30px;
height: 30px;
font-size: 0.88rem;
border-radius: 8px;
}
.gm-actionLinks--row .gm-actionLinkBtn--row .gm-actionLinkBtn__label {
font-size: 0.82rem;
font-weight: 650;
}
/* Aktionsleiste (volle Breite): Fläche wie Sidebar-Panel + Leuchtrand wie Meta-Chips */
.gm-serverDetail__actions .gm-actionLinks--footer a.gm-actionLinkBtn.gm-actionLinkBtn--footer {
position: relative;
z-index: 0;
flex: 1 1 auto !important;
min-width: min(100%, 120px) !important;
width: auto !important;
max-width: 100% !important;
min-height: 48px !important;
justify-content: stretch !important;
cursor: pointer !important;
border-radius: 14px !important;
border: 1px solid color-mix(in srgb, var(--wcfColor) 48%, var(--wcfContentBorderColor)) !important;
background: var(--wcfContentBackground) !important;
background-image: var(--gm-surface-glass),
linear-gradient(160deg, color-mix(in srgb, var(--wcfColor) 8%, transparent) 0%, transparent 52%) !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--wcfColor) 28%, transparent),
0 0 22px color-mix(in srgb, var(--wcfColor) 18%, transparent),
inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent) !important;
transition: border-color 0.2s ease, box-shadow 0.22s ease, background 0.2s ease, transform 0.18s ease !important;
}
.gm-serverDetail__actions .gm-actionLinks--footer a.gm-actionLinkBtn.gm-actionLinkBtn--footer:hover,
html body .gm-serverDetail__actions .gm-actionLinks--footer a.gm-actionLinkBtn.gm-actionLinkBtn--footer:hover {
z-index: 2;
border-color: color-mix(in srgb, var(--wcfColor) 68%, var(--wcfContentBorderColor)) !important;
background-image: var(--gm-surface-glass),
linear-gradient(160deg, color-mix(in srgb, var(--wcfColor) 16%, transparent) 0%, transparent 55%) !important;
/* Schatten nur mit rgba: vermeidet „ganzer box-shadow ungültig“ wenn color-mix in Schatten scheitert */
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.82),
0 0 0 4px rgba(16, 185, 129, 0.28),
0 0 26px rgba(16, 185, 129, 0.52),
0 0 48px rgba(16, 185, 129, 0.22),
0 0 0 1px color-mix(in srgb, var(--wcfColor) 42%, transparent),
0 0 32px color-mix(in srgb, var(--wcfColor) 28%, transparent),
0 10px 26px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
transform: translateY(-2px);
}
.gm-serverDetail__actions .gm-actionLinks--footer a.gm-actionLinkBtn.gm-actionLinkBtn--footer:active {
transform: translateY(0);
box-shadow: inset 0 1px 5px color-mix(in srgb, var(--wcfContentText) 10%, transparent),
0 0 0 1px color-mix(in srgb, var(--wcfColor) 22%, transparent) !important;
}
.gm-serverDetail__actions .gm-actionLinks--footer a.gm-actionLinkBtn.gm-actionLinkBtn--footer .gm-actionLinkBtn__inner {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
padding: 10px 14px 10px 12px !important;
text-align: left;
}
.gm-serverDetail__actions .gm-actionLinks--footer .gm-actionLinkBtn__iconWrap {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
font-size: 0.98rem !important;
flex-shrink: 0 !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent) !important;
}
.gm-serverDetail__actions .gm-actionLinks--footer .gm-actionLinkBtn__label {
flex: 1 1 auto !important;
min-width: 0 !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
line-height: 1.3 !important;
text-align: left !important;
word-break: break-word;
hyphens: auto;
}
.gm-serverDetail__actions .gm-actionLinks--footer .gm-actionLinkBtn__ext {
display: inline-flex !important;
flex-shrink: 0 !important;
margin-left: auto !important;
opacity: 0.75 !important;
}
/* ── Whitelist: Anträge-Tab (Suche + Liste) ─────────────────────────────── */
.gm-whitelistRequests {
margin-top: 0;
}
.gm-whitelistRequests__title {
margin: 0 0 8px;
font-size: 1.1rem;
font-weight: 700;
}
.gm-whitelistRequests__intro {
margin: 0 0 16px;
color: var(--wcfContentDimmedText);
font-size: 0.95rem;
}
.gm-whitelistSearch {
margin: 0 0 18px;
padding: 14px 16px;
border-radius: var(--gm-card-radius-sm);
border: 1px solid var(--wcfContentBorderColor);
background: var(--wcfContentContainerBackground);
}
.gm-whitelistSearch__label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 0.95rem;
}
.gm-whitelistSearch__row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.gm-whitelistSearch__row .long {
flex: 1 1 220px;
min-width: 180px;
}
.gm-whitelistApplyNotice {
margin-bottom: 16px;
}
.gm-whitelistMinecraftHint {
margin-bottom: 12px;
}
.gm-whitelistTable--requests {
margin-top: 4px;
overflow: visible;
}
/* Tab-Inhalt / Tab-Container: Dropdown über Tabellenrand hinaus erlauben */
.tabMenuContainer.gm-detailTabs {
overflow: visible !important;
}
#whitelistrequests.tabMenuContent {
overflow: visible !important;
}
.gm-whitelistTable--requests.table tbody,
.gm-whitelistTable--requests.table tr {
overflow: visible;
}
/* Whitelist-Anträge: Drei-Punkte-Menü ( — natives Öffnen/Schließen, robust in Tabellen) */
details.gm-whitelistMenu {
position: relative;
display: inline-block;
align-self: flex-start;
}
.gm-whitelistMenu__toggle {
list-style: none;
min-width: 36px;
justify-content: center;
overflow: visible;
}
.gm-whitelistMenu__toggle::-webkit-details-marker {
display: none;
}
/* Klick/Sicht: Icon blockiert keinen Summary-Klick */
.gm-whitelistMenu__toggle fa-icon,
.gm-whitelistMenu__item fa-icon {
pointer-events: none;
}
details.gm-whitelistMenu:not([open]) > .gm-whitelistMenu__panel {
display: none;
}
details.gm-whitelistMenu[open] > .gm-whitelistMenu__panel {
display: flex;
flex-direction: column;
gap: 2px;
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 500;
min-width: 220px;
padding: 6px;
border-radius: var(--gm-card-radius-sm);
border: 1px solid var(--wcfContentBorderColor);
background: var(--wcfContentContainerBackground);
color: var(--wcfContentText);
box-shadow: var(--gm-card-shadow);
}
.gm-whitelistMenu__hint {
margin: 0;
padding: 8px 10px;
max-width: 280px;
font-size: 0.85rem;
line-height: 1.45;
color: var(--wcfContentDimmedText);
}
.gm-whitelistMenu__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: 0;
padding: 8px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--wcfContentText);
font: inherit;
font-size: 0.95rem;
line-height: 1.35;
text-align: left;
cursor: pointer;
}
.gm-whitelistMenu__item:hover {
background: rgba(0, 0, 0, .05);
}
html[data-color-scheme="dark"] .gm-whitelistMenu__item:hover {
background: rgba(255, 255, 255, .06);
}
.gm-whitelistMenu__item--success:hover {
background: var(--gm-online-soft);
}
.gm-whitelistMenu__item--danger:hover {
background: var(--gm-offline-soft);
}
/* ==========================================================================
Final UI Overrides (Tabs / Stats / Sidebar Buttons)
========================================================================== */
/* Detail-Tabs: klassische Unterzeile (ohne äußeren Pillen-Kasten), ruhig & gut lesbar */
.gm-detailTabs {
margin-bottom: 16px;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-bottom: 1px solid var(--wcfContentBorderColor) !important;
}
.gm-detailTabs .tabMenu > ul {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0 2px !important;
margin: 0;
padding: 0;
}
.gm-detailTabs .tabMenu > ul > li > a {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin: 0 0 -1px 0 !important;
padding: 10px 14px 12px !important;
border-radius: 10px 10px 0 0 !important;
border: 1px solid transparent !important;
border-bottom: 2px solid transparent !important;
background: transparent !important;
color: var(--wcfContentDimmedText) !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
line-height: 1.3 !important;
text-decoration: none !important;
box-shadow: none !important;
transition: color .15s ease, border-color .15s ease, background .15s ease !important;
}
.gm-detailTabs .tabMenu > ul > li.active > a {
color: var(--wcfContentText) !important;
border-bottom-color: var(--wcfColor) !important;
background: color-mix(in srgb, var(--wcfContentText) 4%, transparent) !important;
}
.gm-detailTabs .tabMenu > ul > li > a:hover {
color: var(--wcfContentText) !important;
background: color-mix(in srgb, var(--wcfContentText) 5%, transparent) !important;
border-color: color-mix(in srgb, var(--wcfContentBorderColor) 70%, transparent) !important;
border-bottom-color: color-mix(in srgb, var(--wcfColor) 45%, transparent) !important;
}
.gm-detailTabs .tabMenu > ul > li.active > a:hover {
border-bottom-color: var(--wcfColor) !important;
}
/* Zähler-Badges in Tabs */
.gm-detailTabs .tabMenu > ul > li > a .badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35em;
padding: 0.1em 0.42em;
border-radius: 6px;
font-size: 0.72em;
font-weight: 700;
line-height: 1.2;
background: color-mix(in srgb, var(--wcfColor) 18%, var(--wcfContentContainerBackground));
color: var(--wcfContentText);
border: 1px solid color-mix(in srgb, var(--wcfColor) 24%, var(--wcfContentBorderColor));
}
.gm-detailTabs .tabMenu > ul > li.active > a .badge {
background: color-mix(in srgb, var(--wcfColor) 24%, var(--wcfContentContainerBackground));
border-color: color-mix(in srgb, var(--wcfColor) 38%, var(--wcfContentBorderColor));
}
/* Stats section visual polish */
.gm-statsHeader {
display: flex;
justify-content: flex-end;
}
.gm-statsSwitch {
background: color-mix(in srgb, var(--wcfContentText) 4%, var(--wcfContentBackground)) !important;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 75%, transparent) !important;
border-radius: 12px !important;
padding: 4px !important;
}
.gm-statsSwitch .button {
min-height: 32px !important;
padding: 0 12px !important;
border-radius: 8px !important;
border: 1px solid transparent !important;
background: transparent !important;
color: var(--wcfContentDimmedText) !important;
}
.gm-statsSwitch .button.isActive {
background: color-mix(in srgb, var(--wcfColor) 20%, var(--wcfContentBackground)) !important;
border-color: color-mix(in srgb, var(--wcfColor) 40%, var(--wcfContentBorderColor)) !important;
color: var(--wcfContentText) !important;
}
.gm-statsCard--accent {
border-left: 3px solid #22c55e !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 18%, transparent) !important;
}
.gm-chartPanel--stats {
border-radius: 12px !important;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 82%, transparent) !important;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wcfContentBackground) 92%, var(--wcfContentText)) 0%,
color-mix(in srgb, var(--wcfTabularBoxBackground) 90%, var(--wcfContentBackground)) 100%
) !important;
padding: 16px 18px 14px !important;
}
.gm-chartCanvasWrap {
position: relative;
}
/* Statistik-Diagramme: Plot-Bereich vom Rand absetzen, Achsen besser lesbar */
#statistics .gm-chartPanel--stats .gm-chartCanvasWrap {
margin-top: 4px;
padding: 6px 6px 2px;
border-radius: 12px;
background: color-mix(in srgb, var(--wcfContentText) 5%, var(--wcfContentBackground));
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 72%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.gm-chartTooltip {
position: absolute;
z-index: 5;
min-width: 86px;
max-width: 140px;
pointer-events: none;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--wcfColor) 35%, var(--wcfContentBorderColor));
background: color-mix(in srgb, var(--wcfTabularBoxBackground) 92%, #000);
color: #e2e8f0;
font-size: 11px;
line-height: 1.35;
box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
/* Sidebar: Zeilentrenner (Serverbild: img.gm-serverHeroImage oben) */
.gm-sidebarFacts__row {
border-bottom: 1px solid rgba(148, 163, 184, 0.34) !important;
}
/* Adresse kopieren: kompakter Icon-Button, weniger Leerraum neben der Adresse */
.gm-serverDetail__sidebar button.gm-copyAddressBtn.button,
button.gm-copyAddressBtn.button.gm-sidebarCopyBtn {
-webkit-appearance: none !important;
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
min-width: 34px !important;
min-height: 34px !important;
width: 34px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 9px !important;
font-size: 0.82rem !important;
border: 1px solid var(--wcfContentBorderColor) !important;
background: var(--wcfContentContainerBackground) !important;
color: var(--wcfContentText) !important;
box-shadow: 0 1px 0 color-mix(in srgb, var(--wcfContentText) 6%, transparent) !important;
cursor: pointer !important;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease !important;
}
.gm-serverDetail__sidebar button.gm-copyAddressBtn.button:hover,
button.gm-copyAddressBtn.button.gm-sidebarCopyBtn:hover {
border-color: color-mix(in srgb, var(--wcfColor) 55%, var(--wcfContentBorderColor)) !important;
background: color-mix(in srgb, var(--wcfColor) 14%, var(--wcfContentContainerBackground)) !important;
color: var(--wcfContentText) !important;
box-shadow: 0 2px 10px color-mix(in srgb, var(--wcfColor) 22%, transparent) !important;
transform: translateY(-1px);
}
.gm-serverDetail__sidebar button.gm-copyAddressBtn.button:active,
button.gm-copyAddressBtn.button.gm-sidebarCopyBtn:active {
transform: translateY(0);
box-shadow: inset 0 1px 3px color-mix(in srgb, var(--wcfContentText) 10%, transparent) !important;
}
.gm-serverDetail__sidebar button.gm-copyAddressBtn.button:focus-visible,
button.gm-copyAddressBtn.button.gm-sidebarCopyBtn:focus-visible {
outline: 2px solid var(--wcfColor);
outline-offset: 2px;
}
.gm-copyAddressTrigger.isCopied {
border-color: var(--gm-online-color) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--gm-online-color) 35%, transparent) !important;
}
/* Stats cards: smaller + consistent */
.gm-statsGrid--kpis {
gap: 12px !important;
}
.gm-statsGrid--kpis .gm-statsCard {
padding: 10px 12px !important;
border-radius: 10px !important;
border: 1px solid color-mix(in srgb, var(--wcfContentBorderColor) 80%, transparent) !important;
background: color-mix(in srgb, var(--wcfContentBackground) 94%, var(--wcfContentText)) !important;
box-shadow: none !important;
}
.gm-statsGrid--kpis .gm-statsCard__period {
margin: 0 0 6px !important;
padding: 0 !important;
border: 0 !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: var(--wcfContentDimmedText) !important;
}
.gm-statsGrid--kpis .gm-statsCard__big {
margin: 0 !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: var(--wcfContentText) !important;
}
/* Axis labels a little smaller visually */
.gm-chartPanel--stats .gm-chartPanel__canvas {
image-rendering: auto;
}
/* KPI cards: cleaner premium treatment */
.gm-statsGrid--kpis {
gap: 14px !important;
}
.gm-statsGrid--kpis .gm-statsCard {
position: relative !important;
overflow: hidden !important;
border-radius: 12px !important;
border: 1px solid color-mix(in srgb, var(--gm-kpi-accent, var(--wcfColor)) 26%, var(--wcfContentBorderColor)) !important;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--gm-kpi-accent, var(--wcfColor)) 14%, var(--wcfContentBackground)) 0%,
color-mix(in srgb, var(--gm-kpi-accent, var(--wcfColor)) 7%, var(--wcfTabularBoxBackground)) 100%
) !important;
box-shadow: 0 1px 2px rgba(2, 6, 23, .16), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.gm-statsGrid--kpis .gm-statsCard::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--gm-kpi-accent, var(--wcfColor)) 45%, transparent 100%);
opacity: .8;
}
.gm-statsGrid--kpis .gm-statsCard:hover {
border-color: color-mix(in srgb, var(--gm-kpi-accent, var(--wcfColor)) 48%, var(--wcfContentBorderColor)) !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(2, 6, 23, .26), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
.gm-statsGrid--kpis .gm-statsCard__period {
opacity: .9;
color: color-mix(in srgb, var(--gm-kpi-accent, var(--wcfColor)) 40%, var(--wcfContentDimmedText)) !important;
}
.gm-statsGrid--kpis .gm-statsCard__big {
letter-spacing: .01em !important;
font-variant-numeric: tabular-nums;
}
/* 4 KPI cards with individual accents */
.gm-statsGrid--kpis .gm-statsCard:nth-child(1) { --gm-kpi-accent: #22c55e; } /* Aktuell */
.gm-statsGrid--kpis .gm-statsCard:nth-child(2) { --gm-kpi-accent: #38bdf8; } /* Peak */
.gm-statsGrid--kpis .gm-statsCard:nth-child(3) { --gm-kpi-accent: #a78bfa; } /* Ø */
.gm-statsGrid--kpis .gm-statsCard:nth-child(4) { --gm-kpi-accent: #f59e0b; } /* Uptime */
/* Light mode: keep cards colorful but less saturated */
html[data-color-scheme="light"] .gm-statsGrid--kpis .gm-statsCard {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--gm-kpi-accent, var(--wcfColor)) 8%, #ffffff) 0%,
color-mix(in srgb, var(--gm-kpi-accent, var(--wcfColor)) 4%, #f8fafc) 100%
) !important;
border-color: color-mix(in srgb, var(--gm-kpi-accent, var(--wcfColor)) 30%, var(--wcfContentBorderColor)) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}
/* Compact and consistent KPI cards (stats top row) */
.gm-statsGrid--kpis .gm-statsCard {
padding: 12px 14px !important;
}
.gm-statsGrid--kpis .gm-statsCard__period {
font-size: 0.66rem !important;
letter-spacing: .08em !important;
margin-bottom: 8px !important;
padding-bottom: 6px !important;
}
.gm-statsGrid--kpis .gm-statsCard__big {
font-size: 1.08rem !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}
/* Whitelist-Antrag: Detail-Dialog (native