MediaWiki:Common.css

From Skateboarding on the Pacific Ocean

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.
/*
=============================================================
  PREACHER'S DAUGHTER — MediaWiki Wiki Theme
  Based on the 2022 album by Ethel Cain
  Southern Gothic · Dark Americana · Sacred & Profane
=============================================================
  Install: Paste into MediaWiki:Common.css
  Pair with: MediaWiki:Common.js (see companion file)
=============================================================
*/

/* ── 0. GOOGLE FONTS IMPORT ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cinzel:wght@400;600;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cinzel+Decorative:wght@400;700&display=swap');

/* ── 1. ROOT VARIABLES ───────────────────────────────────── */
:root {
  --pd-bg:          #0e0a09;
  --pd-bg-alt:      #150f0d;
  --pd-bg-content:  #1a1210;
  --pd-bg-sidebar:  #110c0b;
  --pd-bg-header:   #0a0706;

  --pd-text:        #e8d9c0;
  --pd-text-muted:  #9e8b72;
  --pd-text-faint:  #5c4d3c;

  --pd-crimson:     #7a1c24;
  --pd-crimson-lt:  #a82b37;
  --pd-crimson-glow:#c0304050;
  --pd-rose:        #b07080;
  --pd-rose-lt:     #d09090;
  --pd-gold:        #b08050;
  --pd-gold-lt:     #d4a060;
  --pd-bone:        #f0e8d5;
  --pd-ivory:       #fdf8f0;

  --pd-border:      #3a2818;
  --pd-border-lt:   #5a3c22;

  --pd-font-display:   'Cinzel Decorative', 'Cinzel', serif;
  --pd-font-heading:   'IM Fell English', 'Georgia', serif;
  --pd-font-body:      'EB Garamond', 'Georgia', serif;
  --pd-font-cinzel:    'Cinzel', serif;
  --pd-font-ui:        'EB Garamond', serif;

  --pd-shadow-deep:    0 8px 32px rgba(0,0,0,0.8);
  --pd-shadow-crimson: 0 0 18px rgba(122,28,36,0.35);
  --pd-glow-link:      0 0 8px rgba(160,43,55,0.5);
  --pd-transition:     0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. BASE RESET & BODY ────────────────────────────────── */
html, body {
  background-color: var(--pd-bg) !important;
  color: var(--pd-text) !important;
  font-family: var(--pd-font-body) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  -webkit-font-smoothing: antialiased;
}

/* Aged parchment texture using CSS alone — horizontal grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,240,200,0.012) 2px,
      rgba(255,240,200,0.012) 4px
    );
  pointer-events: none;
  z-index: 9998;
}

/* ── 3. PAGE LAYOUT WRAPPERS ─────────────────────────────── */
#mw-page-base {
  background-color: var(--pd-bg-header) !important;
  background-image: linear-gradient(180deg, #050303 0%, var(--pd-bg-alt) 100%) !important;
}

#mw-head-base {
  background-color: var(--pd-bg-header) !important;
}

#content,
.mw-body {
  background-color: var(--pd-bg-content) !important;
  color: var(--pd-text) !important;
  border: 1px solid var(--pd-border) !important;
  border-top: 2px solid var(--pd-crimson) !important;
  box-shadow: var(--pd-shadow-deep) !important;
  padding: 2rem 2.5rem !important;
}

/* Vignette border — gives content depth */
.mw-body::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.45);
}

/* ── 4. SIDEBAR ──────────────────────────────────────────── */
#mw-panel,
.vector-sidebar,
.mw-sidebar,
#mw-navigation,
.collapsible-nav {
  background-color: var(--pd-bg-sidebar) !important;
  border-right: 1px solid var(--pd-border) !important;
}

/* ── 5. LOGO ─────────────────────────────────────────────── */
#p-logo a {
  display: block;
  filter: drop-shadow(0 0 12px rgba(122,28,36,0.6));
  transition: filter var(--pd-transition);
}
#p-logo a:hover {
  filter: drop-shadow(0 0 22px rgba(160,43,55,0.85));
}

/* ── 6. SITE TITLE & HEADER ──────────────────────────────── */
#firstHeading,
.mw-first-heading,
.page-header h1 {
  font-family: var(--pd-font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--pd-bone) !important;
  letter-spacing: 0.06em !important;
  text-shadow:
    0 0 30px rgba(160,43,55,0.4),
    0 2px 4px rgba(0,0,0,0.8) !important;
  border-bottom: 1px solid var(--pd-border) !important;
  padding-bottom: 0.6rem !important;
  margin-bottom: 1.4rem !important;
  animation: pd-fadein 1.2s ease forwards;
}

/* ── 7. HEADINGS ─────────────────────────────────────────── */
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
  font-family: var(--pd-font-heading) !important;
  font-style: italic;
  color: var(--pd-bone) !important;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  margin-top: 1.8em !important;
  margin-bottom: 0.5em !important;
}

.mw-body-content h2 {
  font-size: 1.6rem !important;
  border-bottom: 1px solid var(--pd-border-lt) !important;
  padding-bottom: 0.3rem !important;
  position: relative;
}

/* Cross ornament before h2 */
.mw-body-content h2 .mw-headline::before {
  content: '✝';
  font-style: normal;
  font-family: serif;
  color: var(--pd-crimson-lt);
  margin-right: 0.5em;
  font-size: 0.75em;
  vertical-align: middle;
  opacity: 0.75;
}

.mw-body-content h3 {
  font-size: 1.28rem !important;
  color: var(--pd-text) !important;
}

.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
  font-family: var(--pd-font-cinzel) !important;
  font-style: normal !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--pd-text-muted) !important;
}

/* ── 8. BODY TEXT ────────────────────────────────────────── */
.mw-body-content p,
.mw-body-content li,
.mw-body-content dd,
.mw-body-content dt {
  font-family: var(--pd-font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--pd-text) !important;
}

/* Opening paragraph drop-cap */
.mw-body-content > p:first-of-type::first-letter {
  font-family: var(--pd-font-cinzel) !important;
  font-size: 4.2em !important;
  line-height: 0.75;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--pd-crimson-lt);
  text-shadow: 0 0 20px rgba(160,43,55,0.5);
  font-weight: 700;
}

/* ── 9. LINKS ────────────────────────────────────────────── */
a,
a:visited {
  color: var(--pd-rose) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition:
    color var(--pd-transition),
    border-color var(--pd-transition),
    text-shadow var(--pd-transition) !important;
}

a:hover {
  color: var(--pd-rose-lt) !important;
  border-bottom-color: var(--pd-crimson-lt) !important;
  text-shadow: var(--pd-glow-link) !important;
}

a.new,
a.new:visited {
  color: var(--pd-crimson-lt) !important;
}

/* ── 10. NAVIGATION MENUS ────────────────────────────────── */
/* Sidebar nav links */
#mw-panel .portal,
.vector-menu-content,
.sidebar-toc {
  border: none !important;
  background: transparent !important;
}

#mw-panel .portal h3,
.vector-menu-heading {
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--pd-crimson-lt) !important;
  border-bottom: 1px solid var(--pd-border) !important;
  padding-bottom: 0.3rem !important;
  margin: 1rem 0 0.4rem !important;
}

#mw-panel .portal ul li a,
.vector-menu-content li a {
  font-family: var(--pd-font-body) !important;
  font-size: 0.9rem !important;
  color: var(--pd-text-muted) !important;
  padding: 0.15rem 0 !important;
  transition: color var(--pd-transition), padding-left var(--pd-transition) !important;
  display: block !important;
}

#mw-panel .portal ul li a:hover,
.vector-menu-content li a:hover {
  color: var(--pd-rose-lt) !important;
  padding-left: 0.5rem !important;
  border-bottom: none !important;
  text-shadow: none !important;
}

/* ── 11. TOP NAVIGATION BAR ──────────────────────────────── */
#mw-head,
.vector-header,
#vector-page-toolbar,
.vector-page-toolbar {
  background-color: var(--pd-bg-header) !important;
  border-bottom: 1px solid var(--pd-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
}

/* Tabs (read/edit/history) */
#p-views .selected a,
#p-views li.selected a {
  background-color: var(--pd-bg-content) !important;
  color: var(--pd-bone) !important;
  border-color: var(--pd-border-lt) var(--pd-border-lt) transparent !important;
}

#p-views li a {
  background-color: var(--pd-bg-sidebar) !important;
  color: var(--pd-text-muted) !important;
  border: 1px solid var(--pd-border) !important;
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  transition: background-color var(--pd-transition), color var(--pd-transition) !important;
}

#p-views li a:hover {
  background-color: var(--pd-crimson) !important;
  color: var(--pd-bone) !important;
  border-color: var(--pd-crimson) !important;
  border-bottom: none !important;
  text-shadow: none !important;
}

/* Search box */
#searchInput,
#searchform input[type="search"],
input#searchInput {
  background-color: #100b0a !important;
  color: var(--pd-text) !important;
  border: 1px solid var(--pd-border-lt) !important;
  font-family: var(--pd-font-body) !important;
  font-size: 0.95rem !important;
  padding: 0.35rem 0.7rem !important;
  border-radius: 2px !important;
  transition: border-color var(--pd-transition), box-shadow var(--pd-transition) !important;
}

#searchInput:focus {
  border-color: var(--pd-crimson-lt) !important;
  box-shadow: 0 0 0 2px rgba(122,28,36,0.3) !important;
  outline: none !important;
}

#searchButton, button.searchButton {
  background-color: var(--pd-crimson) !important;
  color: var(--pd-bone) !important;
  border: 1px solid var(--pd-crimson-lt) !important;
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  transition: background-color var(--pd-transition) !important;
}

#searchButton:hover {
  background-color: var(--pd-crimson-lt) !important;
}

/* ── 12. TABLE OF CONTENTS ───────────────────────────────── */
#toc,
.toc {
  background-color: rgba(14,10,9,0.7) !important;
  border: 1px solid var(--pd-border-lt) !important;
  border-top: 2px solid var(--pd-crimson) !important;
  padding: 1rem 1.4rem !important;
  font-family: var(--pd-font-body) !important;
  box-shadow: var(--pd-shadow-deep) !important;
}

#toc .toctitle h2,
.toc .toctitle h2 {
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.8rem !important;
  font-style: normal !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--pd-crimson-lt) !important;
  border-bottom: none !important;
}

#toc .toctitle h2::before { content: '' !important; }

.toc ul { margin: 0 !important; }

.toc li a {
  color: var(--pd-text-muted) !important;
  font-size: 0.9rem !important;
  border-bottom: none !important;
}

.toc li a:hover {
  color: var(--pd-rose) !important;
  text-shadow: none !important;
}

.toc .tocnumber {
  color: var(--pd-crimson-lt) !important;
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.8rem !important;
}

/* ── 13. TABLES ──────────────────────────────────────────── */
.wikitable,
.mw-body-content table.wikitable {
  background-color: var(--pd-bg-alt) !important;
  border: 1px solid var(--pd-border-lt) !important;
  border-collapse: collapse !important;
  color: var(--pd-text) !important;
  box-shadow: var(--pd-shadow-deep) !important;
  font-family: var(--pd-font-body) !important;
}

.wikitable th {
  background-color: #1e1210 !important;
  color: var(--pd-bone) !important;
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--pd-border-lt) !important;
  padding: 0.6rem 1rem !important;
  border-top: 2px solid var(--pd-crimson) !important;
}

.wikitable td {
  border: 1px solid var(--pd-border) !important;
  padding: 0.5rem 0.9rem !important;
}

.wikitable tr:hover td {
  background-color: rgba(122,28,36,0.08) !important;
  transition: background-color 0.2s ease !important;
}

/* ── 14. BLOCKQUOTES ─────────────────────────────────────── */
blockquote,
.mw-body-content blockquote {
  border-left: 3px solid var(--pd-crimson-lt) !important;
  background-color: rgba(10,7,6,0.6) !important;
  color: var(--pd-text-muted) !important;
  font-family: var(--pd-font-heading) !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  padding: 0.8rem 1.5rem !important;
  margin: 1.5rem 0 !important;
  position: relative;
}

blockquote::before {
  content: '\201C';
  font-family: var(--pd-font-display) !important;
  font-size: 4rem;
  color: var(--pd-crimson);
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  line-height: 1;
  opacity: 0.4;
}

/* ── 15. CATEGORIES ──────────────────────────────────────── */
#catlinks {
  background-color: var(--pd-bg-sidebar) !important;
  border: 1px solid var(--pd-border) !important;
  border-top: 1px solid var(--pd-border-lt) !important;
  color: var(--pd-text-muted) !important;
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  padding: 0.5rem 1rem !important;
  margin-top: 1.5rem !important;
}

#catlinks a {
  color: var(--pd-text-muted) !important;
}

#catlinks a:hover {
  color: var(--pd-rose) !important;
}

/* ── 16. FOOTER ──────────────────────────────────────────── */
#footer {
  background-color: var(--pd-bg) !important;
  border-top: 1px solid var(--pd-border) !important;
  color: var(--pd-text-faint) !important;
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1.2rem 2rem !important;
}

#footer a {
  color: var(--pd-text-faint) !important;
  border-bottom: none !important;
}

#footer a:hover {
  color: var(--pd-text-muted) !important;
  text-shadow: none !important;
}

#footer-icons { opacity: 0.4; filter: grayscale(1); }

/* ── 17. EDIT BUTTONS & SECTION EDIT ────────────────────── */
.mw-editsection a,
.mw-editsection-bracket {
  color: var(--pd-text-faint) !important;
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  border-bottom: none !important;
}

.mw-editsection a:hover {
  color: var(--pd-rose) !important;
  text-shadow: none !important;
}

/* ── 18. INFOBOXES ───────────────────────────────────────── */
.infobox,
table.infobox {
  background-color: #120e0c !important;
  border: 1px solid var(--pd-border-lt) !important;
  border-top: 3px solid var(--pd-crimson) !important;
  color: var(--pd-text) !important;
  font-family: var(--pd-font-body) !important;
  box-shadow: var(--pd-shadow-deep) !important;
}

.infobox th,
table.infobox th {
  background-color: #1a1010 !important;
  color: var(--pd-rose-lt) !important;
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.infobox caption,
table.infobox caption {
  font-family: var(--pd-font-display) !important;
  color: var(--pd-bone) !important;
  font-size: 1.05rem !important;
  padding: 0.5rem !important;
}

/* ── 19. MESSAGE BOXES (warning, notice, etc.) ───────────── */
.mbox-text,
.ambox td,
.tmbox td {
  font-family: var(--pd-font-body) !important;
  color: var(--pd-text-muted) !important;
}

.ambox,
.tmbox,
.cmbox {
  background-color: #0f0b0a !important;
  border: 1px solid var(--pd-border-lt) !important;
  border-left: 4px solid var(--pd-crimson) !important;
}

/* ── 20. CODE & PRE ──────────────────────────────────────── */
code, pre, .mw-code {
  background-color: #0a0706 !important;
  color: var(--pd-rose-lt) !important;
  border: 1px solid var(--pd-border) !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.85rem !important;
  border-radius: 2px !important;
}

/* ── 21. SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--pd-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--pd-border-lt);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pd-crimson);
}

/* ── 22. TEXT SELECTION ──────────────────────────────────── */
::selection {
  background-color: rgba(122,28,36,0.45) !important;
  color: var(--pd-bone) !important;
}

/* ── 23. HORIZONTAL RULES ────────────────────────────────── */
hr, .mw-body-content hr {
  border: none !important;
  border-top: 1px solid var(--pd-border-lt) !important;
  margin: 2rem 0 !important;
  position: relative;
}

hr::after {
  content: '✦ ✝ ✦';
  display: block;
  text-align: center;
  color: var(--pd-crimson-lt);
  font-size: 0.7rem;
  margin-top: -0.65rem;
  background: var(--pd-bg-content);
  width: 6rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.4em;
}

/* ── 24. IMAGE CAPTIONS ──────────────────────────────────── */
.mw-body-content .thumbcaption,
.thumbcaption {
  color: var(--pd-text-muted) !important;
  font-family: var(--pd-font-heading) !important;
  font-style: italic !important;
  font-size: 0.88rem !important;
  text-align: center;
}

.thumb,
.mw-body-content .thumb {
  border: 1px solid var(--pd-border) !important;
  background-color: var(--pd-bg) !important;
  padding: 3px !important;
}

/* ── 25. DIFF / HISTORY VIEWS ────────────────────────────── */
table.diff {
  background-color: var(--pd-bg-content) !important;
  font-family: var(--pd-font-body) !important;
  font-size: 0.9rem !important;
}

td.diff-addedline {
  background-color: rgba(30,60,20,0.35) !important;
}

td.diff-deletedline {
  background-color: rgba(90,20,20,0.35) !important;
}

td.diff-context {
  background-color: var(--pd-bg-alt) !important;
  color: var(--pd-text-muted) !important;
}

/* ── 26. PAGE STATUS INDICATORS ──────────────────────────── */
.mw-indicators {
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.7rem !important;
  color: var(--pd-text-faint) !important;
  letter-spacing: 0.1em !important;
}

/* ── 27. PRINT MEDIA ─────────────────────────────────────── */
@media print {
  body {
    background: white !important;
    color: black !important;
    font-family: Georgia, serif !important;
  }
  #mw-panel, #mw-head, #footer, #catlinks { display: none !important; }
}

/* ── 28. CORE ANIMATIONS (used by JS too) ────────────────── */

@keyframes pd-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pd-flickerA {
  0%,100% { opacity:1;    text-shadow: 0 0 30px rgba(160,43,55,0.45), 0 2px 4px rgba(0,0,0,.8); }
  8%       { opacity:.95; text-shadow: 0 0 26px rgba(160,43,55,0.3),  0 2px 4px rgba(0,0,0,.8); }
  16%      { opacity:1;   text-shadow: 0 0 35px rgba(160,43,55,0.55), 0 2px 4px rgba(0,0,0,.8); }
  30%      { opacity:.97; text-shadow: 0 0 28px rgba(160,43,55,0.38), 0 2px 4px rgba(0,0,0,.8); }
  56%      { opacity:1;   text-shadow: 0 0 32px rgba(160,43,55,0.5),  0 2px 4px rgba(0,0,0,.8); }
  79%      { opacity:.96; text-shadow: 0 0 22px rgba(160,43,55,0.28), 0 2px 4px rgba(0,0,0,.8); }
}

@keyframes pd-flickerB {
  0%,100% { opacity:.82; }
  20%     { opacity:.75; }
  45%     { opacity:.85; }
  70%     { opacity:.78; }
}

@keyframes pd-crimsonPulse {
  0%,100% { box-shadow: 0 0 6px rgba(122,28,36,0.2), inset 0 0 6px rgba(122,28,36,0.05); }
  50%     { box-shadow: 0 0 16px rgba(122,28,36,0.5), inset 0 0 12px rgba(122,28,36,0.12); }
}

@keyframes pd-crossFade {
  0%,100% { opacity: 0.04; }
  50%     { opacity: 0.07; }
}

@keyframes pd-dust {
  0%   { transform: translateY(-10px) translateX(0px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(100vh) translateX(40px) rotate(360deg); opacity: 0; }
}

@keyframes pd-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 29. ANIMATED CLASSES APPLIED BY JS ──────────────────── */

/* Main heading flicker */
.pd-flicker {
  animation: pd-flickerA 8s ease-in-out infinite !important;
}

/* Sidebar nav glow pulse */
.pd-pulse-border {
  animation: pd-crimsonPulse 4s ease-in-out infinite !important;
}

/* Content slide-up reveal */
.pd-reveal {
  animation: pd-slideUp 0.9s cubic-bezier(0.4,0,0.2,1) both;
}

/* Background cross watermark */
#pd-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32vw;
  color: rgba(122,28,36,0.035);
  pointer-events: none;
  z-index: 1;
  user-select: none;
  font-family: serif;
  animation: pd-crossFade 12s ease-in-out infinite;
  line-height: 1;
}

/* Dust particle canvas */
#pd-dust-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.55;
}

/* ── 30. VECTOR 2 / MODERN SKIN OVERRIDES ─────────────────── */
.vector-toc-pinned-container,
.vector-toc {
  background-color: var(--pd-bg-sidebar) !important;
  border: 1px solid var(--pd-border) !important;
}

.vector-toc .vector-toc-level-1 .vector-toc-link {
  color: var(--pd-text-muted) !important;
  font-family: var(--pd-font-body) !important;
}

.vector-toc-link:hover {
  color: var(--pd-rose) !important;
}

.vector-toc-current-anchor .vector-toc-link {
  color: var(--pd-rose-lt) !important;
  border-left: 2px solid var(--pd-crimson) !important;
}

/* Top toolbar Vector 2 */
.vector-header-container {
  background-color: var(--pd-bg-header) !important;
  border-bottom: 1px solid var(--pd-border) !important;
}

/* Main menu icon */
.mw-ui-icon-wikimedia-menu::before {
  filter: invert(0.6) sepia(1) saturate(0.5) !important;
}

/* ── 31. SPECIAL PAGE OVERRIDES ──────────────────────────── */
#mw-content-text .mw-special-Preferences input[type="text"],
#mw-content-text input,
#mw-content-text select,
#mw-content-text textarea {
  background-color: #0e0a09 !important;
  color: var(--pd-text) !important;
  border: 1px solid var(--pd-border-lt) !important;
  font-family: var(--pd-font-body) !important;
}

/* ── 32. MOBILE / RESPONSIVE ─────────────────────────────── */
@media (max-width: 720px) {
  .mw-body {
    padding: 1rem 1.2rem !important;
  }

  #firstHeading, .mw-first-heading {
    font-size: 1.6rem !important;
  }

  .mw-body-content > p:first-of-type::first-letter {
    font-size: 3.2em !important;
  }

  #pd-watermark {
    font-size: 60vw;
  }
}
Retrieved from "https://colourversalwikis.com/index.php?title=MediaWiki:Common.css&oldid=2"