Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 1: Line 1:
/* All CSS here will be loaded for users of the Citizen skin */
/* All CSS here will be loaded for users of the Citizen skin */
:root {
    :root.skin-citizen-dark {
    --width-layout: 1280px; /* Slightly wider content */
        --color-primary__l: 60%;
--color-surface-4
        --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
    }

Revision as of 10:24, 28 March 2024

/* All CSS here will be loaded for users of the Citizen skin */
    :root.skin-citizen-dark {
        --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
    }