MediaWiki:Common.css

From Apex Legends Wiki
Jump to navigation Jump to search

In other languages: Português do Brasil


CSS and Javascript changes must comply with the wiki design rules.


Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Oriya:[email protected]&display=swap');
/* Dark/Light theming for alternate images */
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:EditorsStyling.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:FrontPageStyling.css");

:root {
  --theme-text-color: #000;
  --theme-borders-color: #999;
  --theme-link-color: #dc5548;
  --theme-red-link-color: #ba003e;
  --theme-body-color: rgba(229,225,216,0.95);
  --theme-box-color: #dad6d7;
  --theme-box-border-color: #abb1b8;
  --theme-box-accent-color: #161616;
  --theme-typebox-color: #f3f3f3;
  --theme-highlight-color: #e1c0b7;
  --theme-button-color: #f57d14;
  
  --theme-common-color: #9CACAD;
  --theme-rare-color: #51a8d6;
  --theme-epic-color: #b237c8;
  --theme-legendary-color: #cead21;
  --theme-mythic-color: #ff4e1d;
  --theme-iconic-color: #24C6B6;
  
  --theme-infobox-bg-color:#dad6d7;
  --theme-infobox-text-color:#161616;
  --theme-infobox-label-color:#161616;
  --theme-infobox-labeltext-color:#dad6d7;
  --theme-header-color: #840b0b;
  --theme-headertext-color: #e9e9e9;
  --theme-fpbox-bg-color: rgba(255,255,255,.5);
  
  --theme-red-color:#ff3838;
  --theme-orange-color:#e47221;
  --theme-yellow-color:#f6a424;
  --theme-green-color:#628f06;
  --theme-cyan-color:#08b4b4;
  --theme-blue-color:#178af4;
  --theme-purple-color:#9928f4;
  --theme-pink-color:#dd0f63;
}

body {
    background: url(/images/d/d1/BG_redgrit.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #dfd7cc;
    font-family:"Noto Sans Oriya", "Arial";
}

.mw-body, .parsoid-body
{
	background-color: rgb(255,248,246, 95%);
}

div#content {
    background: var(--theme-body-color);
    box-shadow: 0 0.1em 0.75em rgba(0,0,0,0.3);
    border: none;
    box-sizing: border-box;
    color: var(--theme-text-color);
}

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

.doc {
    margin: 0em auto 1em;
    background-color: rgba(0,0,0,0.1);
    border: 2px solid var(--theme-borders-color);
    border-radius: 1em;
    padding: 1em
}

.doc-header {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--theme-borders-color);
    margin-bottom: 1ex
}

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

.mobileonly {
    display: none
}

/* Menus  */

body #pageWrapper {
    margin-right: 5px
}

#mw-head-base {
    background: transparent;
    background-image: none;
    border-bottom: 0px
}

div#mw-page-base {
    background: transparent;
    background-image: none
}

/* Header buttons  */

#mw-head li.new a {
    color: #db9fc9
}

#right-navigation {
    margin-right: 0.5em
}

div.vectorTabs,div.vectorTabs span,div.vectorTabs li.selected,div.vectorTabs ul,div.vectorTabs ul li,div.vectorTabs li a {
    background: rgba(0,0,0,0)
}

div.vectorMenu h3 span {
    display: block;
    font-size: 0.8em;
    padding-top: 1.20em;
    font-weight: normal;
    color: #fff;
}

div.vectorMenu h3 a,div#mw-head div.vectorMenu h3 {
    background-color: transparent;
    background-image: none;
    border: 0px
}

div#mw-head,div.vectorTabs li a,div.vectorMenu li a,.vectorTabs li a span,div#mw-head div.vectorTabs a,div.vectorMenu h3 span {
    font-family: 'Bebas Neue';
}

div.vectorTabs li.selected a,div.vectorTabs li.selected a:visited {
    color: rgba(255,255,255,1);
    font-size: 17px;
}

.vector-menu-tabs-legacy li a,div#mw-head li.new a,
.vector-menu-dropdown .vector-menu-heading {
  color: rgba(255,255,255,0.7);
  font-size: 17px;
}

.vector-menu-tabs-legacy li a {
	height:0em;
    padding-top:1.0em;
    padding-left:8px;
    padding-right:8px;
}

.vector-menu-dropdown .vector-menu-heading {
    padding:1em 8px 1px;
}

.vector-menu-tabs .mw-watchlink.icon a {
    width:2em;
    padding:3em 0 0;
}

.vector-menu-tabs .mw-watchlink.icon a:before {
    top:0.8em;
    left:0.4em;
    width:1.2em;
    height:1.2em
}

.vector-menu-dropdown .vector-menu-heading:after {
    opacity:.7;
    filter: invert(100)
}

.vector-menu-dropdown .vector-menu-content {
    background-color:var(--theme-box-color);
    border:1px solid var(--theme-box-border-color);
    border-top-width:0;
}

.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) {
    font-size:1em
}
.vector-menu-dropdown .mw-list-item a {
    color:var(--theme-link-color);
}
div.vectorMenu div.menu {
    background-color: #d6e2eb;
    border: 1px solid black
}
div.vectorMenu ul {
    background-color: rgba(0,0,0,0);
    border: none
}

.vector-search-box-input {
  background-color:var(--theme-typebox-color);
  color:var(--theme-text-color);
  border: 1px solid var(--theme-borders-color);
  font-family:Saira;
  font-size:.8125em;
  opacity: 75%
}
.vector-search-box-inner:hover .vector-search-box-input {
  border-color:var(--theme-button-color);
  opacity: 85%;
}
.vector-search-box-input:focus,
.vector-search-box-inner:hover .vector-search-box-input:focus {
  outline:0;
  border-color:var(--theme-button-color);
  box-shadow:inset 0 0 0 1px var(--theme-button-color);
  opacity: 100%
}

.suggestions-results {
  background-color:var(--theme-typebox-color);
  border:1px solid var(--theme-borders-color);
}
.suggestions-result {
  color:var(--theme-text-color);
}
.suggestions-result-current {
  background-color:var(--theme-highlight-color);
  color:var(--theme-text-color)
}
.suggestions-special {
  background-color:var(--theme-typebox-color);
  border:1px solid var(--theme-borders-color);
}
.suggestions-special .special-label {
  color:var(--theme-borders-color);
}
.suggestions-special .special-query {
  color:var(--theme-text-color);
}
.suggestions-result-current .special-label,
.suggestions-result-current .special-query {
  color:var(--theme-text-color)
}

.mw-search-profile-tabs {
  border:1px solid var(--theme-borders-color);
}
.mw-search-profile-tabs div.search-types ul li.current a {
  color:var(--theme-text-color);
}

/* Sidebar  */

div#mw-panel div.portal:not(#p-claimWiki):not(#p-socialProfiles):not(#p-sitePromos) {
    background: var(--theme-body-color);
    border-left: 5px solid var(--theme-box-accent-color);
    box-shadow: 0 0.1em 0.75em rgba(0,0,0,0.3);
    margin: 5px;
    padding-top: 0px;
}

div#mw-panel div.portal div.body,#mw-panel.collapsible-nav .portal {
    background-image: none
}

div#mw-panel div.portal div.body ul li a,div#mw-panel div.portal div.body ul li a:visited {
    color: var(--theme-text-color)
}

div#mw-panel div.portal h3,div#mw-panel div.portal h3:visited,#mw-panel.collapsible-nav .portal h3 a,#mw-panel.collapsible-nav .portal h3 a:visited,#mw-panel.collapsible-nav .portal.collapsed h3 a,#mw-panel.collapsible-nav .portal.collapsed h3 a:visited {
    color: var(--theme-text-color);
    font-family: 'Bebas Neue';
    font-size:110%;
    text-align: center;
    margin-left: auto;
}

div#mw-panel div#p-socialProfiles.portal .body {
    margin: auto;
}

/* End of Menus */

.socialSidebar {
    width: auto;
    max-width: 100%
}

/* Logo  */

#p-logo a {
    background-size: contain
}

a,a:visited,div#content a.extiw,div#content a.extiw:visited,div#content a.external,div#content a.external:visited,.pseudo-link,label.toctogglelabel {
    color: var(--theme-link-color);
}

a.new, a.new:visited {
    color: var(--theme-red-link-color);
}

.mw-body h1, .mw-body-content h1 {
    font-family:"Saira",sans-serif;
    font-weight: 600;
}

.mw-body-content h2 {
    font-family:"Saira",sans-serif;
    font-weight: 500;
}

.mw-body h1,.mw-body h2 {
    border-bottom: 1px solid var(--theme-borders-color)
}

h1,h2,h3,h4,h5,h6 {
    color: var(--theme-text-color);
    background: none;
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.17em
}

.fakeh2 {
    color: var(--theme-text-color);
    background: none;
    font-weight: normal;
    margin: 0;
    margin-top: 1em;
    margin-bottom: 0.25em;
    padding: 0;
    font-size: 1.5em;
    line-height: 1.3;
    border-bottom: 1px solid var(--theme-borders-color)
}

.mw-editsection, .mw-editsection-like {
    font-family:Saira
}

.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type,
.client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type),
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type,
.client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type),
.mw-editsection-divider {
  color:var(--theme-borders-color)
}

ol.references li:target,
sup.reference:target {
  background-color:var(--theme-highlight-color);
}

.catlinks,ul#filetoc {
    background: rgba(0,0,0,0);
    border: 1px solid var(--theme-borders-color);
    border-radius: 5px;
    clear: both;
    margin-top: 1em;
    padding: 5px
}

.catlinks li {
  border-left:1px solid var(--theme-borders-color);
}

.CategoryTreeToggle {
    color: #3b82b9
}

#toc,.toc,.mw-warning {
    background-color: var(--theme-box-color);
    border: 1px solid var(--theme-box-border-color);
    border-left: 5px solid var(--theme-box-accent-color);
    box-shadow: 0 0.1em 0.75em rgba(0,0,0,0.2);
}

.tocnumber, .vector-body .toc h2 {
	color: var(--theme-text-color);
}

.vector-body .toc h2 {
    font-family:"Saira";
}

.mw-content-ltr .toc ul ul, .mw-content-rtl .mw-content-ltr .toc ul ul {
    margin:0 0 0 1.5em
}

#contentSub,
#contentSub2 {
  color:var(--theme-borders-color);
}

div.mw-warning-with-logexcerpt {
    border: 2px solid #3c83ba
}

fieldset {
    border: 1px solid black;
    border-radius: 5px
}

ul {
    list-style-image: none
}

#footer
{
	background: var(--theme-body-color)
}

div#footer {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0.1em 0.75em black;
    border: none;
    border-radius: 5px;
    margin-top: 4em;
    margin-bottom: 2em
}

#footer ul li, div#footer ul li {
    color: var(--theme-text-color)
}

div#footer ul li a {
    color: #776757
}

#claimlist .controls_container > .dropdown {
    right: 24px;
    top: -24px
}

.alwaysinvert {
  -webkit-filter: invert(100%) hue-rotate(180deg);
  filter: invert(100%) hue-rotate(180deg);
}

/* Tables  */

table {
    display: table;
    white-space: unset;
}

table.wikitable {
    background: none repeat scroll 0 0 transparent
}

.wikitable {
	border: 1px solid var(--theme-borders-color);
}

table.wikitable>tr>th, table.wikitable>*>tr>th
{
	background: var(--theme-box-color);
	border: 1px solid var(--theme-borders-color);
}

table.wikitable>tr>td, table.wikitable>*>tr>td
{
	border: 1px solid var(--theme-borders-color);
}

table.wikitable > caption {
    color: var(--theme-text-color)
}

table.wikitable > tr > th,table.wikitable > * > tr > th {
    color: var(--theme-text-color);
    text-align: center
}

table.wikitable > tr > td,table.wikitable > * > tr > td {
    border: 1px solid var(--theme-borders-color);
    padding: 0.2em
}

.wikitable th {
    color: #FFFFFF;
    padding: 0.2em
}

.wikitable td {
    color: var(--theme-text-color);
    padding: 0.2em
}

table.mw_metadata th {
    background: black;
    border: 1px solid var(--theme-borders-color);
    color: #FFFFFF
}

table.mw_metadata td {
    background-color: transparent;
    border: 1px solid var(--theme-borders-color);
    color: var(--theme-text-color)
}

.mw-datatable th {
    border: 1px solid var(--theme-borders-color)
}

.mw-datatable,.mw-datatable td {
    border: 1px solid var(--theme-borders-color)
}

.TablePager {
    border: 1px solid var(--theme-borders-color);
    color: #000000;
    padding: 0 0.15em
}

.TablePager th {
    background-color: black;
    color: #ffffff;
    border: 1px solid var(--theme-borders-color);
    padding: 0 0.15em
}

.TablePager tr:hover td {
    background-color: rgba(0,0,0,0.2) !important;
    color: #FFFFFF
}

.TablePager th a {
    background-color: black;
    color: #FFFFFF !important
}

.TablePager td {
    background: transparent !important;
    border: 1px solid var(--theme-borders-color);
    color: #000000
}

/* End of Tables  */

.mw-collapsible-toggle.mw-collapsible-toggle-expanded a,.mw-collapsible-toggle.mw-collapsible-toggle-collapsed a {
    color: var(--theme-link-color)
}

.mw-interwiki-legend .mw-collapsible-toggle a {
    color: #ffffff
}

fieldset#mw-searchoptions {
    background-color: rgba(0,0,0,0);
    border-color: black !important
}

.mw-search-profile-tabs {
    background-color: rgba(0,0,0,0);
    border: 1px solid black;
    margin-top: 1em
}

.mw-search-profile-tabs div.search-types ul li.current a {
    color: #000000
}

#pagehistory li.selected {
    background-image: none;
    background-color:var(--theme-box-color);
    border:1px dashed var(--theme-highlight-color);
    color: var(--theme-text-color);
    padding: 3px
}

div.thumb {
    border: 1px solid var(--theme-borders-color);
    margin: 2px;
    margin-left: 6px
}

img.thumbborder {
    border: 1px solid var(--theme-borders-color);
    border-radius: 5px;
    padding: 5px
}

.thumbimage {
  background-color:var(--theme-box-color);
}

div.thumbinner {
    background-color:var(--theme-box-color);
    border: medium none
}

li.gallerybox div.thumb {
    background-color: rgba(255,255,255,0.2);
    border: 1px solid var(--theme-borders-color);
    border-radius: 5px
}

html .thumbimage {
    border: 1px solid var(--theme-box-border-color);
    border-radius: 5px
}

div.tright div.tleft {
    border: 1px solid black !important
}

div.tright {
    clear: right;
    float: right
}

.client-js #preftoc {
    background-color: rgba(255,255,255,0.5);
    border: 0px;
    margin: 0 0 4px !important
}

.client-js #preftoc,.client-js #preftoc li,.client-js #preferences,.client-js #preftoc li a {
    background-image: none;
    background-color: transparent;
    color: #666666
}

.client-js #preftoc li:first-child {
    margin-bottom: 0;
    margin-left: 5px
}

.client-js #preftoc li.selected a {
    background-color: black;
    background-image: none;
    border-color: black black black;
    border-radius: 5px 5px 0 0;
    border-style: solid;
    border-width: 1px;
    color: white
}

.client-js #preferences {
    background-color: rgba(255,255,255,0.5);
    border: 1px solid black;
    border-radius: 5px
}

.client-js #preferences fieldset {
    border-color: black
}

/* Ambox  */

.ambox {
    background-color: var(--theme-box-color);
    border: 1px solid var(--theme-box-border-color);
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 10px auto;
    width: 80%;
    box-shadow: 0 0.1em 0.75em rgba(0,0,0,0.2);
}

.ambox-gray {
    border-left-color: #383838
}

.ambox.ambox-tiny {
    font-size: 90%;
    margin: 2px 0;
    width: auto
}

.ambox + .ambox {
    margin-top: -2px
}

.ambox-text {
    padding: 0.25em 0.5em
}

.ambox-image {
    padding: 2px 0px 2px 0.5em;
    text-align: center;
    width: 60px
}

.ambox-tiny .ambox-image {
    padding: 2px 0.5em;
    text-align: left;
    width: auto
}

.ambox-blue {
    border-left: 10px solid var(--theme-blue-color)
}

.ambox-red {
    border-left: 10px solid var(--theme-red-color)
}

.ambox-orange {
    border-left: 10px solid var(--theme-orange-color)
}

.ambox-yellow {
    border-left: 10px solid var(--theme-yellow-color)
}

.ambox-purple {
    border-left: 10px solid var(--theme-purple-color)
}

.ambox-gray {
    border-left: 10px solid var(--theme-common-color)
}

.ambox-green {
    border-left: 10px solid var(--theme-green-color)
}

.amsmalltext {
    font-size: smaller;
    margin-left: 0.8em;
    margin-top: 0.5em
}

.feature {
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 10px
}

/* Navbox  */

.navbox {
    width: 100%;
    clear: both;
}
table.navbox {
    border: 1px solid var(--theme-box-border-color);
    clear: both;
    font-size: 88%;
    margin: auto;
    padding: 1px;
    text-align: center;
    width: 100%
}

table.navbox + table.navbox {
    margin-top: -1px
}

.navbox-title,.navbox-abovebelow,table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center
}

.navbox-group {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap
}

.navbox,.navbox-subgroup {
    background: var(--theme-box-color)
}

.navbox-list {
    border-color: var(--theme-box-border-color)
}

.navbox-title,table.navbox th {
    background:rgba(255,255,255,.2);
    font-family:"Saira";
    font-weight: 600;
    letter-spacing: 0.02em;
}

.navbox-abovebelow,.navbox-group,.navbox-subgroup .navbox-title {
    background: rgba(255,255,255,0.2);
}

.navbox-subgroup .navbox-group,.navbox-subgroup .navbox-abovebelow {
    background: rgba(0,0,0,0.05);
}

.navbox-even {
    background: rgba(0,0,0,0.05);
}

.navbox-odd {
    background: transparent
}

.collapseButton {
    font-weight: normal;
    width: auto
}

.navbox .collapseButton {
    width: 6em
}

.navbar {
    font-size: 88%;
    font-weight: normal
}

.navbox .navbar {
    font-size: 100%
}

table.collapsed tr.collapsible {
    display: none
	
}

/* Tabber */
.tabber__header {
  box-shadow:inset 0 -1px 0 0 var(--theme-borders-color);
}
.tabber__tab,
.tabber__tab:visited {
  color:var(--theme-borders-color);
}
@media (hover:hover) {
  .tabber__tab:hover {
    color:var(--theme-text-color);
  }
}
.tabber__tab[aria-selected='true'],
.tabber__tab[aria-selected='true']:visited {
  color:var(--theme-button-color);
}
.tabber__indicator {
  background:var(--theme-button-color);
}

/* Template:Ability */
.ability-container {
    width: 100%;
    max-width: 65vw
}

.wikitable.ability {
    margin-bottom: 0
}

table.ability {
    width: 100%
}

.tabber-ability {
    text-align: left;
    border: 1px solid var(--theme-borders-color);
    border-top: 0
}

.tabber-ability .tabbernav {
    border: 0;
    padding: 0.5em;
    background-color: #000
}

.tabber-ability .tabbernav li {
    padding: 0;
    margin-top: 0
}

.tabber-ability .tabbernav li a:link,.tabber-ability .tabbernav li a:link:hover {
    background: rgba(127,127,127,0.2);
    color: #fff;
    border: 0;
    padding: 0.5em;
    font-size: 1.1em
}

.tabber-ability .tabbernav li.tabberactive a:link {
    background: rgba(255,255,255,0.5)
}

.tabber-ability .tabbertab {
    border: 0;
    text-align: left
}

.ability-image {
    width: 100px
}

.ability-header {
    width: 6em
}

ul.tabbernav li a:link {
    background-color: rgba(235,235,235);
    color: #7F5126;
    padding: 0.5em;
    border: 1px solid #999
}

ul.tabbernav li a:hover {
    background-color: rgba(200,200,200,0.75)
}

ul.tabbernav li.tabberactive a {
    background-color: #fff;
    color: #000;
    border-bottom: none
}

ul.tabbernav li {
    display: inline-block;
    margin-top: 0.5em
}

.tabber .tabbertab {
    border: 1px solid #999
}

/* Infobox  */

.infobox {
    float: right;
    width: 23em;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 0.5em;
    padding: 4px;
    border-bottom: 5px solid var(--theme-infobox-label-color);
    background-color: var(--theme-infobox-bg-color);
    color: var(--theme-infobox-text-color);
    box-shadow: 0 0.1em 0.75em rgba(0,0,0,0.2);
}

.infobox-table {
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: 0
}

.infobox-header {
    text-align: center;
    font-family: 'Bebas Neue';
    vertical-align: middle;
    padding: 0px;
    font-size: 200%;
    background-color: var(--theme-infobox-label-color);
    color: var(--theme-infobox-labeltext-color);
    border: none
}

.infobox-section {
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--theme-infobox-text-color);
    font-family: Saira;
    font-weight: 500
}

.infobox-section::before {
    content: "— "
}

.infobox-section::after {
    content: "—"
}

.infobox-section a {
    color: #fff
}

.infobox-centered {
    text-align: center;
    color: var(--theme-infobox-text-color)
}

.infobox-centered img {
    max-width: 100%;
    height: auto
}

.infobox-row {
    vertical-align: top
}

.infobox-row-name, .infobox-row-hname {
  background-color:var(--theme-infobox-label-color);
  color:var(--theme-infobox-labeltext-color);
  vertical-align:middle;
  font-size:80%;
  padding:0 .5em;
  white-space:nowrap
}

.infobox-row-name {
    border-bottom-right-radius: 5px;
    text-align: right;
    width: 100px;
}

.infobox-row-hname {
  text-align:center;
  padding: 2px 0px;
}

.infobox-row-value {
  color: var(--theme-infobox-text-color)
}

.infobox-spacer {
    height: 0.5em
}

.infoboxtable {
    background-color: var(--theme-infobox-bg-color);
    border: 1px solid black;
    color: var(--theme-infobox-text-color);
    float: right;
    font-size: 89%;
    margin-bottom: 0.5em;
    margin-left: 1em;
    padding: 0.2em;
    width: 300px
}

.infoboxtable td {
    vertical-align: top
}

.infoboxtable td > div {
    background-color: var(--theme-infobox-label-color);
    border: 2px solid inherit;
    font-weight: bold;
    padding: 0.5px 7px;
    text-align: right;
    color: var(--theme-infobox-labeltext-color);
}

.infoboxname {
    font-size: 110%;
    padding: 0.5em
}

.infoboxdetails {
    padding: 0em
}

/* Infobox Coloring  */

.infobox.weapon {
  --weapon-background-color:var(--theme-infobox-bg-color);
  --weapon-highlight-color:var(--theme-infobox-label-color);
  --weapon-header-color:var(--theme-infobox-label-color);
  
  background:var(--weapon-background-color);
  border-color:var(--weapon-highlight-color)
}

.infobox.weapon .infobox-header {
  background:var(--weapon-highlight-color);
  color:var(--weapon-header-color);
}

.infobox.weapon[class$=weapon] .infobox-header {
  color:var(--theme-infobox-label-color);
}

.infobox.weapon .infobox-row-name, .infobox.weapon .infobox-row-hname {
  background:var(--weapon-highlight-color);
  color:var(--weapon-header-color)
}

.infobox.weapon.arrows {
  --weapon-background-color:#FBF2D5;
  --weapon-highlight-color:#917E43;
  --weapon-header-color:#F3D573;
}

.infobox.weapon.energy-ammo {
  --weapon-background-color:#E2EE9C;
  --weapon-highlight-color:#636F1D;
  --weapon-header-color:#CEE255;
}

.infobox.weapon.heavy-rounds {
  --weapon-background-color:#B5E5D3;
  --weapon-highlight-color:#366654;
  --weapon-header-color:#6BCEA8;
}

.infobox.weapon.heavylight {
  --weapon-background-color:#B5E5D3;
  --weapon-highlight-color:#366654;
  --weapon-header-color:#6BCEA8;
}

.infobox.weapon.light-rounds {
  --weapon-background-color:#F9CCA4;
  --weapon-highlight-color:#815126;
  --weapon-header-color:#F49A4A;
}

.infobox.weapon.shotgun-shells {
  --weapon-background-color:#FF957F;
  --weapon-highlight-color:#801600;
  --weapon-header-color:#FE2C00;
}

.infobox.weapon.sniper-ammo {
  --weapon-background-color:#C1C3FF;
  --weapon-highlight-color:#3E36A5;
  --weapon-header-color:#7E82FF;
}

.infobox.weapon[class*=mythic] {
  --weapon-background-color:#F9B2C8;
  --weapon-highlight-color:#8B001A;
  --weapon-header-color:#EE0047;
}

.infobox.weapon.sheila {
  --weapon-background-color:#f5aed1;
  --weapon-highlight-color:#ae0774;
  --weapon-header-color:#ff4eb8;
}

.infobox.weapon.a13 {
  --weapon-background-color:#c7e4f7;
  --weapon-highlight-color:#2479b1;
  --weapon-header-color:#8bd0f9;
}

.infobox.legend {
  --legend-class-color:var(--theme-infobox-label-color);

  border-color:var(--legend-class-color);
}
.infobox.legend .infobox-row-name {
  border-right:3px solid var(--legend-class-color);
}

.infobox.legend.assault {
  --legend-class-color: #d64537;
}
.infobox.legend.skirmisher {
  --legend-class-color: #bfa937;
}
.infobox.legend.recon {
  --legend-class-color: #8e3ae2;
}
.infobox.legend.support {
  --legend-class-color: #3f75dc;
}
.infobox.legend.controller {
  --legend-class-color: #70c84d;
}
.infobox.seasonal.s01 {
  --theme-infobox-bg-color: #fbdbd2;
  --theme-infobox-label-color: #a21111;
  --theme-infobox-labeltext-color: #f5e8e2;
}
.infobox.seasonal.s02 {
  --theme-infobox-bg-color: #c6c8fb;
  --theme-infobox-label-color: #25429d;
  --theme-infobox-labeltext-color: #CBCEF5;
}
.infobox.seasonal.s03 {
  --theme-infobox-bg-color: #e4e3e6;
  --theme-infobox-label-color: #8791a0;
  --theme-infobox-labeltext-color: #e4e3e6;
}
.infobox.seasonal.s04 {
  --theme-infobox-bg-color: #d5c2c0;
  --theme-infobox-label-color: #353434;
  --theme-infobox-labeltext-color: #aa342e;
}
.infobox.seasonal.s05 {
  --theme-infobox-bg-color: #fce3a4;
  --theme-infobox-label-color: #d1a240;
  --theme-infobox-labeltext-color: #212c2d;
}
.infobox.seasonal.s06 {
  --theme-infobox-bg-color: #ffbae4;
  --theme-infobox-label-color: #bf1d7f;
  --theme-infobox-labeltext-color: #43d5c5;
}
.infobox.seasonal.s07 {
  --theme-infobox-bg-color: #b2f8f2;
  --theme-infobox-label-color: #00cfcc;
  --theme-infobox-labeltext-color: #fffefd;
}
.infobox.seasonal.s08 {
  --theme-infobox-bg-color: #ffe6c0;
  --theme-infobox-label-color: #ec5118;
  --theme-infobox-labeltext-color: #ffb645;
}
.infobox.seasonal.s09 {
  --theme-infobox-bg-color: #e8cae5;
  --theme-infobox-label-color: #6801a8;
  --theme-infobox-labeltext-color: #ec8b08;
}
.infobox.seasonal.s10 {
  --theme-infobox-bg-color: #b4d0cf;
  --theme-infobox-label-color: #0b5867;
  --theme-infobox-labeltext-color: #f2e388;
}
.infobox.seasonal.s11 {
  --theme-infobox-bg-color: #ffd3d3;
  --theme-infobox-label-color: #db4e53;
  --theme-infobox-labeltext-color: #98e0e6;
}
.infobox.seasonal.s12 {
  --theme-infobox-bg-color: #ffffc3;
  --theme-infobox-label-color: #f9f832;
  --theme-infobox-labeltext-color: #1b1901;
  border-bottom: 5px solid #840d0f;
}
.infobox.seasonal.s13 {
  --theme-infobox-bg-color: #dce7f7;
  --theme-infobox-label-color: #3c38a3;
  --theme-infobox-labeltext-color: #d7b2e8;
}
.infobox.seasonal.s14 {
  --theme-infobox-bg-color: #bbe4d7;
  --theme-infobox-label-color: #1b5e3c;
  --theme-infobox-labeltext-color: #75d0b3;
}
.infobox.seasonal.s15 {
  --theme-infobox-bg-color:#ecd3de;
  --theme-infobox-label-color:#d06dcc;
  --theme-infobox-labeltext-color:#f7e2ad;
}
.infobox.seasonal.s16 {
  --theme-infobox-bg-color: #f7eeea;
  --theme-infobox-label-color: #bb0e0e;
  --theme-infobox-labeltext-color: #FFF;
}
.infobox.seasonal.s17 {
  --theme-infobox-bg-color:#d5e2e6;
  --theme-infobox-label-color:#052b5d;
  --theme-infobox-labeltext-color:#efe1a2;
}
.infobox.seasonal.s18 {
  --theme-infobox-bg-color:#ffdacc;
  --theme-infobox-label-color:#553725;
  --theme-infobox-labeltext-color:#df460f;
}
.infobox.seasonal.s19 {
  --theme-infobox-bg-color:#F9D7F9;
  --theme-infobox-label-color:#780062;
  --theme-infobox-labeltext-color:#F772C1;
}
.infobox.seasonal.s20 {
  --theme-infobox-bg-color: #DEE9F0;
  --theme-infobox-label-color: #12193e;
  --theme-infobox-labeltext-color: #07E0B9;
  border-bottom: 5px solid #cf0f00;
}
.infobox.seasonal.s21 {
  --theme-infobox-bg-color:#f0e1f7;
  --theme-infobox-label-color:#4dda98;
  --theme-infobox-labeltext-color:#d3ffd6;
}

/*******************************************
* Legend Upgrade template styling *
********************************************/

.leup-level.leup-blue {
  background-color:#62c8ff;
  margin-top:10px;
  padding:3px 10px;
  width:max-content;
  border: 1px solid #1c89f3;
}
.leup-level.leup-purple {
  background-color:#c84dff;
  margin-top:10px;
  padding:3px 10px;
  width:max-content;
  border: 1px solid #9829f5;
}
.leup-upgrades {
  background-color:var(--theme-box-color);
  margin-top:-1px;
  padding:5px;
  padding-right:10px;
  width:max-content;
  border: 1px solid var(--theme-box-border-color);
}

/*******************************************
* Item box template styling *
********************************************/

.itemboxbg {
  background-size: cover;
  width: 100px;
  height: 100px;
  align-items: center;
  display: flex;
}
.itemboxbg.lvl1 {
  background-image: url(/images/7/76/ItemBG_lvl_1.svg);
}
.itemboxbg.lvl2 {
  background-image: url(/images/a/ab/ItemBG_lvl_2.svg);
}
.itemboxbg.lvl3 {
  background-image: url(/images/0/01/ItemBG_lvl_3.svg);
}
.itemboxbg.lvl4 {
  background-image: url(/images/c/c2/ItemBG_lvl_4.svg);
}
.itemboxbg.lvl5 {
  background-image: url(/images/f/f3/ItemBG_lvl_5.svg);
}
.itemboxbg.lvl123 {
  background-image: url(/images/d/d5/ItemBG_lvl_123.svg);
}
.itemboxbg.lvl1234 {
  background-image: url(/images/2/2e/ItemBG_lvl_1234.svg);
}
.itemboxbg.lvl1235 {
  background-image: url(/images/d/db/ItemBG_lvl_1235.svg);
}
.itemboxbg.lvl234 {
  background-image: url(/images/7/7a/ItemBG_lvl_234.svg);
}

/***************************
* Used by [[Template:Key]] *
****************************/
.keysDark {
  color:black; 
  border: 1px solid rgb(170, 170, 170); 
  box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221); 
  border-radius: .2em; 
  background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238)); 
  background-color: rgb(249, 249, 249); 
  padding: 0.1em 0.6em 0.1em 0.6em; 
  margin-right:2px; 
  font-size:85%; 
  font-family:inherit; 
  font-style:normal;
}

.keysLight {
    color: white;
    border: 1px solid rgb(0,0,0);
    box-shadow: 0.1em 0.2em 0.2em rgb(0,0,0);
    border-radius: .2em;
    background-image: linear-gradient(to bottom,rgb(0,0,0),rgb(15,15,15),rgb(30,30,30));
    background-color: rgb(30,30,30);
    padding: 0.1em 0.6em 0.1em 0.6em;
    margin-right: 2px;
    font-size: 85%;
    font-family: inherit;
    font-style: normal
}

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

/***********************
* Tabber overflow fix *
************************/
.gallery.mw-gallery-nolines {
	margin-top: 0;
}

/***********************
* Datamaps styling *
************************/
.ext-datamaps-container-content .ext-datamaps-container-leaflet {
  background: url(/images/3/3d/Mapscreen_bg.png);
  background-color:var(--theme-body-color);
}
.oo-ui-panelLayout-framed {
  border:1px solid var(--theme-borders-color);
}

.leaflet-bar {
  background-color:var(--theme-box-color);
  border:1px solid var(--theme-box-border-color);
}

.ext-datamaps-control-expandable,
.oo-ui-menuLayout-content,
.ext-datamaps-control-expandable > button:nth-child(1),
.ext-datamaps-control-expandable[aria-expanded="true"] {
  background-color: var(--theme-box-color);
}

.leaflet-bar button:hover,
.leaflet-bar button:focus {
  background-color:rgba(255,255,255,0.4);
}

select.leaflet-control,
.leaflet-container button.leaflet-popup-close-button {
  color: var(--theme-text-color);
}

.ext-datamaps-control-search ul.ext-datamaps-control-search-results {
  background:var(--theme-box-color);
}

.ext-datamaps-control-search ul.ext-datamaps-control-search-results li:focus,
.ext-datamaps-control-search ul.ext-datamaps-control-search-results li[data-highlighted='true'] {
  background:var(--theme-highlight-color);
  color:var(--theme-text-color);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background:var(--theme-box-color);
  color:var(--theme-text-color);
}

.ext-datamaps-popup-header .ext-datamaps-popup-subtitle {
  color:var(--theme-borders-color);
}

.leaflet-bar button {
  border-bottom:1px solid var(--theme-box-border-color);
  color:var(--theme-text-color)
}

/********************
* Other Stuff *
*********************/

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button
{
	color: var(--theme-link-color);
}

/********************


/********************
* [[Template:Mbox]] *
Adopted from https://acecombat.wiki.gg/wiki/Template:Mbox
*********************/
.mbox {
	display: flex;
	position: relative;
	background-color: var(--theme-body-color);
	border: 1px solid var(--theme-link-color);
	border-left-width: 8px;
	margin-bottom: 5px;
	min-height: 32px;
}
.mbox-type-success {
	border-color: var(--theme-green-color);
}
.mbox-type-info {
	border-color: var(--theme-accent-color--hover);
}
.mbox-type-moderate {
	border-color: var(--theme-orange-color);
}
.mbox-type-important {
	border-color: var(--theme-red-color);
}
.mbox__content {
	display: table;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 15px;
}
.mbox__content__image {
	display: table-cell;
	width: 45px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding-right: 15px;
	font-size: 2.5em;
	line-height: 1;
}
.mbox__content__image .icon-filter {
	filter: var(--wiki-icon-general-filter);
}
.mbox__content__wrapper {
	display: table-cell;
	vertical-align: middle;
}
.mbox__content__header {
	display: block;
	font-weight: bold;
}
.mbox__content__text {
	display: block;
}
.mbox__content__text__comment {
	font-size: small;
}
.mbox__content__aside {
	display: table-cell;
	width: 100px;
	vertical-align: middle;
	text-align: center;
	padding-left: 15px;
	border-left: 1px solid var(--theme-link-color);
}
.mbox__close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 2px 7px;
	font-weight: bold;
	font-size: 16px;
	color: var(--theme-text-color);
	cursor: pointer;
	transition: all .15s ease-in;
}
.mbox__close:hover {
	color: var(--theme-link-color);
}
.mbox__close:after {
	content: '×';
}
.mw-collapsed + .mbox__close {
	transform: rotate(45deg);
	padding: 4px 7px 5px 2px;
}
.mbox__content__image.fandom-icons {
	font-size: 2em;
}
#siteNotice .mbox {
	line-height: 1.4;
}
#siteNotice .mbox__close {
	display: none;
}
.sitedir-ltr .mw-dismissable-notice-body,
.sitedir-rtl .mw-dismissable-notice-body {
	clear: both;
	margin: 0;
}

	
#siteNotice>#localNotice, .mw-dismissable-notice
{
	background: #0002;
    border: 1px solid var(--theme-link-color);
    padding: .5em 1em 0;
}

/***********
* End Mbox *
************/