MediaWiki:Citizen.css
MediaWiki interface page
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.
/* ScotMesh brand, Reticulum version: https://github.com/ScotMesh/branding
Fonts are self-hosted from /images/scotmesh-brand/fonts. Backgrounds keep Citizen's default hue (262, the Night blue);
only links, buttons and focus rings take the Reticulum violet. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(/images/scotmesh-brand/fonts/ibm-plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url(/images/scotmesh-brand/fonts/ibm-plex-mono-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 400; font-style: normal; font-display: swap; src: url(/images/scotmesh-brand/fonts/ibm-plex-sans-condensed-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url(/images/scotmesh-brand/fonts/ibm-plex-sans-condensed-600.woff2) format("woff2"); }
:root {
--font-family-citizen-base: "IBM Plex Sans Condensed", "Roboto", "Roboto-fallback", sans-serif;
--font-family-citizen-monospace: "IBM Plex Mono", "Roboto Mono", monospace;
/* Reticulum deep violet #6A51A4 for light pages */
--color-progressive: oklch( 50% 0.13 295 );
--color-progressive--hover: oklch( 56% 0.13 295 );
--color-progressive--active: oklch( 45% 0.13 295 );
--color-progressive--focus: oklch( 50% 0.13 295 );
--background-color-progressive: oklch( 50% 0.13 295 );
--background-color-progressive--hover: oklch( 56% 0.13 295 );
--background-color-progressive--active: oklch( 45% 0.13 295 );
--background-color-progressive--focus: oklch( 50% 0.13 295 );
--background-color-progressive-subtle: oklch( 50% 0.13 295 / 0.1 );
--background-color-progressive-subtle--hover: oklch( 50% 0.13 295 / 0.14 );
--background-color-progressive-subtle--active: oklch( 50% 0.13 295 / 0.18 );
--border-color-progressive: oklch( 50% 0.13 295 );
--border-color-progressive--hover: oklch( 56% 0.13 295 );
--border-color-progressive--active: oklch( 45% 0.13 295 );
--border-color-progressive--focus: oklch( 50% 0.13 295 );
--outline-color-progressive--focus: oklch( 50% 0.13 295 );
}
/* Reticulum tint #B199F4 for text on dark pages; buttons sit a step darker so white labels stay readable */
:root.skin-theme-clientpref-night {
--color-progressive: oklch( 74% 0.13 295 );
--color-progressive--hover: oklch( 80% 0.11 295 );
--color-progressive--active: oklch( 68% 0.13 295 );
--color-progressive--focus: oklch( 74% 0.13 295 );
--background-color-progressive: oklch( 58% 0.13 295 );
--background-color-progressive--hover: oklch( 63% 0.13 295 );
--background-color-progressive--active: oklch( 54% 0.13 295 );
--background-color-progressive--focus: oklch( 58% 0.13 295 );
--background-color-progressive-subtle: oklch( 74% 0.13 295 / 0.12 );
--background-color-progressive-subtle--hover: oklch( 74% 0.13 295 / 0.16 );
--background-color-progressive-subtle--active: oklch( 74% 0.13 295 / 0.2 );
--border-color-progressive: oklch( 74% 0.13 295 );
--border-color-progressive--hover: oklch( 80% 0.11 295 );
--border-color-progressive--active: oklch( 68% 0.13 295 );
--border-color-progressive--focus: oklch( 74% 0.13 295 );
--outline-color-progressive--focus: oklch( 74% 0.13 295 );
}
@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
--color-progressive: oklch( 74% 0.13 295 );
--color-progressive--hover: oklch( 80% 0.11 295 );
--color-progressive--active: oklch( 68% 0.13 295 );
--color-progressive--focus: oklch( 74% 0.13 295 );
--background-color-progressive: oklch( 58% 0.13 295 );
--background-color-progressive--hover: oklch( 63% 0.13 295 );
--background-color-progressive--active: oklch( 54% 0.13 295 );
--background-color-progressive--focus: oklch( 58% 0.13 295 );
--background-color-progressive-subtle: oklch( 74% 0.13 295 / 0.12 );
--background-color-progressive-subtle--hover: oklch( 74% 0.13 295 / 0.16 );
--background-color-progressive-subtle--active: oklch( 74% 0.13 295 / 0.2 );
--border-color-progressive: oklch( 74% 0.13 295 );
--border-color-progressive--hover: oklch( 80% 0.11 295 );
--border-color-progressive--active: oklch( 68% 0.13 295 );
--border-color-progressive--focus: oklch( 74% 0.13 295 );
--outline-color-progressive--focus: oklch( 74% 0.13 295 );
}
}