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.

/* All CSS here will be loaded for users of the Citizen skin */
/* Generated from Material Theme Builder export 2026-03-11 — seed: #6A7D55 */

/* ── Global / progressive accent ────────────────────────────────────────── */
/* primary-50: #6A7D55 */
:root {
    --color-progressive-oklch__l: 0.5190;
    --color-progressive-oklch__c: 0.0820;
    --color-progressive-oklch__h: 126.50;
    --color-destructive-oklch__l: 0.4440;
    --color-destructive-oklch__c: 0.1880;
    --color-destructive-oklch__h: 29.23;
    --transform-image-hover: none;
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
/* surface-0  → #FFFFFF  */
/* surface-1  → #F5F4EE  surfaceContainerLow  */
/* surface-2  → #EFEEE8  surfaceContainer     */
/* surface-3  → #EAE8E3  surfaceContainerHigh */
/* surface-4  → #E4E2DD  surfaceContainerHighest */
/* base/emphasized → #1B1C19  onBackground  */
/* subtle           → #45483F  onSurfaceVariant */
/* link             → #52643E  primary */
:root.skin-theme-clientpref-day {
    --color-surface-0-oklch__l: 1.0000;
    --color-surface-0-oklch__c: 0.0000;
    --color-surface-0-oklch__h: 0.00;

    --color-surface-1-oklch__l: 0.9650;
    --color-surface-1-oklch__c: 0.0095;
    --color-surface-1-oklch__h: 109.60;

    --color-surface-2-oklch__l: 0.9420;
    --color-surface-2-oklch__c: 0.0115;
    --color-surface-2-oklch__h: 109.60;

    --color-surface-3-oklch__l: 0.9230;
    --color-surface-3-oklch__c: 0.0120;
    --color-surface-3-oklch__h: 109.60;

    --color-surface-4-oklch__l: 0.9020;
    --color-surface-4-oklch__c: 0.0130;
    --color-surface-4-oklch__h: 109.60;

    --color-base-oklch__l: 0.1480;
    --color-base-oklch__c: 0.0075;
    --color-base-oklch__h: 109.60;

    --color-emphasized-oklch__l: 0.1480;
    --color-emphasized-oklch__c: 0.0075;
    --color-emphasized-oklch__h: 109.60;

    --color-subtle-oklch__l: 0.3180;
    --color-subtle-oklch__c: 0.0170;
    --color-subtle-oklch__h: 109.60;

    --color-link-oklch__l: 0.8120;
    --color-link-oklch__c: 0.0490;
    --color-link-oklch__h: 192.50;

    --color-visited-oklch__l: 0.8120;
    --color-visited-oklch__c: 0.0490;
    --color-visited-oklch__h: 192.50;

    --background-color-progressive-oklch__l: 0.4220;
    --background-color-progressive-oklch__c: 0.0720;
    --background-color-progressive-oklch__h: 126.50;

    --backdrop-filter-frosted-glass: none;
    --opacity-glass: 1;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
/* surface-0  → #131411  background/surfaceDim        */
/* surface-1  → #1B1C19  surfaceContainerLow          */
/* surface-2  → #1F201D  surfaceContainer             */
/* surface-3  → #292A27  surfaceContainerHigh         */
/* surface-4  → #343531  surfaceContainerHighest      */
/* base/emphasized → #E4E2DD  onBackground            */
/* subtle           → #C5C8BB  onSurfaceVariant       */
/* link             → #B9CD9F  primary (dark scheme)  */
:root.skin-theme-clientpref-night {
    --color-surface-0-oklch__l: 0.0940;
    --color-surface-0-oklch__c: 0.0070;
    --color-surface-0-oklch__h: 109.60;

    --color-surface-1-oklch__l: 0.1480;
    --color-surface-1-oklch__c: 0.0075;
    --color-surface-1-oklch__h: 109.60;

    --color-surface-2-oklch__l: 0.1680;
    --color-surface-2-oklch__c: 0.0075;
    --color-surface-2-oklch__h: 109.60;

    --color-surface-3-oklch__l: 0.2100;
    --color-surface-3-oklch__c: 0.0080;
    --color-surface-3-oklch__h: 109.60;

    --color-surface-4-oklch__l: 0.2560;
    --color-surface-4-oklch__c: 0.0085;
    --color-surface-4-oklch__h: 109.60;

    --color-base-oklch__l: 0.9020;
    --color-base-oklch__c: 0.0130;
    --color-base-oklch__h: 109.60;

    --color-emphasized-oklch__l: 0.9020;
    --color-emphasized-oklch__c: 0.0130;
    --color-emphasized-oklch__h: 109.60;

    --color-subtle-oklch__l: 0.7980;
    --color-subtle-oklch__c: 0.0175;
    --color-subtle-oklch__h: 109.60;

    --color-link-oklch__l: 0.8120;
    --color-link-oklch__c: 0.0490;
    --color-link-oklch__h: 192.50;

    --color-visited-oklch__l: 0.8120;
    --color-visited-oklch__c: 0.0490;
    --color-visited-oklch__h: 192.50;

    --background-color-progressive-oklch__l: 0.8120;
    --background-color-progressive-oklch__c: 0.0720;
    --background-color-progressive-oklch__h: 126.50;
}