MediaWiki:Citizen.css
MediaWiki interface page
More actions
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;
}
.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; }