Module:WikiProject banner/sandbox/styles.css

 /* .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.3em1em0.3em0.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.3em0.3em0.3em0;
 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;
 border-width:1px;
 width:500px;
 }

 .wpbs.wpb.wpb-main{
 background-color:#FFFAEF;
 padding:3px03px0.7em;
 }

 .wpb.wpb-main{padding:3px5px;}

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

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

 .wpb.wpb-image{padding:2px0;}

 .wpb-collapsed-head{
 text-align:left;
 padding:0.2em2px0.2em0;
 }

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

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

 .wpb.wpb-gutter{padding:2px000;}

 .wpbs.banner-shell-inner{
 background-color:#f8eaba;
 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:black;
 }
 .import-top{background-color:#FFBFFF;}
 .import-high{background-color:#FFCCFF;}
 .import-mid{background-color:#FFD9FF;}
 .import-low{background-color:#FFE7FF;}
 .import-bottom{background-color:#FFEBFF;}
 .import-na{background-color:#F5F5F5;}
 .import-unknown{background-color:#DCDCDC;}
 .class-fa,.class-fl,.class-fm{background-color:#BED3FF;}
 .class-a,.class-al{background-color:#C0FFFF;}
 .class-ga{background-color:#C0FFC0;}
 .class-b,.class-bl{background-color:#DFFFBF;}
 .class-c,.class-cl{background-color:#FFFFBE;}
 .class-start{background-color:#FFDBBF;}
 .class-stub,.class-sl{background-color:#FFC0C0;}
 .class-list{background-color:#D2C0FF;}
 .class-na{background-color:#F5F5F5;}
 .class-category{background-color:#FFDB58;}
 .class-disambig{background-color:#00FA9A;}
 .class-draft{background-color:#E7B198;}
 .class-file{background-color:#DDCCFF;}
 .class-future{background-color:#B4BBFF;}
 .class-portal{background-color:#DDB1BC;}
 .class-project{background-color:#C0C090;}
 .class-redirect{background-color:#C0C0C0;}
 .class-sia{background-color:#E9DAFF;}
 .class-user{background-color:#DDD06A;}
 .class-template{background-color:#FBCEB1;}
 .class-unassessed{background-color:#DCDCDC;}
 .conflict{border:0.2emsolidred;}

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

 @mediascreen{
 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;
 }
 }

 @mediascreenand(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;
 }
 }