MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* === Citizen dark-mode-aware overrides === */

/* Global image constraint (replaces Foundation CSS behavior) */
img {
    max-width: 100%;
    height: auto;
}

/* Wide content layout */
:root {
    --width-layout: 1440px;
}

/* ---- Infobox ---- */
.infobox {
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-surface-3) !important;
    color: var(--color-base) !important;
}
.infobox > caption {
    background: var(--color-primary) !important;
    color: var(--color-primary--text, #fff) !important;
}
.infobox th {
    color: var(--color-base) !important;
}
/* Section headers (Properties, Recipes, Logic, Construction, Stage 1, etc.) */
.infobox th:only-child {
    background: var(--color-surface-3) !important;
    color: var(--color-base) !important;
}
.infobox td {
    color: var(--color-base) !important;
}
.infobox tr:nth-of-type(2n) {
    background: var(--color-surface-3) !important;
}
.infobox a {
    color: var(--color-link) !important;
}

/* ---- Description box (Template:Description — inline background-color:white) ---- */
div[style*="background-color:white"],
div[style*="background-color: white"] {
    background-color: var(--color-surface-2) !important;
    border: 1px solid var(--color-surface-3) !important;
    color: var(--color-base) !important;
}
div[style*="background-color:white"] p,
div[style*="background-color: white"] p,
div[style*="background-color:white"] i,
div[style*="background-color: white"] i,
div[style*="background-color:white"] b,
div[style*="background-color: white"] b {
    color: var(--color-base) !important;
}
div[style*="background-color:white"] a,
div[style*="background-color: white"] a {
    color: var(--color-link) !important;
}

/* ---- Stationeers icons ---- */
.stationeers-icon {
    background-color: var(--color-surface-3) !important;
    border-color: var(--color-surface-4, var(--color-surface-3)) !important;
    overflow: hidden;
}

/* ---- Subheader bars (used on some pages) ---- */
.subheader {
    background: var(--color-primary) !important;
    color: var(--color-primary--text, #fff) !important;
}

/* ---- Wikitables ---- */
table.wikitable {
    background: var(--color-surface-1) !important;
    border-color: var(--color-surface-3) !important;
    color: var(--color-base) !important;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background: var(--color-surface-2) !important;
    color: var(--color-base) !important;
    border-color: var(--color-surface-3) !important;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
    border-color: var(--color-surface-3) !important;
}

/* ---- Navboxes ---- */
.navbox {
    background: var(--color-surface-1) !important;
    border-color: var(--color-surface-3) !important;
    color: var(--color-base) !important;
}
.navbox-title {
    background: var(--color-primary) !important;
    color: var(--color-primary--text, #fff) !important;
}
.navbox-group {
    background: var(--color-surface-2) !important;
    color: var(--color-base) !important;
}
.navbox-subgroup {
    background: var(--color-surface-1) !important;
}

/* ---- Collapsible sections ---- */
.mw-collapsible {
    background: var(--color-surface-1) !important;
    border-color: var(--color-surface-3) !important;
}

/* ---- Translation header ---- */
.mw-pt-languages {
    background: var(--color-surface-1) !important;
    border-color: var(--color-surface-3) !important;
    color: var(--color-base) !important;
}



.tile-icon {
    font-size: 2.2rem; /* big enough to see, not dominate */
    margin: var(--space-xs) 0 var(--space-xs) 0;
    line-height: 1;
}

.tile-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0 var(--space-xs) var(--space-xs) var(--space-xs);
}

/* Grid container - adjust columns based on section */
.mainpage-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}


.welcome-section {
    text-align: left;
}

.welcome-section h4 {
    margin-top: 0;
    color: var(--color-emphasized);
}

.welcome-section ul {
    list-style: none;
    padding-left: 0;
}

.welcome-section li {
    margin: var(--space-xs) 0;
    font-size: 1.1rem;
}

.welcome-section a {
    color: var(--color-primary);
    text-decoration: none;
}

.welcome-section a:hover {
    text-decoration: underline;
}


.welcome-section {
    text-align: left;
}

.welcome-section h4 {
    margin-top: 0;
    color: var(--color-emphasized);
}

.community-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.service-btn {
    border-radius: var(--border-radius-medium);
    padding: var(--space-sm) var(--space-md);
    font-weight: bold;
    text-align: center;
    min-width: 100px;
    transition: all 0.2s ease;
}

.service-btn a {
    color: white;
    text-decoration: none;
}

.service-btn:hover {
    opacity: 0.92;
    transform: translateY(-2px);
}


.welcome-intro,
.welcome-cta {
    height: 100%;               /* makes columns same height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.welcome-intro h4,
.welcome-cta h4 {
    margin-top: 0;
    color: var(--color-emphasized);
}

.community-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: auto;           /* pushes buttons to bottom if needed */
}


/* Brand colors */
.service-btn.discord { background: #5865F2; }
.service-btn.reddit  { background: #FF4500; }
.service-btn.steam   { background: #171A21; }
.service-btn.itch    { background: #FA5C5C; }