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 that Vector collapses it to an icon). Unwrapping .vector-header-end leaves three flex
 * items: logo | search | user links. Giving the outer two equal flex-basis puts search in the middle.
 */
@media screen and ( min-width: 1120px ) {
	.vector-header-end {
		display: contents;
	}

	.vector-header-start,
	.vector-header .vector-user-links {
		flex: 1 1 0;
		min-width: 0;
	}

	.vector-header .vector-user-links {
		display: flex;
		justify-content: flex-end;
	}

	.vector-header .vector-search-box {
		flex: 0 1 40rem;
	}

	.vector-header .vector-search-box .vector-typeahead-search-container {
		max-width: none;
		margin-right: 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;
	}
}