MediaWiki:Vector-2022.css: Difference between revisions

/* All CSS here will be loaded for users of the Vector 2022 skin */
/* Voluminous Energy, Vector 2022. Reworked 2026-10-15 for MediaWiki 1.47. */

/* Headings in EB Garamond */
#firstHeading,
.vector-sticky-header-context-bar-primary,
.mw-body-content h2 {
	font-family: var( --ve-font-heading );
}

.mw-body-content h2 {
	font-size: 1.65em;
}

/* Keep "Voluminous Energy" on one line next to the logo */
.mw-logo-wordmark {
	font-size: larger;
	white-space: nowrap;
}

/*
 * Centre the search bar in the header. The search box is only expanded at desktop widths
 * (below 1120px Vector collapses it to an icon). The header becomes a 3-column grid,
 * logo | search | user links, with equal outer columns so the search sits in the middle.
 * Vector uses flexbox at 1120-1679px and its own 2-column grid from 1680px. The
 * ".vector-header.mw-header" selectors are deliberately more specific so they win in both ranges.
 */
@media screen and ( min-width: 1120px ) {
	.vector-header.mw-header {
		display: grid;
		grid-template-areas: none;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 40rem ) minmax( 0, 1fr );
		column-gap: 16px;
	}

	.vector-header.mw-header .vector-header-end {
		display: contents;
	}

	/* grid-row is needed too: Vector's "grid-area: headerStart" (>= 1680px) would otherwise push the logo to a new row */
	.vector-header.mw-header .vector-header-start {
		grid-row: 1;
		grid-column: 1;
	}

	.vector-header.mw-header .vector-search-box {
		grid-row: 1;
		grid-column: 2;
	}

	.vector-header.mw-header .vector-user-links {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
	}

	.vector-header.mw-header .vector-search-box .vector-typeahead-search-container {
		max-width: none;
		margin-right: 0;
	}

	/* Vector shifts the search box left by its focus-expansion width at >= 1680px; not wanted when centred */
	.client-js .vector-header.mw-header .vector-search-box.vector-search-box-auto-expand-width {
		margin-left: 0;
	}
}

/*
 * Dark mode (OLED). Applies when the reader picks "Dark", and also for "Automatic" when the
 * browser or OS prefers dark. The default for everyone is "Automatic" ($wgDefaultUserOptions['vector-theme'] = 'os').
 * Page edges are pure black, and the content column is a near-black.
 * The two blocks below must stay identical.
 */
html.skin-theme-clientpref-night {
	--background-color-base: #0d0e11;
	--ve-card-bg: #15171b;
	--ve-card-border: #2a2d33;
	--ve-card-shadow: none;
	--ve-accent-bg: #2e3a6e;
	--ve-accent-fg: #dde3ff;
	--ve-yes-bg: #1d4d2a;
	--ve-yes-fg: #c7f5d3;
	--ve-no-bg: #5c2124;
	--ve-no-fg: #ffd6d6;
	--ve-partial-bg: #4d4519;
	--ve-partial-fg: #fff3b0;
	--ve-unknown-bg: #2a2d33;
	--ve-unknown-fg: #c8ccd1;
}

html.skin-theme-clientpref-night body {
	background-color: #000000;
}

@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os {
		--background-color-base: #0d0e11;
		--ve-card-bg: #15171b;
		--ve-card-border: #2a2d33;
		--ve-card-shadow: none;
		--ve-accent-bg: #2e3a6e;
		--ve-accent-fg: #dde3ff;
		--ve-yes-bg: #1d4d2a;
		--ve-yes-fg: #c7f5d3;
		--ve-no-bg: #5c2124;
		--ve-no-fg: #ffd6d6;
		--ve-partial-bg: #4d4519;
		--ve-partial-fg: #fff3b0;
		--ve-unknown-bg: #2a2d33;
		--ve-unknown-fg: #c8ccd1;
	}

	html.skin-theme-clientpref-os body {
		background-color: #000000;
	}
}