MediaWiki:Mobile.css

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 / Edge: 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.

/********************
      General
********************/
.onlyDesktop {
 display: none;
}
.clearfix{
 clear: both;
}
.indent-once {
 margin-left:15px;
}
.indent-twice {
 margin-left:30px;
}
.hide-a-gold a{
 color:gold;
}
.hide-a-gold a:visited{
 color:gold;
}
.reward-container{
 font-weight:bold;
}

.flex-row{
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 justify-content:center;
}
.flex-row-lt{
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
}

.unit-p-ds{
 margin: 2px;
 background-color:crimson;
 border:1px solid black;
}
.unit-p-ls{
 margin:2px;
 background-color:deepskyblue;
 border:1px solid black;
}

.toggle-button{
 border:1px solid black;
 background-color: #eee;
 font-weight: bold;
 box-shadow: 0 1px 3px #000;
 border-radius: 10px;
 width: 55px;
 line-height:normal;
 padding:1px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 170px;
  background-color: #333c;
  color: #fff;
  text-align: center;
  font-size:.7em !important;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 110%;
  left: 50%;
  margin-left: -88px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.white-link a.external{
 color:white;
}

#site-map-wrap {
 order:3 !important;
}

/**********************
      Headers
**********************/
.header-black-gold h2{
 border:1px solid #000;
 background-image:linear-gradient(#666, #000 70%);
 color:gold;
 padding:5px 0px 3px 5px;
}
.header-black-gold h2 .mw-editsection a{
 color:#ddd;
}


/********************
      Tables
********************/
.quickmenu-title {
 font-weight: bold;
 text-align:center;
}
.wikitable.custom-unitbox th {
 background-color: lightsteelblue;
}
.content table.wikitable{
border:none !important;
}

.wikitable.table-black-gold th{
 background-image:linear-gradient(#5d5d5d, black 80%);
 color: gold;
 text-shadow: 1px 1px 2px black;
 padding:0.2em 0.4em;
}
.wikitable.table-black-aqua th{
 background-image:linear-gradient(#5d5d5d, black 80%);
 color: aqua;
 text-shadow: 1px 1px 2px black;
 padding:0.2em 0.4em;
}

/*-----Gear Tables------------*/
.smwtable-mat-uses{
 text-align:center;
 font-size:1em;
}
.smwtable-mat-uses img{
 width: 55px;
 height: 55px;
 border: none;
}
.smwtable-gear-uses{
 text-align:center;
}
.smwtable-gear-uses img{
 border: 2px solid #2fccff;
 width: 50px !important;
 height: 50px !important;
 border-radius: 50%;
 box-shadow: 0 1px 3px #000;
}
.smwtable-gear-uses-ds{
 text-align:center;
}
.smwtable-gear-uses-ds img{
 border: 2px solid #ff2e2e;
 width: 50px !important;
 height: 50px !important;
 border-radius: 50%;
 box-shadow: 0 1px 3px #000;
}

.table-gear-uses{
 width:100%;
 border-collapse:collapse;
 overflow:visible !important;
}
.table-gear-uses td{
 border-top:2px solid #ddd;
 border-bottom:2px solid #ddd;
}

.table-ability-ranking{
  text-align:center;
  width:100%;
}

/*------------------
   Smw Tables
------------------*/
.smw-status-effect{
 text-align:center;
}
.smw-status-effect img{
 width:50px;
 height:50px;
 border:none;
}

/*------------------------
   Statistic Page
------------------------*/
.statistics-hover{
 cursor:pointer;
 width:100%;
}
.statistics-hover.tooltiptext{
 width:300px;
 margin-left:-158px;
}

/**************************
   Templates and Infobox
**************************/


/*----------------------
   Battle Mechanics
----------------------*/
.mechanic-wrap {
  border:1px solid black;
  padding:10px;
  text-align:center !important;
}
.mechanic-header{
  border:1px solid black;
  padding:8px;
  background-image:linear-gradient(gray, black 80%);
}
.mechanic-header h3 {
  color:gold;
  text-align:center !important;
  margin:0;
  paadding:0;
}


/*-------------------
    Ability Infobox
--------------------*/
.unit-ability-title-wrap p{
 margin-top:0;
}

.granted-ability {
 color:yellow;
 text-shadow: 1.2px 1.1px 1px #000;
}
.ultimate-ability {
 color:#FFA500;
 text-shadow: 1.2px 1.1px 1px #000;
}


/*-----Stats Infobox-----*/
table.table-unit-stats{
border: 2px solid black;
background-color:#333;
text-align:center;
}
table.table-unit-stats th{
background-image:linear-gradient(#777, #555 80%);
color: gold;
text-shadow: 1px 1px 2px black;
border:1px solid black;
padding:0.2em 0.4em;
}
table.table-unit-stats td{
border:1px solid black;
background-color:white;
padding:0.2em 0.4em;
}


/*---Unit Infobox---*/
table.unit-box-ls, table.unit-box-ds {
 background-color: #fff;
 color: #222;
 margin: 1em 0;
 border: 2px solid #000;
 border-collapse: collapse;
}
table.unit-box-ls td, table.unit-box-ds td, table.unit-box-ls th, table.unit-box-ds th{
 border: 1px solid #a2a9b1;
 padding: 0.2em 0.4em;
}
table.unit-box-ls th {
 color:cyan;
 text-shadow: 1px 1px 2px black;
 font-weight:bold;
 background-image:linear-gradient(#666, #444 70%);
}
table.unit-box-ds th {
 color:red;
 text-shadow: 1px 1px 2px black;
 font-weight:bold;
 background-image:linear-gradient(#666, #444 70%);
}

/*---Reward Template---*/
.reward-container{
line-height:1.1em !important;
}

/*---Unit Gear and Stats Template--*/
@media screen and (max-width: 755px) {
 div.stats-left {
   order:1 !important;
 }  
 div.stats-right {
   order:2 !important;
 }
 div.unit-gear {
   order:3 !important;
 }
 div.ship-stats-left {
   order:2 !important;
 }  
 div.ship-stats-right {
   order:3 !important;
 }
 div.ship-crew {
   order:1 !important;
 }
}
@media screen and (max-width: 400px) {
 div.stats-left {
   order:1 !important;
   width:170px !important;
 }  
 div.stats-right {
   order:2 !important;
   width:170px !important;
 }
 div.unit-gear {
   order:3 !important;
 }
 div.ship-stats-left {
   order:2 !important;
 }  
 div.ship-stats-right {
   order:3 !important;
 }
 div.ship-crew {
   order:1 !important;
 }
}

/*---------------------
    Event Templates
----------------------*/
#guild-schedule-wrap {
overflow:hidden;
}

#event-schedule-header {
border:1px solid black;
background-image:linear-gradient(gray, black 80%);
color: gold;
text-shadow: 1px 1px 2px black;
padding:0.2em 0.4em;
width:99%;
font-size:1.4em;
text-align:center;
}

#event-schedule-current-header, #event-schedule-upcoming-header {
border:1px solid black;
border-radius:10px;
background-image:linear-gradient(gray, black 80%);
color: aqua;
text-shadow: 1px 1px 2px black;
padding:0.2em 0.4em;
width:90%;
margin:auto;
margin-top:10px;
margin-bottom:10px;
font-size:1.4em;
text-align:center;
}

#event-schedule-current-content, #event-schedule-upcoming-content {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
text-align:center;
}

/**********************
     Gear Templates
**********************/
.gear-recipe {
 float:left;
 margin:5px 0 0 8px;
 text-align:center;
}

.gear-wrap{
 float:left;
}
.gear-wrap-hidden{
 display:none;
 margin-right:17px;
 float:left;
}

/**************************
         SPECIFIC PAGES
**************************/
/*-------Guides---------*/
.guide-param-use i{
 color:lightcoral;
}


/*-------EVENTS---------*/
.reward-wrap{
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 justify-content:center;
}
.reward-box{
 width:350px;
 min-height:400px;
 border-radius:15px;
 box-shadow:0 0 4px #000;
 background-color:#1c559b;
 color:#fff;
 padding:15px;
 text-align:center;
 margin:6px;
}
.reward-title{
 border-bottom:1px solid black;
 font-weight:bold;
 padding-bottom:15px;
 font-size:2em;
 text-shadow: 0px 1px 2px black;
 color: aquamarine;
}
.reward-header{
 font-size:1.3em;
 font-weight:bold;
 color: blanchedalmond;
 text-shadow: 1px 1px 2px #000;
}
.enemy-wrap{
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 justify-content:center;
}
.enemy-box{
 min-width:350px;
 min-height:400px;
 border-radius:15px;
 box-shadow:0 0 4px #000;
 background-color:#ddd;
 padding:15px;
 text-align:center;
 margin:6px;
}
.enemy-title{
 border-bottom:1px solid black;
 font-weight:bold;
 padding-bottom:15px;
 font-size:2em;
 text-shadow: 0px 1px 2px black;
 color: aquamarine;
}
.enemy-header{
 font-size:1.3em;
 font-weight:bold;
 color: blanchedalmond;
 text-shadow: 1px 1px 2px #000;
}
.event-tier-wrap{}
.event-tier-box{
 background-color:#1c559b;
 border: 1px solid black;
 box-shadow:0 0 4px #000;
 padding:8px;
 width:370px;
 margin:8px;
 color:#fff;
}
.event-tier-box a{
 color:aqua;
}
.event-tier-title{
 border-bottom:1px solid black;
 font-weight:bold;
 padding-bottom:15px;
 font-size:2em;
 text-shadow: 0px 1px 2px black;
 color: #15e59f;
}
.event-tier-header{
 font-size:1.3em;
 font-weight:bold;
 color: blanchedalmond;
 text-shadow: 1px 1px 2px #000;
}
.event-tier-subheader{
 font-size:1.1em;
 font-weight:bold;
 color: #fff;
 text-shadow: 1px 1px 2px #000;
}


/**************************
         NOTICES
**************************/
.notice{
 width: 99%;
 margin-left: auto;
 margin-right: auto;
 border: 3px solid black;
 padding: 0px;
 font-size: 1em;
 position: relative;
 box-shadow: 0px 3px 8px #000000;
}
.notice p{
 margin: 0;
}
.notice b{
 font-size:1.5em;
}
.noticeInfo{
 margin: 10px 10px 10px 100px;
}
.notice #reason{
 font-size:.92em;
 margin-left: 20px;
 font-style: italic;
}
.noticeIconBox{
 height:100%;
 width:90px;
 position: absolute;
 float:left;
}

/**************************
         Infoboxes
**************************/
.unit-ability-title-wrap p{
 margin:0;
 line-height:normal;
}

/*--Event Infobox--*/
.event-infobox{
order: 1 !important;
}
.event-overview{
order: 2 !important;
}


/**************************
      Specific Pages
**************************/
/*_________Guides____*/
.guide-param-use i{
 color:lightcoral;
}

/*_________New Content___*/
.new-unit-col {
 width:100px;
 margin:0px 6px;
}


/**************************
         Other
**************************/
.header-container {
  background: url(https://wiki.swgoh.help/images/0/09/Wiki-bg.png);
  color: white;
  background-color: black;
}


.mw-ui-icon-minerva-mainmenu:before {
    background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>menu</title><path fill="white" fill-rule="evenodd" d="M21 19H2v-2h19v2zm0-6H2v-2h19v2zm0-6H2V5h19v2z"/></svg>);
}