MediaWiki:Common.css - Revision history

MDGarcia: Toolbar highlight: add --d-hover (#33333a dark grey) token; use it for dropdown/index/glyph hover instead of near-black --d-panel

2026-07-29T00:25:06Z

Toolbar highlight: add --d-hover (#33333a dark grey) token; use it for dropdown/index/glyph hover instead of near-black --d-panel

MDGarcia: Toolbar text: theme Heading dropdown (label/options), group labels (Format/Insert), tabs, and special-char/help index hover states; neutralize skin-invert; invert dropdown caret

2026-07-29T00:21:13Z

Toolbar text: theme Heading dropdown (label/options), group labels (Format/Insert), tabs, and special-char/help index hover states; neutralize skin-invert; invert dropdown caret

← Older revision		Revision as of 00:21, 29 July 2026
Line 378:		Line 378:
	.wikiEditor-ui-toolbar .tool-button,		.wikiEditor-ui-toolbar .tool-button,
	.wikiEditor-ui-toolbar .oo-ui-iconElement-icon { filter: invert(1); }		.wikiEditor-ui-toolbar .oo-ui-iconElement-icon { filter: invert(1); }
	/* ~~Text-based toolbar~~ controls~~: section tabs~~, ~~dropdown~~ labels~~/options~~, ~~special~~-~~character glyphs~~. */		/* Toolbar text controls (dropdowns, group labels, section booklets) hardcode light-theme colors with higher specificity; override with matched specificity + !important. */
	.wikiEditor-ui-toolbar .~~tabs~~ .~~tab a~~,		/* Heading dropdown: handle, label, menu, options */
	.wikiEditor-ui-toolbar .tool-select .label,		.wikiEditor-ui-toolbar .group .tool-select,
	.wikiEditor-ui-toolbar .tool-select .options a,		.wikiEditor-ui-toolbar .group .tool-select .menu .options,
	.wikiEditor-ui-toolbar .~~page~~-characters ~~span,~~		.wikiEditor-ui-toolbar .group .tool-select .options { background-color: var(--d-panel2) !important; border-color: var(--d-border) !important; }
	.wikiEditor-ui-toolbar .booklet .index div { color: var(--d-text); }		.wikiEditor-ui-toolbar .group .tool-select .label,
	.wikiEditor-ui-toolbar .~~tool~~-~~select~~ .~~options~~ { background: var(--d-~~panel2~~); border-color: var(--d-border); }		.wikiEditor-ui-toolbar .group .tool-select .options .option { color: var(--d-text) !important; }
			.wikiEditor-ui-toolbar .group .tool-select .options .option:hover { background-color: var(--d-panel) !important; color: var(--d-text) !important; }
			.wikiEditor-ui-toolbar .group .tool-select .label.skin-invert { filter: none !important; }
			.wikiEditor-ui-toolbar .group .tool-select .label::after { filter: invert(1); }
			/* Group labels (Format, Insert, ...) */
			.wikiEditor-ui-toolbar .group .label { color: var(--d-text) !important; }
			/* Section tabs (Advanced / Special characters / Help) */
			.wikiEditor-ui-toolbar .tabs .tab a { color: var(--d-link) !important; }
			/* Special-characters & Help booklets: index list + hover/current highlight */
			.wikiEditor-ui-toolbar .booklet > .index > div { color: var(--d-text); }
			.wikiEditor-ui-toolbar .booklet > .index > div:hover,
			.wikiEditor-ui-toolbar .booklet > .index > .current,
			.wikiEditor-ui-toolbar .booklet > .index .wikiEditor-character-highlighted { background-color: var(--d-panel) !important; color: var(--d-text) !important; }
			/* Help tables + special-character glyph tiles */
			.wikiEditor-ui-toolbar .booklet table th,
			.wikiEditor-ui-toolbar .booklet table td,
			.wikiEditor-ui-toolbar .booklet .cell span { color: var(--d-text); border-color: var(--d-border); }
			.wikiEditor-ui-toolbar .page-characters div span { color: var(--d-text) !important; border-color: var(--d-border); }
			.wikiEditor-ui-toolbar .page-characters div span:hover { background-color: var(--d-panel) !important; border-color: var(--d-gold); }

	/* --- OOUI widgets (used across modern special pages / dialogs) --- */		/* --- OOUI widgets (used across modern special pages / dialogs) --- */

MDGarcia: Toolbar icons: target inline-image + OOUI icon carriers (version-proof) instead of guessed class

2026-07-29T00:12:38Z

Toolbar icons: target inline-image + OOUI icon carriers (version-proof) instead of guessed class

← Older revision		Revision as of 00:12, 29 July 2026
Line 375:		Line 375:
	.mw-editform .cancelLink a { color: var(--d-link); }		.mw-editform .cancelLink a { color: var(--d-link); }
	/* Toolbar icon buttons are monochrome dark glyphs (inline background-image) that vanish on the dark toolbar; invert to white. */		/* Toolbar icon buttons are monochrome dark glyphs (inline background-image) that vanish on the dark toolbar; invert to white. */
	.wikiEditor-ui-toolbar .tool-button { filter: invert(1); }		.wikiEditor-ui-toolbar [style*="url("],
			.wikiEditor-ui-toolbar .tool-button,
			.wikiEditor-ui-toolbar .oo-ui-iconElement-icon { filter: invert(1); }
	/* Text-based toolbar controls: section tabs, dropdown labels/options, special-character glyphs. */		/* Text-based toolbar controls: section tabs, dropdown labels/options, special-character glyphs. */
	.wikiEditor-ui-toolbar .tabs .tab a,		.wikiEditor-ui-toolbar .tabs .tab a,

MDGarcia: Editor toolbar: invert dark icon glyphs to white on the dark toolbar; theme tab/dropdown/special-char text

2026-07-29T00:08:18Z

Editor toolbar: invert dark icon glyphs to white on the dark toolbar; theme tab/dropdown/special-char text

← Older revision		Revision as of 00:08, 29 July 2026
Line 374:		Line 374:
	.wikiEditor-ui-toolbar .sections { background: var(--d-panel2); border-color: var(--d-border); }		.wikiEditor-ui-toolbar .sections { background: var(--d-panel2); border-color: var(--d-border); }
	.mw-editform .cancelLink a { color: var(--d-link); }		.mw-editform .cancelLink a { color: var(--d-link); }
			/* Toolbar icon buttons are monochrome dark glyphs (inline background-image) that vanish on the dark toolbar; invert to white. */
			.wikiEditor-ui-toolbar .tool-button { filter: invert(1); }
			/* Text-based toolbar controls: section tabs, dropdown labels/options, special-character glyphs. */
			.wikiEditor-ui-toolbar .tabs .tab a,
			.wikiEditor-ui-toolbar .tool-select .label,
			.wikiEditor-ui-toolbar .tool-select .options a,
			.wikiEditor-ui-toolbar .page-characters span,
			.wikiEditor-ui-toolbar .booklet .index div { color: var(--d-text); }
			.wikiEditor-ui-toolbar .tool-select .options { background: var(--d-panel2); border-color: var(--d-border); }

	/* --- OOUI widgets (used across modern special pages / dialogs) --- */		/* --- OOUI widgets (used across modern special pages / dialogs) --- */

MDGarcia: Add mobile responsive rules (max-width:700px): full-width infoboxes, scrollable wide tables/navboxes, capped images; desktop unaffected

2026-07-18T20:52:26Z

Add mobile responsive rules (max-width:700px): full-width infoboxes, scrollable wide tables/navboxes, capped images; desktop unaffected

← Older revision		Revision as of 20:52, 18 July 2026
Line 647:		Line 647:
	.tf-steps { counter-reset: tfstep; }		.tf-steps { counter-reset: tfstep; }
	.tf-steps > li { margin:8px 0; }		.tf-steps > li { margin:8px 0; }

			/* ===== Mobile readability for article content (added 2026-07-18) =====
			Scoped to narrow viewports; desktop layout unchanged. Complements the
			existing tf-mainpage @media rules above. */
			@media (max-width: 700px) {
			/* Infoboxes span full width instead of squeezing body text into a sliver */
			.mw-parser-output .infobox,
			.mw-parser-output .sidebar,
			.mw-parser-output .tf-cbox,
			.mw-parser-output .tf-abox,
			.mw-parser-output .tf-pbox,
			.mw-parser-output .tf-ebox {
			float: none !important;
			width: auto !important;
			max-width: 100% !important;
			margin: 0.6em auto !important;
			box-sizing: border-box;
			}
			/* Wide data tables scroll within their own box, not the whole page */
			.mw-parser-output .wikitable,
			.mw-parser-output .tf-navbox {
			display: block;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			max-width: 100%;
			}
			/* Images never force horizontal overflow */
			.mw-parser-output img {
			max-width: 100%;
			height: auto;
			}
			}

MDGarcia: Dark theme: style reference lists / footnotes / Record notes (pii) - were white-on-white due to unstyled default background

2026-07-17T23:27:55Z

Dark theme: style reference lists / footnotes / Record notes (pii) - were white-on-white due to unstyled default background

@@ Line 278: / Line 278: @@
 #mw-content-text ol > li::marker,
 #mw-content-text dl dd::marker { color: var(--d-muted); }
 /* TOC, thumbs, code, catlinks, messageboxes */

MDGarcia: Lighten list bullet/number markers for visibility on the dark theme

2026-07-17T16:37:10Z

Lighten list bullet/number markers for visibility on the dark theme

← Older revision		Revision as of 16:37, 17 July 2026
Line 273:		Line 273:
	.wikitable > * > tr > th, .wikitable > tr > th { background: var(--d-panel2); color: var(--d-gold); border-color: var(--d-border); }		.wikitable > * > tr > th, .wikitable > tr > th { background: var(--d-panel2); color: var(--d-gold); border-color: var(--d-border); }
	.wikitable > * > tr > td, .wikitable > tr > td { border-color: var(--d-border); }		.wikitable > * > tr > td, .wikitable > tr > td { border-color: var(--d-border); }

			/* List bullets/numbers: default marker color is too dark on the dark theme, so lighten it */
			#mw-content-text ul > li::marker,
			#mw-content-text ol > li::marker,
			#mw-content-text dl dd::marker { color: var(--d-muted); }

	/* TOC, thumbs, code, catlinks, messageboxes */		/* TOC, thumbs, code, catlinks, messageboxes */

MDGarcia: Add documentation callout styles (tip/note/warning/example/lead)

2026-07-17T02:26:57Z

Add documentation callout styles (tip/note/warning/example/lead)

← Older revision		Revision as of 02:26, 17 July 2026
Line 608:		Line 608:
	border-color: var(--d-border) !important;		border-color: var(--d-border) !important;
	}		}

			/* ============================================================
			Documentation callout boxes (tip / note / warning / example / steps)
			============================================================ */
			.tf-tip, .tf-note, .tf-warn, .tf-example {
			margin: 12px 0; padding: 10px 14px; border-radius: 6px;
			border-left: 4px solid #2A2A2C; background: #17171a; color: var(--d-text);
			}
			.tf-tip { border-left-color: #1E7A3E; }
			.tf-note { border-left-color: #2E4A6A; }
			.tf-warn { border-left-color: #BE2F24; }
			.tf-example { border-left-color: #8A6D1E; background:#141416; }
			.tf-tip .tf-lbl { color:#63c187; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }
			.tf-note .tf-lbl { color:#7fa8d8; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }
			.tf-warn .tf-lbl { color:#e79b9b; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }
			.tf-example .tf-lbl { color:#F5BD3F; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }
			.tf-lead { font-size:106%; line-height:1.6; border-left:3px solid #8A6D1E; padding:2px 0 2px 14px; margin-bottom:1em; color:#EFEAE6; }
			.tf-steps { counter-reset: tfstep; }
			.tf-steps > li { margin:8px 0; }

MDGarcia: Dark-theme Codex/OOUI form widgets on Special pages (login/createaccount/preferences etc. were light)

2026-07-16T22:01:12Z

Dark-theme Codex/OOUI form widgets on Special pages (login/createaccount/preferences etc. were light)

← Older revision		Revision as of 22:01, 16 July 2026
Line 574:		Line 574:
	body.ns-6002 #mw-content-text .wikitable > tbody > tr:nth-child(even):not([style]) > td { background: #18181b; }		body.ns-6002 #mw-content-text .wikitable > tbody > tr:nth-child(even):not([style]) > td { background: #18181b; }
	body.ns-6002 #mw-content-text .wikitable > tbody > tr:hover:not([style]) > td { background: #26210f; }		body.ns-6002 #mw-content-text .wikitable > tbody > tr:hover:not([style]) > td { background: #26210f; }

			/* ============================================================
			Special-namespace Codex/OOUI form widgets -> dark theme
			(UserLogin, CreateAccount, PasswordReset, Preferences, Upload, Block, ...)
			These are painted by ResourceLoader modules the content rule can't reach.
			============================================================ */
			body.ns-special #mw-content-text .cdx-text-input__input,
			body.ns-special #mw-content-text .cdx-text-input__input:enabled,
			body.ns-special #mw-content-text .cdx-text-area__textarea,
			body.ns-special #mw-content-text .cdx-select__handle,
			body.ns-special #mw-content-text .oo-ui-inputWidget-input {
			background-color: #1c1c20 !important;
			color: var(--d-text) !important;
			border-color: var(--d-border) !important;
			}
			body.ns-special #mw-content-text .cdx-text-input__input:enabled:read-only {
			background-color: #141416 !important;
			color: var(--d-muted) !important;
			}
			body.ns-special #mw-content-text .cdx-label__label,
			body.ns-special #mw-content-text .cdx-label__label__text,
			body.ns-special #mw-content-text .cdx-label__description,
			body.ns-special #mw-content-text .cdx-checkbox__label,
			body.ns-special #mw-content-text .cdx-field__help-text,
			body.ns-special #mw-content-text .oo-ui-labelElement-label,
			body.ns-special #mw-content-text .oo-ui-fieldLayout-header label {
			color: var(--d-text) !important;
			}
			/* CAPTCHA box on CreateAccount */
			body.ns-special #mw-content-text .fancycaptcha-captcha-container,
			body.ns-special #mw-content-text .fancycaptcha-captcha-and-reload {
			background-color: #1c1c20 !important;
			border-color: var(--d-border) !important;
			}

MDGarcia: Site-wide small-caps on content headings (.mw-body h1-h6)

2026-07-16T17:29:56Z

Site-wide small-caps on content headings (.mw-body h1-h6)

← Older revision		Revision as of 17:29, 16 July 2026
Line 251:		Line 251:
	/* Headings */		/* Headings */
	.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,		.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
	#firstHeading, .firstHeading { color: var(--d-gold); }		#firstHeading, .firstHeading { color: var(--d-gold); font-variant: small-caps; letter-spacing: 0.03em; }
	.mw-body h1, .mw-body h2, #firstHeading, .firstHeading { border-bottom: 1px solid var(--d-border); }		.mw-body h1, .mw-body h2, #firstHeading, .firstHeading { border-bottom: 1px solid var(--d-border); }

← Older revision		Revision as of 00:25, 29 July 2026
Line 232:		Line 232:
	--d-text:#E9E6E0; --d-muted:#9A9792;		--d-text:#E9E6E0; --d-muted:#9A9792;
	--d-gold:#F5BD3F; --d-gold2:#F4A345; --d-red:#BE2F24;		--d-gold:#F5BD3F; --d-gold2:#F4A345; --d-red:#BE2F24;
	--d-border:#2A2A2C; --d-link:#E7B84B; --d-ext:#7FB2D6;		--d-border:#2A2A2C; --d-link:#E7B84B; --d-ext:#7FB2D6; --d-hover:#33333a;
	}		}
	html, body { background: var(--d-bg); color: var(--d-text); }		html, body { background: var(--d-bg); color: var(--d-text); }
Line 385:		Line 385:
	.wikiEditor-ui-toolbar .group .tool-select .label,		.wikiEditor-ui-toolbar .group .tool-select .label,
	.wikiEditor-ui-toolbar .group .tool-select .options .option { color: var(--d-text) !important; }		.wikiEditor-ui-toolbar .group .tool-select .options .option { color: var(--d-text) !important; }
	.wikiEditor-ui-toolbar .group .tool-select .options .option:hover { background-color: var(--d-~~panel~~) !important; color: var(--d-text) !important; }		.wikiEditor-ui-toolbar .group .tool-select .options .option:hover { background-color: var(--d-hover) !important; color: var(--d-text) !important; }
	.wikiEditor-ui-toolbar .group .tool-select .label.skin-invert { filter: none !important; }		.wikiEditor-ui-toolbar .group .tool-select .label.skin-invert { filter: none !important; }
	.wikiEditor-ui-toolbar .group .tool-select .label::after { filter: invert(1); }		.wikiEditor-ui-toolbar .group .tool-select .label::after { filter: invert(1); }
Line 396:		Line 396:
	.wikiEditor-ui-toolbar .booklet > .index > div:hover,		.wikiEditor-ui-toolbar .booklet > .index > div:hover,
	.wikiEditor-ui-toolbar .booklet > .index > .current,		.wikiEditor-ui-toolbar .booklet > .index > .current,
	.wikiEditor-ui-toolbar .booklet > .index .wikiEditor-character-highlighted { background-color: var(--d-~~panel~~) !important; color: var(--d-text) !important; }		.wikiEditor-ui-toolbar .booklet > .index .wikiEditor-character-highlighted { background-color: var(--d-hover) !important; color: var(--d-text) !important; }
	/* Help tables + special-character glyph tiles */		/* Help tables + special-character glyph tiles */
	.wikiEditor-ui-toolbar .booklet table th,		.wikiEditor-ui-toolbar .booklet table th,
Line 402:		Line 402:
	.wikiEditor-ui-toolbar .booklet .cell span { color: var(--d-text); border-color: var(--d-border); }		.wikiEditor-ui-toolbar .booklet .cell span { color: var(--d-text); border-color: var(--d-border); }
	.wikiEditor-ui-toolbar .page-characters div span { color: var(--d-text) !important; border-color: var(--d-border); }		.wikiEditor-ui-toolbar .page-characters div span { color: var(--d-text) !important; border-color: var(--d-border); }
	.wikiEditor-ui-toolbar .page-characters div span:hover { background-color: var(--d-~~panel~~) !important; border-color: var(--d-gold); }		.wikiEditor-ui-toolbar .page-characters div span:hover { background-color: var(--d-hover) !important; border-color: var(--d-gold); }

	/* --- OOUI widgets (used across modern special pages / dialogs) --- */		/* --- OOUI widgets (used across modern special pages / dialogs) --- */