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 base, steel blue & white 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:      #161820;
  --pactoria-bg-sidebar:     #0f1012;
  --pactoria-border:         #1e2235;
  --pactoria-border-strong:  #2a3050;
  --pactoria-blue:           #7aa2d4;
  --pactoria-blue-light:     #b8d0ef;
  --pactoria-blue-bright:    #4f8cc9;
  --pactoria-text:           #b8c8d8;
  --pactoria-text-muted:     #5a6a80;
  --pactoria-text-dim:       #2a3040;
  --pactoria-link:           #7aa2d4;
}

/* --- 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-blue-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-blue-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-blue-light) !important;
  text-decoration: underline;
}

a.new { color: #c06060 !important; }

/* --- Header / top bar --- */
.citizen-header,
#citizen-header {
  background-color: #0a0b0f !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-blue-light) !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-blue-light) !important;
  background-color: #131620 !important;
}

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

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

/* --- Main page table fix --- */
#mw-content-text table,
#mw-content-text table td,
#mw-content-text table th {
  background-color: #111214 !important;
  color: #b8c8d8 !important;
  border-color: #1e2235 !important;
}

/* --- Infoboxes / wikitables --- */
.infobox,
table.wikitable {
  background-color: #0d0f14 !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: #131828 !important;
  color: var(--pactoria-blue-light) !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: #1a1f2e !important;
  color: var(--pactoria-text) !important;
}

table.wikitable tr:nth-child(even) td {
  background-color: #0f1118 !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-blue) !important;
  background-color: #0f1118 !important;
  padding: 0.6em 1em;
  color: var(--pactoria-text-muted) !important;
  font-style: italic;
  margin: 1em 0;
}

/* --- Code blocks --- */
pre, code {
  background-color: #0a0b0f !important;
  border: 1px solid var(--pactoria-border) !important;
  color: #7ab8d4 !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: #0f1118 !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-blue-light) !important;
}

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

html {
  background-image: url('https://pactoria.net/assets/core/images/uploads/c4b072eca8479d3dd77693ab3d2453d0.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}

body,
.skin-citizen {
  background-color: transparent !important;
  --color-surface-0: transparent !important;
  --color-surface-1: transparent !important;
}

.citizen-page-container,
.mw-body,
#mw-content-text {
  background-color: rgba(13, 14, 20, 0.86) !important;
}