MediaWiki:Citizen.css

From Pactoria Wiki
Revision as of 15:57, 11 June 2026 by Macus (talk | contribs)
Jump to navigation Jump to search

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: transparent !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 {
  background-color: transparent !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;
}




/* =============================================
   Background image
   ============================================= */

html {
  /* Two layers: a dark gradient overlay (listed first = on top) sits
     above the image so text contrast stays strong even where the
     image is light. Tweak the rgba alphas to taste. */
  background-image:
    linear-gradient(
      to bottom,
      rgba(8, 9, 14, 0.55) 0%,
      rgba(8, 9, 14, 0.78) 55%,
      rgba(8, 9, 14, 0.92) 100%
    ),
    url('https://pactoria.net/assets/core/images/uploads/c4b072eca8479d3dd77693ab3d2453d0.png') !important;
  background-size: cover, cover !important;
  background-position: center top, center top !important;
  background-attachment: fixed, fixed !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: #0d0e10 !important;
}

/* These are the wrappers Citizen paints an opaque dark colour on.
   They sit ABOVE <html>, so they must be transparent for the image
   to show through. This is the part that fixes the "black hides image". */
body,
.skin-citizen,
.mw-page-container,
.mw-page-container-inner,
.citizen-body-container,
.citizen-body,
.mw-content-container,
main {
  background-color: transparent !important;
}

/* Header */
.citizen-header,
#citizen-header {
  background-color: rgba(8, 9, 14, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Sidebar / drawer */
.citizen-drawer,
#citizen-drawer {
  background-color: rgba(10, 11, 16, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Main content panel — slightly frosted */
.citizen-page-container,
.mw-body {
  background-color: rgba(13, 14, 20, 0.86) !important;
}

/* Footer */
.citizen-footer,
#citizen-footer {
  background-color: rgba(8, 9, 14, 0.92) !important;
}
Retrieved from "https://wiki-beta.pactoria.net/w/index.php?title=MediaWiki:Citizen.css&oldid=768"