Edge Rewrite
// 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.

// request.cf · coarse context

A page that knows where it met you.

Only coarse request metadata is shown. This demo does not display or persist visitor IP addresses.

Country
US
Cloudflare location
CMH
Connection
HTTP/2
Language
Not provided

Ray ID: a22ce96d9dc1fad4

Jump to content

Wikipedia:WikiProject Song Contests/styles.css

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