MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

@import url(https://commons-esports.gamepedia.com/index.php?title=MediaWiki:Global.css&action=raw&ctype=text/css); @import url(https://commons-esports.gamepedia.com/index.php?title=MediaWiki:Global-common.css&action=raw&ctype=text/css);

/* Fonts */ @font-face { font-family: 'Roboto-Italic'; src: local('Roboto-Italic'), local('Roboto-Italic'), url("/media/hydra/fonts/Roboto-Italic.ttf") format('truetype'); }

@font-face { font-family: "FontAwesome"; font-weight: normal; font-style: normal; src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.7.0"); src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); } @font-face { font-family: "FontAwesome 5"; font-style: normal; font-weight: 400; src: url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.eot"); src: url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.woff2") format("woff2"), url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.woff") format("woff"), url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.ttf") format("truetype"), url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.svg#fontawesome") format("svg"); } @font-face { font-family: "FontAwesome 5"; font-style: normal; font-weight: 900; src: url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.eot"); src: url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.woff2") format("woff2"), url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.woff") format("woff"), url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.ttf") format("truetype"), url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

body { background-size: cover; background-position: center; background-attachment: fixed; }

/* This governs the sections on the Community portal */ .cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; }

.cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; flex-grow: 1; }

/* Template documentation styles */ /* If modifying these styles, be sure to update the mobile skin! */ .doc { margin: 0 auto 1em; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

.doc-header { padding-bottom: 3px; border-bottom: 1px solid #BDCAC3; margin-bottom: 1ex; }

.doc-footer { margin: 0; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */ /* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */ .desktopleft {	text-align: left; }

.desktopcenter { text-align: center; }

.desktopright { text-align: right; } /* --- front page --- */ display: grid; grid-template-areas: 'l' 'r'; grid-template-columns: 100%; }
 * 1) fp-outer {

@media screen and (min-width:990px) { #fp-outer { grid-template-areas: 'l r'; grid-template-columns: 50% 50%; } }

.fp-section { display: flex; flex-wrap: wrap; }

grid-area: l; }
 * 1) fp-1 {

grid-area: r; }
 * 1) fp-2 {

/* --- front page boxes **/ .fpbox { margin: 5px; padding: 0.75em; overflow: auto; box-sizing: border-box; width: calc(100% - 2px); }

.fpbox-heading { border-bottom: 1px solid var(--wiki-accent); background: transparent; text-align: center; font-size: 132%; margin: 0 0 0.5em; padding: 0.25em; letter-spacing: 1px; }

.fpbox-body { margin: 5px; }

.fpbox-plain { background: transparent; border: 0; box-shadow: none; }

.fpbox-mainheading { font-size: 150%; }

.fpbox-subheading { font-size: 120%; border: 0; text-align: center; } /* --- Template:FP links --- */ .fplinks { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; text-align: center; }

.fplink-outer { padding: 5px; flex-basis: calc(25% - 10px); width: calc(25% - 15px); min-width: 115px; display: inline-block; vertical-align: middle; }

.fplink-wide { flex-basis: calc(33% - 10px); width: calc(33% - 15px); }

.fplink-fullwidth { flex-basis: 100%; width: calc(100% - 15px); font-weight: bold; }

.fplink { background: rgba(0,0,0,0.3); border: 1px solid #505050; padding: 0.5em; box-sizing: border-box; width: 100%; height: 100%; display: table; }

.fplink-fullwidth .fplink { background: rgba(0,0,0,0.4); }

.fplink-plain { background: transparent; border-radius: 0; border: 0; box-shadow: none; }

.fplink-inner { display: table-row; }

.fplink a { display: table-cell; vertical-align: middle; }

.fplink img { max-width: 150px; width: 100%; height: auto; } /** Miscellaneous front page fixes **/ .fpbox .embedvideo, .fpbox .embedvideowrap { width: 100%!important; max-width: 480px; margin: 0 auto; }

.fpbox .embedvideowrap iframe { width: 100%!important; }

.fpbox .slideboxlightshow { max-width: 100%; margin: 0 auto; }

.fpbox .slideboxlightshow a, .fpbox .slideboxlightshow img { max-width: 100%!important; }

/* CUSTOM CSS FOR THIS WIKI */ /* LOGO */

padding-top: 1em; }
 * 1) p-logo {

background-size: 100%; }
 * 1) p-logo a {

/* TABS */

/* HEADER */ height: 10em; }
 * 1) mw-page-base {

/* SIDEBAR */

div#mw-panel div.portal { padding: 0.25em; }

.mediawiki div#mw-panel div.portal h3, .mediawiki div#mw-panel.collapsible-nav div.portal h3, .mediawiki div#mw-panel.collapsible-nav div.portal.collapsed h3 { margin: 0; }

/* CONTENT AREA */ border-top: none; }
 * 1) content {

/* FOOTER */ div#footer { margin-top: 1em; margin-bottom: 1em; border: 1px solid; border-right: none; }

.documentation { clear: both; margin-top: 1em; border: 1px solid var(--table-border); background-color: rgb(var(--wiki-color-rgb),0.3); padding: 0.5em; border-radius: 3px; }

.documentation-header { font-size: 1.75em; margin-top: 1em; font-family: sans-serif; line-height: 1.3; margin-bottom: 0.25em; padding: 0; background: none; font-weight: normal; overflow: hidden; border-bottom: 1px solid var(--table-border); }

.documentation-view-edit { float: right; font-size: small; position: relative; height: 0; top: 15px; }

.important-notice { font-size: 20px; font-weight: bold; }

/* infoboxes */

.infobox { border-collapse: collapse; border: 1px solid var(--infobox-border-color); margin: 1em 1em 0.1em; width: 24em; float: right; clear: right; max-width: calc(100% - 2em); display: table!important; } @media screen and (max-width:720px) { .infobox { float: none; margin: 0 auto; } }

.infobox > tbody > tr > th { text-align: center; font-size: 110%; background-color: var(--infobox-color); }

.infobox .infobox-notice, .infobox .infobox-title { font-size: 130%; }

.infobox .infobox-notice { background-color: var(--infobox-notice-color); }

.infobox-label { font-weight: bold; width: 9em; }

.infobox > tbody > tr > td { vertical-align: top; font-size: 90%; padding: 0 0.25em; }

.infobox-wide { text-align: center; }

.infobox .blockbox, .infobox .teamhist { width: 100%; border-spacing: 0 0.25em; }

.infobox .teamhist { text-align: left; width: 100%; font-size: 90%; }

.infobox .teamhist td { padding: 0; }

.infobox .teamhist th { vertical-align: top; }

.infobox .teamdate { width: 10.7em; }

.infobox .infobox-subtable { border-spacing: 0; text-align: left; background-color: transparent; }

.infobox .infobox-subtable th { width: 9em; }

.infobox .infobox-subtable th { padding-right: 0.25em; }

text-decoration: underline; font-style: italic; }
 * 1) infoboxChampion th.legacy-skin {

.infobox .infobox-item-passive td { text-align: left; }

.infobox .infobox-image-caption td { font-size: 80%; }

/* Match summary */ div.bracket-game-details { width: 390px; text-align: center; border: 1px solid var(--interface-border); display: none; background: rgba(var(--interface-background-rgb), 0.9); border-radius: 5px; box-shadow: 4px 4px 6px var(--box-shadow-color); z-index: 100; position: absolute; }

div.header { display: table-row; font-weight: bold; padding: 2px 5px; }

.bracket-game-details .header div { display: table-cell; line-height: 26px; width: 195px; padding-bottom: 0; border-bottom: 1px solid var(--interface-border); }

.match-row div.bracket-game-details { font-size: 85%; font-weight: normal; }

/* End match summary */

/* front page only show names on hover */ .frontpage-champion-outer { display: flex; flex-wrap: wrap; justify-content: center; min-height: 80px; }

.frontpage-champion-item, .frontpage-item-item { position: relative; text-align: center; }

.frontpage-caption { width: 100%; background-color: black; position: absolute; bottom: 0; display: none; }

.frontpage-champion-item:hover .frontpage-caption, .frontpage-item-item:hover .frontpage-caption { display: block; }

.frontpage-caption a, .frontpage-caption a:visited { display: block; text-decoration: none; color: #E0E0E0; }

.frontpage-item-container { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }

.frontpage-item-outer { border: 1px solid #505050; margin: 2px; flex-grow: 1; }

.frontpage-item-inner { display: flex; flex-wrap: wrap; justify-content: center; align-content: space-evenly; min-height: 80px; }

.frontpage-item-inner-basic { flex-basis: 20%; }

.frontpage-item-inner-advanced { flex-basis: 80%; }

.frontpage-item-item { margin: 2px; }

.sprite.champion-sprite { width: 60px; height: 60px; background-image: url(https://static.wikia.nocookie.net/teamfighttactics_gamepedia_en/images/b/b5/ChampionSprite.png?version=20190718045519); }