MediaWiki:FandomMobile.css

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

/* 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; }	background: url('/media/d/d3/Event_gradient.png'); }
 * 1) eventBg {

/* Auto-size main page index icons */

.mp-index-icon { 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 */

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

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

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

.ability-head { text-align: center; } .ability-head .ico_active:before, .ability-head .ico_passive:before { display: none; } .aml50, .ability-description > div { width: calc(100% - 20px); }