MediaWiki:Common.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');

/* Alpha label for the Hydra Dark skin */ label[for="mw-input-wpskin-hydradark"]::after { content: " (Alpha)"; }

/*************************** .key { display:inline-block; white-space:nowrap; } .key kbd { padding: 0.1em 0.6em 0.1em 0.6em; margin-right:2px; font-size:85%; font-family:inherit; font-style:normal; border-radius: .4em } .keys { border: 1px solid #111; box-shadow: 0 0.2em rgb(0 0 0 / 50%); background-color: #505459; background-image: linear-gradient(to bottom, #505459, #282828); color: #eee }
 * Used by Template:Key *

/******************************
 * End Template:Key coloration *

/* Recent Changes */ .mw-rcfilters-ui-changesListWrapperWidget { right: 50px; }

.mw-rcfilters-ui-changesListWrapperWidget h4 { padding-left: 50px; }

.mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator { margin-left: 50px; }

/* Infobox styling */

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

.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: -webkit-box; display: -ms-flexbox; 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 { -webkit-box-flex: 0; -ms-flex: 0 0 120px; flex: 0 0 120px; text-align: center; font-weight: bold; }

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

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

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

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

/* Template:GameVersionTableElement */ .gvt-el-significant { background: #ffffcc }

/* Template:Talent table el */ .tte-right-tal-slot { height: 40px; padding: 0px; border-bottom: solid 2px black; background: #eff5ff }

/* Item Grid Styling on Item Grid*/

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

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

/* Item List Styling on Items */

div.itemlist { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-weight: bold; }

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

/* Hero Infostrip */

div.infostripe { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: center; -ms-flex-pack: center; 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: -webkit-linear-gradient(75deg, rgb(178, 67, 67) 0%, rgb(198, 92, 73) 17%, rgb(191, 127, 78) 62%, rgb(168, 65, 62) 100%); background: -o-linear-gradient(75deg, rgb(178, 67, 67) 0%, rgb(198, 92, 73) 17%, rgb(191, 127, 78) 62%, rgb(168, 65, 62) 100%); 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: -webkit-linear-gradient(75deg, rgb(74, 74, 74) 0%, rgb(105, 159, 159) 17%, rgb(171, 216, 214) 62%, rgb(74, 74, 74) 100%); background: -o-linear-gradient(75deg, rgb(74, 74, 74) 0%, rgb(105, 159, 159) 17%, rgb(171, 216, 214) 62%, rgb(74, 74, 74) 100%); 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: -webkit-linear-gradient(75deg, rgb(23, 84, 43) 0%, rgb(1, 164, 118) 17%, rgb(77, 185, 116) 62%, rgb(23, 84, 43) 100%); background: -o-linear-gradient(75deg, rgb(23, 84, 43) 0%, rgb(1, 164, 118) 17%, rgb(77, 185, 116) 62%, rgb(23, 84, 43) 100%); 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: -webkit-linear-gradient(75deg, rgb(180, 114, 15) 0%, rgb(188, 185, 2) 17%, rgb(212, 216, 92) 62%, rgb(180, 114, 15) 100%); background: -o-linear-gradient(75deg, rgb(180, 114, 15) 0%, rgb(188, 185, 2) 17%, rgb(212, 216, 92) 62%, rgb(180, 114, 15) 100%); 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: 0 -2px; padding: 15px 25px 10px; border-right: 4px solid rgba(75, 75, 75, .5); border-left: 4px solid rgba(75, 75, 75, .5); }

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

div.heroentry { position: relative; display: inline-block; overflow: hidden; margin: 1px; width: 110px; height: 62px; }

div.heroentry div { position: absolute; }

div.heroentrytext { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 1px 2px; width: 106px; height: 60px; color: white; text-align: center; text-shadow: -1px 0 .2em black, 0 1px .2em black, 1px 0 .2em black, 0 -1px .2em black; font-size: 11px; line-height: 15px; pointer-events: none; }

/* Main Page styling */

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

.mp-content-header { padding: .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: .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: -.5em -.5em 0; padding: .5em; padding-left: .75em; border: none; border-bottom: 1px solid #b44335; color: #fff; /* Main border color		*/ text-align: left; font-weight: bold; font-size: 140%; }

/* Auto-size main page index icons */

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

/* The main page banner */

.giant-banner { margin-bottom: 20px; }

.giant-banner img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; width: 100%; height: 100%; }

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

display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
 * 1) mp-layout {

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

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

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

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

height: 50px; border-bottom: solid 1px #ccc; color: #600; 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: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.useful-articles-layout > div { -webkit-box-flex: 0; -ms-flex: 0 0 33%; 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 #000 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.cargoTable.wikitable th, table.wikitable .header { background-color: #ffaea3; color: black; }

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

table.wikitable .borderless { border: 0; }

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

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

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: .8em; line-height: 1.5em; }

/* 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('https://static.wikia.nocookie.net/dota2_gamepedia/images/1/11/Overlay_active.png/revision/latest') no-repeat; content: ''; pointer-events: none; }

.ico_autocast:before { position: absolute; width: 128px; height: 128px; background: url('https://static.wikia.nocookie.net/dota2_gamepedia/images/d/df/Overlay_autocast.png/revision/latest') no-repeat; content: ''; pointer-events: none; }

.ico_passive:before { position: absolute; width: 128px; height: 128px; background: url('https://static.wikia.nocookie.net/dota2_gamepedia/images/6/6f/Overlay_passive.png/revision/latest') 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: #ddd; }

.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 {

/* Cosmetic label styles Template:Cosmetic */

.cosmetic-label { display: inline-block; margin: 7px 5px 0; 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: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; }

li.skilllist-lite { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; 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; -webkit-box-sizing: border-box; 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; }

/***************************
 * Desktop Specific Styles *

/* Skill list styles Template:SkillListRich */

div.skilllist-col1 ul li { -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; width: 100%; }

div.skilllist-col2 ul li { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; width: 50%; }

div.skilllist-col3 ul li { -webkit-box-flex: 1; -ms-flex: 1 0 calc(100%/3); flex: 1 0 calc(100%/3); width: calc(100%/3); }

div.skilllist-col4 ul li { -webkit-box-flex: 1; -ms-flex: 1 0 25%; flex: 1 0 25%; width: 25%; }

div.skilllist-col5 ul li { -webkit-box-flex: 1; -ms-flex: 1 0 20%; flex: 1 0 20%; width: 20%; }

/******************************************
 * Custom Context Menu for Audio Download *


 * 1) context-menu { position:absolute; display:none; }

list-style:none; margin:0; padding:0; background:#ffaea3; }
 * 1) context-menu ul, #context-menu li {

display:block; padding:2px 5px; text-decoration:none; color:black; font-family: sans-serif; font-size: 0.875em; }   background:#B44335; color:#FFF; }
 * 1) context-menu { border:solid 1px #CCC;}
 * 2) context-menu li { border-bottom:solid 1px #CCC; }
 * 3) context-menu li:last-child { border:none; }
 * 4) context-menu li a {
 * 1) context-menu li a:hover {

div#mw-panel div.portal li a[href="https://discord.gg/AHt5MXZ"] { background: url(https://discordapp.com/api/guilds/576585892937072640/embed.png) no-repeat; color: transparent !important; display: inline-block; height: 20px; width: 119px; margin-left: -10px; }

.oo-ui-tool-name-editModeVisual { display:none!important; }

.ability-description { display: block; float:right; width: 312px; } .ability-description.adItemOrRune { width: 450px; } .aml50 { margin-left: 50px; }