Toggle search
Toggle menu
420
1
5
1.2K
OHC Network 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

MediaWiki interface page
More languages
More actions

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.
/* =============================================================================
   OHC Network Wiki -- Citizen skin theme

   careui design system (https://careui.ohc.network, github.com/ohcnetwork/careui)
   ported to MediaWiki. Values are resolved from Tailwind v4.3.2 ramps, which is
   what careui's tokens indirect onto; careui's build-time syntax (@theme inline,
   --alpha(), @custom-variant) does not survive outside a Tailwind build and has
   been expanded here.

   GENERATED -- do not hand-edit. Source: drafts/careui/gen.py in Wiki-NITC/wiki-mcp.
   Tokens live in MediaWiki:Common.css.
   ============================================================================= */

/* Citizen 3.17 publishes its palette inside `@layer citizen-tokens`. Site CSS is
   unlayered, and unlayered rules beat *any* layered rule regardless of
   specificity -- so plain `:root` here wins cleanly. (The previous revision of
   this file carried `:root:root` hacks and a comment about fighting Citizen's
   0,2,0 dark selectors; that was never the real mechanism and is gone.)

   What remains is genuinely necessary: Citizen's dark values are set on
   `.skin-theme-clientpref-night`, so our light `:root` block would otherwise
   apply in dark mode too. Each theme therefore restates the full set. */


/* ---- 1. Light ------------------------------------------------------------- */

:root {
	--color-progressive-oklch__l: 43.2%;
	--color-progressive-oklch__c: 0.095;
	--color-progressive-oklch__h: 166.913;
	--color-progressive-hsl__h: 163.1;
	--color-progressive-hsl__s: 100%;
	--color-progressive-hsl__l: 18.8%;  /* emerald-800 */

	/* careui neutrals are pure grey. Citizen derives every neutral from the
	   accent hue with a non-zero chroma -- that tint is what made the old theme
	   read sage/green. Zeroing chroma (and the hsl saturation fallback) is the
	   single largest visual change in this file. */
	--color-surface-0-oklch__c: 0;
	--color-surface-1-oklch__c: 0;
	--color-surface-2-oklch__c: 0;
	--color-surface-3-oklch__c: 0;
	--color-surface-4-oklch__c: 0;
	--color-emphasized-oklch__c: 0;
	--color-base-oklch__c: 0;
	--color-subtle-oklch__c: 0;
	--color-placeholder-oklch__c: 0;
	--color-disabled-oklch__c: 0;

	--color-surface-0-hsl__s: 0%;
	--color-surface-1-hsl__s: 0%;
	--color-surface-2-hsl__s: 0%;
	--color-surface-3-hsl__s: 0%;
	--color-surface-4-hsl__s: 0%;
	--color-emphasized-hsl__s: 0%;
	--color-base-hsl__s: 0%;
	--color-subtle-hsl__s: 0%;
	--color-placeholder-hsl__s: 0%;
	--color-disabled-hsl__s: 0%;

	--color-surface-0-oklch__l: 100%;  /* white */
	--color-surface-0-hsl__l: 100%;
	--delta-lightness-surface-base: -1.5%;

	--color-emphasized-oklch__l: 14.5%;  /* neutral-950 */
	--color-base-oklch__l: 14.5%;  /* neutral-950 */
	--color-subtle-oklch__l: 37.1%;  /* neutral-700 */
	--color-placeholder-oklch__l: 55.6%;  /* neutral-500 */
	--color-disabled-oklch__l: 87%;  /* neutral-300 */

	--color-emphasized-hsl__l: 3.9%;
	--color-base-hsl__l: 3.9%;
	--color-subtle-hsl__l: 25.1%;
	--color-placeholder-hsl__l: 45.1%;
	--color-disabled-hsl__l: 83.1%;

	--border-color-muted: #fafafa;
	--border-color-subtle: #f5f5f5;
	--border-color-base: #e5e5e5;
	--border-color-interactive: #d4d4d4;

	--color-destructive__h: 357.1;
	--color-destructive__l: 45.3%;  /* red-600 */
	--color-success__h: 160;
	--color-success__l: 30%;  /* emerald-600 */
	--color-warning__h: 36.4;
	--color-warning__l: 49.8%;  /* amber-500 */

	--color-inverted-primary: var( --ohc-primary-foreground );
}


/* ---- 2. Dark -------------------------------------------------------------- */

:root.skin-theme-clientpref-night,
:root.client-dark-mode {
	--color-progressive-oklch__l: 76.5%;
	--color-progressive-oklch__c: 0.177;
	--color-progressive-oklch__h: 163.223;
	--color-progressive-hsl__h: 161.3;
	--color-progressive-hsl__s: 100%;
	--color-progressive-hsl__l: 41.6%;  /* emerald-400 */

	--color-surface-0-oklch__l: 14.5%;  /* neutral-950 */
	--color-surface-0-hsl__l: 3.9%;
	--delta-lightness-surface-base: 6%;

	--color-emphasized-oklch__l: 98.5%;  /* neutral-50 */
	--color-base-oklch__l: 98.5%;  /* neutral-50 */
	--color-subtle-oklch__l: 92.2%;  /* neutral-200 */
	--color-placeholder-oklch__l: 43.9%;  /* neutral-600 */
	--color-disabled-oklch__l: 37.1%;  /* neutral-700 */

	--color-emphasized-hsl__l: 98%;
	--color-base-hsl__l: 98%;
	--color-subtle-hsl__l: 89.8%;
	--color-placeholder-hsl__l: 32.2%;
	--color-disabled-hsl__l: 25.1%;

	--border-color-muted: rgba(255, 255, 255, 0.03);
	--border-color-subtle: rgba(255, 255, 255, 0.05);
	--border-color-base: rgba(255, 255, 255, 0.09);
	--border-color-interactive: rgba(255, 255, 255, 0.15);

	--color-destructive__h: 358.8;
	--color-destructive__l: 69.6%;  /* red-400 */
	--color-success__h: 159.9;
	--color-success__l: 36.9%;  /* emerald-500 */
	--color-warning__h: 43.5;
	--color-warning__l: 50%;  /* amber-400 */

	--color-inverted-primary: var( --ohc-primary-foreground );
}

@media ( prefers-color-scheme: dark ) {
	:root.skin-theme-clientpref-os {
		--color-progressive-oklch__l: 76.5%;
		--color-progressive-oklch__c: 0.177;
		--color-progressive-oklch__h: 163.223;
		--color-progressive-hsl__h: 161.3;
		--color-progressive-hsl__s: 100%;
		--color-progressive-hsl__l: 41.6%;  /* emerald-400 */

		--color-surface-0-oklch__l: 14.5%;  /* neutral-950 */
		--color-surface-0-hsl__l: 3.9%;
		--delta-lightness-surface-base: 6%;

		--color-emphasized-oklch__l: 98.5%;  /* neutral-50 */
		--color-base-oklch__l: 98.5%;  /* neutral-50 */
		--color-subtle-oklch__l: 92.2%;  /* neutral-200 */
		--color-placeholder-oklch__l: 43.9%;  /* neutral-600 */
		--color-disabled-oklch__l: 37.1%;  /* neutral-700 */

		--color-emphasized-hsl__l: 98%;
		--color-base-hsl__l: 98%;
		--color-subtle-hsl__l: 89.8%;
		--color-placeholder-hsl__l: 32.2%;
		--color-disabled-hsl__l: 25.1%;

		--border-color-muted: rgba(255, 255, 255, 0.03);
		--border-color-subtle: rgba(255, 255, 255, 0.05);
		--border-color-base: rgba(255, 255, 255, 0.09);
		--border-color-interactive: rgba(255, 255, 255, 0.15);

		--color-destructive__h: 358.8;
		--color-destructive__l: 69.6%;  /* red-400 */
		--color-success__h: 159.9;
		--color-success__l: 36.9%;  /* emerald-500 */
		--color-warning__h: 43.5;
		--color-warning__l: 50%;  /* amber-400 */

		--color-inverted-primary: var( --ohc-primary-foreground );
	}
}


/* ---- 3. Shape, type, layout ----------------------------------------------- */

:root {
	/* Citizen derives medium = 2x base and large = 3x base, which cannot express
	   careui's +4px step scale -- so all three are set explicitly.
	   base -> buttons/inputs (careui md), medium -> menus/dialogs (careui lg),
	   large -> pre/.mw-code (careui xl, matching abdm_docs' `rounded-xl` on pre). */
	--border-radius-base: var( --ohc-radius-md );
	--border-radius-medium: var( --ohc-radius-lg );
	--border-radius-large: var( --ohc-radius-xl );

	/* careui defines no serif, so serif maps to sans too.
	   --font-family-language-* is deliberately NOT set here: UniversalLanguageSelector
	   writes per-language stacks into it, and an unlayered site-CSS override would
	   win and break non-Latin rendering. */
	--font-family-citizen-base: var( --ohc-font-sans );
	--font-family-citizen-monospace: var( --ohc-font-mono );
	--font-family-citizen-serif: var( --ohc-font-sans );

	/* careui type scale (Tailwind v4 defaults, which careui does not override).
	   Tighter leading than Citizen's stock ramp. */
	--font-size-x-small: 0.75rem;
	--font-size-small: 0.875rem;
	--font-size-medium: 1rem;
	--font-size-large: 1.125rem;
	--font-size-x-large: 1.25rem;
	--font-size-xx-large: 1.5rem;
	--font-size-xxx-large: 1.875rem;

	--line-height-x-small: 1rem;
	--line-height-small: 1.25rem;
	--line-height-medium: 1.5rem;
	--line-height-large: 1.75rem;
	--line-height-x-large: 1.75rem;
	--line-height-xx-large: 2rem;
	--line-height-xxx-large: 2.25rem;
	--line-height-content: 1.625;

	--width-layout: 1120px;
}

/* careui applies `tracking-tight` to anything text-2xl and larger. */
#firstHeading,
.citizen-body h1,
.citizen-body h2,
.citizen-body h3 {
	letter-spacing: -0.025em;
}

/* Brand hairline under the sticky header, derived from the token. */
.citizen-header {
	box-shadow: inset 0 -3px 0 var( --ohc-primary );
}

/* Keep Citizen's native frosted-glass transparency even when its automatic
   performance fallback disables animations. Respect the OS accessibility flag. */
:root.citizen-feature-performance-mode-clientpref-1 {
	--backdrop-filter-frosted-glass: blur( 16px ) saturate( 140% ) !important;
	--opacity-glass: 0.9 !important;
}

:root.skin-theme-clientpref-night.citizen-feature-performance-mode-clientpref-1,
:root.client-dark-mode.citizen-feature-performance-mode-clientpref-1 {
	--opacity-glass: 0.8 !important;
}

@media ( prefers-color-scheme: dark ) {
	:root.skin-theme-clientpref-os.citizen-feature-performance-mode-clientpref-1 {
		--opacity-glass: 0.8 !important;
	}
}

@media ( prefers-reduced-transparency: reduce ) {
	:root.citizen-feature-performance-mode-clientpref-1 {
		--backdrop-filter-frosted-glass: none !important;
		--opacity-glass: 1 !important;
	}
}

@media ( max-width: 1120px ) {
	.citizen-feature-performance-mode-clientpref-1 .citizen-header {
		background: transparent;
	}

	.citizen-feature-performance-mode-clientpref-1 .citizen-header::after {
		position: absolute;
		inset: 0;
		z-index: -100;
		content: '';
		background-color: color-mix( in oklch, var( --color-surface-1 ) calc( var( --opacity-glass ) * 100% ), transparent );
		-webkit-backdrop-filter: var( --backdrop-filter-frosted-glass );
		backdrop-filter: var( --backdrop-filter-frosted-glass );
	}
}

/* Slightly clearer glass than Citizen's native 90%/80% surfaces. */
:root.citizen-feature-performance-mode-clientpref-1 {
	--opacity-glass: 0.82 !important;
}

:root.skin-theme-clientpref-night.citizen-feature-performance-mode-clientpref-1,
:root.client-dark-mode.citizen-feature-performance-mode-clientpref-1 {
	--opacity-glass: 0.72 !important;
}

@media ( prefers-color-scheme: dark ) {
	:root.skin-theme-clientpref-os.citizen-feature-performance-mode-clientpref-1 {
		--opacity-glass: 0.72 !important;
	}
}

@media ( prefers-reduced-transparency: reduce ) {
	:root.citizen-feature-performance-mode-clientpref-1 {
		--opacity-glass: 1 !important;
	}
}

The nonprofit foundation that builds and stewards CARE, an open operating system for healthcare.

Retrieved from "https://ohcnwiki.tellmey.fyi/index.php?title=MediaWiki:Citizen.css&oldid=1196"
Last modified
This page was last edited on 26 August 2026, at 01:43.
This page has been accessed 107 times.