Module:Arbcom election banner/styles.css

/* {{pp-protected|reason=match parent|small=yes}} */
.ace-banner {
	background-color: hsl(125, 65%, 93%);
}

.ace-banner-lead-links {
	border-bottom: 1px solid #a2a9b1;
	padding-bottom: 0.2em;
	margin-bottom: 0.2em;
}

.ace-banner-candidates-links {
	margin-bottom: 0.2em;
}

.ace-banner-navbar {
	float: right;
}

.ace-banner-placeholder {
	color: var(--color-placeholder, #72777d)
}

.ace-banner-error,
/* Make the numbers red and bold, because that's what {{countdown}} does and it
 * makes them look important.
 */
.ace-banner-timeleft {
	color: var(--color-destructive, #bf3c2c);
	font-weight: bold;
}

.ace-banner-votelink,
.ace-banner-candidates,
.ace-banner-mainpage {
	font-weight: bold;
}

.ace-banner-refresh {
	font-size: 85%;
}

.ace-banner .mw-collapsible {
	border: 1px solid silver;
	margin-top: 0.2em;
	padding: 2px;
}

.ace-banner-guides-title {
	font-weight: bold;
	text-align: center;
}

.ace-banner-guides-title > div {
	margin: 0 4em;
}

.ace-banner .mw-collapsible-content {
	border: 1px solid #a2a9b1;
	padding: 0.5em;
	background-color: var(--background-color-base, #fff);
}

@media screen {
	html.skin-theme-clientpref-night .ace-banner {
		background-color: hsl(125, 65%, 10%); 
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .ace-banner {
		background-color: hsl(125, 65%, 10%);
	}
}