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.

/* 1. Import Decorative and Monospace Fonts from Google Fonts */
@import url('https://googleapis.com');

:root,
.skin-theme-clientpref-night,
html.skin-citizen-dark {
    /* Background & Container Tones */
    background: linear-gradient(145deg, #1f2e22 0%, #2a3d2e 60%, #364f3b 100%) !important;
    background-attachment: fixed !important;
    --color-surface-0: transparent !important;
    --color-surface-1: #231c18 !important;
    --color-surface-2: #2d241f !important;
    --color-surface-3: #382d27 !important;

    /* Accents & Typography */
    --color-primary: #76a035 !important;
    --color-primary-variant: #8cb943 !important;
    --color-base: #f4f0e6 !important;
    --color-base-variant: #c2bbae !important;
    --border-radius-base: 12px !important;

    /* 2. Map Fonts into Citizen's Native Font Variables */
    --font-family-serif: 'Grenze Gotisch', serif !important;
    --font-family-sans-serif: 'Grenze Gotisch', serif !important;
    --font-family-monospace: 'Space Mono', monospace !important;
}

/* Apply the decorative font to all UI layout elements, buttons, and headings */
body, 
.mw-body, 
#mw-header, 
.skin-citizen-sidebar, 
.mw-portlet, 
.oo-ui-widget {
    font-family: var(--font-family-serif) !important;
    letter-spacing: 0.03em; /* Slightly increases readability for decorative text */
}

/* Apply Space Mono explicitly to all technical code blocks and preformatted tags */
code, 
pre, 
.mw-code, 
kbd, 
samp, 
.syntaxhighlight {
    font-family: var(--font-family-monospace) !important;
    font-size: 0.9em !important; /* Balances Space Mono's natural height */
    background-color: var(--color-surface-2) !important;
    padding: 0.2em 0.4em !important;
    border-radius: 6px !important;
}

/* Container Polish */
.mw-body, 
.mw-page-container, 
.skin-citizen-sidebar,
.mw-portlet {
    background-color: var(--color-surface-1) !important;
    border-radius: var(--border-radius-base) !important;
    border: 1px solid #332923 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.mw-body { padding: 2em !important; }
#mw-header { background-color: #1a1512 !important; border-bottom: 1px solid #231c18 !important; }