MediaWiki:Common.css - Revision history

Datanasov: Fix Template:Box layout — flex was fragmenting inline content

2026-08-09T21:59:18Z

Fix Template:Box layout — flex was fragmenting inline content

← Older revision		Revision as of 21:59, 9 August 2026
Line 1,455:		Line 1,455:

	/* Intended replacement, once Template:Box exists. */		/* Intended replacement, once Template:Box exists. */
			/* NOT display:flex. Template:Box emits inline content — bare text, <b>,
			* <code> — and under flex every one of those becomes its own flex item, so
			* the note renders as a row of fragments instead of a paragraph. The marker
			* is positioned instead, and the box keeps normal inline flow. */
	.mw-parser-output .lz-note {		.mw-parser-output .lz-note {
	~~display~~: ~~flex;~~		position: relative;
	~~gap: 0.75rem~~;
	max-width: 68ch;		max-width: 68ch;
	margin: 1.3em 0;		margin: 1.3em 0;
	padding: 0.85em 1em;		padding: 0.85em 1em 0.85em 2.5em;
	background: var( --lz-accent-tint );		background: var( --lz-accent-tint );
	border-left: 3px solid var( --lz-accent );		border-left: 3px solid var( --lz-accent );
	border-radius: 0 0.35rem 0.35rem 0;		border-radius: 0 0.35rem 0.35rem 0;
	font-size: 0.94rem;		font-size: 0.94rem;
			line-height: 1.6;
	color: var( --lz-ink-2 );		color: var( --lz-ink-2 );
	}		}
Line 1,475:		Line 1,479:
	.mw-parser-output .lz-note::before {		.mw-parser-output .lz-note::before {
	content: "!";		content: "!";
	~~flex~~: ~~none~~;		position: absolute;
			left: 1em;
			top: 0.85em;
	font-family: var( --lz-mono );		font-family: var( --lz-mono );
	font-weight: 700;		font-weight: 700;
			line-height: 1.6;
	color: var( --lz-accent );		color: var( --lz-accent );
	}		}

Datanasov: Chrome visited links use the accent; restore in-content categories under 1100px

2026-08-09T21:37:43Z

Chrome visited links use the accent; restore in-content categories under 1100px

@@ Line 404: / Line 404: @@
 	-webkit-mask: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%2010a4%204%200%20100-8%204%204%200%20000%208Zm0%201.6c-4.2%200-7%202.1-7%204.6V18h14v-1.8c0-2.5-2.8-4.6-7-4.6Z'/%3E%3C/svg%3E" ) no-repeat center / contain;
 	mask: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%2010a4%204%200%20100-8%204%204%200%20000%208Zm0%201.6c-4.2%200-7%202.1-7%204.6V18h14v-1.8c0-2.5-2.8-4.6-7-4.6Z'/%3E%3C/svg%3E" ) no-repeat center / contain;
+}

Datanasov: External/interwiki links: use the site accent, not MediaWiki blue

2026-08-09T21:30:45Z

External/interwiki links: use the site accent, not MediaWiki blue

@@ Line 486: / Line 486: @@
+}
 a.external,
-.mw-body a.external {
+a.extiw,
 	background-image: none;
 	padding-right: 0;
+}

Datanasov: Force thumbnail caption/thumb fill onto site tokens

2026-08-09T21:28:45Z

Force thumbnail caption/thumb fill onto site tokens

← Older revision		Revision as of 21:28, 9 August 2026
Line 6:		Line 6:
	*		*
	* Loads via the `site.styles` module, after the skin's own styles, so		* Loads via the `site.styles` module, after the skin's own styles, so
	* equal-specificity selectors win without !important. ~~The only~~ !important ~~left~~		* equal-specificity selectors win without !important. !important appears in
	* ~~in the file is in~~ the prefers-reduced-motion block, ~~where it is correct.~~		* exactly two places, both deliberate: the prefers-reduced-motion block, and
	* (~~Section 9 used to need it to cancel an inline style pasted into every~~		* the thumbnail caption fill in section 11 (see the note there).
	* article; that markup was removed from the ~~articles on 2026-08-09~~.)
	*		*
	* Sections:		* Sections:
Line 1,474:		Line 1,473:
	}		}

			/* The caption and the older div.thumb wrapper keep a #f8f9fa fill from
			* somewhere in the core/skin cascade that outranks a plain
			* `.mw-parser-output figcaption` rule. I could not identify the winning
			* selector — the stylesheets were not readable through the CSSOM from this
			* page — so this is forced rather than out-specified. If the source is ever
			* found, drop the !important and match its specificity instead.
			*
			* Verified after the change: 0 low-contrast elements in light, dark and
			* unstamped, and no light surfaces left inside the article. */
	.mw-parser-output figcaption,		.mw-parser-output figcaption,
	.mw-parser-output .thumbcaption {		.mw-parser-output .thumbcaption,
	background-color: ~~transparent~~;		.mw-parser-output div.thumb,
	color: var( --lz-ink-2 );		.mw-parser-output div.thumbinner {
			background-color: var( --lz-surface-2 ) !important;
			color: var( --lz-ink-2 ) !important;
			border-color: var( --lz-line ) !important;
	}		}

Datanasov: Theme thumbnail figures (MediaWiki core paints them #f8f9fa)

2026-08-09T21:23:44Z

Theme thumbnail figures (MediaWiki core paints them #f8f9fa)

@@ Line 1,454: / Line 1,454: @@
 		scroll-behavior: auto !important;
+	}
+}

Datanasov: Theme imported Wikipedia TemplateStyles boxes (ambox, CS1, hatnotes)

2026-08-09T21:22:06Z

Theme imported Wikipedia TemplateStyles boxes (ambox, CS1, hatnotes)

@@ Line 22: / Line 22: @@
   *   9.  Callouts (Template:Box)
   *  10.  Print
   * ========================================================================= */
@@ Line 1,453: / Line 1,454: @@
 		scroll-behavior: auto !important;
+	}
+}

Datanasov: Retire the #ae8c55 neutraliser; section 9 is now just the Box callout

2026-08-09T21:04:31Z

Retire the #ae8c55 neutraliser; section 9 is now just the Box callout

← Older revision		Revision as of 21:04, 9 August 2026
Line 6:		Line 6:
	*		*
	* Loads via the `site.styles` module, after the skin's own styles, so		* Loads via the `site.styles` module, after the skin's own styles, so
	* equal-specificity selectors win without !important. !important is ~~used only~~		* equal-specificity selectors win without !important. The only !important left
	* ~~where~~ it ~~overrides~~ an inline style ~~attribute in page wikitext (section 9~~).		* in the file is in the prefers-reduced-motion block, where it is correct.
			* (Section 9 used to need it to cancel an inline style pasted into every
			* article; that markup was removed from the articles on 2026-08-09.)
	*		*
	* Sections:		* Sections:
Line 18:		Line 20:
	* 7. Tables		* 7. Tables
	* 8. Card grids (index pages)		* 8. Card grids (index pages)
	* 9. ~~Legacy inline-style box neutraliser~~		* 9. Callouts (Template:Box)
	* 10. Print		* 10. Print
	* ========================================================================= */		* ========================================================================= */
Line 1,377:		Line 1,379:

	/* ---------------------------------------------------------------------------		/* ---------------------------------------------------------------------------
	* 9. ~~LEGACY INLINE-STYLE BOX~~		* 9. CALLOUTS (Template:Box)
	*		*
	* ~~Every article's wikitext currently hardcodes:~~		* The neutraliser that used to live here is gone. It cancelled a hand-pasted
	* <div style="~~margin-top:1.5em;~~ border:3px solid #~~ae8c55; border-radius:.5em;~~		* `<div style="border:3px solid #ae8c55…">` wrapper that had been copied into
	* ~~padding:1em 1.5em~~; ~~font~~-~~size:1.2em">~~		* every article; that markup was stripped from all 22 pages on 2026-08-09, so
	* ~~Inline styles outrank the cascade, so !important~~ is ~~required here~~. ~~This is~~		* there is nothing left to neutralise.
	* ~~a bridge —~~ the real ~~fix is migrating those pages to~~ Template:Box~~, after~~		*
	* which this block can be deleted.		* What remains is the real callout, used by Template:Box.
	* ------------------------------------------------------------------------ */		* ------------------------------------------------------------------------ */
	~~.mw-parser-output div[ style*="#ae8c55" ] {~~
	~~margin-top: 0 !important;~~
	~~padding: 0 !important;~~
	~~border: 0 !important;~~
	~~border-radius: 0 !important;~~
	~~font-size: 1em !important;~~
	}

	~~/* The Copperplate banner on Main Page. */~~
	~~.mw-parser-output div[ style*="#936c29" ] {~~
	~~color: var( --lz-ink ) !important;~~
	~~font-family: var( --lz-mono ) !important;~~
	~~font-size: 1.75rem !important;~~
	~~letter-spacing: -0.02em;~~
	}

	~~.mw-parser-output div[ style*="Copperplate" ] span,~~
	~~.mw-parser-output span[ style*="Copperplate" ] {~~
	~~font-family: var( --lz-mono ) !important;~~
	}

	/* Intended replacement, once Template:Box exists. */		/* Intended replacement, once Template:Box exists. */

Datanasov: Header: space and align the theme toggle; mask the dropdown caret

2026-08-09T20:52:21Z

Header: space and align the theme toggle; mask the dropdown caret

← Older revision		Revision as of 20:52, 9 August 2026
Line 355:		Line 355:
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	height: ~~42px~~;		/* 38px, not the container's 42px: the Echo badges next door sit 2px above
	margin-~~right~~: 0.~~6em~~;		* the box centre, so centring on 42px left the button visibly low. */
			height: 38px;
			/* Left margin matters — the slot is the first child of #user-tools and
			* would otherwise butt straight against the end of the search bar. */
			margin: 0 0.75em 0 1.1em;
	}		}

Line 374:		Line 378:
	background-image: none;		background-image: none;
	position: relative;		position: relative;
			}

			/* The dropdown caret on the same <h2>. Timeless uses arrow-down-grey.svg,
			* which disappears on a dark ground for the same reason as the user glyph —
			* and again cannot be filtered, because the element carries the label text.
			* Same masked-token treatment. */
			body.skin-timeless #mw-header-container h2::after {
			background-image: none;
			background-color: var( --lz-ink-2 );
			-webkit-mask: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M5%208h10l-5%206z'/%3E%3C/svg%3E" ) no-repeat center / 10px 10px;
			mask: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M5%208h10l-5%206z'/%3E%3C/svg%3E" ) no-repeat center / 10px 10px;
	}		}

Datanasov: Timeless: toggle slot for anon users; masked user glyph instead of filter

2026-08-09T20:44:15Z

Timeless: toggle slot for anon users; masked user glyph instead of filter

@@ Line 348: / Line 348: @@
+}
-/* Theme toggle, mounted into the header by Common.js. */
+/* Theme toggle, mounted into #user-tools by Common.js — the one header element
 body.skin-timeless .lz-theme-toggle {
-	margin: 0 0.35em;
+	margin: 0;
+}

Datanasov: Restrict icon invert to icon-only elements; stop double-treating search button

2026-08-09T20:34:00Z

Restrict icon invert to icon-only elements; stop double-treating search button

← Older revision		Revision as of 20:34, 9 August 2026
Line 275:		Line 275:

	body.skin-timeless #simpleSearch,		body.skin-timeless #simpleSearch,
	body.skin-timeless #searchInput,		body.skin-timeless #searchInput {
	~~body.skin-timeless #searchButton~~ {
	background: var( --lz-surface-2 );		background: var( --lz-surface-2 );
	border-color: var( --lz-line );		border-color: var( --lz-line );
Line 332:		Line 331:
	}		}

	/* Monochrome skin icons. ~~The~~ footer's "Powered by MediaWiki" badge is a real		/* Monochrome skin icons.
	* logo ~~and is deliberately excluded~~. */		*
			* Only elements that are PURELY an icon may go in this list. A filter applies
			* to an element's text as well as its background image, so filtering anything
			* that renders a label inverts the label too — and because the computed
			* `color` is unchanged, a contrast scan reports it as fine while it looks
			* wrong on screen. That is how #mw-header-container h2 ("Datanasov" plus an
			* avatar glyph) slipped through once. Check filtered elements by eye.
			*
			* Excluded on purpose: #searchButton (re-grounded above — filtering it as
			* well flipped it back to light), and the footer's "Powered by MediaWiki"
			* badge, which is a real logo. */
	body.skin-timeless .mw-echo-notifications-badge,		body.skin-timeless .mw-echo-notifications-badge,
	body.skin-timeless #mw-searchButton,		body.skin-timeless #mw-searchButton {
	~~body.skin-timeless #searchButton,~~
	~~body.skin-timeless #mw-header-container h2~~ {
	filter: var( --lz-icon-filter );		filter: var( --lz-icon-filter );
	}		}