MediaWiki:Mobile.css: Difference between revisions

From Zelda Dungeon Wiki
Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
(add tabs)
(0 padding for tabset)
Line 67: Line 67:
.tabs2d > .tabsetleft, .zdw-tabcontainer__tabset--left { float: left; }
.tabs2d > .tabsetleft, .zdw-tabcontainer__tabset--left { float: left; }
.tabs2d > .tabsettop, .zdw-tabset { margin: 0px !important; }
.tabs2d > .tabsettop, .zdw-tabset { margin: 0px !important; }
.tabs2d > .tabset, .zdw-tabset { padding: 0px; }
.tabs2d > .tabset > .tab2, .zdw-tab  { display: block; padding: 0px 10px; margin: 0px; border: 1px solid #5a7db5; }
.tabs2d > .tabset > .tab2, .zdw-tab  { display: block; padding: 0px 10px; margin: 0px; border: 1px solid #5a7db5; }
.tabs2d > .tabsettop > .tab2, .zdw-tabcontainer__tabset--top .zdw-tab { float: left; height: 30px; line-height: 30px; }
.tabs2d > .tabsettop > .tab2, .zdw-tabcontainer__tabset--top .zdw-tab { float: left; height: 30px; line-height: 30px; }

Revision as of 09:11, June 27, 2020

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

/* Mobile fixes for boxes */
#page-actions li {
  display: inline-block;
}
.box.infobox {
  float: none !important;
  margin-left: 0 !important;
  width: auto !important;
}
.box table {
  display: table;
  margin: 0;
}
.box tr.header {
  display: table-row;
  height: initial;
  border-top: none;
  margin-top: 0;
}

/* Common boxes */
.box, .zdw-box { float: none; margin: 0px; margin-bottom: 1em; border: 1px solid #253125; padding: 2px; width: auto; background-color: #f0ddbd; }
.box > div, .zdw-box > div { border-bottom: 0px; padding: 0px; font-weight: normal; font-family: inherit; }
.box > div + div, .zdw-box:not(.zdw-tabcontainer) > div + div { margin-top: 2px; }
.darkbox, .zdw-box--dark { margin: 1em 0em; border: 3px solid #19345e; padding: .2em; background-color: #c3d1e8; }
.box + .box, .box + .zdw-box, .zdw-box + .box, .zdw-box + .zdw-box { margin-top: 1em; }
.box table, .zdw-box table { width: 100%; }
.box .title, .zdw-box .zdw-box__title { position: relative; border: 1px solid #253125; padding: .2em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/3/3c/BoxTitleTexture.png"); font-weight: bold; font-size: 1.1em; }
.box .title ._toggler, .zdw-box .zdw-box__title ._toggler { position: absolute; right: .5em; }
.box .title .edit, .zdw-box .zdw-box__title .edit { position: absolute; left: .5em; }
.header { padding: 0em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/c/c4/BoxHeaderTexture.png"); font-weight: bold; }
.label { padding: 0em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/d/d3/BoxLabelTexture.png"); font-weight: bold; }
.even { background-color: #ffffff; }

/* Infobox */
.infobox img { margin-bottom: 2px; max-width: 258px; height: auto; }
.infotable { margin: 0px; border: 1px solid #253125; border-collapse: collapse; width: 100%; height: 100%; font-size: .95em; }
.infotable th, .infotable td { border: 1px solid #253125; padding: 2px; vertical-align: middle; }

.infobox-hostile, .infobox-hostile .title, .infobox-hostile th, .infobox-hostile td { border-color: red; }
.infobox-hostile .title, .infobox-hostile .header, .infobox-hostile .label { background-color: #ff4444; }
.infobox-dungeon, .infobox-dungeon .title, .infobox-dungeon th, .infobox-dungeon td { border-color: black; }
.infobox-dungeon .title, .infobox-dungeon .header, .infobox-dungeon .label { background-color: #333333; }
.infobox-dungeon .title, .infobox-dungeon .header { color: white; }
.infobox-location, .infobox-location .title, .infobox-location th, .infobox-location td { border-color: brown; }
.infobox-location .title, .infobox-location .header, .infobox-location .label { background-color: #995533; }
.infobox-location .title, .infobox-location .header { color: #d5f1e5; }
.infobox-character, .infobox-character .title, .infobox-character th, .infobox-character td { border-color: green; }
.infobox-character .title, .infobox-character .header, .infobox-character .label { background-color: #00cc00; }
.infobox-item, .infobox-item .title, .infobox-item th, .infobox-item td { border-color: orange; }
.infobox-item .title, .infobox-item .header, .infobox-item .label { background-color: #ff9933; }
.infobox-knowledge, .infobox-knowledge .title, .infobox-knowledge th, .infobox-knowledge td { border-color: purple; }
.infobox-knowledge .title, .infobox-knowledge .header, .infobox-knowledge .label { background-color: #cc33ee; }
.infobox-nondiegetic, .infobox-nondiegetic .title, .infobox-nondiegetic th, .infobox-nondiegetic td { border-color: gray; }
.infobox-nondiegetic .title, .infobox-nondiegetic .header, .infobox-nondiegetic .label { background-color: #cccccc; }

/* Tabs2 Core Functionality */
/* Hide things until the js is ready to show them */
.tabcontent2:not(.default), .zdw-tabcontent:not(.default) { display: none; }

/* Tabs2D */
.tabs2d.tabtarget, .zdw-tabcontainer { position: relative; padding: 10px; }
.tabs2d.tabtarget.hastabstop, .zdw-tabcontainer--hastabstop { margin-top: 31px; }
.tabs2d > .tabsettop, .zdw-tabcontainer__tabset--top { position: absolute; top: -32px; }
.tabs2d > .tabsetleft, .zdw-tabcontainer__tabset--left { float: left; }
.tabs2d > .tabsettop, .zdw-tabset { margin: 0px !important; }
.tabs2d > .tabset, .zdw-tabset { padding: 0px; }
.tabs2d > .tabset > .tab2, .zdw-tab  { display: block; padding: 0px 10px; margin: 0px; border: 1px solid #5a7db5; }
.tabs2d > .tabsettop > .tab2, .zdw-tabcontainer__tabset--top .zdw-tab { float: left; height: 30px; line-height: 30px; }
.tabs2d > .tabsetleft > .tab2, .zdw-tabcontainer__tabset--left .zdw-tab { padding: 5px 10px; }
.tabs2d > .tabsettop > .tab2 + .tab2, .zdw-tabcontainer__tabset--top .zdw-tab + .zdw-tab { margin-left: -1px; }
.tabs2d > .tabsetleft > .tab2 + .tab2, .zdw-tabcontainer__tabset--left .zdw-tab + .zdw-tab { margin-top: -1px; }

.tabs2d > .tabset > .tab2, .zdw-tab { background-color: #e6e6e6; }
.tabs2d > .tabset > .tab2.active, .zdw-tab.active { background-color: #f0ddbd; }
.tabs2d > .tabsettop > .tab2.active, .zdw-tabcontainer__tabset--top .zdw-tab.active { border-bottom-color: #f0ddbd; }
.tabs2d > .tabsetleft > .tab2.active, .zdw-tabcontainer__tabset--left .zdw-tab.active { border-right-color: #f0ddbd; }
.tabs2d > .tabset > .tab2:hover, .zdw-tab:hover { background-color: #5a7db5 !important; color: #fefefe; cursor: pointer; }

.tabs2d .wikitable, .zdw-tabcontent .wikitable { margin-top: 0px; }