MediaWiki:Common.css: Difference between revisions

Revision as of 00:38, 27 October 2026

/* =====================================================================
   New Bradford Wiki - "Renaissance Dark" theme
   Target skin: Vector (2022) - the wiki default. Most colours are driven
   through Codex design tokens (CSS custom properties) so that Special
   pages, the editor, dialogs and menus pick up the theme automatically.
   Original work for New Bradford.
   ===================================================================== */

/* Heading font (must stay the first statement in this page) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ---------------------------------------------------------------------
   1. Palette / design tokens
   Applied to day, night and "automatic" modes alike, so the wiki is
   always dark (Vector's own night-mode token sets would otherwise win).
   --------------------------------------------------------------------- */
:root,
html.skin-theme-clientpref-day,
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-os {
	/* New Bradford palette */
	--nb-page: #17130f;          /* outer page / header background   */
	--nb-content: #211b15;       /* article sheet                    */
	--nb-raised: #2b231b;        /* menus, table headers, boxes      */
	--nb-raised-2: #352b20;      /* hover surfaces                   */
	--nb-input: #120f0c;         /* text fields / edit box           */
	--nb-border: #4a3b2a;        /* hairlines                        */
	--nb-border-strong: #6b5434; /* bronze borders                   */
	--nb-text: #e3d6bd;          /* parchment body text              */
	--nb-text-muted: #a8977a;    /* secondary text                   */
	--nb-gold: #d4a94f;          /* headings                         */
	--nb-link: #e0a441;          /* links                            */
	--nb-link-hover: #f3c66b;    /* link hover                       */
	--nb-visited: #b88a5a;       /* visited links (bronze)           */
	--nb-new: #d9705a;           /* red / new-page links             */
	--nb-new-visited: #b8604f;
	--nb-oxblood: #5a1f24;       /* accent band / selected tab       */
	--nb-oxblood-light: #7a2c31;

	/* Codex tokens used by Vector 2022 and core UI */
	--background-color-base: var(--nb-content);
	--background-color-base-fixed: var(--nb-content);
	--background-color-neutral: var(--nb-raised);
	--background-color-neutral-subtle: #261f18;
	--background-color-interactive: var(--nb-raised);
	--background-color-interactive-subtle: #261f18;
	--background-color-interactive-subtle--hover: var(--nb-raised-2);
	--background-color-interactive-subtle--active: var(--nb-raised-2);
	--background-color-disabled: #3a3229;
	--background-color-disabled-subtle: #2a241e;
	--background-color-inverted: var(--nb-text);
	--background-color-progressive: #a8741f;
	--background-color-progressive--hover: #c08a2c;
	--background-color-progressive--active: #8f6119;
	--background-color-progressive-subtle: #33281a;
	--background-color-destructive: #a33a2c;
	--background-color-destructive-subtle: #3a1e1a;
	--background-color-error-subtle: #3a1e1a;
	--background-color-warning-subtle: #3a3016;
	--background-color-success-subtle: #1c3020;
	--background-color-notice-subtle: #2b2620;
	--background-color-backdrop-light: rgba(23, 19, 15, 0.65);
	--background-color-backdrop-dark: rgba(0, 0, 0, 0.65);

	--color-base: var(--nb-text);
	--color-base--hover: #f1e6cf;
	--color-emphasized: #f6ecd8;
	--color-subtle: var(--nb-text-muted);
	--color-placeholder: #8a7b62;
	--color-disabled: #7a6d58;
	--color-disabled-emphasized: #9a8b72;
	--color-inverted: #17130f;
	--color-inverted-fixed: #17130f;
	--color-progressive: var(--nb-link);
	--color-progressive--hover: var(--nb-link-hover);
	--color-progressive--active: #c48a2a;
	--color-progressive--focus: var(--nb-link-hover);
	--color-visited: var(--nb-visited);
	--color-destructive: #e07a64;
	--color-destructive--hover: #f0907a;
	--color-error: #e07a64;
	--color-warning: #e0b44f;
	--color-success: #8cc58a;
	--color-notice: var(--nb-text);
	--color-link-red: var(--nb-new);
	--color-link-red--hover: #ec8b74;
	--color-link-red--active: #c05c48;
	--color-link-red--visited: var(--nb-new-visited);
	--color-link-red--visited--hover: #d0705c;

	--border-color-base: var(--nb-border-strong);
	--border-color-subtle: var(--nb-border);
	--border-color-muted: var(--nb-border);
	--border-color-interactive: var(--nb-border-strong);
	--border-color-interactive--hover: #8a6c40;
	--border-color-emphasized: #a08050;
	--border-color-progressive: #c08a2c;
	--border-color-progressive--hover: var(--nb-link-hover);
	--border-color-progressive--focus: var(--nb-link-hover);
	--border-color-divider: var(--nb-border);
	--border-color-disabled: #4a4036;
	--box-shadow-color-base: #000;
	--box-shadow-color-progressive--focus: var(--nb-link-hover);
	--outline-color-progressive--focus: var(--nb-link-hover);

	color-scheme: dark;
}

/* ---------------------------------------------------------------------
   2. Page frame
   --------------------------------------------------------------------- */
html,
body {
	background-color: var(--nb-page);
	color: var(--nb-text);
}

.skin-vector-2022 .mw-page-container {
	background-color: var(--nb-page);
}

.skin-vector-2022 .vector-header-container,
.skin-vector-2022 .mw-header {
	background-color: var(--nb-page);
}

.skin-vector-2022 .vector-header-container {
	border-bottom: 2px solid var(--nb-oxblood);
}

/* Article sheet */
.skin-vector-2022 .mw-body,
.skin-vector-2022 .mw-content-container,
.skin-vector-2022 .vector-body {
	background-color: var(--nb-content);
	color: var(--nb-text);
}

.skin-vector-2022 .mw-content-container {
	border-left: 1px solid var(--nb-border);
	border-right: 1px solid var(--nb-border);
	padding-left: 1.25em;
	padding-right: 1.25em;
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
}

.mw-body-content {
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-size: 1.05em;
	line-height: 1.65;
}

/* Sticky header */
.skin-vector-2022 .vector-sticky-header {
	background-color: var(--nb-page);
	border-bottom: 2px solid var(--nb-oxblood);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------
   3. Headings
   --------------------------------------------------------------------- */
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6,
.mw-first-heading {
	font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
	color: var(--nb-gold);
	letter-spacing: 0.02em;
}

.mw-first-heading,
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2 {
	border-bottom: 1px solid var(--nb-border-strong);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.mw-body-content h3,
.mw-body-content h4 {
	color: #c9a265;
}

.mw-body-content h5,
.mw-body-content h6 {
	color: var(--nb-text-muted);
}

.mw-editsection,
.mw-editsection a {
	font-family: sans-serif;
}

/* ---------------------------------------------------------------------
   4. Links
   --------------------------------------------------------------------- */
a,
.mw-body-content a:not([role='button']),
.mw-parser-output a.external,
.mw-parser-output a.extiw {
	color: var(--nb-link);
}

a:hover,
.mw-body-content a:not([role='button']):hover {
	color: var(--nb-link-hover);
}

a:visited,
.mw-body-content a:not([role='button']):visited,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw:visited {
	color: var(--nb-visited);
}

a.new,
a.new:visited,
.mw-body-content a.new:not([role='button']),
.vector-menu-tabs .new a {
	color: var(--nb-new);
}

.mw-body-content a.new:not([role='button']):visited {
	color: var(--nb-new-visited);
}

a.mw-selflink,
a.mw-selflink:hover {
	color: var(--nb-text);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   5. Logo (fallback until $wgLogos is set in LocalSettings.php)
   Replaces the "change your logo" placeholder icon with File:NB_Logo.png.
   Delete this block once $wgLogos points at the real logo.
   --------------------------------------------------------------------- */
.skin-vector-2022 .mw-logo .mw-logo-icon {
	display: none;
}

.skin-vector-2022 .mw-logo::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	margin-right: 10px;
	background: url('/wiki/index.php?title=Special:Redirect/file/NB_Logo.png&width=100') center / contain no-repeat;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.skin-vector-2022 .mw-logo-wordmark {
	font-family: 'Cinzel', Georgia, serif;
	font-size: 1.35em;
	font-weight: 700;
	color: var(--nb-gold);
	letter-spacing: 0.05em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Keep the logo/wordmark from being colour-inverted in night mode */
.mw-logo .skin-invert,
.mw-logo.skin-invert {
	filter: none;
}

/* Legacy Vector (only if a user picks it in Preferences) */
.skin-vector-legacy #p-logo a.mw-wiki-logo {
	background-image: url('/wiki/index.php?title=Special:Redirect/file/NB_Logo.png&width=270');
	background-size: 135px auto;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------
   6. Header controls: search, tabs, dropdown menus, main menu, TOC
   --------------------------------------------------------------------- */
.skin-vector-2022 .cdx-text-input__input,
.skin-vector-2022 .cdx-search-input .cdx-text-input__input,
.skin-vector-2022 #searchInput {
	background-color: var(--nb-input);
	color: var(--nb-text);
	border-color: var(--nb-border-strong);
}

.skin-vector-2022 .cdx-text-input__input:focus {
	border-color: var(--nb-link-hover);
	box-shadow: inset 0 0 0 1px var(--nb-link-hover);
}

.cdx-menu,
.cdx-typeahead-search .cdx-menu {
	background-color: var(--nb-raised);
	border-color: var(--nb-border-strong);
}

.cdx-menu-item--highlighted {
	background-color: var(--nb-raised-2);
}

/* Page tabs (Article / Talk / Read / Edit / History) */
.skin-vector-2022 .vector-menu-tabs .mw-list-item a,
.skin-vector-2022 .vector-menu-tabs .mw-list-item a:visited {
	color: var(--nb-link);
}

.skin-vector-2022 .vector-menu-tabs .mw-list-item.selected a,
.skin-vector-2022 .vector-menu-tabs .mw-list-item.selected a:visited {
	color: var(--nb-gold);
	border-bottom-color: var(--nb-gold);
}

.skin-vector-2022 .vector-menu-tabs .mw-list-item.new a,
.skin-vector-2022 .vector-menu-tabs .mw-list-item.new a:visited {
	color: var(--nb-new);
}

.skin-vector-2022 .vector-page-toolbar,
.skin-vector-2022 .vector-page-titlebar {
	border-color: var(--nb-border);
}

/* Dropdown panels (user menu, Tools, More, Appearance) */
.vector-dropdown .vector-dropdown-content,
.vector-menu-dropdown .vector-menu-content {
	background-color: var(--nb-raised);
	border: 1px solid var(--nb-border-strong);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
}

/* Pinned / unpinned side panels: main menu, page tools, appearance, TOC */
.vector-main-menu,
.vector-page-tools,
.vector-appearance,
.vector-pinnable-element {
	background-color: transparent;
}

.vector-pinned-container .vector-pinnable-element,
.vector-dropdown .vector-pinnable-element {
	color: var(--nb-text);
}

.vector-pinnable-header-label,
.vector-menu-heading,
.vector-toc .vector-pinnable-header-label {
	font-family: 'Cinzel', Georgia, serif;
	color: var(--nb-gold);
	letter-spacing: 0.04em;
}

.vector-main-menu .vector-menu-content-list .mw-list-item a,
.vector-page-tools .mw-list-item a {
	color: var(--nb-link);
}

.vector-main-menu .vector-menu-content-list .mw-list-item a:hover,
.vector-page-tools .mw-list-item a:hover {
	color: var(--nb-link-hover);
}

.vector-toc .vector-toc-link,
.vector-toc .vector-toc-link:visited {
	color: var(--nb-link);
}

.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link {
	color: var(--nb-gold);
	font-weight: bold;
}

.vector-toc .vector-toc-numb {
	color: var(--nb-text-muted);
}

/* Classic in-article TOC (__TOC__ / other skins) */
#toc,
.toc {
	background-color: var(--nb-raised);
	border: 1px solid var(--nb-border-strong);
	color: var(--nb-text);
}

.toctitle h2 {
	border: 0;
}

/* Icon buttons: Vector 2022 icons are CSS masks coloured by --color-base,
   so they follow the palette above automatically. */
.skin-vector-2022 .cdx-button--weight-quiet:hover {
	background-color: var(--nb-raised-2);
}

/* ---------------------------------------------------------------------
   7. Content elements: tables, thumbs, code, notices, categories
   --------------------------------------------------------------------- */
.wikitable,
table.wikitable {
	background-color: var(--nb-raised);
	color: var(--nb-text);
	border: 1px solid var(--nb-border-strong);
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
	border: 1px solid var(--nb-border-strong);
}

.wikitable > tr > th,
.wikitable > * > tr > th {
	background-color: var(--nb-oxblood);
	color: #f1e1bd;
	font-family: 'Cinzel', Georgia, serif;
}

.wikitable > tr:nth-child(even) > td,
.wikitable > * > tr:nth-child(even) > td {
	background-color: #261f18;
}

.wikitable caption {
	color: var(--nb-gold);
	font-family: 'Cinzel', Georgia, serif;
}

/* Thumbnails and captions (both old and new MediaWiki markup) */
.thumbinner,
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'] {
	background-color: var(--nb-raised);
	border: 1px solid var(--nb-border-strong);
}

figure[typeof~='mw:File/Thumb'] > figcaption,
figure[typeof~='mw:File/Frame'] > figcaption,
.thumbcaption {
	background-color: var(--nb-raised);
	color: var(--nb-text-muted);
	font-style: italic;
}

.thumbimage,
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
	background-color: var(--nb-page);
	border-color: var(--nb-border);
}

/* Code */
code,
pre,
.mw-code,
.mw-highlight pre {
	background-color: var(--nb-input);
	color: #e8d9b5;
	border: 1px solid var(--nb-border);
}

code {
	padding: 1px 4px;
}

hr {
	background-color: var(--nb-border-strong);
	border-color: var(--nb-border-strong);
}

blockquote {
	border-left: 3px solid var(--nb-border-strong);
	color: var(--nb-text-muted);
}

/* Categories box */
.catlinks {
	background-color: var(--nb-raised);
	border: 1px solid var(--nb-border-strong);
	color: var(--nb-text);
}

/* Message boxes */
.mw-message-box,
.cdx-message,
.messagebox,
.successbox,
.warningbox,
.errorbox {
	color: var(--nb-text);
}

/* Diff view */
.diff-addedline,
.diff-deletedline,
.diff-context {
	background-color: var(--nb-input);
	color: var(--nb-text);
}

.diff-addedline .diffchange {
	background-color: #2e4a2a;
}

.diff-deletedline .diffchange {
	background-color: #5a2a24;
}

/* ---------------------------------------------------------------------
   8. Forms and the editor
   --------------------------------------------------------------------- */
input,
select,
textarea,
.mw-editfont-monospace,
#wpTextbox1,
.oo-ui-inputWidget-input,
.oo-ui-dropdownWidget-handle,
.cdx-select,
.cdx-select-vue__handle,
.cdx-text-area__textarea {
	background-color: var(--nb-input);
	color: var(--nb-text);
	border-color: var(--nb-border-strong);
}

input::placeholder,
textarea::placeholder {
	color: #8a7b62;
}

#wpTextbox1 {
	caret-color: var(--nb-link-hover);
}

.editOptions {
	background-color: var(--nb-raised);
	border-color: var(--nb-border-strong);
	color: var(--nb-text);
}

/* Legacy wikitext editor toolbar (WikiEditor) */
.wikiEditor-ui,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .group {
	background-color: var(--nb-raised);
	border-color: var(--nb-border-strong);
	color: var(--nb-text);
}

/* OOUI widgets (Special pages, preferences, upload) */
.oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label,
.oo-ui-labelElement-label,
.oo-ui-fieldLayout-header {
	color: var(--nb-text);
}

.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
	background-color: var(--nb-raised);
	color: var(--nb-text);
	border-color: var(--nb-border-strong);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
	background-color: var(--nb-raised-2);
	color: var(--nb-link-hover);
}

.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	background-color: #a8741f;
	border-color: #a8741f;
	color: #17130f;
}

.oo-ui-menuSelectWidget,
.oo-ui-popupWidget-popup,
.oo-ui-dialog-content > .oo-ui-window-body,
.oo-ui-window-head,
.oo-ui-window-foot,
.oo-ui-processDialog-navigation {
	background-color: var(--nb-raised);
	color: var(--nb-text);
}

.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
	background-color: var(--nb-raised-2);
	color: var(--nb-text);
}

.oo-ui-iconElement-icon:not(.oo-ui-image-invert):not(.oo-ui-image-progressive):not(.oo-ui-image-destructive),
.oo-ui-indicatorElement-indicator {
	filter: invert(0.85) sepia(0.3);
}

/* Special pages: generic tables and fieldsets */
fieldset {
	border-color: var(--nb-border-strong);
}

legend {
	color: var(--nb-gold);
}

table.mw-datatable,
table.mw-specialpages-table,
table.mw-prefs {
	background-color: var(--nb-raised);
	color: var(--nb-text);
}

table.mw-datatable th,
table.mw-datatable td {
	border-color: var(--nb-border-strong);
}

table.mw-datatable th {
	background-color: var(--nb-oxblood);
	color: #f1e1bd;
}

table.mw-datatable tr:hover td {
	background-color: var(--nb-raised-2);
}

/* ---------------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------------- */
.skin-vector-2022 .mw-footer,
#footer {
	background-color: var(--nb-page);
	color: var(--nb-text-muted);
	border-top: 2px solid var(--nb-oxblood);
}

.mw-footer li,
#footer li {
	color: var(--nb-text-muted);
}

.mw-footer a,
#footer a {
	color: var(--nb-link);
}

/* Powered-by badges are white; soften them on the dark background */
#footer-icons img,
.mw-footer .mw-footer-icons img,
.mw-footer #footer-icons img {
	opacity: 0.75;
}

/* ---------------------------------------------------------------------
   10. Selection and scrollbars
   --------------------------------------------------------------------- */
::selection {
	background-color: #6b4a1a;
	color: #fff6e2;
}

html {
	scrollbar-color: var(--nb-border-strong) var(--nb-page);
}

/* Hide Vector 2022 Appearance menu for logged-out readers only (they have a Log in link on the page) */
body:has(#pt-login, #pt-login-2) #vector-appearance-pinned-container,
body:has(#pt-login, #pt-login-2) #vector-appearance-dropdown,
body:has(#pt-login, #pt-login-2) .vector-appearance-landmark { display: none !important; }

/* Hide View source tab for logged-out readers */
body:has(#pt-login, #pt-login-2) #ca-viewsource,
body:has(#pt-login, #pt-login-2) #ca-viewsource-sticky-header { display: none !important; }

/* Bestiary: parchment background filling the creature image cell so dark sprites stand out */
.creature-infobox td.creature-image {
  background: radial-gradient(ellipse at center, #d9c79f 0%, #b39a6b 55%, #6e5a3a 100%) !important;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.4);
  padding: 14px 10px !important;
  color: #3a2c18 !important;
}