MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 18:01, 10 March 2026

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


.citizen-search-trigger {
    position: relative;
}
.citizen-search-trigger::before {
    content: "🔍 ";
    font-size: 1.4rem;
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
}
.citizen-search-trigger:hover {
    background: var(--color-surface-3);
    border-color: var(--color-primary);
}




.small-portal-tile {
    background: var(--color-surface-2);
    border: 1px solid var(--border-color-subtle);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    transition: all 0.15s ease;
    text-align: center;
    height: 100%; /* makes grid rows even */
}

.small-portal-tile:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow-small);
}

.small-portal-tile a {
    display: block;
    padding: var(--space-sm) var(--space-xs);
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.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; }