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
 
(10 intermediate revisions by the same user not shown)
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 */
/* 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: 122.32;
    --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;


@font-face {
    --backdrop-filter-frosted-glass: none;
    font-family: 'Helvetica Black';
     --opacity-glass: 1;
     src: url('https://verybad.wiki/images/Helveticablackoriginal_bold.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
}


.skin-citizen h1,
/* ── Dark mode ───────────────────────────────────────────────────────────── */
.skin-citizen h2,
/* surface-0  → #131411  background/surfaceDim        */
.skin-citizen h3,
/* surface-1  → #1B1C19  surfaceContainerLow          */
.skin-citizen h4,
/* surface-2  → #1F201D  surfaceContainer            */
.skin-citizen h5,
/* surface-3  → #292A27  surfaceContainerHigh        */
.skin-citizen h6 {
/* surface-4  → #343531  surfaceContainerHighest      */
     font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* base/emphasized → #E4E2DD  onBackground            */
     font-weight: 900;
/* 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;
}
}

Latest revision as of 12:17, 17 March 2026

/* 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: 122.32;
    --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;
}