MediaWiki:Mobile.css: Difference between revisions
Jump to navigation
Jump to search
Want an adless experience? Log in or Create an account.
mNo edit summary |
mNo edit summary |
||
(12 intermediate revisions by 2 users not shown) | |||
Line 12: | Line 12: | ||
.box .title .edit, .zdw-box .zdw-box__title .edit { position: absolute; left: .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; } | .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; } | .zdw-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; } | .even { background-color: #ffffff; } | ||
Line 21: | Line 21: | ||
.infobox-hostile, .infobox-hostile .title, .infobox-hostile th, .infobox-hostile td { border-color: red; } | .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-hostile .title, .infobox-hostile .header, .infobox-hostile .zdw-label { background-color: #ff4444; } | ||
.infobox-dungeon, .infobox-dungeon .title, .infobox-dungeon th, .infobox-dungeon td { border-color: black; } | .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, .infobox-dungeon .zdw-label { background-color: #333333; } | ||
.infobox-dungeon .title, .infobox-dungeon .header { color: white; } | .infobox-dungeon .title, .infobox-dungeon .header { color: white; } | ||
.infobox-location, .infobox-location .title, .infobox-location th, .infobox-location td { border-color: brown; } | .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, .infobox-location .zdw-label { background-color: #995533; } | ||
.infobox-location .title, .infobox-location .header { color: #d5f1e5; } | .infobox-location .title, .infobox-location .header { color: #d5f1e5; } | ||
.infobox-character, .infobox-character .title, .infobox-character th, .infobox-character td { border-color: green; } | .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-character .title, .infobox-character .header, .infobox-character .zdw-label { background-color: #00cc00; } | ||
.infobox-item, .infobox-item .title, .infobox-item th, .infobox-item td { border-color: orange; } | .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-item .title, .infobox-item .header, .infobox-item .zdw-label { background-color: #ff9933; } | ||
.infobox-knowledge, .infobox-knowledge .title, .infobox-knowledge th, .infobox-knowledge td { border-color: purple; } | .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-knowledge .title, .infobox-knowledge .header, .infobox-knowledge .zdw-label { background-color: #cc33ee; } | ||
.infobox-nondiegetic, .infobox-nondiegetic .title, .infobox-nondiegetic th, .infobox-nondiegetic td { border-color: gray; } | .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; } | .infobox-nondiegetic .title, .infobox-nondiegetic .header, .infobox-nondiegetic .zdw-label { background-color: #cccccc; } | ||
/* Horizontal Lists */ | |||
.hlist > li, .hlist > * > li, .zdw-hlist > li, .zdw-hlist > * > li { display: inline; margin: 0; } | |||
.hlist > li:after, .hlist > * > li:after, .zdw-hlist > li:after, .zdw-hlist > * > li:after { content: " · "; font-weight: bold; } | |||
.hlist > li:last-child:after, .hlist > * > li:last-child:after, .zdw-hlist > li:last-child:after, .zdw-hlist > * > li:last-child:after { content: none; } | |||
.hlist > li.hlist-last-child:after, .hlist > * > li.hlist-last-child:after { content: none; } /* IE8 */ | |||
/* Tabs */ | |||
/* Hide things until the js is ready to show them */ | /* Hide things until the js is ready to show them */ | ||
.zdw-tabcontent:not(.default) { display: none; } | |||
.zdw-box.zdw-tabcontainer { position: relative; padding: 10px; } | |||
. | .zdw-box.zdw-tabcontainer--hastabstop { margin-top: 33px !important; } | ||
. | .zdw-box.zdw-tabcontainer--hastabstop > .zdw-tabcontainer__tabset--top { position: absolute; top: -32px; } | ||
. | .zdw-box.zdw-tabcontainer--hastabsleft > .zdw-tabcontainer__tabset--left { float: left; } | ||
. | ul.zdw-tabset { margin: 0 !important; } | ||
. | ul.zdw-tabset { display: flex; overflow-x: auto; } | ||
.zdw-tabcontainer__tabset--left .zdw-tabset { flex-direction: column; } | |||
li.zdw-tab { display: block; padding: 0px 10px; margin: 0px; border: 1px solid #5a7db5; } | |||
.zdw-tabcontainer__tabset--top .zdw-tab { height: 30px; line-height: 30px; white-space: nowrap; } | |||
.zdw-tabcontainer__tabset--left .zdw-tab { padding: 5px 10px; } | |||
.zdw-tabcontainer__tabset--top .zdw-tab + .zdw-tab { margin-left: -1px; } | |||
.zdw-tabcontainer__tabset--left .zdw-tab + .zdw-tab { margin-top: -1px; } | |||
.zdw-tab { background-color: #e6e6e6; } | |||
.zdw-tab.active { background-color: #f0ddbd; } | |||
. | .zdw-tabcontainer__tabset--top .zdw-tab { border-bottom-color: #253125; } | ||
.zdw-tabcontainer__tabset--left .zdw-tab { border-right-color: #253125; } | |||
.zdw-tabcontainer__tabset--top .zdw-tab.active { border-bottom-color: #f0ddbd; } | |||
.zdw-tabcontainer__tabset--left .zdw-tab.active { border-right-color: #f0ddbd; } | |||
.zdw-tab:hover { background-color: #5a7db5 !important; color: #fefefe; cursor: pointer; } | |||
. | .zdw-tabcontent .wikitable { margin-top: 0px; } | ||
/* Remove extra space below tab container in a navbox */ | |||
.zdw-box.navbox .zdw-box.zdw-tabcontainer { margin-bottom: 0; } | |||
/* Mobile fixes for Tabs */ | |||
.zdw-tabset { padding-left: 0px !important; } | |||
.zdw-tab { margin-bottom: 0px !important; } | |||
/* End Tabs */ | |||
/* Gallery Boxes */ | |||
li.gallerybox div.zdw-thumb--dark { background-color: #7c6e60; background-image: url('//www.zeldadungeon.net/wiki/images/d/d7/PicboxTexture.jpg'); } | |||
/* Mobile fixes for boxes */ | /* Mobile fixes for boxes */ | ||
Line 82: | Line 103: | ||
} | } | ||
. | #mw-mf-page-center, .header-container.header-chrome, #main-menu-input:checked ~ #mw-mf-page-left { | ||
. | background-color: #8fbb94; | ||
background-image: url(//www.zeldadungeon.net/wiki/images/c/c4/BoxHeaderTexture.png); | |||
font-weight: bold; | |||
} | |||
.header .branding-box h1, .header .branding-box a { | |||
margin-right:3em; | |||
} |
Latest revision as of 21:45, November 4, 2022
/* CSS placed here will affect users of the mobile site */ /* 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; } .zdw-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 .zdw-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 .zdw-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 .zdw-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 .zdw-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 .zdw-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 .zdw-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 .zdw-label { background-color: #cccccc; } /* Horizontal Lists */ .hlist > li, .hlist > * > li, .zdw-hlist > li, .zdw-hlist > * > li { display: inline; margin: 0; } .hlist > li:after, .hlist > * > li:after, .zdw-hlist > li:after, .zdw-hlist > * > li:after { content: " · "; font-weight: bold; } .hlist > li:last-child:after, .hlist > * > li:last-child:after, .zdw-hlist > li:last-child:after, .zdw-hlist > * > li:last-child:after { content: none; } .hlist > li.hlist-last-child:after, .hlist > * > li.hlist-last-child:after { content: none; } /* IE8 */ /* Tabs */ /* Hide things until the js is ready to show them */ .zdw-tabcontent:not(.default) { display: none; } .zdw-box.zdw-tabcontainer { position: relative; padding: 10px; } .zdw-box.zdw-tabcontainer--hastabstop { margin-top: 33px !important; } .zdw-box.zdw-tabcontainer--hastabstop > .zdw-tabcontainer__tabset--top { position: absolute; top: -32px; } .zdw-box.zdw-tabcontainer--hastabsleft > .zdw-tabcontainer__tabset--left { float: left; } ul.zdw-tabset { margin: 0 !important; } ul.zdw-tabset { display: flex; overflow-x: auto; } .zdw-tabcontainer__tabset--left .zdw-tabset { flex-direction: column; } li.zdw-tab { display: block; padding: 0px 10px; margin: 0px; border: 1px solid #5a7db5; } .zdw-tabcontainer__tabset--top .zdw-tab { height: 30px; line-height: 30px; white-space: nowrap; } .zdw-tabcontainer__tabset--left .zdw-tab { padding: 5px 10px; } .zdw-tabcontainer__tabset--top .zdw-tab + .zdw-tab { margin-left: -1px; } .zdw-tabcontainer__tabset--left .zdw-tab + .zdw-tab { margin-top: -1px; } .zdw-tab { background-color: #e6e6e6; } .zdw-tab.active { background-color: #f0ddbd; } .zdw-tabcontainer__tabset--top .zdw-tab { border-bottom-color: #253125; } .zdw-tabcontainer__tabset--left .zdw-tab { border-right-color: #253125; } .zdw-tabcontainer__tabset--top .zdw-tab.active { border-bottom-color: #f0ddbd; } .zdw-tabcontainer__tabset--left .zdw-tab.active { border-right-color: #f0ddbd; } .zdw-tab:hover { background-color: #5a7db5 !important; color: #fefefe; cursor: pointer; } .zdw-tabcontent .wikitable { margin-top: 0px; } /* Remove extra space below tab container in a navbox */ .zdw-box.navbox .zdw-box.zdw-tabcontainer { margin-bottom: 0; } /* Mobile fixes for Tabs */ .zdw-tabset { padding-left: 0px !important; } .zdw-tab { margin-bottom: 0px !important; } /* End Tabs */ /* Gallery Boxes */ li.gallerybox div.zdw-thumb--dark { background-color: #7c6e60; background-image: url('//www.zeldadungeon.net/wiki/images/d/d7/PicboxTexture.jpg'); } /* 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; } #mw-mf-page-center, .header-container.header-chrome, #main-menu-input:checked ~ #mw-mf-page-left { background-color: #8fbb94; background-image: url(//www.zeldadungeon.net/wiki/images/c/c4/BoxHeaderTexture.png); font-weight: bold; } .header .branding-box h1, .header .branding-box a { margin-right:3em; }