MediaWiki:Citizen.css: Difference between revisions

/* =============================================
   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: 0.5em; /*  Macus: effects the alignment of the expand/colapse section */
}

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

/* Solid dark page base. The image is a TOP BANNER (below), not a
   full-page background, so it no longer rescales with window height. */
html {
  background-color: #0d0e10 !important;
}

/* --- Top banner image (Tolkien-Gateway style) --- */
/* A fixed-height strip pinned to the very top of the page. It scrolls
   away with the page and is NOT visible further down. Uses `cover` so
   the panorama keeps its aspect ratio (no stretching), and a mask to
   fade its bottom edge softly into the dark page background. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;                /* sit behind all page content */
  pointer-events: none;
  height: 38vh;              /* banner height; tweak to taste */
  max-height: 420px;
  min-height: 220px;
  background-image: url('https://pactoria.net/assets/core/images/uploads/c4b072eca8479d3dd77693ab3d2453d0.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* Fade the bottom of the banner into the page background */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* 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.66) !important;
}

/* Footer */
.citizen-footer,
#citizen-footer {
  background-color: rgba(8, 9, 14, 0.92) !important;
}