MediaWiki:Vector.css

Zhot — Thu, 04 Jun 2026 15:17:41 GMT

Created page with "All CSS here will be loaded for users of the Vector skin: /* ===================================================================== THE NETHERLORD WIKI — "Underring Compendium" skin A dark, dungeon-gothic theme for MediaWiki (Vector legacy structure). --------------------------------------------------------------------- HOW TO USE IN A REAL MEDIAWIKI ------------------------------ The reusable payload is the THEME section: CSS custom properties +..."

New page

/* All CSS here will be loaded for users of the Vector skin */
/* =====================================================================
THE NETHERLORD WIKI — "Underring Compendium" skin
A dark, dungeon-gothic theme for MediaWiki (Vector legacy structure).
---------------------------------------------------------------------
HOW TO USE IN A REAL MEDIAWIKI
------------------------------
The reusable payload is the THEME section: CSS custom properties +
colour / border / typography / component rules. They target real
Vector/MediaWiki selectors (.mw-body, #firstHeading, .infobox,
.wikitable, #mw-panel, #catlinks, .vector-menu, etc.) so you can paste
them straight into MediaWiki:Vector.css (or Common.css).

The LAYOUT section near the top only exists so this mockup renders as a
standalone HTML file. Real Vector already provides its own layout, so
you can drop most of that section when porting — keep the THEME.

Optional display font (wordmark / infobox headers only):
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');
===================================================================== */

/* ---------------------------------------------------------------------
THEME TOKENS (reusable)
--------------------------------------------------------------------- */
:root {
--nl-bg: #0d0a09; /* cavern black, warm */
--nl-bg-2: #120d0b; /* deep gutter behind the page */
--nl-page: #15100d; /* the article "parchment-stone" panel */
--nl-surface: #1c1611; /* infobox / portals / boxes */
--nl-surface-2: #241b14; /* hover / zebra / header rows */
--nl-surface-3: #2c2118; /* table heads, raised chrome */

--nl-border: #3a2c1e; /* muted bronze hairline */
--nl-border-2: #4d3a26; /* stronger divider */
--nl-border-bright:#6b4f2e; /* lit bronze edge */

--nl-ember: #e8902f; /* torch / primary accent */
--nl-ember-bright: #ffb454; /* hover / glow */
--nl-ember-deep: #a85a17; /* underlines, pressed */
--nl-soul: #57b8c9; /* cold ring-tech accent (sparing) */
--nl-blood: #c0392b; /* red links / danger */
--nl-good: #7fb04a; /* positive job rating */

--nl-text: #e7dccb; /* warm parchment text */
--nl-text-dim: #a4937c; /* secondary / captions */
--nl-text-faint: #6f6051; /* tertiary / metadata */

--nl-link: #e6b35a; /* gold links */
--nl-link-visited: #c79a6a; /* dimmed gold */
--nl-link-hover: var(--nl-ember-bright);

--nl-display: "Cinzel", "Trajan Pro", Georgia, serif;
--nl-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--nl-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

--nl-radius: 2px; /* dungeons aren't rounded */
--nl-shadow: 0 2px 6px rgba(0,0,0,.55);
--nl-shadow-lg: 0 8px 28px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------------
BASE
--------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { font-size: 100%; }

body {
margin: 0;
background-color: var(--nl-bg);
background-image:
radial-gradient(120% 80% at 50% -10%, rgba(232,144,47,.07), transparent 55%),
radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.6), transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
color: var(--nl-text);
font-family: var(--nl-body);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

a { color: var(--nl-link); text-decoration: none; }
a:visited { color: var(--nl-link-visited); }
a:hover { color: var(--nl-link-hover); text-decoration: underline; }
a.new, a.new:visited { color: var(--nl-blood); } /* red links */
a.new:hover { color: #e05a4c; }
a.external { color: var(--nl-soul); }
a.external::after {
content: "";
display: inline-block;
width: .72em; height: .72em;
margin-left: .25em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h8v8M11 1L5 7M5 2H1v9h9V7' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h8v8M11 1L5 7M5 2H1v9h9V7' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
opacity: .8;
}

/* =====================================================================
LAYOUT SECTION — standalone-mockup scaffolding.
Real Vector provides equivalents; drop when porting.
===================================================================== */
#mw-page-container {
max-width: 1180px;
margin: 0 auto;
background: var(--nl-bg-2);
border-left: 1px solid var(--nl-border);
border-right: 1px solid var(--nl-border);
box-shadow: 0 0 60px rgba(0,0,0,.7);
min-height: 100vh;
}

/* top chrome bar (personal tools) */
#mw-head { position: relative; }

#p-personal {
display: flex;
justify-content: flex-end;
gap: 0;
padding: 6px 18px;
background: linear-gradient(180deg, var(--nl-surface-2), var(--nl-surface));
border-bottom: 1px solid var(--nl-border);
font-size: 12.5px;
}
#p-personal ul { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
#p-personal li { display: flex; align-items: center; }
#p-personal a { color: var(--nl-text-dim); }
#p-personal a:hover { color: var(--nl-ember-bright); text-decoration: none; }
#p-personal .nl-pt-icon { color: var(--nl-ember); margin-right: 5px; }

/* the body grid: sidebar + content */
.nl-grid {
display: grid;
grid-template-columns: 13em 1fr;
align-items: start;
}

/* ---- left rail ---- */
#mw-panel {
background: linear-gradient(180deg, var(--nl-surface) 0%, var(--nl-bg-2) 100%);
border-right: 1px solid var(--nl-border);
padding: 0 0 40px;
min-height: 100%;
}

#p-logo {
display: block;
padding: 20px 14px 16px;
border-bottom: 1px solid var(--nl-border);
text-align: center;
}
.nl-logo-mark {
display: block;
margin: 0 auto 10px;
width: 60px; height: 60px;
}
.nl-wordmark {
font-family: var(--nl-display);
font-weight: 700;
letter-spacing: .06em;
line-height: 1.05;
font-size: 19px;
color: var(--nl-ember);
text-shadow: 0 0 18px rgba(232,144,47,.45), 0 1px 0 #000;
text-transform: uppercase;
animation: nl-torch 5.5s ease-in-out infinite;
}
.nl-wordmark .nl-wordmark-the { display:block; font-size: 10px; letter-spacing:.42em; color: var(--nl-text-faint); text-shadow:none; margin-bottom:2px; }
.nl-subwordmark {
display: block;
margin-top: 7px;
font-size: 9.5px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--nl-text-faint);
}
@keyframes nl-torch {
0%, 100% { text-shadow: 0 0 16px rgba(232,144,47,.40), 0 1px 0 #000; }
45% { text-shadow: 0 0 26px rgba(255,180,84,.6), 0 1px 0 #000; }
60% { text-shadow: 0 0 12px rgba(232,144,47,.30), 0 1px 0 #000; }
}
@media (prefers-reduced-motion: reduce) { .nl-wordmark { animation: none; } }

/* portals in the rail */
.vector-menu.portal { padding: 16px 0 4px; }
.vector-menu.portal > h3,
.vector-menu.portal > .vector-menu-heading {
font-family: var(--nl-display);
font-weight: 600;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--nl-ember);
margin: 0;
padding: 0 16px 6px;
border-bottom: 1px solid var(--nl-border);
}
.vector-menu.portal .vector-menu-content-list,
.vector-menu.portal ul { list-style: none; margin: 6px 0 0; padding: 0; }
.vector-menu.portal li { margin: 0; }
.vector-menu.portal li a {
display: block;
padding: 4px 16px 4px 18px;
font-size: 12.5px;
color: var(--nl-text-dim);
border-left: 2px solid transparent;
}
.vector-menu.portal li a:hover {
background: var(--nl-surface-2);
color: var(--nl-ember-bright);
border-left-color: var(--nl-ember);
text-decoration: none;
}
.vector-menu.portal li a.new { color: var(--nl-blood); }

/* ---- content column ---- */
.nl-content-col { min-width: 0; background: var(--nl-page); }

/* tab rows (namespaces + views) */
#mw-head-tabs {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
padding: 8px 18px 0;
background: linear-gradient(180deg, var(--nl-bg-2), var(--nl-page));
border-bottom: 1px solid var(--nl-border-2);
}
.vector-menu-tabs { display: flex; }
.vector-menu-tabs ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.vector-menu-tabs li {
position: relative;
background: var(--nl-surface);
border: 1px solid var(--nl-border);
border-bottom: none;
border-radius: var(--nl-radius) var(--nl-radius) 0 0;
}
.vector-menu-tabs li a {
display: block;
padding: 7px 14px 8px;
font-size: 12.5px;
color: var(--nl-text-dim);
}
.vector-menu-tabs li a:hover { color: var(--nl-ember-bright); text-decoration: none; }
.vector-menu-tabs li.selected {
background: var(--nl-page);
border-color: var(--nl-border-bright);
border-top: 2px solid var(--nl-ember);
}
.vector-menu-tabs li.selected a { color: var(--nl-text); font-weight: 600; }
.vector-menu-tabs li.icon a { font-weight: 600; }

/* search */
#p-search { display: flex; align-items: center; padding-bottom: 8px; }
#p-search form { display: flex; }
#p-search input.nl-search-input {
width: 200px;
background: var(--nl-bg);
border: 1px solid var(--nl-border-2);
border-right: none;
color: var(--nl-text);
padding: 6px 10px;
font-size: 12.5px;
font-family: var(--nl-body);
}
#p-search input.nl-search-input::placeholder { color: var(--nl-text-faint); }
#p-search input.nl-search-input:focus { outline: none; border-color: var(--nl-ember); }
#p-search button.nl-search-go {
background: var(--nl-surface-3);
border: 1px solid var(--nl-border-2);
color: var(--nl-ember);
padding: 0 11px;
cursor: pointer;
}
#p-search button.nl-search-go:hover { background: var(--nl-surface-2); color: var(--nl-ember-bright); }

/* =====================================================================
THEME SECTION — article content (reusable in real MediaWiki)
===================================================================== */
.mw-body {
padding: 18px 26px 40px;
}

/* first heading + sub */
#firstHeading, .firstHeading {
font-family: var(--nl-body);
font-weight: 600;
font-size: 30px;
line-height: 1.15;
color: var(--nl-text);
margin: 0 0 2px;
padding-bottom: 8px;
border-bottom: 1px solid var(--nl-border-2);
position: relative;
}
#firstHeading::after {
content: "";
position: absolute;
left: 0; bottom: -1px;
width: 120px; height: 2px;
background: linear-gradient(90deg, var(--nl-ember), transparent);
}
#siteSub {
font-size: 11.5px;
color: var(--nl-text-faint);
font-style: italic;
margin: 6px 0 14px;
}
#contentSub { font-size: 12px; color: var(--nl-text-dim); margin: -8px 0 12px; }

/* paragraphs, lists */
.mw-parser-output { max-width: 100%; }
.mw-parser-output p { margin: 0 0 12px; text-wrap: pretty; }
.mw-parser-output ul, .mw-parser-output ol { margin: 0 0 12px; padding-left: 26px; }
.mw-parser-output li { margin: 3px 0; }
.mw-parser-output li::marker { color: var(--nl-ember-deep); }
.mw-parser-output b, .mw-parser-output strong { color: #f3ead9; }

/* section headings */
.mw-parser-output h2 {
font-family: var(--nl-body);
font-weight: 600;
font-size: 21px;
color: var(--nl-text);
margin: 26px 0 12px;
padding-bottom: 5px;
border-bottom: 1px solid var(--nl-border-2);
}
.mw-parser-output h2 .mw-headline-marker {
color: var(--nl-ember);
margin-right: 9px;
font-family: var(--nl-display);
}
.mw-parser-output h3 {
font-weight: 700;
font-size: 16px;
color: var(--nl-ember-bright);
margin: 20px 0 8px;
letter-spacing: .01em;
}
.mw-parser-output h4 { font-size: 14px; color: var(--nl-text); margin: 14px 0 6px; }

.mw-editsection { font-size: 11px; font-weight: 400; }
.mw-editsection, .mw-editsection a { color: var(--nl-text-faint); }
.mw-editsection a:hover { color: var(--nl-ember); }

/* hatnote / dablink */
.hatnote, .dablink {
font-style: italic;
color: var(--nl-text-dim);
font-size: 12.5px;
padding: 4px 0 4px 16px;
border-left: 2px solid var(--nl-border-2);
margin: 0 0 14px;
}

/* inscription blockquote (lore) */
.mw-parser-output blockquote, .nl-inscription {
margin: 16px 0;
padding: 16px 22px;
background:
linear-gradient(180deg, rgba(232,144,47,.05), transparent),
var(--nl-surface);
border: 1px solid var(--nl-border);
border-left: 3px solid var(--nl-ember);
color: var(--nl-text);
font-size: 14.5px;
font-style: italic;
position: relative;
}
.nl-inscription cite {
display: block;
margin-top: 8px;
font-size: 12px;
font-style: normal;
color: var(--nl-text-faint);
letter-spacing: .04em;
}
.nl-inscription cite::before { content: "— "; }

/* ---------------------------------------------------------------------
INFOBOX
--------------------------------------------------------------------- */
.infobox {
float: right;
clear: right;
width: 290px;
margin: 4px 0 16px 22px;
background: var(--nl-surface);
border: 1px solid var(--nl-border-2);
box-shadow: var(--nl-shadow-lg);
font-size: 12.5px;
position: relative;
}
.infobox::before {
content: "";
position: absolute; inset: 0;
border: 1px solid rgba(232,144,47,.08);
pointer-events: none;
}
.infobox-title, .infobox > caption, .infobox .nl-ib-title {
display: block;
font-family: var(--nl-display);
font-weight: 700;
font-size: 18px;
letter-spacing: .04em;
text-align: center;
color: var(--nl-ember);
background: linear-gradient(180deg, var(--nl-surface-3), var(--nl-surface));
border-bottom: 2px solid var(--nl-ember-deep);
padding: 11px 12px 12px;
text-shadow: 0 1px 0 #000;
}
.infobox .nl-ib-subtitle {
display:block; text-align:center; font-family: var(--nl-body);
font-size: 11px; letter-spacing:.16em; text-transform: uppercase;
color: var(--nl-text-faint); padding: 0 0 9px; margin-top:-4px;
background: var(--nl-surface);
}
.infobox .nl-ib-image {
margin: 0; padding: 12px 12px 6px; text-align: center;
background: var(--nl-surface);
}
.infobox .nl-ib-caption {
font-size: 11px; color: var(--nl-text-dim); font-style: italic;
padding: 4px 12px 10px; text-align: center; background: var(--nl-surface);
}
.infobox table { width: 100%; border-collapse: collapse; }
.infobox .nl-ib-section {
font-family: var(--nl-display);
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--nl-text); text-align: center;
background: var(--nl-surface-3);
border-top: 1px solid var(--nl-border-2);
border-bottom: 1px solid var(--nl-border);
padding: 6px 8px;
}
.infobox th[scope="row"], .infobox .nl-ib-label {
text-align: left; vertical-align: top;
color: var(--nl-text-dim); font-weight: 600;
padding: 6px 8px 6px 12px;
width: 42%;
border-bottom: 1px solid var(--nl-border);
background: rgba(0,0,0,.12);
}
.infobox td, .infobox .nl-ib-data {
padding: 6px 12px 6px 8px;
border-bottom: 1px solid var(--nl-border);
color: var(--nl-text);
}
.infobox tr:last-child th, .infobox tr:last-child td { border-bottom: none; }
.nl-stat-bar {
display: inline-block; height: 7px; width: 64px;
background: var(--nl-bg); border: 1px solid var(--nl-border-2);
vertical-align: middle; margin-left: 6px; position: relative;
}
.nl-stat-bar > i {
position: absolute; left: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, var(--nl-ember-deep), var(--nl-ember));
display: block;
}

/* image placeholder frame */
.nl-frame {
position: relative;
display: inline-block;
background:
radial-gradient(80% 70% at 50% 40%, rgba(232,144,47,.10), transparent 70%),
repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 8px, transparent 8px 16px),
var(--nl-bg);
border: 1px solid var(--nl-border-2);
color: var(--nl-text-faint);
}
.nl-frame::before, .nl-frame::after {
content:""; position:absolute; width:12px; height:12px; border:1px solid var(--nl-ember);
}
.nl-frame::before { top:5px; left:5px; border-right:none; border-bottom:none; }
.nl-frame::after { bottom:5px; right:5px; border-left:none; border-top:none; }
.nl-frame .nl-frame-label {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.nl-frame .nl-frame-glyph { font-size: 30px; opacity: .5; line-height: 1; }
.nl-frame .nl-frame-dim { font-size: 9.5px; color: var(--nl-text-faint); letter-spacing:.1em; }

/* thumbs in body */
.thumb, .nl-thumb {
border: 1px solid var(--nl-border-2);
background: var(--nl-surface);
padding: 6px;
box-shadow: var(--nl-shadow);
}
.thumb.tright, .nl-thumb.tright { float: right; clear: right; margin: 4px 0 12px 18px; }
.thumb.tleft, .nl-thumb.tleft { float: left; clear: left; margin: 4px 18px 12px 0; }
.thumbcaption, .nl-thumb-caption {
font-size: 11px; color: var(--nl-text-dim); font-style: italic;
padding: 6px 2px 0; line-height: 1.4;
}

/* ---------------------------------------------------------------------
TABLE OF CONTENTS
--------------------------------------------------------------------- */
.toc, #toc {
display: inline-block;
min-width: 240px;
background: var(--nl-surface);
border: 1px solid var(--nl-border-2);
padding: 12px 18px 14px;
margin: 4px 0 16px;
box-shadow: var(--nl-shadow);
}
.toc .toctitle { text-align: left; }
.toc h2, .toc .toctitle h2 {
font-family: var(--nl-display);
font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
color: var(--nl-ember); border: none; margin: 0 0 8px; padding: 0;
}
.toc ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.toc ul ul { margin-left: 16px; }
.toc li { margin: 3px 0; }
.toc .tocnumber { color: var(--nl-ember-deep); margin-right: 8px; font-variant-numeric: tabular-nums; }
.toc a { color: var(--nl-link); }
.toc a:hover { color: var(--nl-ember-bright); }

/* ---------------------------------------------------------------------
WIKITABLES
--------------------------------------------------------------------- */
.wikitable {
border-collapse: collapse;
margin: 4px 0 16px;
background: var(--nl-surface);
border: 1px solid var(--nl-border-2);
font-size: 12.5px;
box-shadow: var(--nl-shadow);
}
.wikitable caption {
font-family: var(--nl-display);
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--nl-ember); text-align: left; padding: 0 0 6px;
}
.wikitable > * > tr > th, .wikitable th {
background: var(--nl-surface-3);
color: var(--nl-text);
font-weight: 600;
text-align: left;
padding: 7px 12px;
border: 1px solid var(--nl-border-2);
border-bottom: 2px solid var(--nl-border-bright);
}
.wikitable > * > tr > td, .wikitable td {
padding: 6px 12px;
border: 1px solid var(--nl-border);
color: var(--nl-text);
vertical-align: top;
}
.wikitable tbody tr:nth-child(even) td { background: rgba(0,0,0,.16); }
.wikitable tbody tr:hover td { background: var(--nl-surface-2); }
.wikitable th[scope="row"] { background: var(--nl-surface-2); color: var(--nl-text-dim); }
.nl-rate-good { color: var(--nl-good); font-weight: 600; }
.nl-rate-mid { color: var(--nl-ember); font-weight: 600; }
.nl-rate-poor { color: var(--nl-text-faint); }
.nl-rate-none { color: var(--nl-blood); }
.nl-num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------------------------------------------------------------
MESSAGE / AMBOX (stub, spoiler, construction)
--------------------------------------------------------------------- */
.ambox, .nl-mbox {
display: flex; align-items: flex-start; gap: 12px;
background: var(--nl-surface);
border: 1px solid var(--nl-border-2);
border-left: 4px solid var(--nl-ember);
padding: 11px 16px;
margin: 0 0 16px;
font-size: 12.5px;
color: var(--nl-text-dim);
}
.nl-mbox .nl-mbox-icon { font-size: 18px; line-height: 1.2; color: var(--nl-ember); }
.nl-mbox.nl-mbox-spoiler { border-left-color: var(--nl-blood); }
.nl-mbox.nl-mbox-spoiler .nl-mbox-icon { color: var(--nl-blood); }
.nl-mbox strong { color: var(--nl-text); }

/* attraction requirement chips */
.nl-reqs { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.nl-req {
display: flex; align-items: center; gap: 10px;
background: var(--nl-surface);
border: 1px solid var(--nl-border-2);
border-top: 2px solid var(--nl-ember-deep);
padding: 10px 14px; min-width: 180px;
box-shadow: var(--nl-shadow);
}
.nl-req .nl-req-icon {
width: 34px; height: 34px; flex: none;
display: flex; align-items: center; justify-content: center;
background: var(--nl-bg); border: 1px solid var(--nl-border-2);
font-size: 18px; color: var(--nl-ember);
}
.nl-req .nl-req-name { color: var(--nl-text); font-weight: 600; }
.nl-req .nl-req-meta { font-size: 11px; color: var(--nl-text-faint); }

/* ---------------------------------------------------------------------
GALLERY
--------------------------------------------------------------------- */
.gallery { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 16px; list-style: none; padding: 0; }
.gallery .gallerybox { width: 165px; }
.gallery .gallerytext { font-size: 11px; color: var(--nl-text-dim); font-style: italic; padding-top: 5px; text-align: center; }

/* ---------------------------------------------------------------------
CATEGORIES + NAVBOX + FOOTER
--------------------------------------------------------------------- */
#catlinks, .catlinks {
clear: both;
margin: 28px 0 0;
padding: 10px 14px;
background: var(--nl-surface);
border: 1px solid var(--nl-border-2);
font-size: 12px;
}
#catlinks ul { display: inline-flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
#catlinks li {
border-left: 1px solid var(--nl-border-2);
padding-left: 6px;
}
#catlinks li:first-child { border-left: none; padding-left: 0; }
#catlinks .nl-cat-label { color: var(--nl-text-faint); font-weight: 600; margin-right: 6px; }

.navbox {
clear: both;
margin: 18px 0 0;
border: 1px solid var(--nl-border-2);
background: var(--nl-surface);
font-size: 12px;
}
.navbox-title {
font-family: var(--nl-display);
letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px;
color: var(--nl-ember); text-align: center;
background: linear-gradient(180deg, var(--nl-surface-3), var(--nl-surface));
border-bottom: 1px solid var(--nl-border-bright);
padding: 8px;
}
.navbox-row { display: flex; border-top: 1px solid var(--nl-border); }
.navbox-row:first-of-type { border-top: none; }
.navbox-group {
flex: none; width: 130px;
background: var(--nl-surface-2);
border-right: 1px solid var(--nl-border);
color: var(--nl-text-dim); font-weight: 600;
padding: 7px 12px; font-size: 11.5px;
display: flex; align-items: center;
}
.navbox-list { padding: 7px 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.navbox-list a { white-space: nowrap; }

.printfooter { display: none; }

#footer {
clear: both;
margin-top: 0;
padding: 18px 26px 30px;
background: var(--nl-bg-2);
border-top: 1px solid var(--nl-border);
color: var(--nl-text-faint);
font-size: 11.5px;
}
#footer ul { list-style: none; margin: 0 0 8px; padding: 0; }
#footer li { margin: 3px 0; }
#footer a { color: var(--nl-text-dim); }
#footer a:hover { color: var(--nl-ember); }
.nl-footer-licence { color: var(--nl-text-faint); }
.nl-footer-brand { font-family: var(--nl-display); color: var(--nl-ember-deep); letter-spacing: .1em; }

/* ---------------------------------------------------------------------
misc
--------------------------------------------------------------------- */
/* (reference content is shown immediately — no entrance fade) */

hr { border: none; border-top: 1px solid var(--nl-border-2); margin: 18px 0; }
code, kbd { font-family: var(--nl-mono); background: var(--nl-bg); border: 1px solid var(--nl-border); padding: 1px 5px; font-size: 12px; color: var(--nl-soul); }
sup.reference { font-size: 10px; }
sup.reference a { color: var(--nl-soul); }
.references { font-size: 11.5px; color: var(--nl-text-dim); }
.references li { margin: 4px 0; }

/* =====================================================================
PARCHMENT CONTENT SKIN (reusable)
---------------------------------------------------------------------
Turns the reading surface into aged vellum with sepia ink and rust
rubrication, while the chrome (rail, tabs, header, footer) stays dark
stone — an iron-bound bestiary page. Implemented by re-scoping the
theme tokens to .mw-body, so every component (infobox, wikitable, toc,
navbox, mboxes…) inherits the parchment palette with no rule rewrites.
To revert to the all-stone look, delete this whole block.
===================================================================== */
.mw-body {
/* paper + ink */
--nl-page: #e9dcbb;
--nl-bg: #d3c094; /* recessed: stat-bar track, frame interior */
--nl-bg-2: #ddcca3;
--nl-surface: #e3d3ad; /* cards: infobox, toc, boxes */
--nl-surface-2: #d9c89c; /* zebra / hover */
--nl-surface-3: #cdb887; /* header bands */

--nl-border: #c1ad82;
--nl-border-2: #ad9461;
--nl-border-bright:#8f6f3e;

--nl-ember: #a8431a; /* rust rubrication */
--nl-ember-bright: #c95e22;
--nl-ember-deep: #7a2f0e;
--nl-soul: #386c63; /* aged teal ink (external links) */
--nl-blood: #b22a16; /* red links pop against umber */
--nl-good: #5e7a2a;

--nl-text: #33240f; /* sepia ink */
--nl-text-dim: #6b5331;
--nl-text-faint: #8c7349;

--nl-link: #8a3a12; /* burnt-umber links */
--nl-link-visited: #6e4a2a;
--nl-link-hover: #c95e22;

--nl-shadow: 0 1px 3px rgba(74,50,20,.25);
--nl-shadow-lg: 0 6px 18px rgba(74,50,20,.30);

/* re-resolve inherited body text to sepia ink (root set it light) */
color: var(--nl-text);

/* the sheet itself: warm paper + corner staining + grain */
background-color: var(--nl-page);
background-image:
radial-gradient(60% 50% at 0% 0%, rgba(120,86,40,.16), transparent 60%),
radial-gradient(55% 45% at 100% 12%, rgba(120,86,40,.13), transparent 60%),
radial-gradient(70% 60% at 88% 100%, rgba(96,66,28,.15), transparent 62%),
radial-gradient(50% 40% at 8% 92%, rgba(96,66,28,.12), transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
border-top: 1px solid #2a2017;
box-shadow: inset 0 10px 22px -14px rgba(60,40,16,.45);
}

/* legibility / paper-tuned tweaks */
.mw-body #firstHeading { text-shadow: 0 1px 0 rgba(255,250,235,.4); }
.mw-body .infobox .nl-ib-title { text-shadow: 0 1px 0 rgba(255,250,235,.5); }
.mw-body .nl-wordmark { } /* untouched — lives in dark rail */
.mw-body code, .mw-body kbd { color: var(--nl-ember-deep); }
.mw-body .mw-parser-output b, .mw-body .mw-parser-output strong { color: #20150a; }
.mw-body p, .mw-body li, .mw-body td, .mw-body dd { color: var(--nl-text); }
.mw-body .nl-stat-bar { border-color: var(--nl-border-2); }

/* active tab connects to the parchment page */
.vector-menu-tabs li.selected {
background: #e9dcbb;
border-color: #8f6f3e;
border-top: 2px solid #a8431a;
margin-bottom: -1px;
}
.vector-menu-tabs li.selected a { color: #33240f; }

/* responsive: collapse rail */
@media (max-width: 860px) {
.nl-grid { grid-template-columns: 1fr; }
#mw-panel { display: none; }
.infobox { float: none; width: auto; margin: 0 0 16px; }
}

← Older revision		Revision as of 11:01, 4 June 2026
Line 9:		Line 9:
	* [https://www.mediawiki.org/wiki/Special:MyLanguage/Localisation#Translation_resources Localise MediaWiki for your language]		* [https://www.mediawiki.org/wiki/Special:MyLanguage/Localisation#Translation_resources Localise MediaWiki for your language]
	* [https://www.mediawiki.org/wiki/Special:MyLanguage/Manual:Combating_spam Learn how to combat spam on your wiki]		* [https://www.mediawiki.org/wiki/Special:MyLanguage/Manual:Combating_spam Learn how to combat spam on your wiki]

			test

The Netherlord Compendium - Recent changes [en]

MediaWiki:Vector.css

Main Page