Fandomdesktop.css

In other languages: Español
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
.theme-fandomdesktop-dark {
    --custom-background-color: #222;
    --custom-background-color-1: #444;
    --custom-background-color_2: #111;
    --custom-background-color-3--rgb: 80,201,80;
    --custom-border-color: #43b2c5;
    --custom-border-color--rgb: 67,178,197;
    --custom-border-color-2: #B2D3E3;
    --custom-content-color-1: #42b6fb;
    --custom-content-color-2: #0b1521;
    --custom-content-color-3: #064163;
    --custom-text-color: #aaaaaa;
    --custom-skill-text-color: #a0e0fe;
    --custom-collection-background-color: #3b2b6c;
    --custom-collection-background-color-1: #140828;
    --custom-collection-background-cname: #2f2257;
}

.theme-fandomdesktop-light {
    --custom-background-color: #ddd;
    --custom-background-color-1: #bbb;
    --custom-background-color_2: #eee;
    --custom-background-color-3--rgb: 80,201,80;
    --custom-border-color: #43b2c5;
    --custom-border-color--rgb: 67,178,197;
    --custom-border-color-2: #B2D3E3;
    --custom-content-color-1: #42b6fb;
    --custom-content-color-2: #0b1521;
    --custom-content-color-3: #064163;
    --custom-text-color: #333;
    --custom-skill-text-color: #a0e0fe;
    --custom-collection-background-color: #70668f;
    --custom-collection-background-color-1: #732ee5;
    --custom-collection-background-cname: #7051d0;
}

/****************
 * Custom Fonts *
 ****************/

@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/exo/v2/wocyXRLWPo2Av-yUTmmbTA.woff) format('woff');
}

@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/exo/v2/RokIQ-knd7LT9uhmuUjL2g.woff) format('woff');
}

@font-face {
  font-family: 'Exo';
  font-style: italic;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/exo/v2/SrRPhC0khZfK-pbowUGBAw.woff) format('woff');
}

@font-face {
  font-family: 'Exo';
  font-style: italic;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/exo/v2/ENjw15vOU74UM6LyiOhPTvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

/*******************
 * Document Styles *
 *******************/

.main-container {
    background-attachment: fixed;
    background-image: url(https://static.wikia.nocookie.net/allstars_gamepedia/images/2/26/Background.png/revision/latest?cb=20140301013302);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

fieldset {
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

/***************
 * Link Styles *
 ***************/

a,
.page__main a.external,
body.skin-fandomdesktop #mw-indicator-mw-helplink a {
    color: var(--theme-link-color);
}

a:visited,
.page__main a.extiw:visited,
.page__main a.external:visited {
    color: var(--theme-border-color);
}

/* Content */
.page__main {
    background-color: rgba(var(--theme-page-background-color--rgb), .6);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--theme-body-text-color);
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    font-family: Exo;
}

h1 {
    border-color: var(--theme-border-color);
}

.page__main hr {
    background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

.page__main table {
    color: var(--theme-body-text-color);
}

div.toc,
div#toc,
#catlinks,
div.mw-warning {
    background: linear-gradient(to bottom, rgba(var(--theme-page-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-page-dynamic-color-1--rgb),.02) 100%) no-repeat border-box;
    border: solid 1px rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

pre,
.skin-fandomdesktop .mw-code {
    background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    overflow-x: auto;
}

table.wikitable {
    border-collapse: separate;
    border-spacing: 2px;
    background: none;
    border: none;
    color: var(--theme-body-text-color);
}

table.wikitable > tr > th,
table.wikitable > * > tr > th,
body.skin-fandomdesktop table.wikitable > tr > th,
body.skin-fandomdesktop table.wikitable > * > tr > th {
    background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.2);
    border: none;
}

table.wikitable > tr > td,
table.wikitable > * > tr > td {
    background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border: none;
}

li.gallerybox div.thumb {
    background: var(--custom-background-color);
    background: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    background: linear-gradient(to bottom,rgba(var(--theme-page-dynamic-color-1--rgb),.15) 0%,rgba(var(--theme-page-dynamic-color-1--rgb),.02) 100%) no-repeat border-box;
    border: solid 1px rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

div.thumbinner {
    background: var(--custom-background-color_2);
    background: rgba(var(--theme-page-dynamic-color-1--rgb), .1);
    border: solid 1px var(--custom-background-color);
    border: solid 1px rgba(var(--theme-page-dynamic-color-1--rgb), .1);
    font-size: 94%;
    overflow: hidden;
    padding: 3px !important;
    text-align: center;
}

/*************
 * File Page *
 *************/

ul#filetoc {
    background: var(--custom-background-color);
    background: rgba(var(--theme-page-dynamic-color-1--rgb), .1);
    background: linear-gradient(to bottom, rgba(var(--theme-page-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-page-dynamic-color-1--rgb),.02) 100%) no-repeat border-box;
    border: solid 1px rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

table.mw_metadata {
    border-spacing: 2px;
    border-collapse: separate;
    background: none;
    border: none;
    color: var(--theme-body-text-color);
}

table.mw_metadata th {
    border: none;
    background: rgba(var(--theme-page-dynamic-color-1--rgb),.2);
}

table.mw_metadata td {
    border: none;
    background: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

/***********
 * History *
 ***********/

#pagehistory li,
#pagehistory li.selected {
    border: 1px dashed var(--theme-border-color);
}

#pagehistory li.selected {
    background-color: var(--theme-page-background-color--secondary);
    color: var(--theme-body-text-color);
}

.updatedmarker {
    color: var(--theme-link-dynamic-color-1);
}


#pagehistory li.selected {
    background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-style: dashed;
    border-width: 1px;
}

#pagehistory li:first-child {
    border-width: 1px;
}

#pagehistory li {
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
}



/**************
 * Difference *
 **************/

body.skin-fandomdesktop table.diff,
body.skin-fandomdesktop td.diff-otitle,
body.skin-fandomdesktop td.diff-ntitle {
    background-color: transparent;
}

body.skin-fandomdesktop td.diff-context {
    background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

/****************
 * Special Page *
 ****************/

tablebody.skin-fandomdesktop .mw-datatable {
    border-spacing: 2px;
    border-collapse: separate;
    background: none;
    border: none;
    color: var(--theme-body-text-color);
}

body.skin-fandomdesktop .mw-datatable th {
    border: none;
    background: rgba(var(--theme-page-dynamic-color-1--rgb),.2);

}
body.skin-fandomdesktop .mw-datatable td {
    border: none;
    background: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

body.skin-fandomdesktop .mw-datatable tr:hover td {
    background: rgba(var(--theme-page-dynamic-color-1--rgb),.2);
}

/************************
 * Special:SpecialPages *
 ************************/

.mw-specialpages-table {
    margin-top: 0;
    margin-bottom: 0;
}

/***********************
 * Special:Preferences *
 ***********************/

body.skin-fandomdesktop #preferences {
    background: linear-gradient(to bottom,rgba(var(--theme-page-dynamic-color-1--rgb),.15) 0%,rgba(var(--theme-page-dynamic-color-1--rgb),.02) 100%) no-repeat border-box;
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.3);
}

body.skin-fandomdesktop #preftoc li.selected a {
    background-image: none;
    color: var(--theme-body-text-color);
}

body.skin-fandomdesktop #preftoc,
body.skin-fandomdesktop #preftoc li {
    background-image: none;
}

body.skin-fandomdesktop #preferences legend {
    color: var(--theme-link-color);
}

body.skin-fandomdesktop #preferences fieldset.prefsection fieldset {
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.3);
}

body.skin-fandomdesktop #preftoc a,
body.skin-fandomdesktop #preftoc a:active {
    color: var(--theme-link-color);
}

.htmlform-tip {
    color: #777;
}

/******************
 * Special:Search *
 ******************/

body.skin-fandomdesktop .mw-search-profile-tabs {
    background: rgba(var(--theme-page-dynamic-color-1--rgb), .15);
    border: none;
}

fieldset#mw-searchoptions {
    background: rgba(var(--theme-page-dynamic-color-1--rgb), .1);
    border: none !important;
}

fieldset#mw-searchoptions div.divider {
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

body.skin-fandomdesktop .mw-search-profile-tabs div.search-types ul li a {
    color: var(--theme-border-color);
}

body.skin-fandomdesktop .mw-search-profile-tabs div.search-types ul li.current a {
    color: var(--theme-body-text-color);
    text-shadow: 0 0 6px rgba(255,2552,255,.75);
}

fieldset#mw-searchoptions div.divider {
    border-bottom: solid 1px var(--theme-border-color);
}

/*************************
 * Special:RecentChanges *
 *************************/

.mw-changeslist-legend {
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

/**********************
 * Wiki Editor Styles *
 **********************/

div.wikiEditor-ui {
    background: transparent;
    border: none;
}

div.wikiEditor-ui-buttons {
    background-color: transparent;
    border: none;
}

div.wikiEditor-ui-controls {
    background-color: transparent;
    border-bottom: none;
}

div.wikiEditor-ui-tabs {
    background-color: transparent;
    border-left: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-top: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

div.wikiEditor-ui-tabs div {
    background: none;
    border-right: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-bottom-color: transparent;
}

div.wikiEditor-ui-tabs div a {
     color: var(--theme-link-color);
     background: none;
}

div.wikiEditor-ui-tabs div.current {
    background: linear-gradient( to bottom, rgba(var(--theme-page-dynamic-color-1--rgb),0), rgba(var(--theme-page-dynamic-color-1--rgb),.05)) no-repeat border-box;
    border-bottom-color: transparent;
}

div.wikiEditor-ui-tabs div.current a {
    color: var(--theme-body-text-color);
}

div.wikiEditor-ui .wikiEditor-ui-top {
    border-bottom: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

div.wikiEditor-ui .wikiEditor-ui-view {
    border: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

div#wikiEditor-ui-toolbar {
    background: linear-gradient( to bottom, rgba(var(--theme-page-dynamic-color-1--rgb),.05), rgba(var(--theme-page-dynamic-color-1--rgb),.2) 26px);
}

div.wikiEditor-ui-toolbar .group {
    border-right: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

div.wikiEditor-ui-toolbar .group-search {
    border-left: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-right: none;
}

div.wikiEditor-ui-toolbar .group .label {
    color: var(--theme-link-color);
}

.tab {
    border-color: transparent;
}

div.wikiEditor-ui-toolbar .tabs span.tab a,
div.wikiEditor-ui-toolbar .tabs span.tab a:visited {
    color: var(--theme-link-color);
}

div.wikiEditor-ui-toolbar .tabs span.tab a.current,
div.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
    color: var(--theme-link-color);
}

div.wikiEditor-ui-toolbar .group .tool-select .label {
    color: var(--theme-page-background-color); /* or any other dark colour, or change the bg to a dark colour to contrast with light text */
}

div.wikiEditor-ui-toolbar .sections .section {
    background-color: rgba(var(--theme-page-background-color--rgb), 0.2);
    border-top: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
}

div.wikiEditor-ui-toolbar .booklet .index div {
    color: var(--theme-link-color);
}

div.wikiEditor-ui-toolbar .booklet .index .current {
    background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    color: var(--theme-body-text-color);
}

div.wikiEditor-ui-toolbar .booklet .pages {
    background-color: transparent;
}

div.wikiEditor-ui-toolbar .page-characters div span {
    border: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    color: var(--theme-link-color);
}

div.wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    color: var(--theme-link-color);
}

div.wikiEditor-ui-toolbar .page-table th {
    color: var(--theme-body-text-color);
}

div.wikiEditor-ui-toolbar .page-table td {
    border-top: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    color: var(--theme-link-color);
}

div.wikiEditor-preview-loading {
    background-color: transparent;
}

div.wikiEditor-preview-contents {
    background-color: transparent;
    border: none;
    overflow-y: hidden;
}

div.editOptions {  
    background-color: transparent;
    border: 1px solid rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-top: none;
}

/* for "edit this page" tab and "discussion" tab etc */
.pagetab {
     border-style: solid solid none;
     border-width: thin;
     border-color: var(--theme-page-text-mix-color);
     padding: 0.25ex 1ex 0ex;
     font-size: 95%;
}

.ambox {
    background: var(--custom-background-color);
    background: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    background: linear-gradient(to bottom, rgba(var(--theme-page-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-page-dynamic-color-1--rgb),.02) 100%) transparent no-repeat border-box;
    border-bottom-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-right-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-top-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

.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 colors */
.ambox-blue {
     border-left: 10px solid #1e90ff;
}

.ambox-red {
     border-left: 10px solid #b22222;
}

.ambox-orange {
     border-left: 10px solid #f28500;
}

.ambox-yellow {
     border-left: 10px solid #f4c430;
}

.ambox-purple {
     border-left: 10px solid #9932cc;
}

.ambox-gray {
     border-left: 10px solid #bba;
}

.ambox-green {
     border-left: 10px solid #228b22;
}

/* Ambox small text */
.amsmalltext {
     font-size: smaller;
     margin-left: 0.8em;
     margin-top: 0.5em;
}

/* copyright images tweak */
body.skin-fandomdesktop .copyright-icon {
    background-image: url("https://static.wikia.nocookie.net/commons_hydra/images/thumb/5/58/Copyright_darkwiki.png/32px-Copyright_darkwiki.png");
    background-size: 100%;
    height: 32px;
    width: 32px;
}

/* INFOBOXES: game or book depended color style */
.infoboxtable {
    background: var(--custom-background-color);
    background: rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    background: linear-gradient(to bottom, rgba(var(--theme-page-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-page-dynamic-color-1--rgb),.02) 100%) transparent no-repeat border-box;
    border: solid 1px rgba(var(--theme-page-dynamic-color-1--rgb),.1);
    border-collapse: separate;
    border-spacing: 2px;
    float: right;
    margin-bottom: 0.5em; 
    margin-left: 1em; 
    padding: 0.2em; 
    text-align: center;
    width: 250px;
}

.infoboxtable td {
    vertical-align: top;
}

.infoboxtable td > div {
    font-weight: bold;
    background: rgba(var(--theme-page-dynamic-color-1--rgb),0.07);
    padding-right: 0.5em;
    text-align: right;
}

.infoboxname {
    background: rgba(var(--theme-page-dynamic-color-1--rgb),0.15);
    font-size: 110%; 
    font-weight: bold;
    padding: 0.5em; 
}

.infoboxdetails {
    padding: 0em;
}


table.cargoTable td.odd { background: rgba(var(--theme-page-dynamic-color-1--rgb), 0.05); }
table.cargoTable td.even { background: rgba(238, 238, 238, 0.16);; }

.fpbox .heading,
.fpbox .mainheading {
    border: 0;
    border-bottom: 1px solid var(--theme-border-color);
}

.fpbox {
    background: rgba(var(--theme-page-background-color--rgb), 0.05);
    border: 1px solid var(--theme-border-color);
    box-shadow: 0 2px 5px var(--theme-border-color);
}

/* Collections template */
.collections-table {
    background: rgba(var(--theme-page-background-color--rgb), .1);
    box-shadow: rgba(var(--theme-page-background-color--rgb), 1) 0 0.1em 0.2em;
    margin: left;
    padding: 1px;
    text-align: center;
    width: 100%;
}

.collections-header {
    background-color: var(--custom-collection-background-color);
    border-radius: 3px;
    color: var(--theme-body-text-color);
    font-size: 120%;
}

.collections-c-name {
    background-color: var(--custom-collection-background-cname);
    color: var(--theme-body-text-color);
    font-size: 100%;
}

.collections-c-bg {
    background-color: var(--custom-collection-background-color-1);
    text-align:left;
}