Jump to content

Template:Village pump page header/styles.css: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
Creating so we can hide TOC link on Vector 2022 (where it does nothing). Might convert more to TemplateStyles later
 
Make header tabs readable.
 
(10 intermediate revisions by 4 users not shown)
Line 1: Line 1:
/* {{pp-template}} */
body.skin-vector-2022 .vph-skiptotoc {
body.skin-vector-2022 .vph-skiptotoc {
display: none;
display: none;
}

.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;
}

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

@media screen {
html.skin-theme-clientpref-night .vph td a,
html.skin-theme-clientpref-night .vph td,
html.skin-theme-clientpref-night .vph div {
background: transparent !important;
color: var(--color-base) !important;
}


}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .vph td a,
html.skin-theme-clientpref-os .vph td,
html.skin-theme-clientpref-os .vph div {
background: transparent !important;
color: var(--color-base) !important;
}
}
}

Latest revision as of 15:49, 11 July 2024

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

.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;
}

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

@media screen {
    html.skin-theme-clientpref-night .vph td a,
    html.skin-theme-clientpref-night .vph td,
	html.skin-theme-clientpref-night .vph div {
		background: transparent !important;
		color: var(--color-base) !important;
	}


}
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .vph td a,
    html.skin-theme-clientpref-os .vph td,
	html.skin-theme-clientpref-os .vph div {
		background: transparent !important;
		color: var(--color-base) !important;
	}
}