Template:SPIstatusheader/styles.css

/* */ .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%); } }