Module:WikiProject banner/sandbox/styles.css

/* .wpb-header gets unhidden in wpbs */
.wpb-header,
.wpb-metadata,
/* TODO: Is wpb-iefix still necessary in an IE11/Edge world? */
.wpb-iefix {
	display: none;
}

/* CSS for previous design */
.wpb-header-name {
	text-align: right;
	padding: 0.3em 1em 0.3em 0.3em;
	width: 50%;
	font-weight: bold;
}

.wpb-header-assessment {
	text-align: left;
	width: 50%;
	padding: 0.3em;
}

/* CSS for redesign */
.wpb-header-combined {
	text-align: left;
	padding: 0.3em 0.3em 0.3em 0;
	font-weight: bold;
}

.wpb-header-bubbles {
    border-radius: .5em;
    padding: 0 .3em;
    margin-left: 0.5em;
    white-space: nowrap;
    font-weight: normal;
}

.wpb-nested-task-force {
	font-weight: normal;
}

.wpb-header-icon {
	width: 50px;
	text-align: center;
}

.wpb-category-box {
	background-color: #F5F5F5;
	border-width: 1px;
	width: 500px;
}

.wpbs .wpb .wpb-main {
    background: #FFFAEF;
    padding: 3px 0 3px 0.7em;
}

.wpb .wpb-main {
	padding: 3px 5px;
}

.wpbs .wpb-header {
    background: #FFFAEF;
}

.wpb-main > table {
	background: transparent;
	border: none;
	padding: 0;
	width: 100%;
	border-spacing: 0;
}

.wpb .wpb-image {
	padding: 2px 0;
}

.wpb-collapsed-head {
	text-align: left;
	padding: 0.2em 2px 0.2em 0;
}

.wpb-collapsed-notes {
	padding: 0;	
}

.wpb-collapsed-notes > table {
	width: 100%;
	background: transparent;
}

.wpb .wpb-gutter {
	padding: 2px 0 0 0;
}

.wpbs .banner-shell-inner {
    background: #f8eaba;
	border: none;
}
 
@media (min-width: 720px) {
	.wpb {
		min-width: 80%;
	}
}

.assess {
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}


@media screen {
        html.skin-theme-clientpref-night .wpb-category-box {
		/* brightness flipped */
		background-color: #0a0a0a;
	}
	html.skin-theme-clientpref-night .wpbs .wpb .wpb-main,
	html.skin-theme-clientpref-night .wpbs .wpb-header {
		/* same hue/saturation as light */ 
		background-color: #302f2d;
	}
	html.skin-theme-clientpref-night .wpbs .banner-shell-inner {
		/* matching dark color from Module:Message box/tmbox.css */
		background-color: #2e2505;
	}
}

@media screen and ( prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .wpb-category-box {
		/* brightness flipped */
		background-color: #0a0a0a;
	}
	html.skin-theme-clientpref-os .wpbs .wpb .wpb-main,
	html.skin-theme-clientpref-os .wpbs .wpb-header {
		/* same hue/saturation as light */ 
		background-color: #302f2d;
	}
	html.skin-theme-clientpref-os .wpbs .banner-shell-inner {
		/* matching dark color from Module:Message box/tmbox.css */
		background-color: #2e2505;
	}
}