MediaWiki:Common.css: Difference between revisions

Latest revision as of 22:18, 14 October 2026

/* ═══════════════════════════════════════════════════════
   Wildaria Wiki theme, matched to wildaria.net
   Teal background, white text, bold uppercase headings,
   system font stack. Works by overriding Vector 2022's
   Codex design tokens, so most UI follows automatically.
   ═══════════════════════════════════════════════════════ */

:root,
html.skin-theme-clientpref-day,
html.skin-theme-clientpref-os {
	/* wildaria.net palette */
	--wd-teal:        #337987;   /* page */
	--wd-teal-deep:   #0f5458;   /* panels, header */
	--wd-teal-darker: #1a4548;   /* hover, table headers */
	--wd-teal-input:  #0c474b;   /* form fields */
	--wd-line:        rgba(255, 255, 255, 0.18);
	--wd-line-soft:   rgba(255, 255, 255, 0.10);
	--wd-gold:        #ffd166;   /* links */
	--wd-gold-hover:  #ffe39e;
	--wd-sans: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	/* Codex tokens used by Vector 2022 */
	--background-color-base: var(--wd-teal);
	--background-color-base-fixed: var(--wd-teal);
	--background-color-neutral: var(--wd-teal-darker);
	--background-color-neutral-subtle: var(--wd-teal-deep);
	--background-color-interactive: var(--wd-teal-darker);
	--background-color-interactive-subtle: var(--wd-teal-deep);
	--background-color-interactive--hover: #225a5e;
	--background-color-interactive--active: #1f5054;
	--background-color-interactive-subtle--hover: #225a5e;
	--background-color-interactive-subtle--active: #1f5054;
	--background-color-disabled: #4a8590;
	--background-color-disabled-subtle: #3d7f8b;
	--background-color-progressive: var(--wd-gold);
	--background-color-progressive--hover: var(--wd-gold-hover);
	--background-color-progressive--active: #f0c04f;
	--background-color-progressive-subtle: rgba(255, 209, 102, 0.14);
	--background-color-progressive-subtle--hover: rgba(255, 209, 102, 0.22);
	--background-color-progressive-subtle--active: rgba(255, 209, 102, 0.28);
	--background-color-backdrop-light: rgba(15, 84, 88, 0.65);
	--background-color-transparent: transparent;

	--color-base: #ffffff;
	--color-base--hover: #ffffff;
	--color-emphasized: #ffffff;
	--color-subtle: rgba(255, 255, 255, 0.78);
	--color-placeholder: rgba(255, 255, 255, 0.55);
	--color-disabled: rgba(255, 255, 255, 0.45);
	--color-inverted: var(--wd-teal-deep);
	--color-inverted-fixed: #ffffff;
	--color-progressive: var(--wd-gold);
	--color-progressive--hover: var(--wd-gold-hover);
	--color-progressive--active: #f0c04f;
	--color-progressive--focus: var(--wd-gold);
	--color-visited: #f2c35c;
	--color-link-red: #ffb3a7;          /* links to pages that don't exist yet */
	--color-link-red--hover: #ffd0c8;
	--color-link-red--visited: #f5a396;
	--color-destructive: #ffb3a7;
	--color-error: #ffb3a7;
	--color-success: #a6ef8f;
	--color-warning: #ffd166;

	--border-color-base: var(--wd-line);
	--border-color-subtle: var(--wd-line);
	--border-color-muted: var(--wd-line-soft);
	--border-color-interactive: rgba(255, 255, 255, 0.35);
	--border-color-progressive: var(--wd-gold);
	--border-color-progressive--focus: var(--wd-gold);
	--border-color-disabled: rgba(255, 255, 255, 0.2);
	--box-shadow-color-progressive--focus: var(--wd-gold);
	--outline-color-progressive--focus: var(--wd-gold);

	--font-family-system-sans: var(--wd-sans);
	--font-family-base: var(--wd-sans);
	--font-family-heading-main: var(--wd-sans);
	--font-family-serif: var(--wd-sans);
}

html, body {
	background-color: var(--wd-teal);
	color: #fff;
	font-family: var(--wd-sans);
}

/* ── Header bar (deep teal, full width, like the site nav) ── */
.vector-header-container {
	background-color: var(--wd-teal-deep);
	max-width: none;
	box-shadow: 0 1px 0 var(--wd-line);
}
.vector-header-container .vector-header,
.vector-header-container .vector-sticky-header {
	max-width: 1596px;
	margin: 0 auto;
}
.vector-sticky-header {
	background-color: var(--wd-teal-deep);
}
.mw-logo-wordmark {
	/* logo PNG already has its own outline; give it a little lift */
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
.mw-logo-icon {
	border-radius: 6px;
}

/* User links in the header: uppercase bold like the site nav */
.vector-user-links .vector-menu-content-list > li > a,
.vector-user-links a.mw-ui-button,
#pt-login-2 a, #pt-createaccount-2 a {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8125rem;
	color: #fff;
}

/* ── Typography ── */
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.mw-first-heading,
h1, h2 {
	font-family: var(--wd-sans);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #fff;
	border-bottom-color: var(--wd-line);
}
.mw-first-heading {
	font-size: 2rem;
}
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
	font-family: var(--wd-sans);
	font-weight: 800;
	color: #fff;
}
.mw-body-content h3 {
	text-transform: uppercase;
	font-size: 1.1rem;
}
.mw-body-content {
	font-size: 1rem;
	line-height: 1.65;
}
.mw-editsection,
.mw-editsection a {
	font-family: var(--wd-sans);
	text-transform: none;
	font-weight: 400;
}

/* ── Links ── */
a, .mw-body-content a:not(.new) {
	color: var(--wd-gold);
}
a:visited, .mw-body-content a:not(.new):visited {
	color: #f2c35c;
}
a:hover {
	color: var(--wd-gold-hover);
}
a.new, a.new:visited, .mw-body-content a.new {
	color: #ffb3a7;
}
a.external {
	color: var(--wd-gold);
}

/* ── Sidebar / table of contents panels ── */
.vector-pinnable-element,
.vector-main-menu,
.vector-toc,
.vector-dropdown-content,
.vector-page-tools {
	background-color: var(--wd-teal-deep);
}
.vector-main-menu-container .vector-pinnable-element,
.vector-column-start .vector-pinnable-element,
.vector-column-end .vector-pinnable-element {
	border-radius: 4px;
	padding: 8px 12px;
}
.vector-menu-heading,
.vector-pinnable-header-label {
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 0.04em;
}
.vector-toc .vector-toc-list-item-active > .vector-toc-link .vector-toc-text,
.vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link .vector-toc-text {
	color: #fff;
	font-weight: 800;
}

/* Page tabs (Read / Edit / History) */
.vector-page-titlebar,
.vector-page-toolbar-container {
	border-color: var(--wd-line);
}
.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited {
	color: #fff;
	border-bottom-color: #fff;
}
.vector-menu-tabs .mw-list-item a {
	font-weight: 700;
}

/* ── Search box ── */
.cdx-text-input__input,
.cdx-search-input .cdx-text-input__input,
input[type="text"], input[type="search"], input[type="password"], input[type="email"],
textarea, select {
	background-color: var(--wd-teal-input);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}
.cdx-text-input__input::placeholder,
input::placeholder, textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
}
.cdx-text-input__icon,
.cdx-text-input__start-icon {
	color: rgba(255, 255, 255, 0.7);
}
.cdx-menu,
.cdx-typeahead-search .cdx-menu {
	background-color: var(--wd-teal-deep);
	border-color: var(--wd-line);
}

/* ── Buttons ── */
.cdx-button,
.mw-ui-button {
	font-weight: 700;
	border-radius: 4px;
}
.cdx-button--action-progressive.cdx-button--weight-primary,
.mw-ui-button.mw-ui-progressive {
	background-color: #0073aa;          /* wildaria.net "Subscribe" button */
	border-color: #0073aa;
	color: #fff;
}
.cdx-button--action-progressive.cdx-button--weight-primary:hover,
.mw-ui-button.mw-ui-progressive:hover {
	background-color: #0a86c2;
	border-color: #0a86c2;
}
/* Icons are CSS masks that follow the text colour, so they turn white automatically */

/* ── Tables ── */
.wikitable {
	background-color: var(--wd-teal-deep);
	color: #fff;
	border-color: var(--wd-line);
}
.wikitable > tr > th,
.wikitable > * > tr > th {
	background-color: var(--wd-teal-darker);
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.875rem;
}
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
	border-color: var(--wd-line);
}

/* Thumbnails and galleries */
figure[typeof~="mw:File/Thumb"],
figure[typeof~="mw:File/Frame"],
.thumbinner,
li.gallerybox div.thumb {
	background-color: var(--wd-teal-deep);
	border-color: var(--wd-line);
}
figure[typeof~="mw:File/Thumb"] > figcaption,
.thumbcaption,
.gallerytext {
	color: rgba(255, 255, 255, 0.85);
}

/* Notices (edit warnings, messages) */
.cdx-message,
.mw-message-box,
.messagebox,
.warningbox, .errorbox, .successbox {
	background-color: var(--wd-teal-deep);
	color: #fff;
	border-color: var(--wd-line);
}

/* Code and preformatted text */
pre, code, .mw-code {
	background-color: var(--wd-teal-input);
	color: #f2fbfc;
	border-color: var(--wd-line);
}

/* Source editor */
#wpTextbox1,
.wikiEditor-ui-text textarea {
	background-color: var(--wd-teal-input);
	color: #fff;
	font-family: Menlo, Consolas, "Liberation Mono", monospace;
}
.wikiEditor-ui-toolbar {
	background-color: var(--wd-teal-deep);
}

/* Diffs on history pages */
.diff-addedline {
	border-color: #a6ef8f;
	background-color: rgba(166, 239, 143, 0.08);
}
.diff-deletedline {
	border-color: #ffb3a7;
	background-color: rgba(255, 179, 167, 0.08);
}
.diff-context {
	background-color: var(--wd-teal-deep);
	color: #fff;
}
.diffchange {
	color: #fff;
}

/* VisualEditor and other older (OOUI) widgets keep their own
   white surfaces; make sure their text stays dark on white */
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-dialog-content,
.oo-ui-window-frame {
	color: #202122;
}
.ve-ui-surface .ve-ce-surface,
.ve-init-mw-target-surface {
	color: #fff;
}

/* ── Footer ── */
.mw-footer,
#footer {
	border-top-color: var(--wd-line);
	color: rgba(255, 255, 255, 0.78);
}
.mw-footer a {
	color: rgba(255, 255, 255, 0.9);
}
.mw-footer-container {
	margin-top: 40px;
}

/* ── Categories bar at the bottom of articles ── */
.catlinks {
	background-color: var(--wd-teal-deep);
	border-color: var(--wd-line);
	color: #fff;
	border-radius: 4px;
}

/* Login and sign-up forms */
#userloginForm,
.mw-htmlform-ooui-wrapper {
	color: #fff;
}
/* ── Fixes after first preview ── */
.vector-header,
.vector-header-start,
.vector-header-end {
	background-color: transparent !important;
}
.vector-user-links a,
.vector-user-links a.new,
.vector-user-links a:visited {
	color: #fff !important;
}
.vector-dropdown-label,
.vector-dropdown-label.cdx-button--weight-quiet,
.vector-page-tools-landmark .vector-dropdown-label {
	color: #fff;
}
.vector-dropdown-label:hover {
	background-color: var(--wd-teal-darker);
}
/* External-link arrows */
.mw-parser-output a.external::after,
a.external .cdx-icon {
	filter: brightness(0) invert(1);
	opacity: 0.7;
}
/* Primary "Save" / "Log in" buttons in forms: wildaria.net blue */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	background-color: #0073aa;
	border-color: #0073aa;
	color: #fff;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
	background-color: #0a86c2;
	border-color: #0a86c2;
}
/* Visual editor toolbar sits on teal: white labels and icons */
.ve-ui-toolbar > .oo-ui-toolbar-bar {
	background-color: var(--wd-teal-deep);
	color: #fff;
	border-color: var(--wd-line);
}
.ve-ui-toolbar > .oo-ui-toolbar-bar > .oo-ui-toolbar-tools .oo-ui-iconElement-icon,
.ve-ui-toolbar > .oo-ui-toolbar-bar > .oo-ui-toolbar-tools .oo-ui-indicatorElement-indicator,
.ve-ui-toolbar > .oo-ui-toolbar-bar > .oo-ui-toolbar-actions .oo-ui-iconElement-icon,
.ve-ui-toolbar > .oo-ui-toolbar-bar > .oo-ui-toolbar-actions .oo-ui-indicatorElement-indicator {
	filter: invert(1);
}
.ve-ui-toolbar .oo-ui-toolbar-tools .oo-ui-tool-title,
.ve-ui-toolbar .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
	color: #fff;
}