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.

/* =============================================
   Pactoria Wiki — Citizen Skin Theme
   Dark fantasy, earthy gold accents
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* --- Colour tokens --- */
:root {
  --pactoria-bg-base:        #0d0e10;
  --pactoria-bg-surface:     #111214;
  --pactoria-bg-raised:      #161719;
  --pactoria-bg-sidebar:     #0f1012;
  --pactoria-border:         #2a2215;
  --pactoria-border-strong:  #3a2e1e;
  --pactoria-gold:           #c9a227;
  --pactoria-gold-light:     #e8d49a;
  --pactoria-text:           #b8a88a;
  --pactoria-text-muted:     #6a5e44;
  --pactoria-text-dim:       #3a3020;
  --pactoria-link:           #c9a227;
}

/* --- Base background & text --- */
body,
.skin-citizen {
  background-color: var(--pactoria-bg-base) !important;
  color: var(--pactoria-text) !important;
}

/* --- Typography --- */
body,
.citizen-page-content,
.mw-body {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 16px;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.citizen-page-heading,
.firstHeading {
  font-family: 'Cinzel', 'Palatino Linotype', serif !important;
  color: var(--pactoria-gold-light) !important;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* --- Page title --- */
.firstHeading,
#firstHeading {
  font-size: 1.9em;
  border-bottom: 1px solid var(--pactoria-border-strong);
  padding-bottom: 0.3em;
  margin-bottom: 0.5em;
  color: var(--pactoria-gold-light) !important;
}

/* --- Section headings --- */
.mw-body h2 {
  font-size: 1.3em;
  border-bottom: 1px solid var(--pactoria-border);
  padding-bottom: 4px;
  margin-top: 1.6em;
}

.mw-body h3 { font-size: 1.1em; }

/* --- Links --- */
a, a:visited {
  color: var(--pactoria-link) !important;
  text-decoration: none;
}

a:hover {
  color: var(--pactoria-gold-light) !important;
  text-decoration: underline;
}

a.new { color: #b85a3a !important; }  /* red links stay visible */

/* --- Header / top bar --- */
.citizen-header,
#citizen-header {
  background-color: #0a0b0d !important;
  border-bottom: 1px solid var(--pactoria-border-strong) !important;
}

/* --- Site logo / wordmark --- */
.citizen-header__wordmark,
.citizen-wordmark {
  font-family: 'Cinzel', serif !important;
  color: var(--pactoria-gold) !important;
  letter-spacing: 0.08em;
}

/* --- Sidebar --- */
.citizen-drawer,
#citizen-drawer,
.citizen-toc {
  background-color: var(--pactoria-bg-sidebar) !important;
  border-right: 1px solid var(--pactoria-border) !important;
}

.citizen-nav__item a,
.citizen-drawer a {
  color: var(--pactoria-text-muted) !important;
  font-family: 'EB Garamond', serif;
  font-size: 0.95em;
}

.citizen-nav__item a:hover,
.citizen-nav__item--active a {
  color: var(--pactoria-gold) !important;
  background-color: #1a1710 !important;
}

.citizen-nav__heading {
  font-family: 'Cinzel', serif !important;
  font-size: 0.7em;
  letter-spacing: 0.12em;
  color: var(--pactoria-gold) !important;
  text-transform: uppercase;
}

/* --- Main content area --- */
.mw-body,
.citizen-page-container,
#mw-content-text {
  background-color: var(--pactoria-bg-surface) !important;
  color: var(--pactoria-text) !important;
}

/* --- Infoboxes / tables --- */
.infobox,
table.wikitable {
  background-color: #0d0f0a !important;
  border: 1px solid var(--pactoria-border-strong) !important;
  color: var(--pactoria-text) !important;
  font-family: 'EB Garamond', serif;
}

.infobox th,
table.wikitable th {
  background-color: #1e1a0e !important;
  color: var(--pactoria-gold) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  border-color: var(--pactoria-border-strong) !important;
}

.infobox td,
table.wikitable td {
  border-color: #1e1a12 !important;
  color: var(--pactoria-text) !important;
}

table.wikitable tr:nth-child(even) td {
  background-color: #0f1012 !important;
}

/* --- Search bar --- */
.citizen-search__input,
#searchInput {
  background-color: var(--pactoria-bg-raised) !important;
  border: 1px solid var(--pactoria-border-strong) !important;
  color: var(--pactoria-text) !important;
  font-family: 'EB Garamond', serif;
}

.citizen-search__input::placeholder { color: var(--pactoria-text-dim) !important; }

/* --- Blockquotes --- */
blockquote {
  border-left: 3px solid var(--pactoria-gold) !important;
  background-color: #0f1012 !important;
  padding: 0.6em 1em;
  color: var(--pactoria-text-muted) !important;
  font-style: italic;
  margin: 1em 0;
}

/* --- Code blocks --- */
pre, code {
  background-color: #0a0b0a !important;
  border: 1px solid var(--pactoria-border) !important;
  color: #8fb87a !important;
  font-size: 0.88em;
}

/* --- Horizontal rules --- */
hr {
  border: none;
  border-top: 1px solid var(--pactoria-border-strong);
}

/* --- TOC --- */
#toc,
.citizen-toc__list {
  background-color: #0f1012 !important;
  border: 1px solid var(--pactoria-border) !important;
}

.citizen-toc__item a,
#toc a {
  color: var(--pactoria-text-muted) !important;
}

.citizen-toc__item a:hover,
#toc a:hover {
  color: var(--pactoria-gold) !important;
}

/* --- Category links at bottom --- */
#catlinks {
  background-color: #0f1012 !important;
  border-top: 1px solid var(--pactoria-border) !important;
  color: var(--pactoria-text-muted) !important;
  font-family: 'EB Garamond', serif;
  font-size: 0.9em;
}

/* TODO fix the home icon logo?*/
.mw-logo .citizen-ui-icon.mw-ui-icon-home::before:not(:hover) {
	display: none;
}

/* Fix main page table colours */
#mw-content-text table,
#mw-content-text table td,
#mw-content-text table th {
  background-color: #111214 !important;
  color: #b8a88a !important;
  border-color: #2a2215 !important;
}