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: Clear the cache in Tools → Preferences
.black, .Black {
color: #41474d;
}
.green, .Green {
color: #86d480;
}
.red, .Red {
color: #d35151;
}
.blue, .Blue {
color: #60adc9;
}
/* Infoboxes */
.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;
}
.infoboxtable {
float: right;
background: #1C1E1F;
border: 1px dashed #C09E65;
width: 350px;
}
.infoboxname {
background: #555;
color: #C09E65;
font-size: 115%;
}
.infoboxlabel {
width: 50%;
background: #1B1823;
color: #FFF ;
border: 1px solid #C09E65;
border-radius:5px;
padding: 0.5px 7px;
text-align: right;
}
.infoboxdetails {
padding-right: 5px;
}
/*********************
/* Front page styles *
/*********************/
.fpcontent {
width: 100%;
overflow: hidden;
z-index: 1;
}
.fpmaybecols {
overflow: hidden;
margin: -5px 0 -5px 0;
}
.fpmaybecols + .fpmaybecols {
margin: 0 0 -5px 0;
}
.fpbox {
background: rgba(0,0,0,.7);
color: #fff; /* change for hydra (light) wikis */
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
border-radius: 4px;
}
.fpbox2 {
background: rgba(255,255,255,.75);
color: #fff; /* change for hydra (light) wikis */
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
border: 2px solid #DFC668;
}
.fpboxcell {
border: 2px solid #CDB88A;
}
.fpplainbox {
padding: 5px 8px 10px 8px;
margin: 0 5px 10px 5px;
vertical-align: top;
}
.fpbox .welcome {
border-bottom: 2px solid #1B1823;
color: #fff; /* change for hydra (light) wikis */
font-size: 150%;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
text-transform: uppercase;
}
.fpbox .heading {
border-bottom: 1px solid #505050;
color: #fff; /* change for hydra (light) wikis */
font-size: 132%;
font-variant: small-caps;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpbox .heading .smalllink {
color: #fff; /* change for hydra (light) wikis */
font-size: 75%;
font-weight: bold;
}
.fpbox hr {
border: none;
border-bottom: 2px solid #1B1823;
}
div#content hr {
background-color: #1B1823;
color: #1B1823;
}
.fplinks {
margin: -5px;
}
.fplinks .linkslabel {
background: rgba(255,255,255,.75);
border-bottom: 2px solid #1B1823;
font-weight: bold;
margin: 15px 5px 5px 5px;
padding: 0 0 5px 0;
}
.fplink {
display: inline-block;
vertical-align: middle;
width: 100%;
}
/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */
.fplink .box {
border-collapse: separate;
border-spacing: 5px;
display: table;
width: 100%;
}
.fplink .box .row {
display: table-row;
}
.fplink .box .row .cell {
background: rgba(255,255,255,.75);
color: #fff; /* change for hydra (light) wikis */
display: table-cell;
font-weight: bold;
position: relative;
vertical-align: middle;
}
.fplink.wide .box .row .cell {
padding: 0 5px;
}
#fptopsection .fplink.image,
#fpflexsection .fplink.image,
#fpbottomsection .fplink.image
height: 114px;{
width: 114px;
}
.fplink.image .box .row .cell {
height: 100px;
width: 100px;
vertical-align: bottom;
}
.fplink.image .box .row .cell .image img {
height: 100px;
width: 100px;
}
@media (min-width: 470px) {
.fplink {
width: 50%;
}
.fplink.wide {
width: 100%;
}
}
@media (min-width: 580px) {
.fplink {
width: 33.333%;
}
.fplink.wide {
width: 66.666%;
}
}
@media (min-width: 690px) {
.fplink {
width: 25%;
}
.fplink.wide {
width: 50%;
}
}
@media (min-width: 800px) {
.fplink {
width: 20%;
}
.fplink.wide {
width: 40%;
}
}
@media (min-width: 910px) {
.fplink {
width: 16.666%;
}
.fplink.wide {
width: 33.333%;
}
}
@media (min-width: 990px) {
.fpcontent {
padding-right: 520px;
width: auto;
}
#fptopsection {
float: left;
width: 100%;
}
#fpflexsection {
float: right;
width: 520px;
margin-right: -520px
}
#fpbottomsection {
float: left;
width: 100%;
margin-top: -5px;
}
#fptopsection .fplink, #fpbottomsection .fplink {
width: 50%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 100%;
}
#fpflexsection .fplink {
width: 25%;
}
#fpflexsection .fplink.wide {
width: 50%;
}
}
@media (min-width: 1100px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 33.333%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 66.666%;
}
}
@media (min-width: 1210px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 25%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 50%;
}
}
@media (min-width: 1320px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 20%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 40%;
}
}
@media (min-width: 1430px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 16.666%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 33.333%;
}
.fplink a {
padding: 3px 5px;
}
}
@media (min-width: 1540px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 14.285%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 28.571%;
}
#fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox {
background-image: none;
}
.fpmaybelcol {
float: left;
width: 50%;
}
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 20%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 40%;
}
.fpmaybercol {
float: right;
width: 50%;
}
#fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
width: 50%;
}
#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
width: 100%;
}
}
@media (min-width: 1650px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 12.5%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 25%;
}
}
@media (min-width: 1697px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 16.666%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 33.333%;
}
}
@media (min-width: 1760px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 11.111%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 22.222%;
}
}
@media (min-width: 1850px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 14.285%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 28.571%;
}
}
@media (min-width: 1870px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 10%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 20%;
}
#fptopsection .fplink.image, #fpbottomsection .fplink.image {
width: 134px;
height: 134px;
}
#fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
width: 120px;
height: 120px;
}
#fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
width: 120px;
height: 120px;
}
}
@media (min-width: 1918px) {
#fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
width: 33.333%;
}
#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
width: 66.666%;
}
}
@media (min-width: 1980px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 9.09%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 18.181%;
}
}
@media (min-width: 2006px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 12.5%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 25%;
}
}
@media (min-width: 2090px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 8.33%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 16.666%;
}
}
@media (min-width: 2161px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 11.111%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 22.222%;
}
}
@media (min-width: 2200px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 7.692%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 15.384%;
}
}
@media (min-width: 2296px) {
#fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
width: 25%;
}
#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
width: 50%;
}
}
@media (min-width: 2310px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 7.142%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 14.285%;
}
}
@media (min-width: 2316px) {
#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
width: 10%;
}
#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
width: 20%;
}
}
@media (min-width: 2420px) {
#fptopsection .fplink, #fpbottomsection .fplink {
width: 6.666%;
}
#fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
width: 13.333%;
}
.fplink a {
padding: 5px 5px;
}
#fptopsection .fplink.image, #fpbottomsection .fplink.image {
width: 164px;
height: 164px;
}
#fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
width: 150px;
height: 150px;
}
#fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
width: 150px;
height: 150px;
}
}
.fplink.image .image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 75%;
z-index: 1;
}
.fplink.image a {
z-index: 2;
}
.fplink a {
display: block;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1px 5px;
}
.fplink.image .image a {
padding: 0;
}
.fplink.image .link a {
background: rgba(255,255,255,.75);
border-top: 2px solid #505050;
}
.fplink.wide a {
margin: 0 -5px;
}
.fpvideos {
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.fpvideo {
display: inline-block;
margin: 0 5px;
}
.fpdecoleft {
border: none;
border-radius: 3px;
background: transparent url("https://static.wikia.nocookie.net/overwatch_gamepedia/images/2/26/FP-Deco-Left.png/revision/latest") center bottom no-repeat;
height: 274px;
margin: 5px 5px 5px 5px;
}
.fpdecoright {
border: none;
border-radius: 3px;
background: transparent url("https://static.wikia.nocookie.net/overwatch_gamepedia/images/e/e0/FP-Deco-Right.png/revision/latest") center bottom no-repeat;
height: 274px;
margin: 5px 5px 5px 5px;
}
div.fauxbutton.plainlinks a {
display: inline-block;
border: none;
border-radius: 2px;
background: #ffc70e;
box-shadow: 0 0 10px 5px rgba(237, 186, 14, 0.6) inset;
color: #511616;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
margin: 0;
padding: 0 6px;
}
div.fauxbutton.plainlinks a:hover {
border: none;
border-radius: 2px;
background: #ffffff;
box-shadow: none;
color: #000000;
}
div.fauxbutton.plainlinks a:active {
border: none;
border-radius: 2px;
background: #cccccc;
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.6) inset;
color: #000000;
}
/*********************
/* Tooltips *
/*********************/
table.skill-tooltip {
border: 1px dashed #8a8a8a;
background: #000;
width: 500px;
padding: .5em;
border-spacing: .5em;
display: none;
margin-right: 100px;
position:absolute;
}
table.skill-tooltip th {
color: #dddddd;
}
table.skill-tooltip td, table.skill-tooltip th {
text-align: left;
vertical-align: top;
}
table.skill-tooltip tr:first-child td:first-child {
text-align: center;
vertical-align: top;
width: 1%;
}
table.item-tooltip {
border: 1px dashed #8a8a8a;
background: #000;
width: 500px;
padding: .5em;
border-spacing: .5em;
display: none;
position:absolute;
z-index: 2;
}
/* 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%;
}
#mw-js-message,
.usermessage {
margin-bottom: 39px !important;
}
#mp-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
#mp-layout #mp-left {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-right: 1em;
}
#mp-layout #mp-right {
-webkit-box-flex: 0;
-ms-flex: 0 0 500px;
flex: 0 0 500px;
}
#mp-layout .mp-block {
margin-bottom: 1em;
padding: 1em;
border: solid 1px #600;
}
#mp-layout .mp-block#battle-pass {
padding: 0;
border: none;
background: #000;
text-align: center;
}
#mp-layout .mp-heading {
height: 50px;
border-bottom: solid 1px #ccc;
color: #600;
text-align: center;
font-weight: bold;
font-size: 170%;
}
#mp-layout #heroes .mp-content {
text-align: center;
}
.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 */
/* Start Tabs style */
.page-tabber {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: auto;
margin-bottom: 20px;
}
.page-tabber-tab {
padding: .5em;
border: solid #624938;
white-space: nowrap;
line-height: .95em;
}
.page-tabber-tab.active-tab {
border-width: 2px 2px 0;
font-weight: bold;
}
.page-tabber-tab.inactive-tab {
border-width: 1px 1px 2px;
background-color: #624938;
}
.page-tabber-separator {
border-bottom: 2px solid #624938;
}
.page-tabber-separator.tail {
width: 100%;
}
/* End Tabs style */
/*
* Patch styles ([[Template:Patch layout]])
*/
.patch-layout {
width: 100%;
border: 1px solid #624938;
text-align: center;
}
.patch-layout-last {
background: rgba(47,34,28,0.25);
}
.patch-layout-all {
width: 27%;
background: rgba(87,84,78,0.25);
}
.patch-layout-background {
background-color: rgba(87,84,78,0.25);
border: 1px solid #624938;
margin: 0.75em 0;
padding: 0.75em 1em;
padding-bottom: 1em;
}
/* this section governs the responsive 3 column main page layout */
.fpmain {
width: 100%;
overflow: hidden;
z-index: 1;
}
.fpbanner {
background: rgba(0, 0, 0, 0.05);
border: 1px solid #505050;
box-shadow: 0 2px 5px #505050;
margin: 0 5px 5px 5px;
padding: 5px;
min-height: 80px;
}
.fpbannertable {
display: table;
border: none;
background: transparent;
width: 100%;
min-height: 75px;
margin: 0;
padding: 5px;
}
.fpbannercell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.fpbannerblock {
border: none;
color: #ffffff;
font-weight: bold;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
font-size: 132%;
width: 100%;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpmidsections {
float: left;
width: 100%;
overflow: hidden;
}
.fpbox {
background: rgba(0, 0, 0, 0.05);
border: 1px solid #505050;
box-shadow: 0 2px 5px #505050;
margin: 5px;
padding: 5px;
overflow: auto;
}
.fpbox .mainheading {
border: none;
border-bottom: 1px solid #505050;
font-size: 150%;
font-weight: bold;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
overflow: auto;
}
.fpbox .heading {
border: none;
border-bottom: 1px solid #505050;
text-align: center;
font-size: 132%;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
overflow: auto;
}
.fpmain .columns .leftcol {
width: 100%;
margin: 0;
padding: 0;
}
.fpmain .columns .rightcol {
width: 100%;
margin: 0;
padding: 0;
}
.fpsection1, .fpsection2, .fpsection3, .fpsection4 {
float: left;
clear: both;
width: 100%;
}
div.fp2columnonly, div.fp3columnonly {
display: none;
}
@media (min-width: 790px) {
.fpsection1 {
float: left;
clear: none;
width: 50%;
}
.fpmidsections {
clear: none;
float: right;
width: 50%;
}
.fpsection4 {
float: left;
clear: none;
width: 50%;
}
div.fp2columnonly {
display: block;
}
}
@media (min-width: 990px) {
.fpmain .columns .leftcol {
float: left;
width: 50%;
margin: 0;
padding: 0;
}
.fpmain .columns .rightcol {
float: right;
width: 50%;
margin: 0;
padding: 0;
}
}
@media (min-width: 1390px) {
.fpmidsections {
clear: none;
float: right;
width: 66.667%;
}
.fpsection1 {
clear: none;
width: 33.333%;
}
.fpsection2 {
clear: none;
width: 50%;
}
.fpsection3 {
clear: none;
width: 50%;
}
.fpsection4 {
clear: left;
width: 33.333%;
}
div.fp2columnonly {
display: none;
}
div.fp3columnonly {
display: block;
}
}
.fpbox.plain {
background: transparent;
border: none;
box-shadow: none;
}
.fpimagelist ul {
list-style-type: none;
list-style-image: none;
}
.fpvideos {
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.fpvideo {
display: inline-block;
margin: 0 5px;
}