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 */
    :root {
        --color-primary__l: 60%;
        --color-surface-0: hsl(var(--color-primary__h),20%,10%);
        --color-surface-1: hsl(var(--color-primary__h),25%,12%);
        --color-surface-2: hsl(var(--color-primary__h),25%,15%);
        --color-surface-3: hsl(var(--color-primary__h),15%,20%);
        --color-surface-4: hsl(var(--color-primary__h),15%,25%);
        --color-base--emphasized: hsl(var(--color-primary__h),80%,95%);
        --color-base: hsl(var(--color-primary__h),25%,80%);
        --color-base--subtle: hsl(var(--color-primary__h),25%,65%);
        --background-color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),15%);
        --background-color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),20%);
        --background-color-overlay: hsla(var(--color-primary__h),20%,10%,0.95);
        --background-color-overlay--lighter: hsla(var(--color-primary__h),20%,10%,0.6);
        --color-surface-2--hover: hsl(var(--color-primary__h),30%,19%);
        --color-surface-2--active: hsl(var(--color-primary__h),30%,11%);
        --surface-shadow: var(--color-primary__h),50%,3%;
        --shadow-strength: 0.8;
        --filter-invert: invert(1) hue-rotate(180deg);
        --font-grade: -25
        --width-layout: 1800px; /* Slightly wider content */

    }
:root.skin-citizen-light {
    --color-surface-0: red;
    --color-surface-1: lime;
    --color-surface-2: fuchsia;
    --color-surface-3: yellow;
    --color-surface-4: aqua;
    --color-base: blue;
    --color-base--emphasized: darkblue;
    --color-base--subtle: cornflowerblue;
}