MediaWiki:Mobile.css

/* Sitewide CSS stylesheet. Take care when making any changes as they'll be pushed to every user almost immediately. */

/* Import platform independant styles */ @import url('/MediaWiki:Universal.css?ctype=text/css&action=raw');

/* Infobox styling */

.infobox { float: right; clear: right; margin: 0.5em 0 1em 0.5em; padding: 2px; width: 260px; border: 1px solid black; background: #ffffff; }

.infobox .section { clear: both; padding: 3px; background: #C0DFFF; color: black; text-align: center; font-weight: bold; font-size: 1.2em; }

.infobox tr { vertical-align: top; }

/* Update table styling (Template:VersionTableStart, Template:PatchTableStart */

.updatetablehead { display: flex; border-top: 1px solid #aaa; border-right: 1px solid #aaa; border-left: 1px solid #aaa; background-color: #ffaea3; text-align: center; font-weight: bold; }

.updatetablebody { /* max-height: 300px; */ /* overflow-y: scroll; */ overflow-x: auto; border: 1px solid #aaa; border-top: none; background-color: #EBF5FF; /* font-family: mono; */ }

.updatetablehead #patch, .updatetablehead #version, .updatetablebody #patch, .updatetablebody #version { flex: 0 0 120px; text-align: center; font-weight: bold; }

.updatetablehead #description, .updatetablebody #description { flex: 1 1 auto; border-left: 1px solid #aaa; }

.updatetablebody #description { padding: 4px 0; }

.updatetablebody #entry { display: flex; align-items: center; border-top: 1px solid #aaa; }

.updatetablebody ul { margin: 0 0 0 1.6em; }

/* Item Grid Styling on Item Grid*/

ul.shopnav { margin: 0px; list-style: none; }

ul.shopnav li { margin: 4px; box-shadow: 0px 0px 1px 2px green; }

/* Item List Styling on Items */

div.itemlist { display: flex; flex-wrap: wrap; font-weight: bold; }

div.itemlist>div { flex-basis: 400px; padding: 3px 0px; }

/* Hero Infostrip */

div.infostripe { display: flex; overflow: hidden; align-items: stretch; justify-content: center; color: white; vertical-align: top; text-align: center; text-shadow: 0 0 5px black; font-size: 20px; }

div.infostripe a, div.infostripe a:link, div.infostripe a:visited, div.infostripe a:hover, div.infostripe a:active { color: white; text-decoration: none; }

.gradient_gameplay { background: linear-gradient(15deg, rgb(178, 67, 67) 0%, rgb(198, 92, 73) 17%, rgb(191, 127, 78) 62%, rgb(168, 65, 62) 100%); }

.gradient_cosmetics { background: linear-gradient(15deg, rgb(74, 74, 74) 0%, rgb(105, 159, 159) 17%, rgb(171, 216, 214) 62%, rgb(74, 74, 74) 100%); ; }

.gradient_audio { background: linear-gradient(15deg, rgb(23, 84, 43) 0%, rgb(1, 164, 118) 17%, rgb(77, 185, 116) 62%, rgb(23, 84, 43) 100%); }

.gradient_history { background: linear-gradient(15deg, rgb(180, 114, 15) 0%, rgb(188, 185, 2) 17%, rgb(212, 216, 92) 62%, rgb(180, 114, 15) 100%); }

div.infostripe div { margin: 0px -2px; padding: 15px 25px 10px; border-right: 4px solid rgba(75, 75, 75, 0.5); border-left: 4px solid rgba(75, 75, 75, 0.5); }

/* Hero entry - used in hero tables and cosmetic infoboxes */

div.heroentry { display: inline-block; overflow: hidden; padding: 1px; width: 110px; height: 62px; text-align: center; }

div.heroentry div { position: relative; }

div.heroentrytext { top: -62px; display: flex; align-items: flex-end; justify-content: center; width: 110px; height: 62px; line-height: 15px; pointer-events: none; }

div.heroentrytext span { color: white; text-decoration: none; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black; font-size: 12px; }

/* Style for horizontal lists (separator following item) */

.skin-monobook .hlist dl, .skin-modern .hlist dl, .skin-vector .hlist dl { line-height: 1.5em; }

.hlist dl, .hlist ol, .hlist ul { margin: 0; }

.hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }

/* Display nested lists inline */

.hlist dl dl, .hlist ol ol, .hlist ul ul { display: inline; }

/* Generate interpuncts */

.hlist dd:after, .hlist dt:after, .hlist li:after { content: " ·"; font-weight: bold; }

.hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }

/* Add parens around nested lists */

.hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: "("; }

.hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: ")"; }

/* Put numbers in ordered lists */

.hlist.hnum ol li { counter-increment: level1; }

.hlist.hnum ol li:before { content: counter(level1) " "; }

.hlist.hnum ol ol li { counter-increment: level2; }

.hlist.hnum ol ol li:before { content: counter(level2) " "; }

/* Main page title removal fix */

body.page-Dota_2_Wiki h1.firstHeading, body.page-Special_RecentChanges h1.firstHeading, body.page-Special_RecentChanges span.subpages { display: none; }

/* Main Page styling */

.mp-content-table { /* Main border color		*/ margin: 0.5em 0; width: 100%; /* Body background color	*/ border: 1px solid #b44335; background: #FEFEFF; }

.mp-content-header { padding: 0.5em 0; /* Header background color */ border: none; border-bottom: 1px solid #b44335; background: #b44335; color: #fff; font-size: 140%; /* Main border color		*/ }

.mp-content-body { padding: 0.5em; }

/* Don't wordwrap top links on main page */

.mp-content-table ul>li a.external.text, .mp-content-table ul>li>b>a { white-space: nowrap; }

.mp-content-header-alt, .mp-title-gradient { background: #b44335; color: #fff; }

.mp-content-header-alt { margin: -0.5em -0.5em 0px; padding: 0.5em; padding-left: 0.75em; border: none; border-bottom: 1px solid #b44335; color: #fff; /* Main border color		*/ text-align: left; font-weight: bold; font-size: 140%; }

/* Main Page event-related stuff */

background: url('/media/d/d3/Event_gradient.png'); }
 * 1) eventBg {

/* Auto-size main page index icons */

.mp-index-icon a img { min-width: 64px; max-width: 128px; width: 100%; /* Image sizes. Re-produce larger? */	height: auto; }

.mp-giant-banner { height: 250px; }

.mp-giant-banner img { width: 100%; height: 100%; }

.usermessage { margin-bottom: 39px !important; }
 * 1) mw-js-message,

display: flex; flex-direction: row; }
 * 1) mp-layout {

flex: 1 1 auto; margin-right: 1em; }
 * 1) mp-layout #mp-left {

flex: 0 0 500px; }
 * 1) mp-layout #mp-right {

margin-bottom: 1em; padding: 1em; border: solid 1px #660000; }
 * 1) mp-layout .mp-block {

padding: 0; border: none; background: #000000; text-align: center; }
 * 1) mp-layout .mp-block#battle-pass {

height: 50px; border-bottom: solid 1px #cccccc; color: #660000; text-align: center; font-weight: bold; font-size: 170%; }
 * 1) mp-layout .mp-heading {

text-align: center; }
 * 1) mp-layout #heroes .mp-content {

.useful-articles-layout { display: flex; flex-wrap: wrap; }

.useful-articles-layout>div { flex: 0 0 33%; max-width: 33%; word-wrap: break-word; }

.useful-articles-layout>div>div:first-child { text-align: center; font-weight: bold; }

/* End Main Page style */

/* wikitable/prettytable class for skinning normal tables */

table.wikitable, table.prettytable { border: 1px #000000 solid; background: #FEFEFF; }

table.wikitable th, table.wikitable td, table.prettytable th, table.prettytable td { white-space: inherit; }

table.wikitable th, table.prettytable th { text-align: center; white-space: inherit; }

table.wikitable caption, table.prettytable caption { margin-right: inherit; margin-left: inherit; font-weight: bold; }

table.wikitable .subheader { background: #C9DCFF; color: black; text-align: left; }

table.wikitable .header { background-color: #ffaea3; color: black; }

table.wikitable .border { border: 1px #000000 solid; }

table.wikitable .borderless { border: 0px; }

table.wikitable .borderless td { border: 0px; }

table.wikitable .borderless th { border: 0px; }

table.prettytable code, table.wikitable code { background-color: transparent; }

/* Bring the wikitable cell padding back to what it was before an update */

table.wikitable>tr>th, table.wikitable>tr>td, table.wikitable>*>tr>th, table.wikitable>*>tr>td { padding: 1px 1px; }

/* Sidebar */

body { position: relative; min-width: 1000px; }

div#bodyContent2 { margin-right: 320px; min-height: 920px; width: auto; font-size: 0.8em; line-height: 1.5em; }

/* Making sure vectorMenu is visible over sidebar */

.vectorMenu, .vectorMenu .menu { z-index: 1; }

/* For positioning icons at top-right, used in some templates */

.skin-vector div.topicon { position: absolute; top: -50px; z-index: 100; display: block !important; }

.skin-monobook div.topicon { position: absolute; top: 10px; z-index: 100; display: block !important; }

/* Fixing vector/main-ltr.css putting a white background on the Quotation template */

table.quotation { background: transparent !important; }

/* Fancy styling for Abilities */

.ico_active, .ico_passive, .ico_autocast { position: relative; display: inline-block; margin: 3px; width: 128px; height: 128px; vertical-align: top; }

.ico_active:before { position: absolute; width: 128px; height: 128px; background: url('/media/1/11/Overlay_active.png') no-repeat; content: ''; pointer-events: none; }

.ico_autocast:before { position: absolute; width: 128px; height: 128px; background: url('/media/d/df/Overlay_autocast.png') no-repeat; content: ''; pointer-events: none; }

.ico_passive:before { position: absolute; width: 128px; height: 128px; background: url('/media/6/6f/Overlay_passive.png') no-repeat; content: ''; pointer-events: none; }

/* Alternating shading of table rows */

.oddrowsgray tr:nth-child(odd) { background-color: #ededed; }

.evenrowsgray tr:nth-child(even) { background-color: #ededed; }

/* Client-side image scaling */

.images40pxwidth img { width: 40px; height: auto; }

/* Role table styling */

.roletable caption { background: #CD5F51; color: #fff; }

.roletable th { text-align: center; }

/* Tournament Bracket Styles */

.tournament-bracket { margin: 1em 2em 1em 1em; border: none; border-spacing: 0; border-collapse: separate; font-size: 90%; }

.tournament-bracket .round-title { border: 1px solid #aaa; background-color: #f2f2f2; text-align: center; }

.tournament-bracket .match-bye, .tournament-bracket .match-team, .tournament-bracket .match-team-top, .tournament-bracket .match-team-bottom { border: 1px solid #aaa; }

.tournament-bracket .match-bye { background-color: #DDDDDD; }

.tournament-bracket .match-score, .tournament-bracket .match-score-top, .tournament-bracket .match-score-bottom { border: 1px solid #aaa; background-color: #f2f2f2; text-align: center; }

.tournament-bracket .path-top, .tournament-bracket .path-right, .tournament-bracket .path-bottom, .tournament-bracket .path-left { border: 1px none black; }

.tournament-bracket .path-top { border-top-style: solid; }

.tournament-bracket .path-right { border-right-style: solid; }

.tournament-bracket .path-bottom { border-bottom-style: solid; }

.tournament-bracket .path-left { border-left-style: solid; }

color: #e38800; }
 * 1) mw-panel.collapsible-nav .portal h3#p-Partners-label {

/* Front Page Tournament Table Dates */

div.dateformat { float: center; min-width: 35px; max-width: 70px; max-height: 25px; }

div.sdate { position: relative; top: -1px; left: 0; font-size: 81%; }

div.edate { position: relative; top: -3px; left: 0; font-size: 81%; }

/* Cosmetic label styles Template:Cosmetic */

.cosmetic-label { display: inline-block; margin: 7px 5px 0px; vertical-align: top; text-align: center; line-height: normal; }

.cosmetic-label>div { margin-bottom: 5px; }

/* Skill list styles Template:SkillListRich */

div.skilllist { width: 100%; }

div.skilllist-title { border: 1px solid #AAA; background-color: #FFAEA3; color: #000; text-align: center; font-weight: bold; font-size: 100%; }

div.skilllist ul { display: flex; overflow: hidden; flex-wrap: wrap; margin: 0; padding: 0; }

li.skilllist-lite { display: inline-block; box-sizing: border-box; margin: 0px !important; padding: 3px; border: 1px solid #AAA; color: white; list-style: none; vertical-align: top; text-align: left; text-decoration: none; font-weight: bold; font-size: 110%; }

li.skilllist-rich { display: inline-block; box-sizing: border-box; margin: 0; padding: 3px; border: 1px solid #AAA; background-color: #EFEFEF; list-style: none; vertical-align: top; text-align: left; }

div.skilllist-rich-head { padding: 3px 5px; border-bottom: 1px solid black; color: white; text-decoration: none; font-weight: bold; font-size: 110%; }

div.skilllist-rich-image { display: inline-block; width: 64px; vertical-align: top; }

div.skilllist-rich-desc { display: inline-block; padding: 3px 5px; max-width: calc(100% - 74px); vertical-align: top; }

li.skilllist-lite a, li.skilllist-lite a:link, li.skilllist-lite a:visited, li.skilllist-lite a:hover, li.skilllist-lite a:active, div.skilllist-rich-head a, div.skilllist-rich-head a:link, div.skilllist-rich-head a:visited, div.skilllist-rich-head a:hover, div.skilllist-rich-head a:active { color: white; text-decoration: none; }

/************************** * Mobile Specific Styles * **************************/

body { min-width: unset; }

.animations #mw-mf-page-center { background: #2E2E2E !important; /* because some style is loading after this one from somewhere... */ }

div#content { margin: 0 .5em; background: #ffffff; }

div#mw-mf-page-center>div.header { margin-bottom: .5em; background: linear-gradient( to bottom, #61322a 0%, #511b14 1%, #34110d 99%, #2b0e0b 100%); }

color: #cccccc; }
 * 1) footer ul {

footer > .post-content { color: #eae8d3; }

/* Main page tweaks */

flex-direction: column; }
 * 1) mp-layout {

flex: 0 0 auto; }
 * 1) mp-layout #mp-right {

display: none; }
 * 1) mp-layout #upcoming-matches,
 * 2) mp-layout #bulletin,
 * 3) mf-languages {

.heronav-row { flex-direction: column; }

.useful-articles-layout { flex-direction: column; }

.useful-articles-layout>div { flex: 0 0 auto; max-width: unset; }

.content .navbox { display: table !important; }

.content .navbox table { margin: 0; }

/* Skill list styles Template:SkillListRich */

div.skilllist-col1 ul li, div.skilllist-col2 ul li, div.skilllist-col3 ul li, div.skilllist-col4 ul li, div.skilllist-col5 ul li { flex: 1 0 100%; width: 100%; }

/* Woraround for vertically aligned table headers */

table.wikitable .header { display: table-cell; width: initial; height: initial; }

/* Element animator */ .content .animated > *:not(.animated-active), .content .animated > .animated-subframe > *:not(.animated-active) { display: none; }

div.ranks { display:inline-block; text-align:center; }

div.ranks div:first-child { height:50px; background-color:#ffaea3; font-weight:bold; font-size:larger; line-height:50px; }

div.ranks div:not(:first-child) { float:left; border: 1px solid #a2a9b1; }