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.

/***** Citizen Dark Contrast – Faeloria *****
   Paste in MediaWiki:Citizen.css
   Only affects dark theme.
************************************************/

/* 1) Global dark palette */
html.skin-citizen.theme-dark {
  --fae-bg-0: #0b0e10;    /* page bg (very dark) */
  --fae-bg-1: #111519;    /* header/sidebar bg */
  --fae-bg-2: #151a1f;    /* cards/panels */
  --fae-line: rgba(255,255,255,.12);
  --fae-line-soft: rgba(255,255,255,.08);

  --fae-text: #e7e3da;        /* main text */
  --fae-text-muted: #bdb6a6;  /* secondary text */
  --fae-link: #8fe5d7;        /* link */
  --fae-link-hover: #b2efe4;

  --fae-accent: #e2c78a;   /* warm gold */
  --fae-emerald: #8cd9b9;  /* emerald for accents */
}

/* 2) Page, header, drawer/sidebar */
html.skin-citizen.theme-dark body {
  background: var(--fae-bg-0) !important;
  color: var(--fae-text);
}
html.skin-citizen.theme-dark .citizen-header {
  background: linear-gradient(to bottom, rgba(17,21,25,.85), rgba(17,21,25,.65)) !important;
  border-bottom: 1px solid var(--fae-line);
}
html.skin-citizen.theme-dark .citizen-drawer,
html.skin-citizen.theme-dark .citizen-sidebar {
  background: var(--fae-bg-1) !important;
  border-right: 1px solid var(--fae-line-soft);
}
html.skin-citizen.theme-dark .citizen-drawer a,
html.skin-citizen.theme-dark .citizen-sidebar a {
  color: var(--fae-text);
}
html.skin-citizen.theme-dark .citizen-drawer a:hover,
html.skin-citizen.theme-dark .citizen-sidebar a:hover {
  background: rgba(255,255,255,.04);
}

/* 3) Main content “cards” (article, TOC, wikitables, message boxes, infobox) */
html.skin-citizen.theme-dark .mw-body,
html.skin-citizen.theme-dark .citizen-body,
html.skin-citizen.theme-dark .mw-parser-output .infobox,
html.skin-citizen.theme-dark .mw-message-box,
html.skin-citizen.theme-dark .toc,
html.skin-citizen.theme-dark .wikitable,
html.skin-citizen.theme-dark .thumb,
html.skin-citizen.theme-dark .navbox,
html.skin-citizen.theme-dark .portal {
  background: var(--fae-bg-2) !important;
  border: 1px solid var(--fae-line);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* TOC title & links */
html.skin-citizen.theme-dark .toc .toctitle { color: var(--fae-text); }
html.skin-citizen.theme-dark .toc a { color: var(--fae-link); }
html.skin-citizen.theme-dark .toc a:hover { color: var(--fae-link-hover); }

/* Infobox header band */
html.skin-citizen.theme-dark .infobox caption,
html.skin-citizen.theme-dark .infobox .infobox-title,
html.skin-citizen.theme-dark .infobox .infobox-header {
  background: linear-gradient(to right, rgba(226,199,138,.18), transparent);
  color: var(--fae-text);
  border-bottom: 1px solid var(--fae-line);
}

/* 4) Text, links, subtle metadata */
html.skin-citizen.theme-dark a { color: var(--fae-link); }
html.skin-citizen.theme-dark a:hover {
  color: var(--fae-link-hover);
  text-decoration-color: var(--fae-accent);
}
html.skin-citizen.theme-dark .mw-indicators,
html.skin-citizen.theme-dark .mw-breadcrumbs,
html.skin-citizen.theme-dark .mw-body .mw-parser-output .mw-editsection,
html.skin-citizen.theme-dark .mw-muted,
html.skin-citizen.theme-dark .mw-annotated,
html.skin-citizen.theme-dark .mw-changeslist-legend {
  color: var(--fae-text-muted) !important;
}

/* 5) Sidebar/topbar ICON contrast (covers svg fills & mask icons) */
html.skin-citizen.theme-dark .citizen-header svg,
html.skin-citizen.theme-dark .citizen-drawer svg,
html.skin-citizen.theme-dark .citizen-sidebar svg {
  fill: var(--fae-text) !important;
  color: var(--fae-text) !important;
  opacity: .95;
}
/* OOUI / mw-ui icon elements that use mask images */
html.skin-citizen.theme-dark .oo-ui-iconElement-icon,
html.skin-citizen.theme-dark .mw-ui-icon {
  filter: invert(1) brightness(1.05) contrast(1.05);
}
/* Hover state in menus */
html.skin-citizen.theme-dark .citizen-drawer .mw-list-item a:hover .oo-ui-iconElement-icon,
html.skin-citizen.theme-dark .citizen-sidebar a:hover .oo-ui-iconElement-icon {
  filter: invert(1) brightness(1.2) contrast(1.1);
}

/* 6) Search field + inputs/buttons */
html.skin-citizen.theme-dark .citizen-search__input,
html.skin-citizen.theme-dark input[type="search"],
html.skin-citizen.theme-dark input[type="text"],
html.skin-citizen.theme-dark textarea {
  background: #0f1418;
  color: var(--fae-text);
  border: 1px solid var(--fae-line);
}
html.skin-citizen.theme-dark .citizen-search__input::placeholder,
html.skin-citizen.theme-dark input::placeholder,
html.skin-citizen.theme-dark textarea::placeholder {
  color: #9fa6ad;
}
html.skin-citizen.theme-dark .mw-ui-button,
html.skin-citizen.theme-dark button,
html.skin-citizen.theme-dark input[type="submit"],
html.skin-citizen.theme-dark input[type="button"] {
  color: #101316;
  background: linear-gradient(to bottom, rgba(226,199,138,.8), rgba(226,199,138,.65));
  border: 1px solid var(--fae-accent);
  border-radius: 999px;
}
html.skin-citizen.theme-dark .mw-ui-button:hover,
html.skin-citizen.theme-dark button:hover {
  box-shadow: 0 0 0 2px rgba(226,199,138,.25);
}

/* 7) Footer */
html.skin-citizen.theme-dark .citizen-footer {
  background: linear-gradient(to top, rgba(226,199,138,.06), transparent), var(--fae-bg-1);
  border-top: 1px solid var(--fae-line);
  color: var(--fae-text-muted);
}

/* 8) Headings – keep readable, not glowy */
html.skin-citizen.theme-dark .mw-parser-output h1,
html.skin-citizen.theme-dark .mw-parser-output h2,
html.skin-citizen.theme-dark .mw-parser-output h3 {
  color: var(--fae-text);
  text-shadow: none;
  border-color: var(--fae-line);
}