MediaWiki:Common.css
From BIONICLEsector01
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*
* Web Fonts from fontspring.com
*
* All OpenType features and all extended glyphs have been removed.
* Fully installable fonts can be purchased at http://www.fontspring.com
*
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Fontspring. The fonts are protected under domestic and international trademark and
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
* distributing this font software.
*
* (c) 2010-2017 Fontspring
*
*
*
*
* The fonts included are copyrighted by the vendor listed below.
*
* Vendor: FontSite Inc.
* License URL: https://www.fontspring.com/licenses/fontsite/webfont
*
*
*/
/* ^^^^^For the Franklin Gothic fonts^^^^^ */
/*
@font-face {
font-family: "Franklin Gothic FS";
src: url(/resources/fonts/FranklinGothic/franklingothic-book-webfont.woff2) format("woff2"),
url(/resources/fonts/FranklinGothic/franklingothic-book-webfont.woff) format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Franklin Gothic FS";
src: url(/resources/fonts/FranklinGothic/franklingothic-bookit-webfont.woff2) format("woff2"),
url(/resources/fonts/FranklinGothic/franklingothic-bookit-webfont.woff) format("woff");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Franklin Gothic FS";
src: url(/resources/fonts/FranklinGothic/franklingothic-demi-webfont.woff2) format("woff2"),
url(/resources/fonts/FranklinGothic/franklingothic-demi-webfont.woff) format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Franklin Gothic FS";
src: url(/resources/fonts/FranklinGothic/franklingothic-demiit-webfont.woff2) format("woff2"),
url(/resources/fonts/FranklinGothic/franklingothic-demiit-webfont.woff) format("woff");
font-weight: bold;
font-style: italic;
} */
@font-face {
font-family: "GoudyTrajan";
src: local("Goudy Trajan Pro"),
local("Goudy Trajan Regular"),
url(/resources/fonts/GoudyTrajan/goudytrajan-webfont.woff) format("woff");
font-style: normal;
}
@font-face {
font-family: "metrumatoran";
src: local("metrumatoran"),
url(/resources/fonts/metrumatoran/metrumatoran.woff) format("woff");
font-style: normal;
}
@font-face {
font-family: "okoto2016";
src: local("okoto2016"),
url(/resources/fonts/okoto2016/okoto2016.woff) format("woff");
font-style: normal;
}
@font-face {
font-family: "TradeMarker Light";
src: local("TradeMarker Light"),
url(/resources/fonts/TrademarkerLight/TrademarkerLight.woff) format("woff");
font-style: normal;
}
@font-face {
font-family: "voyamatoran";
src: local("voyamatoran"),
url(/resources/fonts/voyamatoran/voyamatoran.woff) format("woff");
font-style: normal;
}
@font-face {
font-family: "VoyaNui";
src: local("Voya Nui"),
url(/resources/fonts/VoyaNui/voyanui_1.15_4-webfont.woff) format("woff");
font-style: normal;
}
/* Edit window toolbar */
#toolbar {
margin-bottom: 6px;
}
/* Make the list of references in [[Template:Reflist]] smaller */
.references-small {
font-size: 90%;
}
/* Prevent users from highlighting footnote superscripts so they aren't included with copy/pasted text */
sup.reference {
user-select: none;
}
/* Administrator and bot highlights by Fippe */
a.mw-userlink[title="User:Swert"] { color: #09C2E3 !important; }
a.mw-userlink[title="User:Erebus"] { color: INDIGO !important; }
a.mw-userlink[title="User:Electric Turahk"] { color: #D4AF37 !important; }
a.mw-userlink[title="User:Invisible"] { color: #5e5e5e !important; }
a.mw-userlink[title="User:Dorek"] { color: DARKGREEN !important; }
a.mw-userlink[title="User:Bioran23"] { color: #FF9900 !important; }
a.mw-userlink[title="User:KZN02"] { color: SLATEGRAY !important; }
a.mw-userlink[title="User:Master of the Rahkshi"] { color: RED !important; }
a.mw-userlink[title="User:Shine"] { color: #666666 !important; }
a.mw-userlink[title="User:Triggy"] { color: SADDLEBROWN !important; }
a.mw-userlink[title="User:Varaka"] { color: #6B8E23 !important; }
a.mw-userlink[title="User:Cholie"] { color: #000055 !important; }
a.mw-userlink[title="User:Bionicleman"] { color: NAVY !important; }
a.mw-userlink[title="User:Kraahlix"] { color: #14C4FF !important; }
a.mw-userlink[title="User:Gravitan"] { color: PURPLE !important; }
a.mw-userlink[title="User:Kayru"] { color: #143D66 !important; }
a.mw-userlink[title="User:Gb1"] { color: #DC143C !important; }
a.mw-userlink[title="User:SPIRIT"] { color: ORANGERED !important; }
a.mw-userlink[title="User:Shadow Kurahk"] { color: LIMEGREEN !important; }
a.mw-userlink[title="User:Grant-Sud"] { color: FIREBRICK !important; }
a.mw-userlink[title="User:Zeero"] { color: #663300 !important; }
a.mw-userlink[title="User:Toa V"] { color: BLACK !important; }
a.mw-userlink[title="User:Derpy Hooves"] { color: #C1C5D3 !important; }
a.mw-userlink[title="User:Akihabara"] { color: #89C4D7 !important; }
a.mw-userlink[title="User:Meiko"] { color: #069D9F !important; }
a.mw-userlink[title="User:Morris the Mata Nui Cow"] { color: #f11f1f !important; }
a.mw-userlink[title="User:Zo;Tomana"] { color: #B8860B !important; }
a.mw-userlink[title="User:Kanohi Zatth"] { color: #809C80 !important; }
a.mw-userlink[title="User:Surel-nuva"] { color: #00FFFF !important; }
a.mw-userlink[title="User:Wolk"] { color: #ffbb00 !important; }
a.mw-userlink[title="User:Gonel"] { color: #808080 !important; }
/* wikitable/prettytable class for skinning normal tables */
table.wikitable,
table.prettytable {
margin: 1em 1em 1em 0;
border: 1px #aaa solid;
border-collapse: collapse;
}
.wikitable th,
.wikitable td,
.prettytable th,
.prettytable td {
border: 1px #aaa solid;
padding: 0.2em;
}
.wikitable th,
.prettytable th {
background: #f2f2f2;
text-align: center;
}
.wikitable td,
.prettytable td {
background: #f9f9f9;
}
.wikitable caption,
.prettytable caption {
font-weight: bold;
}
/* default colors for the era dropdown, navboxes, etc.; these are overridden by various Refreshed themes */
.overlay-background {
background: #f9f9f9;
}
.tray-background {
background: #f9f9f9;
border-color: #f9f9f9;
}
/* navboxes */
.navbox {
margin: 0 auto 0 auto;
border-spacing: 1px;
color: #777;
}
.navbox a {
font-weight: bold;
}
/* colored links (see [[Template:ColorLink]]) */
.color-link a,
.color-link a:visited,
.color-link a.new,
.color-link a.new:visited {
color: currentColor;
}
/* infobox backgrounds */
.mpchar {
background: url('https://biosector01.com/images/mpnav/char-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mpsoc {
background: url('https://biosector01.com/images/mpnav/society-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mpspec {
background: url('https://biosector01.com/images/mpnav/species-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mpevents {
background: url('https://biosector01.com/images/mpnav/events-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mploc {
background: url('https://biosector01.com/images/mpnav/loc-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mpmedia {
background: url('https://biosector01.com/images/mpnav/media-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mpflora {
background: url('https://biosector01.com/images/mpnav/flora-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mpfauna {
background: url('https://biosector01.com/images/mpnav/fauna-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mpobj {
background: url('https://biosector01.com/images/mpnav/objects-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mplego {
background: url('https://biosector01.com/images/mpnav/lego-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mppowers {
background: url('https://biosector01.com/images/mpnav/powers-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.mpbs01 {
background: url('https://biosector01.com/images/mpnav/bs01-back.png') no-repeat bottom right;
background-attachment: fixed;
background-color: transparent;
z-index: -1;
}
.infoTab {
font-weight: bold;
}
.infoTab:hover {
background-color: rgba(255, 255, 255, 0.3) !important;
}
#team b > a {
color:white;
}
#smallNav {
display:none;
}
/* fix overflowing of interface code pages */
.ns-8 pre {
overflow: auto;
}
/* fix era template on vector-based skins */
.topicons-vector {
position: absolute !important;
top: -35px !important;
right: 0px !important;
z-index: 10 !important;
}
.infoDark {
color: #1b2a34;
background-blend-mode: overlay;
}
.infoDark a,
.infoDark a:visited,
.darkLink a,
.darkLink .selflink {
color: #1b2a34 !important;
font-weight: bold;
}
.infoDark .infobox-main-image-wrapper img {
background-color: #1b2a34;
}
.infoDark .infobox-fg {
background-color: rgba(27, 42, 52, 0.05);
}
.infoDark .infobox-tab-active {
background-color: rgba(27, 42, 52, 0.1);
}
.infoLight {
color: #fff;
background-blend-mode: overlay;
}
.infoLight a,
.infoLight a:visited,
.whiteLink a,
.whiteLink .selflink {
color: #fff !important;
font-weight: bold;
}
.infoLight .infobox-main-image-wrapper img {
background-color: #fff;
}
.infobox a {
font-weight: bold;
}
.infoLight hr {
background: rgba(255, 255, 255, 0.8);
}
.infoDark hr {
background: rgba(27, 42, 52, 0.6);
}
.infoLight .infobox-fg {
background-color: rgba(255, 255, 255, 0.1);
}
.infoLight .infobox-tab-active {
background-color: rgba(255, 255, 255, 0.2);
}
.infoType a {
font-size: 1.1em;
}
.infobox br {
line-height: 2em; /* distinguish items that take up multiple lines from actual coded-in line breaks */
}
/* Backgrounds for infobox templates */
.infoAgori {
background: url("https://biosector01.com/images/templates/Symbol_Bara_Magna_Template_Final.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoBarraki {
background: url("https://biosector01.com/images/templates/barrakiback.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoBohrok {
background: url("https://biosector01.com/images/templates/Bohroksymbol.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoCreatures {
background: url("https://biosector01.com/images/templates/click.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoControl {
background: url("https://biosector01.com/images/templates/maskofcontrol.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoDH {
background: url("https://www.brickshelf.com/gallery/Infra-Red/BS01/Infobox-Icons/infodh2.svg") no-repeat bottom right;
background-size: 75% auto;
}
.infoEvent {
background: url("https://biosector01.com/images/templates/MataNui.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoFlora {
background: url("https://biosector01.com/images/templates/thornax.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoGB {
background: url("https://i.imgur.com/YFAqos0.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoLoc {
background: url("https://biosector01.com/images/templates/kininui.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoMakuta {
background: url("https://biosector01.com/images/templates/kraahkan_template_white.png") no-repeat bottom right;
background-size: 75% auto;
background-blend-mode: normal;
}
.infoMaster {
background: url("https://biosector01.com/images/templates/tahumask.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoMatoran {
background: url("https://biosector01.com/images/templates/char-template.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoMedia {
background: url("https://i.imgur.com/Fc0pLx7.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoObj {
background: url("https://biosector01.com/images/templates/gametru.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoOOMN {
background: url("https://biosector01.com/images/templates/MataNui.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoPerson {
background: url("https://i.imgur.com/ZaY1CBX.png") no-repeat bottom right;
background-size: 75% auto;
background-blend-mode: normal;
}
.infoPower {
background: url("https://biosector01.com/images/templates/nuvacube.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoProtector {
background: url("https://biosector01.com/images/templates/protectors-back.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoRahi {
background: url("https://biosector01.com/images/templates/rahiback.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoRahkshi {
background: url("https://biosector01.com/images/templates/Rahkshi%20Template%20Symbol%20edit.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoSkakdi {
background: url("https://biosector01.com/images/templates/skakditemplatenew.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoSkrall {
background: url("https://biosector01.com/images/templates/votmfinal.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoSkull {
background: url("https://biosector01.com/images/templates/skullspider-back.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoSoc {
background: url("https://biosector01.com/images/templates/udd.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoVahki {
background: url("https://biosector01.com/images/templates/vahki.png") no-repeat bottom right;
background-size: 75% auto;
}
.infoVehicle {
background: url("https://i.imgur.com/vavCNin.png") no-repeat bottom right;
background-size: 75% auto;
}
/* Template:WikiNav and Template:Parent */
.wikiNav {
vertical-align: top;
position: relative;
min-width: 618px;
}
.wikiNavLinks {
vertical-align: top;
width: 100%;
}
.wikiNui img {
position: absolute;
top: 0;
left: -105px;;
padding-right: 2px;
height: 100%;
}
.wikiNavLinks img {
width: 100px;
padding-right: 1px;
padding-bottom: 1px;
}
.wikiNui img:hover,
.wikiNavLinks img:hover,
.hover-img:hover {
opacity: .5;
}
.wikiNavLinks p .selflink img:hover {
opacity: 1; /*when you're on a parent page, its wikinav button won't turn transparent when you hover over it*/
}
.wikiNavLinks2 {
vertical-align: top;
width: 100%;
}
.wikiNavLinks2 img {
width: auto;
padding-right: 1px;
padding-bottom: 1px;
}
.wikiNavLinks2 img:hover,
.hover-img:hover {
opacity: .5;
}
.wikiNavLinks2 p .selflink img:hover {
opacity: 1; /*when you're on a parent page, its wikinav button won't turn transparent when you hover over it*/
}
.wikiNavFirstLink {
padding-left: 1px;
}
.wikiNavLastRow {
padding-bottom: 0;
}
.infoChar {
background: url('https://biosector01.com/images/templates/char-template.png') no-repeat bottom right;
}
.setListImage img {
width:150px;
}
/* floatThead (see Common.js) */
fthfoot {
visibility: hidden; /* It seems this element is needed for column alignment on Chrome; it looks like an annoying bottom border, so removing */
}
.fixedheader tbody tr:first-of-type td,
.fixedheader tbody tr:first-of-type th {
border-top: 0; /* remove top border from first row (not including the header) cells because the header already has a bottom border */
}
/* Widening Twitter widget to fill Social box */
#twitter-timeline iframe {
width: 100% !important;
}
#twitter-timeline div {
width:85% !important;
}
/* Experimenting with SVG masks to change the color of infobox background images */
.infoboxMaskTest {
-webkit-mask-image: url("https://www.brickshelf.com/gallery/Infra-Red/BS01/protectors-back-color-test.svg");
}
.infoboxContainer .inlineSVGContainer svg {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
}
/* Progress bar CSS taken from the LEGO Club website (club.lego.com) */
.club-progress {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 48px;
position: relative;
width: 432px;
perspective-origin: 216px 24px;
transform-origin: 216px 24px;
border: 0px none rgb(68, 68, 68);
font: 16px/24px Sense, Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(68, 68, 68) none 0px;
padding: 4px 12px;
}
.club-progress:after {
bottom: 0px;
box-sizing: border-box;
color: rgb(68, 68, 68);
display: block;
height: 24px;
left: 0px;
position: absolute;
width: 432px;
align-self: stretch;
perspective-origin: 216px 12px;
transform-origin: 216px 12px;
content: '';
border-top: 24px solid rgb(236, 102, 7);
border-right: 10px solid rgba(0, 0, 0, 0);
border-bottom: 0px none rgb(68, 68, 68);
border-left: 10px solid rgba(0, 0, 0, 0);
font: 16px/24px Sense, Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(68, 68, 68) none 0px;
}
.club-progress:before {
box-sizing: border-box;
color: rgb(68, 68, 68);
display: block;
height: 24px;
left: 0px;
position: absolute;
top: 0px;
width: 432px;
align-self: stretch;
perspective-origin: 216px 12px;
transform-origin: 216px 12px;
content: '';
border-top: 0px none rgb(68, 68, 68);
border-right: 10px solid rgba(0, 0, 0, 0);
border-bottom: 24px solid rgb(240, 131, 0);
border-left: 10px solid rgba(0, 0, 0, 0);
font: 16px/24px Sense, Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(68, 68, 68) none 0px;
}
.club-progress-inner {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 40px;
position: relative;
z-index: 1;
perspective-origin: 204px 20px;
transform-origin: 204px 20px;
background: rgb(0, 46, 81) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(68, 68, 68);
font: 16px/24px Sense, Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(68, 68, 68) none 0px;
}
.club-progress-inner:after {
bottom: 0px;
box-sizing: border-box;
color: rgb(68, 68, 68);
display: block;
height: 20px;
left: 0px;
position: absolute;
right: 0px;
width: 100%;
z-index: 0;
align-self: stretch;
perspective-origin: 204px 10px;
transform: matrix(1, -2.44929359829471e-16, 2.44929359829471e-16, 1, 0, 0);
transform-origin: 204px 10px;
content: '';
border-top: 20px solid rgba(0, 0, 0, 0);
border-right: 8px solid rgb(236, 102, 7);
border-bottom: 0px none rgb(68, 68, 68);
border-left: 8px solid rgb(236, 102, 7);
font: 16px/24px Sense, Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(68, 68, 68) none 0px;
}
.club-progress-inner:before {
box-sizing: border-box;
color: rgb(68, 68, 68);
display: block;
height: 20px;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
width: 100%;;
z-index: 0;
align-self: stretch;
perspective-origin: 204px 10px;
transform: matrix(1, -2.44929359829471e-16, 2.44929359829471e-16, 1, 0, 0);
transform-origin: 204px 10px;
content: '';
border-top: 0px none rgb(68, 68, 68);
border-right: 8px solid rgb(240, 131, 0);
border-bottom: 20px solid rgba(0, 0, 0, 0);
border-left: 8px solid rgb(240, 131, 0);
font: 16px/24px Sense, Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(68, 68, 68) none 0px;
}
.club-progress-bar {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 40px;
width: 100%;
perspective-origin: 85.671875px 20px;
transform-origin: 85.671875px 20px;
background: rgb(55, 153, 203) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(68, 68, 68);
font: 16px/24px Sense, Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(68, 68, 68) none 0px;
}
.club-progress-indicator {
box-sizing: border-box;
color: rgb(240, 240, 240);
display: block;
height: 40px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-transform: uppercase;
top: 0px;
width: 100%;
align-self: stretch;
perspective-origin: 204px 20px;
transform-origin: 204px 20px;
/* border: 0px none rgb(240, 240, 240); */
font: 22px/40px Capricorn, Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(240, 240, 240) none 0px;
}
/* Parent page banners */
.parentBanner img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
min-height: 120%;
margin-top: -10%;
opacity: .4;
}
/* Containers for era icons, parent page icons, etc. Hopefully a temporary solution until images are hosted locally */
.top-icons-container img {
max-height: 30px; /* scale down any vectors (e.g., parent page logos) or high-res images if needed */
}
.top-icons-container img:hover {
opacity: .5;
}
/* Spoilers */
.spoilers {
display: inline; /* the .hidden-spoilers styles won't work if .spoilers is a span multiple lines long, but if it's a multiline div with display: inline (so in effect a span) the styles apply correctly */
}
.hidden-spoilers {
text-shadow: 0 0 10px #000;
-o-transition: text-shadow 0.2s ease;
-moz-transition: text-shadow 0.2s ease;
-webkit-transition: text-shadow 0.2s ease;
transition: text-shadow 0.2s ease;
overflow: visible; /* don't cut off blur */
cursor: pointer;
}
.hidden-spoilers:hover {
text-shadow: 0 0 .5em #000;
}
.hidden-spoilers * { /* override a elements, etc. */
color: rgba(0, 0, 0, 0.0) !important;
}
.hidden-spoilers img { /* hide images */
opacity: 0;
}
.hidden-spoilers a.image { /* replace images with black box */
display: inline-block;
height: 100%;
background: #000;
}
.hidden-spoilers a[disabled="disabled"] { /* Disable hidden links so users don't click them accidentally. Disabled attribute disables links on IE, pointer-events: none disables links on other browsers; this uses both to get more support */
pointer-events: none;
}
/* parent page buttons */
.parent-button img {
width: 100%;
}
/* Page indicators */
.mw-indicators {
text-align: right;
}
#mw-indicator-era-g1,
#mw-indicator-era-g2 {
position: relative;
}
#firstHeadingWithIndicators {
display: inline-block;
margin-top: 2.4em; /* 2 * line-height (i.e., 2 * 1.2em) */
}
/* Seems like as of MediaWiki 1.31 extra p tags get added to the indicators? */
#mw-indicator-era-g1 p,
#mw-indicator-era-g2 p {
display: inline;
}
/* Dropdown code (for era dropdown but can be used for other dropdowns). Adapted from the Refreshed skin's implementation of fading dropdowns. */
.fadable {
-ms-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
opacity: 1;
visibility: visible;
}
.faded {
-ms-transition: opacity 0.2s ease, visibility 0.2s;
transition: opacity 0.2s ease, visibility 0.2s;
opacity: 0;
visibility: hidden;
}
.fade-trigger {
cursor: pointer;
}
/* chat */
.mwchat-useritem,
.mwchat-item-timestamp.real {
background-color: transparent;
}
.mwchat-avatar-replacement {
margin-right: 0.25em;
padding-right: 3px;
padding-left: 2px;
padding-bottom: 4px;
}
.page-MediaWiki_Smileys #mw-content-text ul:nth-of-type( 2 ),
.page-MediaWiki_Smileys #mw-content-text p:last-of-type {
display: none;
}
/***** Image themes (for infoboxes) *****/
@supports ( mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"></svg>') ) or ( -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"></svg>') ) {
.theme-image-toa::after,
.theme-image-rahkshi::after,
.theme-image-skakdi::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: bottom right;
-webkit-mask-size: 100% auto;
mask-repeat: no-repeat;
mask-position: bottom right;
mask-size: 100% auto;
pointer-events: none;
z-index: -1; /* place behind siblings */
}
}
/***** Toa *****/
.theme-image-toa::after {
-webkit-mask-image: url( https://biosector01.com/images/templates/udd.svg );
mask-image: url( https://biosector01.com/images/templates/udd.svg );
}
/***** Rakhshi *****/
.theme-image-rahkshi::after {
-webkit-mask-image: url( https://biosector01.com/images/templates/rahkshi.svg );
mask-image: url( https://biosector01.com/images/templates/rahkshi.svg );
}
/***** Skakdi *****/
.theme-image-skakdi::after {
-webkit-mask-image: url( https://biosector01.com/images/templates/skakdi.svg );
mask-image: url( https://biosector01.com/images/templates/skakdi.svg );
}
iframe {
border: 0;
}
/***** List of appearances (Template:Appearancelist) *****/
.appearances {
column-count: 4;
column-width: 15em;
}
/* hide the dummy references that cause sections to be shown */
.appearances > .mw-references-wrap {
display: none;
}
/* only display a section when a dummy reference is placed before it */
.appearances-section {
display: none;
}
.mw-references-wrap + .appearances-section {
/* inline-block prevents section from being split across multiple columns
when there are fewer sections than allowed columns;
see https://css-tricks.com/almanac/properties/b/break-inside/#comment-1602153 */
display: inline-block;
width: 100%;
}
/* only display a subsection header when a reference is placed after it */
.appearances-subsection-header:last-child {
display: none;
}
.appearances-subsection-header {
display: initial;
}
.appearances-section {
break-inside: avoid;
}
.appearances-section .mw-references-wrap {
font-size: 0.9em;
}
/* hide the ref-specific styling to look like traditional bullets */
.appearances-section ol {
margin: 0.3em 0 0 1.6em;
}
.appearances-section li {
list-style-type: disc;
}
.appearances-section li li {
list-style-type: circle;
}
.appearances-section li:before {
display: none;
}
.appearances-section .mw-cite-backlink {
display: none;
}
.appearances-section-header {
font-size: 1.25em;
font-weight: bold;
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.appearances-subsection-header {
font-weight: bold;
padding-bottom: 0.5em;
}
/*******************************************************************************
************************************ Colors ***********************************
******************************************************************************/
/* CSS variables describing some colors from the color guide */
body {
/* elements */
--color-g1-element-matoran-universe-fire: #b22222;
--color-g1-element-matoran-universe-water: #4993C0;
--color-g1-element-matoran-universe-air: #007000;
--color-g1-element-matoran-universe-stone: #8F735D;
--color-g1-element-matoran-universe-earth: #696969;
--color-g1-element-matoran-universe-ice: #BDBDBD;
--color-g1-element-matoran-universe-light: #CFB53B;
--color-g1-element-matoran-universe-shadow: #3B444B;
--color-g1-element-matoran-universe-lightning: #4169E1;
--color-g1-element-matoran-universe-magnetism: #2F4F4F;
--color-g1-element-matoran-universe-plasma: #E68615;
--color-g1-element-matoran-universe-gravity: #6B327B;
--color-g1-element-matoran-universe-sonics: #898788;
--color-g1-element-matoran-universe-jungle: #01796F;
--color-g1-element-matoran-universe-iron: #CC5500;
--color-g1-element-matoran-universe-psionics: #122246;
--color-g1-element-spherus-magna-fire: #92000A;
--color-g1-element-spherus-magna-water: DODGERBLUE;
--color-g1-element-spherus-magna-jungle: OLIVEDRAB;
--color-g1-element-spherus-magna-sand: BURLYWOOD;
--color-g1-element-spherus-magna-ice: LIGHTBLUE;
--color-g1-element-spherus-magna-iron: STEELBLUE;
--color-g1-element-spherus-magna-earth: #7A340D;
--color-g1-element-spherus-magna-rock: #555555;
--color-g2-element-okoto-fire: #ED1C24;
--color-g2-element-okoto-ice: #CCCCFF;
--color-g2-element-okoto-earth: #32004A;
--color-g2-element-okoto-jungle: #228B22;
--color-g2-element-okoto-stone: #924124;
--color-g2-element-okoto-water: #0087BD;
/* species */
--color-g1-species-matoran: #AA802E;
--color-g1-species-ta-matoran: var(--color-g1-element-matoran-universe-fire);
--color-g1-species-ga-matoran: var(--color-g1-element-matoran-universe-water);
--color-g1-species-le-matoran: var(--color-g1-element-matoran-universe-air);
--color-g1-species-po-matoran: var(--color-g1-element-matoran-universe-stone);
--color-g1-species-onu-matoran: var(--color-g1-element-matoran-universe-earth);
--color-g1-species-ko-matoran: var(--color-g1-element-matoran-universe-ice);
--color-g1-species-av-matoran: var(--color-g1-element-matoran-universe-light);
--color-g1-species-shadow-matoran: var(--color-g1-element-matoran-universe-shadow);
--color-g1-species-vo-matoran: var(--color-g1-element-matoran-universe-lightning);
--color-g1-species-fa-matoran: var(--color-g1-element-matoran-universe-magnetism);
--color-g1-species-su-matoran: var(--color-g1-element-matoran-universe-plasma);
--color-g1-species-ba-matoran: var(--color-g1-element-matoran-universe-gravity);
--color-g1-species-de-matoran: var(--color-g1-element-matoran-universe-sonics);
--color-g1-species-bo-matoran: var(--color-g1-element-matoran-universe-jungle);
--color-g1-species-fe-matoran: var(--color-g1-element-matoran-universe-iron);
--color-g1-species-ce-matoran: var(--color-g1-element-matoran-universe-psionics);
--color-g1-species-makuta: #1E1E1E;
--color-g1-species-skakdi: #06A265;
--color-g1-species-vortixx: #1B2A34;
/* factions */
--color-g1-faction-great-beings: #B48455;
--color-g1-faction-fire-tribe: var(--color-g1-element-spherus-magna-fire);
--color-g1-faction-water-tribe: var(--color-g1-element-spherus-magna-water);
--color-g1-faction-jungle-tribe: var(--color-g1-element-spherus-magna-jungle);
--color-g1-faction-sand-tribe: var(--color-g1-element-spherus-magna-sand);
--color-g1-faction-rock-tribe: var(--color-g1-element-spherus-magna-rock);
--color-g1-faction-sisters-of-the-skrall: var(--color-g1-faction-rock-tribe);
--color-g1-faction-bone-hunters: var(--color-g1-element-spherus-magna-rock);
--color-g1-faction-ice-tribe: var(--color-g1-element-spherus-magna-ice);
--color-g1-faction-iron-tribe: #EC5800; /* the tribe's survivors changed their color from the color associated with iron */
--color-g1-faction-earth-tribe: var(--color-g1-element-spherus-magna-earth);
--color-g1-faction-order-of-mata-nui: #FF8C00;
--color-g1-faction-brotherhood-of-makuta: #000000;
--color-g1-faction-dark-hunters: #00421B;
--color-g1-faction-barraki: #004953;
--color-g1-faction-league-of-six-kingdoms: var(--color-g1-faction-barraki);
--color-g1-faction-hand-of-artakha: #B2BEB5;
--color-g1-faction-bohrok: #6D6E6C;
--color-g1-faction-nynrah-ghosts: #694027;
--color-g1-faction-ta-koro-guard: #CC1100;
--color-g1-faction-ga-koro-guard: #0066FF;
--color-g1-faction-gukko-force: DARKOLIVEGREEN;
--color-g1-faction-po-koro-guard: #CD661D;
--color-g1-faction-ussalry: #990099;
--color-g1-faction-sanctum-guard: #8DB6CD;
--color-g1-faction-chroniclers-company: #6EC5D8;
--color-g1-faction-matoran-resistance: #E8AB23;
--color-g1-faction-toa-cordak: #5F9EA0;
--color-g1-faction-toa-hagah: #7F462C;
--color-g1-faction-rahaga: #A2B541;
--color-g1-faction-toa-hagah-rahaga: #7F462C;
--color-g1-faction-toa-mangai: #27462C;
--color-g1-faction-toa-metru: #990000;
--color-g1-faction-toa-hordika: #848550;
--color-g1-faction-toa-metru-toa-hordika: #7B2E2F;
--color-g1-faction-toa-mata: #C4281B;
--color-g1-faction-toa-nuva: #8A9197;
--color-g1-faction-toa-mata-toa-nuva: #AA98A9;
--color-g1-faction-toa-inika: #00CED1;
--color-g1-faction-toa-mahri: #2E8B57;
--color-g1-faction-toa-inika-toa-mahri: #87CEEB;
}