Edge Rewrite
restyle Source code View original
// HTMLRewriter · presentation

This page was redesigned at the edge.

Cloudflare fetched the original article and streamed it through HTMLRewriter to apply an entirely new visual system without rebuilding the source page.

Jump to content

Wikipedia:WikiProject Song Contests/styles.css

Add links
From Wikipedia, the free encyclopedia
.tab-content.wpsc-tab-on,
.tab-content.wpsc-tab-off,
.wpsc-frame {
	border-radius: 7px;
}

.tab-content.wpsc-tab-on,
.tab-content.wpsc-tab-off {
	border: 2px #30C69E solid;
	color: #FFFFFF;
	font-size: 100%;
	line-height: 1.2em;
	height: calc(2.6em + 4px);
	white-space: nowrap;
}

.tab-content.wpsc-tab-on {
	background-color: #30C69E;
}

.tab-content.wpsc-tab-off {
	background-color: #D62612;
}

.tab-content.wpsc-tab-on a {
	color: #000000 !important;
}

.tab-content.wpsc-tab-off a {
	color: #FFFFFF !important;
}

.wpsc-box {
	border: 1px solid #AAAAAA;
	padding: 0 0.5em 0.5em;
	margin-top: 4px;
	position: relative;
	text-align: left;
}

#wpsc-upper {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 100%;
	gap: 4px;
}

#wpsc-upper > #wpsc-left {
	flex: 1 1 50%;
}

#wpsc-upper > #wpsc-right {
	flex: 1 1 50%;
}

html.vector-feature-limited-width-clientpref-1 #wpsc-upper > #wpsc-left {
	flex: 1 1 51%;
}

html.vector-feature-limited-width-clientpref-1 #wpsc-upper > #wpsc-right {
	flex: 1 1 49%;
}

html.vector-feature-limited-width-clientpref-1.vector-feature-custom-font-size-clientpref-2 #wpsc-upper {
	flex-direction: column;
	gap: 0;
}

.wpsc-font {
	font-family: "Georgia";
}

.wpsc-center {
	text-align: center;
}

.wpsc-bigger {
	font-size: 112%;
}

#wpsc-banner {
	padding-top: 0.5em;
	font-size: 90%;
}

#wpsc-countdowns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

body.skin-timeless #wpsc-countdowns > .content-table-wrapper > .content-table > table {
	margin: 0 auto;
}

body.skin-timeless #wpsc-countdowns > .content-table-wrapper > .content-table,
body.skin-timeless #wpsc-countdowns > .content-table-wrapper > .content-table > table {
	height: 100%;
}

#wpsc-countdowns > table,
body.skin-timeless #wpsc-countdowns > .content-table-wrapper {
	width: 33.33333333%;
	min-width: 33.33333333%;
	max-width: 33.33333333%;
	height: stretch;
	border-spacing: 0;
	border-collapse: collapse;
}

#wpsc-countdowns[data-cols="1"] > table,
body.skin-timeless #wpsc-countdowns[data-cols="1"] > .content-table-wrapper {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

#wpsc-countdowns[data-cols="2"] > table,
body.skin-timeless #wpsc-countdowns[data-cols="2"] > .content-table-wrapper {
	width: 50%;
	min-width: 50%;
	max-width: 50%;
}

#wpsc-countdowns[data-cols="4"] > table,
body.skin-timeless #wpsc-countdowns[data-cols="4"] > .content-table-wrapper {
	width: 25%;
	min-width: 25%;
	max-width: 25%;
}

#wpsc-countdowns[data-cols="5"] > table,
body.skin-timeless #wpsc-countdowns[data-cols="5"] > .content-table-wrapper {
	width: 20%;
	min-width: 20%;
	max-width: 20%;
}

#wpsc-countdowns table tr:first-child {
	height: 48px;
}

#wpsc-countdowns table tr:nth-child(2) {
	height: 100%;
}

#wpsc-countdowns table th,
#wpsc-countdowns table td {
	padding: 0;
	margin: 0;
}

h2.wpsc-h2, body.skin-timeless h2.wpsc-h2 {
	border: 1px solid #AAAAAA;
	margin: 0.5em 0;
	padding: 0.2em 0.4em;
	font-size: 120%;
	font-weight: bold;
	font-family: inherit;
}

.wpsc-linktable {
	margin: -0.5em auto 0;
}

.wpsc-linktable > caption {
	font-weight: bold;
}

.wpsc-linktable td {
	text-align: left;
	vertical-align: top;
}

.wpsc-linktable td:first-child {
	text-align: right;
	white-space: nowrap;
}

.wpsc-linktable td:only-child {
	text-align: center;
	white-space: inherit;
}

.wpsc-viewedit {
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	text-align: right;
	white-space: nowrap;
}

.wpsc-box.pcs-widen-image-ancestor,
.wpsc-box .pcs-widen-image-ancestor {
	width: unset !important;
}

.wpsc-box figure[typeof~='mw:File'].mw-halign-left,
.wpsc-box figure[typeof~='mw:File/Frameless'].mw-halign-left {
	float: left !important;
}

/* show event countdowns in a single column and simplify template lists if the width is too small */

@media (max-width: 639px) {
	#wpsc-countdowns > table,
	#wpsc-countdowns[data-cols] > table,
	body.skin-timeless #wpsc-countdowns > .content-table-wrapper,
	body.skin-timeless #wpsc-countdowns[data-cols] > .content-table-wrapper {
		display: table;
		overflow: visible;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}

	.wpsc-linktable {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: -0.5em 0 0;
	}
	
	.wpsc-linktable > tbody {
		display: contents;
	}
	
	.wpsc-linktable tr {
		display: grid;
		width: 100%;
		justify-content: left;
	}
	
	.wpsc-linktable.wpsc-linktable-short tr {
		display: block;
		text-align: left;
	}
	
	.wpsc-linktable tr.wpsc-span {
		justify-content: center;
	}
	
	.wpsc-linktable.wpsc-linktable-short tr.wpsc-span {
		text-align: center;
	}
		
	.wpsc-linktable td {
		display: block;
		text-align: left;
		grid-row: 2;
		margin-left: 1em;
	}
		
	.wpsc-linktable td:first-child {
		text-align: left;
		white-space: inherit;
		grid-column: 1 / span 2;
		grid-row: 1;
		margin-left: 0;
	}
		
	.wpsc-linktable td:last-child {
		text-align: left;
		white-space: inherit;
		grid-row: 2;
		margin-left: 0.5em;
	}
		
	.wpsc-linktable td:only-child,
	.wpsc-linktable.wpsc-linktable-short td:only-child {
		text-align: center;
		white-space: inherit;
		margin-left: 0;
	}
		
	.wpsc-linktable.wpsc-linktable-short td {
		display: inline;
		margin-left: 0;
	}
}

/* one or two columns */

@media (max-width: 875px) {
	#wpsc-upper {
		flex-direction: column;
		gap: 0;
	}
}

@media (max-width: 1271px) {
	html.vector-feature-main-menu-pinned-enabled.vector-feature-custom-font-size-clientpref-0 #wpsc-upper {
		flex-direction: column;
		gap: 0;
	}
}

@media (max-width: 1369px) {
	html.vector-feature-main-menu-pinned-enabled.vector-feature-custom-font-size-clientpref-1 #wpsc-upper {
		flex-direction: column;
		gap: 0;
	}
}

@media (max-width: 1565px) {
	html.vector-feature-limited-width-clientpref-0.vector-feature-custom-font-size-clientpref-2 #wpsc-upper {
		flex-direction: column;
		gap: 0;
	}
}

@media (min-width: 1346px) {
	html.vector-feature-main-menu-pinned-disabled.vector-feature-limited-width-clientpref-0.vector-feature-custom-font-size-clientpref-2 #wpsc-upper {
		flex-direction: row;
		gap: 4px;
	}
}

/* themes */

@media screen {
	/* light mode */
	.wpsc-box {
		background-color: #FFFFFF;
		border-color: #D62612;
	}

	.wpsc-frame {
		border: 2px #30C69E solid;
	}
	
	.wpsc-box h2.wpsc-h2 {
		background-color: #50E6CE;
		border-color: #D62612;
	}
	
	/* dark mode */
	html.skin-theme-clientpref-night .wpsc-box {
		background-color: transparent;
		border-color: #D62612;
	}

	html.skin-theme-clientpref-night .wpsc-frame {
		border: 2px #30C69E solid;
	}
	
	html.skin-theme-clientpref-night .wpsc-box h2.wpsc-h2 {
		background-color: #192F27;
		border-color: #2E5748;
	}
}

/* OS dark mode */
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .wpsc-box {
		background-color: transparent;
		border-color: #D62612;
	}

	html.skin-theme-clientpref-os .wpsc-frame {
		border: 2px #30C69E solid;
	}
	
	html.skin-theme-clientpref-os .wpsc-box h2.wpsc-h2 {
		background-color: #192F27;
		border-color: #2E5748;
	}
}
Retrieved from "https://en.wikipedia.org/w/index.php?title=Wikipedia:WikiProject_Song_Contests/styles.css&oldid=1354721983"