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.

/* Inject higher root authority to completely force variable changes */
:root,
.skin-theme-clientpref-night,
html.skin-citizen-dark {
    /* 1. Main Background: A lively linear gradient instead of a dark solid color */
    background: linear-gradient(135deg, #1b351e 0%, #345c3a 50%, #4a7c4e 100%) !important;
    background-attachment: fixed !important;

    /* 2. Text Boxes & Containers: Translucent, warm earthy mud brown */
    --color-surface-1: rgba(77, 59, 45, 0.55) !important; 
    
    /* 3. Dropdowns & Hover states: Opaque sand/clay brown */
    --color-surface-2: rgba(105, 83, 65, 0.75) !important; 
    --color-surface-3: rgba(128, 102, 80, 0.85) !important;

    /* 4. Layout Accents: A sunlit, lively moss green */
    --color-primary: #8eba59 !important;
    --color-primary-variant: #a3d16b !important;

    /* 5. Typography: Off-white linen color to keep text ultra-readable */
    --color-base: #f7f4eb !important;
    --color-base-variant: #d6cfbe !important;

    /* 6. Rounded Corners: Smooth out all native Citizen panels globally */
    --border-radius-base: 14px !important;
    --border-radius-large: 18px !important;
}

/* Force transparency, glass blur, and rounded corners onto the main body containers */
.mw-page-container,
.skin-citizen-sidebar,
.ext-visualEditor-theme-citizen,
.mw-portlet,
.oo-ui-panelLayout,
.mw-body {
    background-color: var(--color-surface-1) !important;
    backdrop-filter: blur(14px) webkit-backdrop-filter(14px) !important;
    
    /* Smooth, rounded box edges to remove sharp corners */
    border-radius: var(--border-radius-base) !important;
    
    /* Subtly separate the brown boxes from the green background gradient */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Make sure the main content block inherits the rounded corners properly */
.mw-body {
    padding: 1.5em !important;
}

/* Brighten the header layout bar with glassmorphism */
#mw-header {
    background-color: rgba(27, 53, 30, 0.6) !important;
    backdrop-filter: blur(10px) webkit-backdrop-filter(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}