Difference between revisions of "MediaWiki:Mobile.css"

From BIONICLEsector01
m
(Prevent tables from collapsing on mobile)
 
Line 286: Line 286:
 
-webkit-mask-image: url( https://biosector01.com/images/templates/skakdi.svg );
 
-webkit-mask-image: url( https://biosector01.com/images/templates/skakdi.svg );
 
mask-image: url( https://biosector01.com/images/templates/skakdi.svg );
 
mask-image: url( https://biosector01.com/images/templates/skakdi.svg );
 +
}
 +
 +
 +
/* don't collapse tables on mobile */
 +
.mw-collapsible.mw-collapsed tr { /* override inline styles */
 +
display: table-row !important;
 +
opacity: 1 !important;
 +
}
 +
 +
.mw-collapsible .mw-collapsible-toggle {
 +
display: none;
 
}
 
}

Latest revision as of 04:27, 13 June 2019

/* CSS placed here will affect users of the mobile site */


/* Hide the era dropdowns for mobile users */

#era-g1-dropdown,
#era-g2-dropdown {
  display: none;
}

/* Adjust gen nav for mobile users */

#gen-tab {
  border-bottom: 0 !important;
  text-align: center;
}



/***** Infobox rules (duplicated from MediaWiki:Common.css since
MobileFrontend doesn't import those rules by default) *****/

.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-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 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;
}


/***** 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 );
}


/* don't collapse tables on mobile */
.mw-collapsible.mw-collapsed tr { /* override inline styles */
	display: table-row !important;
	opacity: 1 !important;
}

.mw-collapsible .mw-collapsible-toggle {
	display: none;
}