MediaWiki:Common.css
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.
/*
* ╔══════════════════════════════════════════════════════════╗
* ║ DREAMCORE / WEIRDCORE — MediaWiki Theme ║
* ║ Paste into MediaWiki:Common.css on your wiki ║
* ║ Also requires MediaWiki:Common.js for full effects ║
* ╚══════════════════════════════════════════════════════════╝
*
* Covers: Vector (legacy), Vector 2022, Timeless
* Fonts: IM Fell English, Cinzel, VT323 (Google Fonts)
* + Lovecraft, Ethereal (OnlineWebFonts)
*/
/* ─── Google Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cinzel:wght@400;600;900&family=VT323&family=Crimson+Pro:ital,wght@0,300;0,400;1,300;1,400&display=swap');
/* ─── OnlineWebFonts ─────────────────────────────────────
Download from onlinewebfonts.com and self-host, or use
@font-face pointing to your wiki's File: namespace.
Below are fallback stacks that work without self-hosting.
───────────────────────────────────────────────────────── */
@font-face {
font-family: 'DreamDisplay';
src: local('Cinzel'), local('IM Fell English');
font-weight: 400;
}
/* ─── CSS Custom Properties ──────────────────────────── */
:root {
--bg-deep: #08060f;
--bg-mid: #0e0b1c;
--bg-panel: #130f24;
--bg-surface: #1a1530;
--bg-elevated: #211c3a;
--bg-highlight: #2a2448;
--text-primary: #cdc2e8;
--text-secondary: #9589bb;
--text-dim: #5c5280;
--text-accent: #d4b8f0;
--accent-lavender: #a07ad4;
--accent-teal: #56a99f;
--accent-rust: #c47866;
--accent-gold: #c4a04a;
--accent-rose: #c46890;
--link-idle: #7da8cc;
--link-hover: #b0d4f0;
--link-visited: #8878b8;
--link-red: #d47088;
--border-faint: rgba(160, 122, 212, 0.12);
--border-mid: rgba(160, 122, 212, 0.28);
--border-strong: rgba(160, 122, 212, 0.55);
--glow-purple: rgba(160, 122, 212, 0.18);
--glow-teal: rgba(86, 169, 159, 0.15);
--font-display: 'Cinzel', 'IM Fell English', Georgia, serif;
--font-body: 'IM Fell English', 'Crimson Pro', Georgia, serif;
--font-mono: 'VT323', 'Courier New', monospace;
--font-ui: 'Crimson Pro', Georgia, serif;
}
/* ─── SVG Icon Data URIs ─────────────────────────────── */
/* mushroom, eye, star, moon — used as pseudo-element decorations */
/* ─── Base Reset for Wiki ────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
}
/* ═══════════════════════════════════════════════════════
GLOBAL PAGE BACKGROUND
═══════════════════════════════════════════════════════ */
html, body,
#mw-page-base, #mw-head-base {
background-color: var(--bg-deep) !important;
color: var(--text-primary) !important;
}
body {
font-family: var(--font-body) !important;
font-size: 17px !important;
line-height: 1.75 !important;
}
/* Subtle noise texture overlay on body */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: 0.6;
}
/* Floating orb ambiance */
body::after {
content: '';
position: fixed;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(100,60,180,0.07) 0%, transparent 70%);
top: -200px;
right: -200px;
pointer-events: none;
z-index: 0;
animation: driftOrb 20s ease-in-out infinite alternate;
}
@keyframes driftOrb {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-80px, 80px) scale(1.15); }
}
/* ═══════════════════════════════════════════════════════
LAYOUT CONTAINERS
═══════════════════════════════════════════════════════ */
/* Vector Legacy */
#content,
.mw-body {
background-color: var(--bg-mid) !important;
border: 1px solid var(--border-mid) !important;
border-radius: 2px !important;
color: var(--text-primary) !important;
position: relative;
box-shadow:
0 0 0 1px var(--border-faint),
0 8px 48px rgba(8, 6, 15, 0.8),
inset 0 0 80px rgba(100, 60, 180, 0.04) !important;
}
/* Vector 2022 content area */
.mw-page-container,
.vector-body {
background-color: var(--bg-mid) !important;
}
.skin-vector-2022 .mw-page-container {
background-color: var(--bg-deep) !important;
}
.skin-vector-2022 #content {
background-color: var(--bg-mid) !important;
}
/* ═══════════════════════════════════════════════════════
HEADER / NAVIGATION
═══════════════════════════════════════════════════════ */
#mw-head,
#mw-head-base,
.vector-header,
.mw-header {
background-color: var(--bg-panel) !important;
border-bottom: 1px solid var(--border-mid) !important;
box-shadow: 0 1px 24px rgba(8, 6, 15, 0.9) !important;
}
/* Vector 2022 sticky header */
.vector-sticky-header {
background-color: rgba(13, 10, 28, 0.95) !important;
border-bottom: 1px solid var(--border-mid) !important;
backdrop-filter: blur(8px) !important;
}
/* Site name / logo text */
#p-logo a,
.mw-wiki-logo {
filter: brightness(0.9) saturate(0.8) hue-rotate(20deg) !important;
}
/* Navigation tabs */
#p-cactions,
#p-namespaces,
.vector-menu-tabs,
.vector-tab-noaction {
background-color: transparent !important;
}
#p-namespaces li a,
#p-cactions li a,
.vector-menu-tabs li a {
background-color: var(--bg-panel) !important;
color: var(--text-secondary) !important;
border-color: var(--border-faint) !important;
font-family: var(--font-ui) !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
transition: color 0.2s, background-color 0.2s !important;
}
#p-namespaces li.selected a,
#p-cactions li.selected a,
.vector-menu-tabs li.selected a {
background-color: var(--bg-mid) !important;
color: var(--accent-lavender) !important;
border-bottom-color: var(--bg-mid) !important;
}
#p-namespaces li a:hover,
#p-cactions li a:hover {
background-color: var(--bg-elevated) !important;
color: var(--text-accent) !important;
}
/* ═══════════════════════════════════════════════════════
SIDEBAR / PANEL
═══════════════════════════════════════════════════════ */
#mw-panel,
.mw-sidebar,
.vector-sidebar,
#sidebar {
background-color: var(--bg-panel) !important;
border-right: 1px solid var(--border-faint) !important;
}
.portal,
.vector-menu {
border-bottom: 1px solid var(--border-faint) !important;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
}
.portal h3,
.vector-menu-heading,
.vector-menu h3 {
font-family: var(--font-display) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--text-dim) !important;
padding: 8px 12px 4px !important;
}
/* Sidebar links */
#mw-panel a,
.mw-sidebar a,
.portal a,
.vector-menu a {
color: var(--text-secondary) !important;
font-family: var(--font-ui) !important;
font-size: 15px !important;
padding: 3px 12px !important;
display: block !important;
border-radius: 2px !important;
transition: color 0.2s, background 0.2s !important;
}
#mw-panel a:hover,
.mw-sidebar a:hover,
.portal a:hover,
.vector-menu a:hover {
color: var(--accent-lavender) !important;
background-color: var(--bg-elevated) !important;
text-decoration: none !important;
}
/* ═══════════════════════════════════════════════════════
PAGE TITLE
═══════════════════════════════════════════════════════ */
#firstHeading,
.firstHeading,
.page-header__title {
font-family: var(--font-display) !important;
font-size: 2.1rem !important;
font-weight: 600 !important;
color: var(--text-accent) !important;
letter-spacing: 0.06em !important;
border-bottom: 1px solid var(--border-mid) !important;
padding-bottom: 0.4em !important;
margin-bottom: 1em !important;
text-shadow:
0 0 30px rgba(160, 122, 212, 0.25),
0 0 60px rgba(160, 122, 212, 0.1) !important;
position: relative;
}
#firstHeading::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 80px;
height: 1px;
background: linear-gradient(90deg, var(--accent-lavender), transparent);
}
/* ═══════════════════════════════════════════════════════
HEADINGS
═══════════════════════════════════════════════════════ */
.mw-body-content h1,
.mw-body-content h2 {
font-family: var(--font-display) !important;
color: var(--text-accent) !important;
letter-spacing: 0.04em !important;
border-bottom: 1px solid var(--border-faint) !important;
padding-bottom: 0.25em !important;
margin-top: 1.8em !important;
}
.mw-body-content h2 {
font-size: 1.45rem !important;
font-weight: 600 !important;
position: relative;
}
.mw-body-content h2::before {
content: '✦';
font-size: 0.6rem;
color: var(--accent-lavender);
opacity: 0.7;
margin-right: 0.5em;
vertical-align: middle;
}
.mw-body-content h3 {
font-family: var(--font-display) !important;
font-size: 1.15rem !important;
font-weight: 400 !important;
color: var(--accent-teal) !important;
letter-spacing: 0.05em !important;
margin-top: 1.4em !important;
font-style: italic;
}
.mw-body-content h4,
.mw-body-content h5 {
font-family: var(--font-ui) !important;
color: var(--text-secondary) !important;
font-size: 1rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
/* ═══════════════════════════════════════════════════════
BODY TEXT & PARAGRAPHS
═══════════════════════════════════════════════════════ */
.mw-body-content p {
font-family: var(--font-body) !important;
font-size: 17px !important;
line-height: 1.8 !important;
color: var(--text-primary) !important;
}
.mw-body-content em,
.mw-body-content i {
color: var(--text-accent) !important;
font-style: italic !important;
}
.mw-body-content strong,
.mw-body-content b {
color: var(--accent-lavender) !important;
font-weight: 600 !important;
}
/* ═══════════════════════════════════════════════════════
LINKS
═══════════════════════════════════════════════════════ */
.mw-body-content a,
a {
color: var(--link-idle) !important;
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
transition: color 0.18s, border-color 0.18s, text-shadow 0.18s !important;
}
.mw-body-content a:hover,
a:hover {
color: var(--link-hover) !important;
border-bottom-color: var(--link-hover) !important;
text-shadow: 0 0 12px rgba(176, 212, 240, 0.35) !important;
}
.mw-body-content a:visited,
a:visited {
color: var(--link-visited) !important;
}
/* Red links (missing pages) */
.new,
a.new {
color: var(--link-red) !important;
}
/* External links */
.mw-body-content a.external {
background-image: none !important;
padding-right: 0 !important;
}
.mw-body-content a.external::after {
content: ' ↗';
font-size: 0.7em;
opacity: 0.5;
vertical-align: super;
}
/* ═══════════════════════════════════════════════════════
TABLE OF CONTENTS
═══════════════════════════════════════════════════════ */
#toc,
.toc,
#vector-toc,
.vector-toc {
background-color: var(--bg-panel) !important;
border: 1px solid var(--border-mid) !important;
border-radius: 4px !important;
box-shadow: 0 4px 24px rgba(8, 6, 15, 0.5) !important;
font-family: var(--font-ui) !important;
position: relative;
overflow: hidden;
}
#toc::before,
.toc::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-lavender), var(--accent-teal), transparent);
}
#toc h2,
.toc h2,
.toctitle,
#vector-toc .vector-toc-toggle {
font-family: var(--font-display) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--text-dim) !important;
border-bottom: none !important;
padding: 12px 14px 8px !important;
}
#toc h2::before,
.toc h2::before {
display: none !important;
}
#toc a,
.toc a,
.vector-toc a {
color: var(--text-secondary) !important;
font-size: 14px !important;
line-height: 1.5 !important;
border-bottom: none !important;
}
#toc a:hover,
.toc a:hover,
.vector-toc a:hover {
color: var(--accent-lavender) !important;
border-bottom: none !important;
}
.vector-toc .vector-toc-link.vector-toc-level-1-active {
color: var(--accent-lavender) !important;
background: var(--bg-elevated) !important;
border-radius: 2px !important;
}
/* ═══════════════════════════════════════════════════════
TABLES
═══════════════════════════════════════════════════════ */
.wikitable,
.mw-body-content table {
background-color: var(--bg-surface) !important;
border: 1px solid var(--border-mid) !important;
border-collapse: collapse !important;
font-family: var(--font-ui) !important;
font-size: 15px !important;
box-shadow: 0 2px 16px rgba(8, 6, 15, 0.4) !important;
}
.wikitable th,
.mw-body-content th {
background-color: var(--bg-elevated) !important;
color: var(--accent-lavender) !important;
border: 1px solid var(--border-mid) !important;
font-family: var(--font-display) !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
padding: 8px 12px !important;
}
.wikitable td,
.mw-body-content td {
border: 1px solid var(--border-faint) !important;
color: var(--text-primary) !important;
padding: 7px 12px !important;
}
.wikitable tr:hover td {
background-color: rgba(160, 122, 212, 0.05) !important;
}
/* Sortable table arrows */
.wikitable th.headerSort::after {
color: var(--accent-lavender) !important;
}
/* ═══════════════════════════════════════════════════════
INFOBOXES & SIDEBOX
═══════════════════════════════════════════════════════ */
.infobox,
.sidebar,
.mbox-small {
background-color: var(--bg-panel) !important;
border: 1px solid var(--border-mid) !important;
font-family: var(--font-ui) !important;
font-size: 14px !important;
color: var(--text-primary) !important;
box-shadow: 0 4px 20px rgba(8, 6, 15, 0.5) !important;
}
.infobox th,
.infobox caption {
background-color: var(--bg-elevated) !important;
color: var(--accent-lavender) !important;
font-family: var(--font-display) !important;
letter-spacing: 0.06em !important;
}
.infobox td {
border-color: var(--border-faint) !important;
}
/* ═══════════════════════════════════════════════════════
CODE & PRE
═══════════════════════════════════════════════════════ */
code,
kbd,
samp {
background-color: var(--bg-elevated) !important;
color: var(--accent-teal) !important;
font-family: var(--font-mono) !important;
font-size: 1rem !important;
border: 1px solid var(--border-faint) !important;
padding: 1px 5px !important;
border-radius: 2px !important;
}
pre,
.mw-code {
background-color: var(--bg-surface) !important;
color: var(--accent-teal) !important;
font-family: var(--font-mono) !important;
font-size: 15px !important;
border: 1px solid var(--border-mid) !important;
border-radius: 4px !important;
padding: 16px !important;
overflow-x: auto !important;
line-height: 1.6 !important;
box-shadow: inset 0 0 20px rgba(8, 6, 15, 0.4) !important;
}
/* ═══════════════════════════════════════════════════════
BLOCKQUOTE
═══════════════════════════════════════════════════════ */
blockquote {
border-left: 3px solid var(--accent-lavender) !important;
background-color: var(--bg-panel) !important;
color: var(--text-secondary) !important;
font-style: italic !important;
font-family: var(--font-body) !important;
padding: 12px 20px !important;
margin: 1.5em 0 !important;
border-radius: 0 4px 4px 0 !important;
position: relative;
}
blockquote::before {
content: '"';
font-family: var(--font-display);
font-size: 4rem;
color: var(--accent-lavender);
opacity: 0.15;
position: absolute;
top: -10px;
left: 10px;
line-height: 1;
}
/* ═══════════════════════════════════════════════════════
IMAGES & THUMBNAILS
═══════════════════════════════════════════════════════ */
.thumb,
.tmulti {
background-color: var(--bg-panel) !important;
border: 1px solid var(--border-mid) !important;
box-shadow: 0 4px 20px rgba(8, 6, 15, 0.5) !important;
}
.thumbcaption,
.thumbinner .thumbcaption {
color: var(--text-dim) !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
font-style: italic !important;
border-top: 1px solid var(--border-faint) !important;
padding-top: 6px !important;
}
/* Slightly dreamy image filter */
.mw-body-content .thumb img {
filter: saturate(0.85) brightness(0.92) !important;
transition: filter 0.4s ease !important;
}
.mw-body-content .thumb img:hover {
filter: saturate(1.0) brightness(1.0) !important;
}
/* ═══════════════════════════════════════════════════════
SEARCH BOX
═══════════════════════════════════════════════════════ */
#searchInput,
.vector-search-box input,
input[name="search"],
.oo-ui-textInputWidget input {
background-color: var(--bg-elevated) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-mid) !important;
border-radius: 3px !important;
font-family: var(--font-ui) !important;
font-size: 15px !important;
padding: 6px 10px !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
}
#searchInput:focus,
.vector-search-box input:focus,
input[name="search"]:focus {
border-color: var(--accent-lavender) !important;
box-shadow: 0 0 0 2px var(--glow-purple) !important;
outline: none !important;
}
#searchInput::placeholder {
color: var(--text-dim) !important;
font-style: italic !important;
}
#searchButton,
.vector-search-box-btn {
background-color: var(--bg-elevated) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-mid) !important;
transition: background 0.2s !important;
}
#searchButton:hover,
.vector-search-box-btn:hover {
background-color: var(--bg-highlight) !important;
color: var(--accent-lavender) !important;
}
/* ═══════════════════════════════════════════════════════
EDIT TOOLBAR & BUTTONS
═══════════════════════════════════════════════════════ */
#toolbar,
.wikiEditor-ui-toolbar {
background-color: var(--bg-elevated) !important;
border-color: var(--border-mid) !important;
}
textarea#wpTextbox1,
.wikiEditor-ui-text textarea {
background-color: var(--bg-surface) !important;
color: var(--text-primary) !important;
border-color: var(--border-mid) !important;
font-family: var(--font-mono) !important;
font-size: 15px !important;
line-height: 1.6 !important;
caret-color: var(--accent-lavender) !important;
}
/* Buttons */
.mw-ui-button,
input[type="submit"],
input[type="button"],
button {
background-color: var(--bg-elevated) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-mid) !important;
font-family: var(--font-ui) !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
border-radius: 2px !important;
transition: all 0.2s !important;
}
.mw-ui-button:hover,
input[type="submit"]:hover {
background-color: var(--bg-highlight) !important;
color: var(--accent-lavender) !important;
border-color: var(--accent-lavender) !important;
box-shadow: 0 0 8px var(--glow-purple) !important;
}
.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary {
background-color: rgba(160, 122, 212, 0.15) !important;
color: var(--accent-lavender) !important;
border-color: var(--accent-lavender) !important;
}
/* ═══════════════════════════════════════════════════════
CATEGORIES
═══════════════════════════════════════════════════════ */
#catlinks,
.catlinks {
background-color: var(--bg-panel) !important;
border: 1px solid var(--border-faint) !important;
border-radius: 4px !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
color: var(--text-dim) !important;
padding: 8px 14px !important;
margin-top: 2em !important;
}
#catlinks a,
.catlinks a {
color: var(--text-secondary) !important;
font-size: 13px !important;
border-bottom: none !important;
}
#catlinks a:hover,
.catlinks a:hover {
color: var(--accent-teal) !important;
}
/* ═══════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════ */
#footer,
.mw-footer {
background-color: var(--bg-panel) !important;
border-top: 1px solid var(--border-faint) !important;
color: var(--text-dim) !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
}
#footer a,
.mw-footer a {
color: var(--text-dim) !important;
border-bottom: none !important;
}
#footer a:hover,
.mw-footer a:hover {
color: var(--text-secondary) !important;
}
#footer-icons img {
filter: grayscale(1) brightness(0.5) !important;
transition: filter 0.2s !important;
}
#footer-icons img:hover {
filter: grayscale(0.4) brightness(0.8) !important;
}
/* ═══════════════════════════════════════════════════════
MESSAGE BOXES (hatnotes, warnings)
═══════════════════════════════════════════════════════ */
.mbox-small,
.ambox,
.tmbox,
.cmbox,
.fmbox {
background-color: var(--bg-panel) !important;
border-color: var(--border-mid) !important;
color: var(--text-secondary) !important;
}
.ambox-notice {
border-left-color: var(--accent-lavender) !important;
}
.ambox-warning {
border-left-color: var(--accent-rust) !important;
}
.ambox-delete {
border-left-color: var(--link-red) !important;
}
/* ═══════════════════════════════════════════════════════
SPECIAL PAGES & DIFF
═══════════════════════════════════════════════════════ */
.diff-addedline td {
background-color: rgba(86, 169, 159, 0.08) !important;
border-color: rgba(86, 169, 159, 0.25) !important;
}
.diff-deletedline td {
background-color: rgba(196, 120, 102, 0.08) !important;
border-color: rgba(196, 120, 102, 0.25) !important;
}
.diff-context td {
background-color: var(--bg-surface) !important;
color: var(--text-dim) !important;
}
ins { color: var(--accent-teal) !important; }
del { color: var(--accent-rust) !important; }
/* ─── Special Page lists ────────────────────────────── */
.mw-spcontent,
.special-pages-content {
font-family: var(--font-ui) !important;
}
/* ═══════════════════════════════════════════════════════
DECORATIVE DREAMCORE ELEMENTS
(injected via Common.js, styled here)
═══════════════════════════════════════════════════════ */
.dreamcore-deco {
position: fixed;
pointer-events: none;
z-index: 1;
opacity: 0;
animation: fadeInDeco 3s ease forwards;
}
@keyframes fadeInDeco {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Floating symbols */
.deco-symbol {
font-size: 18px;
color: var(--text-dim);
animation: floatSymbol 8s ease-in-out infinite;
opacity: 0.25 !important;
user-select: none;
}
@keyframes floatSymbol {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-12px) rotate(4deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
/* SVG decoration elements */
.deco-mushroom,
.deco-eye,
.deco-star {
width: 36px;
height: 36px;
opacity: 0.18 !important;
}
/* ═══════════════════════════════════════════════════════
SCROLLBAR
═══════════════════════════════════════════════════════ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
background: var(--bg-highlight);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-lavender);
}
/* ═══════════════════════════════════════════════════════
TEXT SELECTION
═══════════════════════════════════════════════════════ */
::selection {
background-color: rgba(160, 122, 212, 0.25) !important;
color: var(--text-accent) !important;
}
/* ═══════════════════════════════════════════════════════
HORIZONTAL RULE
═══════════════════════════════════════════════════════ */
hr {
border: none !important;
border-top: 1px solid var(--border-faint) !important;
margin: 2em 0 !important;
position: relative;
}
/* ═══════════════════════════════════════════════════════
LISTS
═══════════════════════════════════════════════════════ */
.mw-body-content ul li::marker {
color: var(--accent-lavender);
content: '◈ ';
}
.mw-body-content ol {
counter-reset: item;
}
.mw-body-content ol li {
counter-increment: item;
}
.mw-body-content ol li::marker {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 13px;
}
.mw-body-content dl dt {
color: var(--accent-lavender) !important;
font-family: var(--font-display) !important;
font-size: 0.95em !important;
}
.mw-body-content dl dd {
border-left: 2px solid var(--border-faint) !important;
padding-left: 12px !important;
color: var(--text-secondary) !important;
}
/* ═══════════════════════════════════════════════════════
GLITCH EFFECT — applied by JS to page title
═══════════════════════════════════════════════════════ */
@keyframes glitchShift {
0% { clip-path: inset(0 0 98% 0); transform: translateX(-2px); }
10% { clip-path: inset(20% 0 60% 0); transform: translateX(2px); }
20% { clip-path: inset(60% 0 10% 0); transform: translateX(-1px); }
30% { clip-path: inset(10% 0 80% 0); transform: translateX(1px); }
40% { clip-path: inset(80% 0 2% 0); transform: translateX(-2px); }
50% { clip-path: inset(0 0 98% 0); transform: translateX(0); }
100% { clip-path: inset(0 0 98% 0); transform: translateX(0); }
}
.glitch-title {
position: relative !important;
}
.glitch-title::before,
.glitch-title::after {
content: attr(data-title) !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
}
.glitch-title::before {
color: var(--accent-teal) !important;
animation: glitchShift 6s infinite !important;
opacity: 0.5 !important;
}
.glitch-title::after {
color: var(--accent-lavender) !important;
animation: glitchShift 6s 0.5s infinite !important;
opacity: 0.4 !important;
}
/* ═══════════════════════════════════════════════════════
WATCHLIST & USER PAGE SPECIFIC
═══════════════════════════════════════════════════════ */
.mw-changeslist-line {
border-bottom: 1px solid var(--border-faint) !important;
padding: 4px 0 !important;
font-family: var(--font-ui) !important;
}
.mw-changeslist-line:hover {
background-color: var(--bg-surface) !important;
}
/* ═══════════════════════════════════════════════════════
VECTOR 2022 SPECIFIC
═══════════════════════════════════════════════════════ */
.skin-vector-2022 .vector-toc-landmark {
background: var(--bg-panel) !important;
border-color: var(--border-faint) !important;
}
.skin-vector-2022 .mw-table-of-contents-container {
background: transparent !important;
}
.skin-vector-2022 .vector-column-start {
background: var(--bg-panel) !important;
}
.skin-vector-2022 #vector-page-titlebar {
background: transparent !important;
border-bottom: 1px solid var(--border-mid) !important;
}
/* ═══════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════ */
@media screen and (max-width: 720px) {
#firstHeading, .firstHeading {
font-size: 1.6rem !important;
}
.mw-body-content p {
font-size: 16px !important;
}
#mw-panel, .mw-sidebar {
background-color: var(--bg-deep) !important;
}
}
/* ═══════════════════════════════════════════════════════
PRINT
═══════════════════════════════════════════════════════ */
@media print {
body, #content, .mw-body {
background: white !important;
color: black !important;
}
a { color: #333 !important; }
#mw-head, #mw-panel, #footer { display: none !important; }
}