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.

/* Custom Earth & Swamp Palette with Frosted Glass Effects */
:root,
.skin-theme-clientpref-night,
html.skin-citizen-dark {
    /* 1. Canvas Background - Deep, rich swamp water green */
    --color-surface-0: #1b241c !important; 
    
    /* 2. Main Containers - Semi-transparent Earthy Mud Brown */
    --color-surface-1: rgba(54, 43, 36, 0.65) !important; 
    
    /* 3. Elevated Menus/Popups - Slightly more opaque Mud Brown */
    --color-surface-2: rgba(74, 59, 49, 0.8) !important; 
    
    /* 4. Active Inputs & Borders - Weathered Clay / Dark Tan */
    --color-surface-3: rgba(100, 83, 71, 0.9) !important;

    /* 5. Interface Accents - Vibrant Moss/Foliage Green */
    --color-primary: #6b8e23 !important;
    --color-primary-variant: #556b2f !important;
    
    /* Text overrides to preserve readability over dark wood tones */
    --color-base: #e6dfd3 !important;          /* Soft Cream Primary Text */
    --color-base-variant: #b5ad9e !important;  /* Muted Sand Secondary Text */
}

/* Force modern browsers to render a frosted blur behind the content panels */
.mw-page-container, 
.skin-citizen-sidebar,
.ext-visualEditor-theme-citizen,
.mw-portlet, 
.oo-ui-panelLayout {
    background-color: var(--color-surface-1) !important;
    backdrop-filter: blur(12px) webkit-backdrop-filter(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Keep headers readable and cleanly blurred over the swamp backdrop */
#mw-header {
    background-color: rgba(27, 36, 28, 0.75) !important;
    backdrop-filter: blur(10px) webkit-backdrop-filter(10px) !important;
}