Template:SPIstatusheader/styles.css

/* {{pp-protected|small=yes}} */
.spi-status {
	width: 100%;
}

.spi-status-declined {
	background-color: #eeb4b4;
}

.spi-status-endorsed,
.spi-status-relisted {
	background-color: #add8e6;
}

.spi-status-hold {
	background-color: #d9b2d9;
}

.spi-status-more-info {
	background-color: #eea0ee;
}

.spi-status-in-progress {
	background-color: #8deeee;
}

.spi-status-checked {
	background-color: #d0f0c0;
}

.spi-status-closed {
	background-color: #ddd;
}

.spi-status-cu-request,
.spi-status-quick {
	background-color: #ffe600;
}

.spi-status-clerk-request {
	background-color: #ff8e7a;
}

.spi-status-admin-request {
	background-color: #f9ac71;
}

.spi-status-unknown {
	background-color: #fff;
}

.spi-status-default {
	background-color: #ffefdb;
}

/* same hue, saturation, flipped lightness */
@media screen {
	html.skin-theme-clientpref-night .spi-status-declined {
		background-color: hsl(0, 63%, 20%);
	}
	
	html.skin-theme-clientpref-night .spi-status-endorsed,
	html.skin-theme-clientpref-night .spi-status-relisted {
		background-color: hsl(195, 53%, 20%);
	}
	
	html.skin-theme-clientpref-night .spi-status-hold {
		background-color: hsl(300, 34%, 20%);
	}
	
	html.skin-theme-clientpref-night .spi-status-more-info {
		background-color: hsl(300, 70%, 20%);
	}
	
	html.skin-theme-clientpref-night .spi-status-in-progress {
		background-color: hsl(180, 74%, 25%);
	}
	
	html.skin-theme-clientpref-night .spi-status-checked {
		background-color: hsl(100, 62%, 15%);
	}
	
	html.skin-theme-clientpref-night .spi-status-closed {
		background-color: hsl(0, 0%, 15%);
	}
	
	/* lightness is 50%, so this is a fair bit darker than a casual flip */
	html.skin-theme-clientpref-night .spi-status-cu-request,
	html.skin-theme-clientpref-night .spi-status-quick {
		background-color: hsl(54, 100%, 10%);
	}
	
	html.skin-theme-clientpref-night .spi-status-clerk-request {
		background-color: hsl(9, 100%, 25%);
	}
	
	html.skin-theme-clientpref-night .spi-status-admin-request {
		background-color: hsl(26, 92%, 30%);
	}
	
	html.skin-theme-clientpref-night .spi-status-unknown {
		background-color: #000;
	}
	
	html.skin-theme-clientpref-night .spi-status-default {
		background-color: hsl(33, 100%, 10%);
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .spi-status-declined {
		background-color: hsl(0, 63%, 20%);
	}
	
	html.skin-theme-clientpref-os .spi-status-endorsed,
	html.skin-theme-clientpref-os .spi-status-relisted {
		background-color: hsl(195, 53%, 20%);
	}
	
	html.skin-theme-clientpref-os .spi-status-hold {
		background-color: hsl(300, 34%, 20%);
	}
	
	html.skin-theme-clientpref-os .spi-status-more-info {
		background-color: hsl(300, 70%, 20%);
	}
	
	html.skin-theme-clientpref-os .spi-status-in-progress {
		background-color: hsl(180, 74%, 25%);
	}
	
	html.skin-theme-clientpref-os .spi-status-checked {
		background-color: hsl(100, 62%, 15%);
	}
	
	html.skin-theme-clientpref-os .spi-status-closed {
		background-color: hsl(0, 0%, 15%);
	}
	
	/* lightness is 50%, so this is a fair bit darker than a casual flip */
	html.skin-theme-clientpref-os .spi-status-cu-request,
	html.skin-theme-clientpref-os .spi-status-quick {
		background-color: hsl(54, 100%, 10%);
	}
	
	html.skin-theme-clientpref-os .spi-status-clerk-request {
		background-color: hsl(9, 100%, 25%);
	}
	
	html.skin-theme-clientpref-os .spi-status-admin-request {
		background-color: hsl(26, 92%, 30%);
	}
	
	html.skin-theme-clientpref-os .spi-status-unknown {
		background-color: #000;
	}
	
	html.skin-theme-clientpref-os .spi-status-default {
		background-color: hsl(33, 100%, 10%);
	}
}