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 */


@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 */
/* Generated from Material Theme Builder export 2026-03-11 — seed: #6A7D55 */

:root {
    /* Progressive (primary) color — mapped to primary-50 in OKLCH approximation */
    --color-progressive-oklch__h: 95;
    --color-progressive-oklch__c: 0.08;
    --color-progressive-oklch__l: 0.52;
    --transform-image-hover: none;
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
:root.skin-theme-clientpref-day {
    --color-surface-0:  #FFFFFF;
    --color-surface-1:  #F5F4EE; /* surfaceContainerLow */
    --color-surface-2:  #EFEEE8; /* surfaceContainer */
    --color-surface-3:  #EAE8E3; /* surfaceContainerHigh */
    --color-surface-4:  #E4E2DD; /* surfaceContainerHighest */

    --color-base:       #1B1C19; /* onBackground */
    --color-emphasized: #1B1C19; /* onSurface */
    --color-subtle:     #45483F; /* onSurfaceVariant */

    --color-link:              #52643E; /* primary */
    --color-visited:           #52643E;
    --color-link--hover:       #3B4C29; /* primaryContainer dark */
    --color-visited--hover:    #3B4C29;

    --background-color-progressive:       #52643E; /* primary */
    --background-color-progressive--hover:#3B4C29;

    --color-destructive:       #BA1A1A; /* error */

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

/* ── Dark mode ───────────────────────────────────────────────────────────── */
:root.skin-theme-clientpref-night {
    /* Surface scale — dark scheme */
    --color-surface-0-oklch__h: 100;
    --color-surface-0-oklch__c: 0.01;
    --color-surface-0-oklch__l: 0.08;
    --color-surface-0:  #131411; /* background / surfaceDim */

    --color-surface-1-oklch__h: 100;
    --color-surface-1-oklch__c: 0.012;
    --color-surface-1-oklch__l: 0.11;
    --color-surface-1:  #1B1C19; /* surfaceContainerLow */

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

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

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

    --color-base:       #E4E2DD; /* onBackground / onSurface */
    --color-emphasized: #E4E2DD;
    --color-subtle:     #C5C8BB; /* onSurfaceVariant */

    --color-link:              #B9CD9F; /* primary (dark) */
    --color-visited:           #B9CD9F;
    --color-link--hover:       #D4EABA; /* primaryFixed */
    --color-visited--hover:    #D4EABA;

    --background-color-progressive:        #B9CD9F;
    --background-color-progressive--hover:  #D4EABA;

    --color-destructive:       #FFB4AB; /* error (dark) */
}