wikipedia: V22 Zebra colors by eccenux

/* ==UserStyle==
@name         wikipedia: V22 Zebra colors
@namespace    userstyles.world/user/eccenux
@version      1.0.0
@description  Test of Zebra colors for Vector 2022.
@author       Alex Hollender, eccenux
@license      CC-BY
@preprocessor less

==/UserStyle== */
@-moz-document domain("wikipedia.org") {
	:root {
		--zebra-top-color: #e3e9f0;
		--zebra-top-border: 1px solid #bfbfbf;
		--zebra-top-shadow: 0px 2px 5px grey;
		--zebra-top-h: 4.5rem;
	}
	/* trick to add show full-width background for header */
	body::before {
		background-color: var(--zebra-top-color);
		display: block;
		content: "";
		position: absolute;
		top: 0;
		width: 100%;
		height: var(--zebra-top-h);
		border-bottom: var(--zebra-top-border);
	}
	.mw-header {
		height: var(--zebra-top-h);
		box-sizing: border-box;
	}
	#vector-sticky-header {
		background-color: var(--zebra-top-color);
		border-bottom: var(--zebra-top-border);
		box-shadow: var(--zebra-top-shadow);
	}

	body {
		background-color: #f8f9fa;
	}
	.mw-page-container {
		background-color: transparent;
	}

	.vector-sticky-header {
		max-width: none;
	}

	.vector-toc {
		background-color: transparent;
	}
	.vector-toc::after {
		background: initial !important;
	}

	.vector-page-titlebar,
	.vector-page-toolbar,
	#bodyContent {
		background: #fff;
		padding: 0 40px;
		width: 90%;
	}

	@media screen and (min-width: 1000px) {

		.vector-page-titlebar {
			padding-top: 30px;
			border-radius: 4px;
			position: relative;
			box-shadow: none;
		}
		.vector-page-titlebar::after {
			width: 93%;
			height: 1px;
			border-bottom: 1px solid #a2a9b1;
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: 40px;
		}

		.vector-feature-page-tools-enabled .mw-body {
			display: grid;
			grid-template: min-content min-content min-content 1fr / minmax(0, 67em) min-content;
			grid-template-areas: 'titlebar-cx .' 'titlebar columnEnd' 'toolbar columnEnd' 'content columnEnd';
		}

		.vector-feature-page-tools-pinned-enabled.vector-feature-page-tools-enabled .mw-body {
			column-gap: 16px;
		}

		.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-toc-pinned #vector-toc-pinned-container {
			margin-top: 1.5em;
		}
	}
}