Module:Banner shell/styles.css and Module:WikiProject banner/sandbox/styles.css: Difference between pages

(Difference between pages)
Jump to navigation Jump to search
Page 1
Page 2
imported>MSGJ
imported>Jonesey95
fix text color in dark mode; this generally works but may cause problems, in which case revert or try specifying a different CSS value
 
imported>MSGJ
add some classes for Template:WikiProject Portals
 
Line 1: Line 1:
/* .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;
}


/* {{pp-template}} */
/* CSS for previous design */
.banner-shell {
.wpb-header-name {
border-collapse: separate;
text-align: right;
border-spacing: 4px;
padding: 0.3em 1em 0.3em 0.3em;
width: 50%;
font-weight: bold;
}
}


.banner-shell-header {
.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;
text-align: center;
font-weight: bold;
}
}


.banner-shell-inner {
.wpb-category-box {
padding: 2px 4px;
background-color: #F5F5F5;
background: #fffaef;
border-width: 1px;
    color:inherit;
width: 500px;
border: 1px dotted gray;
}
}


@media screen {
.wpbs .wpb .wpb-main {
html.skin-theme-clientpref-night .banner-shell-inner {
background-color: #FFFAEF;
background:#2e2505;
padding: 3px 0 3px 0.7em;
        color:inherit;
}
}
}


@media screen and (prefers-color-scheme: dark) {
.wpb .wpb-main {padding: 3px 5px;}
html.skin-theme-clientpref-os .banner-shell-inner {
 
background:#2e2505;
.wpbs .wpb-header {background-color: #FFFAEF;}
        color:inherit;
 
}
.wpb-main > table {
background-color: transparent;
border: none;
padding: 0;
width: 100%;
border-spacing: 0;
}
}


/* For tmboxes inside banner-shell */
.wpb .wpb-image {padding: 2px 0;}
.banner-shell .tmbox {
 
margin: 2px 0;
.wpb-collapsed-head {
/* TODO: Still needed? Probably at least for .mbox-small */
text-align: left;
width: 100%;/* For Safari and Opera */
padding: 0.2em 2px 0.2em 0;
}
}


/* "small" tmboxes should not be small when also "nested", so reset styles that
.wpb-collapsed-notes {padding: 0;}
* are set in tmbox.css.
 
*/
.wpb-collapsed-notes > table {
.banner-shell .tmbox.mbox-small {  
width: 100%;
line-height: 1.5em;
background-color: transparent;
font-size: 100%;
}
}


/* hide things that should only display outside shells */
.wpb .wpb-gutter {padding: 2px 0 0 0;}
.banner-shell-inner .banner-shell-outside {
 
display: none;
.wpbs .banner-shell-inner {
background-color: #f8eaba;
border: none;
}
}


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


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


.wpbs .assess {
.assess {
width: 60px;
font-weight: bold;
text-align:center;
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;}
.class-fpo {background-color: #9cbdff;}
.class-complete {background-color: #b2ff66;}
.class-substantial {background-color: #ffff66;}
.class-basic {background-color: #ffaa66;}


.wpbs .banner-shell-header {
/* invert parenthesis on inactive WikiProject bubble */
border: none;
.inactive-wikiproject .wpb-header-bubbles {
padding: 0.25em 0.9em 0.25em 0;
color: inherit;
}
}


/* This selector needs to have three classes because wpbm.css will come after
@media screen {
* the shell CSS. Possibly .wpb-header will be the only class in the future in
html.skin-theme-clientpref-night .wpb-category-box {
* which case we will still need at least two.
/* brightness flipped */
*/
background-color: #0a0a0a;
.wpbs .wpb .wpb-header {
}
display: table-row;
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;
}
}
}


/* hide the header icon when banner expanded */
@media screen and ( prefers-color-scheme: dark) {
.wpbs .wpb:not(.mw-collapsed) .wpb-header-icon a {
html.skin-theme-clientpref-os .wpb-category-box {
display: none;
/* 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;
}
}
}
Retrieved from "http://70.231.62.181/index.php/Special:ComparePages"