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

/* Cyclon color palette for Citizen */

/* Links (cyan accent) */
:root {
  --color-link: #28c8ff;
  --color-link--active: #72deff;
}
/* Distinct visited color */
.mw-body a:visited { color: #8aa2ff; }

/* Primary accent on progressive buttons/OOUI */
.mw-ui-button.mw-ui-progressive,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  background: #5e24d8; border-color: #5e24d8; color: #fff;
}
.mw-ui-button.mw-ui-progressive:hover,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
  background: #6b34f0; border-color: #6b34f0;
}
.mw-ui-button.mw-ui-progressive:active,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active {
  background: #4b1bb5; border-color: #4b1bb5;
}

/* Dark theme surfaces */
:root.skin-theme-clientpref-night {
  --color-surface-0: #0c0219;
  --color-surface-1: #120323;
  --color-surface-2: #190433;
  --color-surface-3: #190433;

  --color-base:       #f2f4f8;   /* body text */
  --color-emphasized: #ffffff;   /* headings */
  --color-subtle:     #c7c7d2;   /* captions/meta */
}

/* gentle header tint */
.skin-citizen .citizen-header {
  background: linear-gradient(180deg, #120323, #190433);
}