Toggle search
Toggle menu
2
191
5
5.2K
Very Bad Wiki
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
More actions
← Older edit
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
4,701 edits
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Citizen skin */
@font-face {
    font-family: 'Helvetica Black';
    src: url('https://verybad.wiki/images/3/3f/Helveticablackoriginal_bold.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
.skin-citizen h1,
.skin-citizen h2,
.skin-citizen h3,
.skin-citizen h4,
.skin-citizen h5,
.skin-citizen h6 {
    font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
}
/* 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 */
/* Generated from Material Theme Builder export 2026-03-11 — seed: #6A7D55 */


/* ── Global / progressive accent ────────────────────────────────────────── */
/* primary-50: #6A7D55 */
:root {
:root {
     /* Progressive (primary) color — mapped to primary-50 in OKLCH approximation */
     --color-progressive-oklch__l: 0.5190;
     --color-progressive-oklch__h: 95;
    --color-progressive-oklch__c: 0.0820;
     --color-progressive-oklch__c: 0.08;
     --color-progressive-oklch__h: 122.32;
     --color-progressive-oklch__l: 0.52;
    --color-destructive-oklch__l: 0.4440;
     --color-destructive-oklch__c: 0.1880;
     --color-destructive-oklch__h: 29.23;
     --transform-image-hover: none;
     --transform-image-hover: none;
}
}


/* ── Light mode ──────────────────────────────────────────────────────────── */
/* ── 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 {
:root.skin-theme-clientpref-day {
     --color-surface-0: #FFFFFF;
     --color-surface-0-oklch__l: 1.0000;
     --color-surface-1: #F5F4EE; /* surfaceContainerLow */
    --color-surface-0-oklch__c: 0.0000;
     --color-surface-2: #EFEEE8; /* surfaceContainer */
    --color-surface-0-oklch__h: 0.00;
     --color-surface-3: #EAE8E3; /* surfaceContainerHigh */
 
     --color-surface-4: #E4E2DD; /* surfaceContainerHighest */
    --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:       #1B1C19; /* onBackground */
     --color-base-oklch__l: 0.1480;
     --color-emphasized: #1B1C19; /* onSurface */
     --color-base-oklch__c: 0.0075;
     --color-subtle:     #45483F; /* onSurfaceVariant */
     --color-base-oklch__h: 109.60;


     --color-link:              #52643E; /* primary */
     --color-emphasized-oklch__l: 0.1480;
    --color-visited:           #52643E;
     --color-emphasized-oklch__c: 0.0075;
     --color-link--hover:       #3B4C29; /* primaryContainer dark */
     --color-emphasized-oklch__h: 109.60;
     --color-visited--hover:   #3B4C29;


     --background-color-progressive:       #52643E; /* primary */
     --color-subtle-oklch__l: 0.3180;
     --background-color-progressive--hover:#3B4C29;
    --color-subtle-oklch__c: 0.0170;
     --color-subtle-oklch__h: 109.60;


     --color-destructive:       #BA1A1A; /* error */
     --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;
     --backdrop-filter-frosted-glass: none;
Line 58: Line 73:


/* ── Dark mode ───────────────────────────────────────────────────────────── */
/* ── 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 {
:root.skin-theme-clientpref-night {
     /* Surface scale — dark scheme */
     --color-surface-0-oklch__l: 0.0940;
     --color-surface-0-oklch__h: 100;
    --color-surface-0-oklch__c: 0.0070;
     --color-surface-0-oklch__c: 0.01;
     --color-surface-0-oklch__h: 109.60;
     --color-surface-0-oklch__l: 0.08;
 
     --color-surface-0: #131411; /* background / surfaceDim */
     --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-1-oklch__h: 100;
     --color-surface-3-oklch__l: 0.2100;
     --color-surface-1-oklch__c: 0.012;
     --color-surface-3-oklch__c: 0.0080;
     --color-surface-1-oklch__l: 0.11;
     --color-surface-3-oklch__h: 109.60;
    --color-surface-1:  #1B1C19; /* surfaceContainerLow */


     --color-surface-2-oklch__h: 100;
     --color-surface-4-oklch__l: 0.2560;
     --color-surface-2-oklch__c: 0.013;
     --color-surface-4-oklch__c: 0.0085;
     --color-surface-2-oklch__l: 0.13;
     --color-surface-4-oklch__h: 109.60;
    --color-surface-2:  #1F201D; /* surfaceContainer */


     --color-surface-3-oklch__h: 100;
     --color-base-oklch__l: 0.9020;
     --color-surface-3-oklch__c: 0.013;
     --color-base-oklch__c: 0.0130;
     --color-surface-3-oklch__l: 0.16;
     --color-base-oklch__h: 109.60;
    --color-surface-3:  #292A27; /* surfaceContainerHigh */


     --color-surface-4-oklch__h: 100;
     --color-emphasized-oklch__l: 0.9020;
     --color-surface-4-oklch__c: 0.013;
     --color-emphasized-oklch__c: 0.0130;
     --color-surface-4-oklch__l: 0.20;
     --color-emphasized-oklch__h: 109.60;
    --color-surface-4:  #343531; /* surfaceContainerHighest */


     --color-base:       #E4E2DD; /* onBackground / onSurface */
     --color-subtle-oklch__l: 0.7980;
     --color-emphasized: #E4E2DD;
     --color-subtle-oklch__c: 0.0175;
     --color-subtle:     #C5C8BB; /* onSurfaceVariant */
     --color-subtle-oklch__h: 109.60;


     --color-link:              #B9CD9F; /* primary (dark) */
     --color-link-oklch__l: 0.8120;
    --color-visited:           #B9CD9F;
     --color-link-oklch__c: 0.0490;
     --color-link--hover:       #D4EABA; /* primaryFixed */
     --color-link-oklch__h: 192.50;
     --color-visited--hover:   #D4EABA;


     --background-color-progressive:       #B9CD9F;
     --color-visited-oklch__l: 0.8120;
     --background-color-progressive--hover: #D4EABA;
    --color-visited-oklch__c: 0.0490;
     --color-visited-oklch__h: 192.50;


     --color-destructive:       #FFB4AB; /* error (dark) */
     --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;
}
Retrieved from "https://verybad.wiki/index.php?title=MediaWiki:Citizen.css&oldid=729"
Last modified
This page was last edited on 17 March 2026, at 12:17.