Module:WikiProject banner/styles.css

/* {{pp-template}} */
/* .wpb-header gets unhidden in wpbs */
.wpb-header, .wpb-metadata, .wpb-iefix {
/* TODO: Is wpb-iefix still necessary in an IE11/Edge world? */
	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;
	color: black;
}

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

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

.wpb-category-box {
	background-color: #F5F5F5;
    color:var(--color-base, #202122);
	border-width: 1px;
	width: 500px;
}

.wpbs .wpb .wpb-main {
	background-color: #FFFAEF;
    color:var(--color-base, #202122);
	padding: 3px 0 3px 0.7em;
}

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

.wpbs .wpb-header {color:var(--color-base, #202122);background-color: #FFFAEF;}

.wpb-main > table {
	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%;
}

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

.wpbs .banner-shell-inner {
	background-color: #f8eaba;
    color:var(--color-base, #202122);
	border: none;
}

.wpb-table {table-layout: fixed;}

@media (min-width: 720px) {
	.wpb {
		min-width: 80%;
	}
}

.assess {
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
    color:var(--color-base, #202122);
}
.import-top {color:var(--color-base-fixed, #202122);background-color: #FFBFFF;}
.import-high {color:var(--color-base-fixed, #202122);background-color: #FFCCFF;}
.import-mid {color:var(--color-base-fixed, #202122);background-color: #FFD9FF;}
.import-low {color:var(--color-base-fixed, #202122);background-color: #FFE7FF;}
.import-bottom {color:var(--color-base-fixed, #202122);background-color: #FFEBFF;}
.import-na {color:var(--color-base-fixed, #202122);background-color: #F5F5F5;}
.import-unknown {color:var(--color-base-fixed, #202122);background-color: #DCDCDC;}
.class-fa, .class-fl, .class-fm {color:var(--color-base-fixed, #202122);background-color: #BED3FF;}
.class-a, .class-al {color:var(--color-base-fixed, #202122);background-color: #C0FFFF;}
.class-ga {color:var(--color-base-fixed, #202122);background-color: #C0FFC0;}
.class-b, .class-bl {color:var(--color-base-fixed, #202122);background-color: #DFFFBF;}
.class-c, .class-cl {color:var(--color-base-fixed, #202122);background-color: #FFFFBE;}
.class-start {color:var(--color-base-fixed, #202122);background-color: #FFDBBF;}
.class-stub, .class-sl {color:var(--color-base-fixed, #202122);background-color: #FFC0C0;}
.class-list {color:var(--color-base-fixed, #202122);background-color: #D2C0FF;}
.class-na {color:var(--color-base-fixed, #202122);background-color: #F5F5F5;}
.class-category {color:var(--color-base-fixed, #202122);background-color: #FFDB58;}
.class-disambig {color:var(--color-base-fixed, #202122);background-color: #00FA9A;}
.class-draft {color:var(--color-base-fixed, #202122);background-color: #E7B198;}
.class-file {color:var(--color-base-fixed, #202122);background-color: #DDCCFF;}
.class-future {color:var(--color-base-fixed, #202122);background-color: #B4BBFF;}
.class-portal {color:var(--color-base-fixed, #202122);background-color: #DDB1BC;}
.class-project {color:var(--color-base-fixed, #202122);background-color: #C0C090;}
.class-redirect {color:var(--color-base-fixed, #202122);background-color: #C0C0C0;}
.class-sia {color:var(--color-base-fixed, #202122);background-color: #E9DAFF;}
.class-user {color:var(--color-base-fixed, #202122);background-color: #DDD06A;}
.class-template {color:var(--color-base-fixed, #202122);background-color: #FBCEB1;}
.class-unassessed {color:var(--color-base-fixed, #202122);background-color: #DCDCDC;}
.class-fpo {color:var(--color-base-fixed, #202122);background-color: #9cbdff;}
.class-complete {color:var(--color-base-fixed, #202122);background-color: #b2ff66;}
.class-substantial {color:var(--color-base-fixed, #202122);background-color: #ffff66;}
.class-basic {color:var(--color-base-fixed, #202122);background-color: #ffaa66;}

/* invert parenthesis on inactive WikiProject bubble */
.inactive-wikiproject .wpb-header-bubbles {
	color: inherit;
}

@media screen {
	html.skin-theme-clientpref-night .wpb-category-box {
		/* brightness flipped */
		color:var(--color-base, #202122);
		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 */ 
		color:var(--color-base, #202122);
		background-color: #302f2d;
	}
	html.skin-theme-clientpref-night .wpbs .banner-shell-inner {
		/* matching dark color from Module:Message box/tmbox.css */
		color:var(--color-base, #202122);
		background-color: #2e2505;
	}
}

@media screen and ( prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .wpb-category-box {
		/* brightness flipped */
		color:var(--color-base, #202122);
		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 */ 
		color:var(--color-base, #202122);
		background-color: #302f2d;
	}
	html.skin-theme-clientpref-os .wpbs .banner-shell-inner {
		/* matching dark color from Module:Message box/tmbox.css */
		color:var(--color-base, #202122);
		background-color: #2e2505;
	}
}