Template:Village pump page header/styles.css

/* {{pp-template}} */
body.skin-vector-2022 .vph-skiptotoc {
	display: none;
}

.vph .tab-content {
	border: 2px solid #A3A3BF;
}

.vph-wrapper {
	margin: 4px auto;
	box-sizing: border-box;
}

.vph-body {
	display: flex;
	gap: 1em;
	margin-bottom: 1em;
}

.vph-image {
	flex: 0 1 auto;
	padding-top: .5em;
}

.vph-contents {
	flex: 1 1;
}

.vph-search {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:1em;
	justify-content:center;
}

.vph-on-tab.tab-content, .vph-on-tab {
	background: #eaeaff;
	color: inherit;
}

.vph-off-tab.tab-content, .vph-off-tab {
	background: #eaeaf7;
	color: inherit;
}

@media (max-width:719px) {
	.vph-image {
		display: none;
	}
}

@media screen {
    html.skin-theme-clientpref-night .vph-on-tab.tab-content,
    html.skin-theme-clientpref-night .vph-on-tab {
    	background-color: #362a5b;
    }
    
    html.skin-theme-clientpref-night .vph-off-tab.tab-content,
    html.skin-theme-clientpref-night .vph-off-tab {
    	background-color: #23235c;
    }
}

@media screen and ( prefers-color-scheme: dark ) {
    html.skin-theme-clientpref-os .vph-on-tab.tab-content,
    html.skin-theme-clientpref-os .vph-on-tab {
    	background-color: #362a5b;
    }
    
    html.skin-theme-clientpref-os .vph-off-tab.tab-content,
    html.skin-theme-clientpref-os .vph-off-tab {
    	background-color: #23235c;
    }
}