Template:Page tabs/styles.css

/* {{pp-template}} */ 
.template-page-tabs {
	background: #F8FCFF;
    color:black;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -4px;
}

.template-page-tabs > span {
	padding: 0.5em;
	line-height: 0.95em;
	border: solid 2px #a3b1bf;
	white-space: nowrap;
	margin-bottom: 4px;
}

.template-page-tabs > span.spacer {
	display: flex; /* hides any whitespace we put inside */
	padding: 0;
	flex: 9px;
	border-width: 0 0 2px 0;
}

.template-page-tabs > span.spacer:last-child {
	/* We want this to get first priority, which flexbox doesn't really understand but hopefully this will do. */
	flex: 1000 1 0;
}

/* Vector 2022 and Minerva Dark Theme Compatibility */
/* Active tabs */
@media screen {
	html.skin-theme-clientpref-night .template-page-tabs > span[style*="font-weight:bold"] {
		background-color: #1c252e !important;
		color: var(--color-base, #ffffff) !important;
		border-bottom: 0;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .template-page-tabs > span[style*="font-weight:bold"] {
		background-color: #1c252e !important;
		color: var(--color-base, #ffffff) !important;
		border-bottom: 0;
	}
}

/* Inactive tabs */
@media screen {
	html.skin-theme-clientpref-night .template-page-tabs,
	html.skin-theme-clientpref-night .template-page-tabs > span {
		background: var(--background-color-base, #000000) !important;
		color: var(--color-base, #ffffff) !important;
		border-color: #333333;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .template-page-tabs,
	html.skin-theme-clientpref-os .template-page-tabs > span {
		background: var(--background-color-base, #000000) !important;
		color: var(--color-base, #ffffff) !important;
		border-color: #333333;
	}
}