MediaWiki:Common.css
From SWGoH Wiki
Jump to navigationJump to searchNote: 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
**********************/
.clearfix{
clear: both;
}
.onlyMobile {
display:none;
}
.indent-once {
margin-left:15px;
}
.indent-twice {
margin-left:30px;
}
.div-button:hover{
cursor:pointer;
}
.hide-a-gold a{
color:gold;
text-decoration:none;
}
.hide-a-gold a:visited{
color:gold;
}
.reward-container{
font-weight:bold;
}
.enemy_wrap:hover, .unit_lv:hover, .gear_lv_border:hover{
cursor:pointer;
}
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.1s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #000c;
color: #fff;
font-size: 1.1em;
position: absolute;
padding: 2px 10px;
top: -33px;
left: -80%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
border-radius:15px;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.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;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 170px;
background-color: #333c;
color: #fff;
text-align: center;
font-size:14px !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;
}
#footer #f-list #mobileview {
float: left;
margin-right: 1em !important;
margin-top: 0.833em !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;
}
/**********************
NAVIGATION
**********************/
/*-----Page Content----*/
div#content{
/*margin-top: 10em !important;*/
}
/*-----SEARCH BOX-----*/
#p-search{
margin-top:auto;
}
#p-search h3{
display:none;
}
#p-search .pBody{
display: block !important;
}
/*-----PAGE TOOLS-----*/
#p-cactions{
left:auto !important;
right: 12.2em;
/*top: 7.7em !important;*/
width:12em !important;
margin:0 !important;
overflow:visible;
}
#p-cactions .pBody{
font-weight: normal !important;
margin-top: -3px !important;
box-shadow: -1px 1px 3px black;
display:none;
}
#p-cactions li{
font-size: 1em !important;
display: block !important;
float:none !important;
border-radius:0 !important;
margin:0 !important;
}
#p-cactions li a{
text-transform: none;
}
#p-cactions h3{
text-align: center;
position: initial;
width: initial;
height: 1.2em;
color: blue;
border-top-left-radius: .6em;
background-color: white;
}
/*-----USER TOOLS-----*/
#p-personal .pBody{
display: inline-block !important;
font-weight: normal !important;
font-size: 1em !important;
}
#p-personal li{
font-size: 1em !important;
}
/*-----WIKI TOOLS-----*/
#p-tb{
position: absolute;
top: 3em;
right: .5px;
width: 12em !important;
background-color: #efefef;
margin: 0;
z-index: 2;
color: black !important;
padding: 0;
border: 1px solid #ccc;
}
#p-tb-label{
color: blue;
width: unset;
text-align: center;
}
#p-tb .pBody{
font-weight: normal !important;
margin-top: -1px !important;
margin-left: -.5px;
width: inherit;
box-shadow: -1px 1px 3px black;
display:none;
}
#p-tb li{
font-size: 1em !important;
display: block !important;
border: 1px solid #ccc;
line-height:2.3em;
height:2.3em;
}
#p-tb .pBody a{
color: #002bb8;
}
#p-tb li:hover {
background-color: #F8F8F8;
}
/*-----NAV FORMAT-----*/
div#column-one h3, div#column-one li{
font-size: 1.3em;
}
div#column-one .pBody{
font-size: 1em !important;
font-weight: bold;
}
div#column-one .pBody a{
text-decoration: none;
}
/*-----DROPDOWNS-----*/
/* --Position dropdown-- */
div#column-one #p-Gameplay .pBody,
div#column-one #p-Units .pBody,
div#column-one #p-Holotable .pBody,
div#column-one #p-Events .pBody,
div#column-one #p-Guides .pBody,
div#column-one #p-Community .pBody{
position: absolute;
z-index: 9999;
top: 0px;
left: 145px;
margin: 0px;
width: 220px;
background-color: #000c;
display: none;
}
/* --Allow dropdown-- */
div#column-one #p-Gameplay,
div#column-one #p-Units,
div#column-one #p-Holotable,
div#column-one #p-Events,
div#column-one #p-Guides,
div#column-one #p-Community,
div#column-one #p-tb{
overflow: visible;
}
/* --Show dropdown-- */
div#column-one #p-cactions:hover .pBody,
div#column-one #p-Gameplay:hover .pBody,
div#column-one #p-Units:hover .pBody,
div#column-one #p-Holotable:hover .pBody,
div#column-one #p-Events:hover .pBody,
div#column-one #p-Guides:hover .pBody,
div#column-one #p-Community:hover .pBody,
div#column-one #p-tb:hover .pBody{
display: block !important;
}
/* --Position dropdown txt-- */
div#column-one ul{
margin-left:0px;
}
div#column-one li{
padding-left: 10px;
padding-bottom: 1px;
}
/* --Hover Effects-- */
div#column-one #p-Gameplay:hover h3,
div#column-one #p-Units:hover h3,
div#column-one #p-Holotable:hover h3,
div#column-one #p-Events:hover h3,
div#column-one #p-Guides:hover h3,
div#column-one #p-Community:hover h3{
color: black !important;
background-color: aqua;
}
div#column-one #p-navigation li:hover,
div#column-one #p-Gameplay li:hover,
div#column-one #p-Units li:hover,
div#column-one #p-Holotable li:hover,
div#column-one #p-Events li:hover,
div#column-one #p-Guides li:hover,
div#column-one #p-Community li:hover{
background-color:aqua;
}
div#column-one #p-navigation li:hover a,
div#column-one #p-Gameplay li:hover a,
div#column-one #p-Units li:hover a,
div#column-one #p-Holotable li:hover a,
div#column-one #p-Events li:hover a,
div#column-one #p-Guides li:hover a,
div#column-one #p-Community li:hover a{
color:black !important;
}
/**********************
INFOBOXES
**********************/
.infobox {
float: right;
clear: right;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
border: 1px solid #a2a9b1;
background: #f8f9fa;
color: black;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox caption {
margin-left: inherit;
font-size: larger;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.main-header {
text-align: center;
font-size: 20px;
font-weight: bold;
font: "Josefin Sans";
}
.main-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 150em;
margin: 0 auto;
padding-right: 0.5em;
}
.main-col {
margin: 0.5em 0em 0em 1.5em;
padding: 0;
width: 22%;
border: 1px solid white;
box-sizing: border-box;
}
.main-col-3 {
margin: 0.5em 0em 0em 1.5em;
padding: 0.5em;
width: 26%;
border: 1px solid white;
box-sizing: border-box;
}
.wikitable.custom-unitbox th {
background-color: lightsteelblue;
}
/*-------------------
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%);
}
table.unit-box-neutral th {
color:white!important;
}
/*---------------------
Unit Templates
----------------------*/
@media screen and (max-width: 950px) {
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;
}
}
/*---------------------
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;
}
/*----------------------
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;
}
/**********************
Gear Templates
**********************/
.gear-recipe {
float:left;
margin:5px 0 0 5px;
text-align:center;
font-size:16px !important;
}
.gear-wrap{
float:left;
}
.gear-wrap-hidden{
display:none;
margin-right:17px;
float:left;
}
/**********************
Tables
**********************/
.wikitable.custom-table th {
background-color: lightsteelblue;
}
.quickmenu-title {
font-weight:bold;
text-align:center;
}
.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;
height: 50px;
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;
height: 50px;
border-radius: 50%;
box-shadow: 0 1px 3px #000;
}
.table-gear-uses{
width:100%;
border-collapse:collapse;
}
.table-gear-uses td{
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
}
/*------SEMANTIC WIKI----------*/
.smwtable-img{
text-align:center;
}
.smwtable-img img{
width: 40px;
height: 40px;
border: none;
}
.table-ability-ranking{
text-align:center;
width:100%;
}
.smw-status-effect{
text-align:center;
}
.smw-status-effect img{
width:50px;
height:50px;
border:none;
}
/*------------------------
Statistic Page
------------------------*/
.statistics-hover{
cursor:pointer;
width:100%;
color:blue;
}
/**************************
Specific Pages
**************************/
/*---------------
Mechanics
---------------*/
.mechanics-page{
}
/*----------
Guides
-----------*/
.guide-param-use i{
color:lightcoral;
}
/*_________New Content___*/
.new-unit-col {
width:100px;
margin:0px 6px;
}
/*_________Main Page____*/
.site-map-col ul{
list-style:none;
margin:5px 0px 0px 0px;
}
.site-map-col p{
margin-bottom:0px;
border-bottom:2px solid black;
}
/*_________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{
width:370px;
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: 70%;
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;
}
/*********************
LANGUAGES
*********************/
/* vietnamese */
@font-face {
font-family: 'Josefin Sans';
font-style: italic;
font-weight: 400;
src: local('Josefin Sans Italic'), local('JosefinSans-Italic'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3EZQNVED7rKGKxtqIqX5EUCEx1XHgOiJM6xPE.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Josefin Sans';
font-style: italic;
font-weight: 400;
src: local('Josefin Sans Italic'), local('JosefinSans-Italic'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3EZQNVED7rKGKxtqIqX5EUCEx0XHgOiJM6xPE.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Josefin Sans';
font-style: italic;
font-weight: 400;
src: local('Josefin Sans Italic'), local('JosefinSans-Italic'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3EZQNVED7rKGKxtqIqX5EUCEx6XHgOiJM6.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 400;
src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3aZQNVED7rKGKxtqIqX5EUAnx4Vn8siqM7.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 400;
src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3aZQNVED7rKGKxtqIqX5EUA3x4Vn8siqM7.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 400;
src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3aZQNVED7rKGKxtqIqX5EUDXx4Vn8sig.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 700;
src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3FZQNVED7rKGKxtqIqX5EctlltdF0hoJky_MiS.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 700;
src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3FZQNVED7rKGKxtqIqX5EctlltdV0hoJky_MiS.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 700;
src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3FZQNVED7rKGKxtqIqX5Ectllte10hoJky_A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
