MediaWiki:Common.css

/* Custom style for portable infoboxes */ /** Main style **/ .portable-infobox { width: 270px; float: right; clear: both; margin: 0 0 1em 1em; border: 1px solid #ffda21; background: #100533; border-radius: 10px; padding: 10px; color: #fff; font-size: 82%; }

.portable-infobox table { width: 100%; border-spacing: 0; padding: 0; margin: 0; border: 0; }

/** Image style **/ .portable-infobox .pi-image-thumbnail { background: #100533; vertical-align: middle; width: 100%; height: 95%; }

/** Infobox title style **/ .portable-infobox h2.pi-title.pi-item { background-color: #dd4504; color: #fff; font-weight: 500; text-align: center; font-size: 16px; line-height: 1.5; padding: 0; }

/** Infobox sub-heading style **/ .page-content .portable-infobox .pi-header { clear: left; text-align: center; background-color: #dd7e04; font-size: 100%; color: #fff; line-height: 1.75; padding: 0; }

/** Spacing between items **/ .portable-infobox .pi-item-spacing { padding: .5px; }

/** Info style **/ .portable-infobox .text, .portable-infobox .pi-font { text-align: right; font: inherit; }

.portable-infobox .pi-data:last-of-type+.pi-group { border: none; }

.portable-infobox p {margin: 0px; padding: 0px; border-collapse:collapse; }

/** Font style for data label **/ .page-content .portable-infobox .pi-data-label { font-weight: normal; font-size: 100%; }

.portable-infobox ul.wds-tabs { display: block; text-align: center; padding-top: .7em; }

.portable-infobox .wds-tabs__tab.wds-is-current { box-shadow: none; background: #d94404; color: #fff; }

.portable-infobox .wds-tabs__tab.wds-is-current:hover { background: #ba3c0b; color: #e8e8e8; }

.portable-infobox .wds-tabs__tab { border: 1px solid #4d1925; background: #8a2b1a; margin: 0; color: #f0f0f0; font-weight: 700; margin-top: 4px; padding: 3px .5em; display: inline-block; max-width: 50%; overflow: hidden; text-overflow: hidden; vertical-align: bottom; white-space: nowrap; box-sizing: border-box; cursor: pointer; }

.portable-infobox .wds-tabs__tab:hover { background: #782618; color: #cfcfcf; }

.portable-infobox.type-elemental .wds-tabs__tab.wds-is-current { background: #fff; border-bottom: 1px solid #fff; }

.portable-infobox.type-elemental .wds-tabs__tab.wds-is-current:hover { color: #000; background: #fff; text-decoration: underline; }

.portable-infobox.type-elemental .wds-tabs__tab { border: 1px solid #ccc; margin: 0; background: #f2f7ff; color: #448; font-weight: 700; margin-top: 4px; padding: 3px .5em; font: bold 12px Verdana,sans-serif; }

.portable-infobox.type-elemental .wds-tabs__tab:hover { color: #000; background: #fff9f2; text-decoration: underline; }

.portable-infobox .wds-tabs__tab-label { height: auto; letter-spacing: normal; margin: 0; font: bold 12px Verdana,sans-serif; text-transform: none; }

.portable-infobox .wds-tabs__wrapper.right-arrow-visible .wds-tabs { -webkit-mask-image: none; }

/** Arrows to move in tabber **/ .portable-infobox .wds-tabs__arrow-left, .portable-infobox .wds-tabs__arrow-right { display: none; }

.portable-infobox .pi-image { border-top: 5px solid #dd4504; }

.portable-infobox.type-elemental .pi-image { border: 1px solid #ccc; }

/** Image caption **/ .portable-infobox .pi-caption { color: rgba(var(--theme-page-text-color--rgb),.4); font-size: 12px; text-align: left; }

/** Border between information **/ .portable-infobox .pi-border-color { border-color: #505050 }

/* Skin for polls */ .d-poll { color: #dd4504; background: #082e6f; /** Fallback color **/ background: rgba(8,46,111,0.3); border: 1px solid #dc540a; border-radius: 4px; }

.d-poll__question { background: #dd4504; color: #fff; padding: 0.6em 1em; }

.d-poll__answer { color: #fff; background: #082e6f; /** Fallback color **/ background: rgba(8,46,111,0.3); border-bottom: 1px solid #dc540a; position: relative; }

.d-poll__answerName { color: #fff; display: block; padding: 0.6em 1em; }

.d-poll__answerVotes { position: absolute; top: 0; right: 0; padding: 0.6em 1em; }

.d-poll__info { color: #fff; padding: 0.6em 1em; text-align: center; }

.d-poll input[type="submit"] { color: #fff; background: #dd4504; border: #dd4504; padding: 0.5em; margin: 0 0.6em 1em; display: block; width: calc(100% - 1.3em); }

.d-poll input[type="submit"]:hover { background: #b03d0c; }

/* Grayscale image transition */ .grayscale img { filter: grayscale(90%); -webkit-filter: grayscale(90%); transition: 0.5s; } .grayscale img:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); }

/* Custom username colours */ /** Founder - Color: BoBoiBoy Light **/ a[href$=":Hungryme"], a[href$="/Hungryme"] { color: #fffbe8 !important; font-weight: 600 !important; }

/** Bureaucrats - Color: BoBoiBoy Lightning **/ a[href$=":Sarah_xyz"], a[href$="/Sarah_xyz"], a[href$=":Sarah%20xyz"], a[href$="/Sarah%20xyz"], a[href$=":Dirk_tow_mater_celoso"], a[href$="/Dirk_tow_mater_celoso"], a[href$=":Dirk%20tow%20mater%20celoso"], a[href$="/Dirk%20tow%20mater%20celoso"], a[href$=":FrostiesPrincess"], a[href$="/FrostiesPrincess"] { color: #e0cf10 !important; font-weight: 600 !important; }

/** Administrators - Color: BoBoiBoy Leaf **/ a[href$=":ThunderDragon2"], a[href$="/ThunderDragon2"], a[href$=":AzuraJae"], a[href$="/AzuraJae"], a[href$=":Universal_Emerald"], a[href$="/Universal_Emerald"], a[href$=":Universal%20Emerald"], a[href$="/Universal%20Emerald"], a[href$=":KoKo_the_Black_Cat"], a[href$="/KoKo_the_Black_Cat"] a[href$=":KoKo%20the%20Black%20Cat"], a[href$="/KoKo%20the%20Black%20Cat"] { color: #24c938 !important; font-weight: 600 !important; }

/** Chat Moderators - Color: BoBoiBoy Wind **/ a[href$=":Beckoliver.marron"], a[href$="/Beckoliver.marron"] { color: #1177d6 !important; font-weight: 600 !important; }

/* Background image */ .main-container { background: url(https://static.wikia.nocookie.net/boboiboy/images/0/08/Site-background-dark/revision/latest) no-repeat fixed center top; }

/* UCX Light Theme */ /** Background image **/ .theme-fandomdesktop-light .main-container { background: url(https://static.wikia.nocookie.net/boboiboy/images/b/b5/Site-background-light/revision/latest) no-repeat fixed center top/cover; }

/** Notice **/ /*** Template:Spoiler ***/ .theme-fandomdesktop-light #spoiler.notice > table { border: #a71016 solid 2px!important; background-color: #d1e0ff; }

/*** Template:Delete and Template:Disambig ***/ .theme-fandomdesktop-light #delete.boilerplate, .theme-fandomdesktop-light #disambig.boilerplate { background-color: #c4ddff!important; color: var(--theme-page-text-color)!important; border: #000 1px solid!important; }

/*** Template:Stub and Template:Conjecture ***/ .theme-fandomdesktop-light #stub.notice > table, .theme-fandomdesktop-light #conjecture.notice > table { border: #e2611a solid 1px!important; background-color: #cbe1ff; }

/** Template:Stats **/ .theme-fandomdesktop-light .stats { border: 3px #ff7f00 outset!important; background: #dfedff!important; color: #000!important; }

.theme-fandomdesktop-light .stat-title { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #ffa500), color-stop(75%, #ff7f00))!important; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #ffa500), color-stop(75%, #ff7f00))!important; background-image: -moz-linear-gradient(top, #ffa500 25%, #ff7f00 75%)!important; background-image: -o-linear-gradient(top, #ffa500 25%, #ff7f00 75%)!important; background-image: -ms-linear-gradient(top, #ffa500 25%, #ff7f00 75%)!important; }

.theme-fandomdesktop-light .stat-bar { background: #6ad817!important; }

.theme-fandomdesktop-light .stat-bar-bg { background: #d2e0f3!important; }

/** Skin for polls. Mostly finished, not final **/ .theme-fandomdesktop-light .d-poll { color: #dd4504; background: #082e6f; /** Fallback color **/ background: rgba(8,46,111,0.3); border: 1px solid #69f; }

.theme-fandomdesktop-light .d-poll__question { background: #69f; }

.theme-fandomdesktop-light .d-poll__answer { color: #fff; background: #082e6f; /** Fallback color **/ background: rgba(8,46,111,0.3); border-bottom: 1px solid #69f; }

.theme-fandomdesktop-light .d-poll__answerName { color: #fff; }

.theme-fandomdesktop-light .d-poll__info { color: #fff; }

.theme-fandomdesktop-light .d-poll input[type="submit"] { color: #fff; background: #69f; border: #69f; }

.theme-fandomdesktop-light .d-poll input[type="submit"]:hover { background: #4477dc; }

/** Custom username colours **/ /*** Founder - Color: BoBoiBoy Solar ***/ .theme-fandomdesktop-light a[href$=":Hungryme"], .theme-fandomdesktop-light a[href$="/Hungryme"] { text-shadow: 1px 1px 2px #000, 1px 1px 6px #ffbf00 !important; }

/*** Bureaucrats - Color: BoBoiBoy Thunderstorm ***/ .theme-fandomdesktop-light a[href$=":Sarah_xyz"], .theme-fandomdesktop-light a[href$="/Sarah_xyz"], .theme-fandomdesktop-light a[href$=":Sarah%20xyz"], .theme-fandomdesktop-light a[href$="/Sarah%20xyz"], .theme-fandomdesktop-light a[href$=":Dirk_tow_mater_celoso"], .theme-fandomdesktop-light a[href$="/Dirk_tow_mater_celoso"], .theme-fandomdesktop-light a[href$=":Dirk%20tow%20mater%20celoso"], .theme-fandomdesktop-light a[href$="/Dirk%20tow%20mater%20celoso"], .theme-fandomdesktop-light a[href$=":FrostiesPrincess"], .theme-fandomdesktop-light a[href$="/FrostiesPrincess"] { color: #fff0f3 !important; text-shadow: 1px 1px 2px #000, 1px 1px 6px #ff0048 !important; }

/*** Administrators - Color: BoBoiBoy Thorn ***/ .theme-fandomdesktop-light a[href$=":ThunderDragon2"], .theme-fandomdesktop-light a[href$="/ThunderDragon2"], .theme-fandomdesktop-light a[href$=":AzuraJae"], .theme-fandomdesktop-light a[href$="/AzuraJae"], .theme-fandomdesktop-light a[href$=":Universal_Emerald"], .theme-fandomdesktop-light a[href$="/Universal_Emerald"], .theme-fandomdesktop-light a[href$=":Universal%20Emerald"], .theme-fandomdesktop-light a[href$="/Universal%20Emerald"], .theme-fandomdesktop-light a[href$=":KoKo_the_Black_Cat"], .theme-fandomdesktop-light a[href$="/KoKo_the_Black_Cat"] .theme-fandomdesktop-light a[href$=":KoKo%20the%20Black%20Cat"], .theme-fandomdesktop-light a[href$="/KoKo%20the%20Black%20Cat"] { color: #d4ffd8 !important; text-shadow: 1px 1px 2px #000, 1px 1px 6px #17a628 !important; }

/*** Chat Moderators - Color: BoBoiBoy Cyclone ***/ .theme-fandomdesktop-light a[href$=":Beckoliver.marron"], .theme-fandomdesktop-light a[href$="/Beckoliver.marron"] { color: #e5f4ff !important; text-shadow: 1px 1px 2px #000, 1px 1px 6px #0043ff !important; }