Wiki/MediaWiki:Fandomdesktop.css

/\* CSS placed here will affect users of the Hydradark skin \*/
/\* For elements which only display in the mobile view \*/
.mobileonly {

```
   display: none;

```

}

/\* Hide main page header \*/
body.page-Skydome\_Wiki h1.firstHeading {

```
   display:none;

```

}

/\* Framework \*/
.theme-fandomdesktop-light {

```
   background-color: #120301;
   background-image: url;
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   background-size: cover;

```

}
.theme-fandomdesktop-dark {

```
   background-color: #0f0a0a;
   background-image: url;
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   background-size: cover;

```

}

.fandom-community-header\_\_background { display: none; }

/\* Content \*/
.page\_\_main {

```
   background: rgba(var(--theme-page-background-color--rgb), 0.8);
   border: none;
   border-radius: 10px;

```

}

.page\_\_main h1, h2, h3, h4, h5, h6, hr {

```
   border-color: var(--theme-border-color);

```

}

div#toc,
div.toc,
div.mw-warning,
ul#filetoc,

1. catlinks {

```
   background: rgba(var(--theme-page-background-color--rgb), 0.4);
   border: 1px solid var(--theme-border-color);
   border-radius: 10px;

```

}

.mcf-wrapper {

```
   display: none;

```

}

/\* Tables \*/
.theme-fandomdesktop-dark table.wikitable {

```
   background: none;
   border: 1px solid var(--theme-border-color);
   color: var(--theme-sticky-nav-text-color);

```

}

.theme-fandomdesktop-dark table.wikitable > tr > th,
.theme-fandomdesktop-dark table.wikitable > \* > tr > th {

```
   background-color: var(--theme-sticky-nav-background-color);
   border: 1px solid var(--theme-border-color);
   color: var(--theme-sticky-nav-text-color);

```

}

.theme-fandomdesktop-dark table.wikitable > tr > td,
.theme-fandomdesktop-dark table.wikitable > \* > tr > td {

```
   background: none;
   border: 1px solid var(--theme-border-color);
   padding: 0.2em;

```

}

/\* Infoboxes \*/
.infobox {

```
   background: none;
   border: 1px solid var(--theme-border-color);
   float: right;
   margin-bottom: 1em;
   margin-left: 1em;
   width: 300px;
   clear: right;

```

}

.infobox table {

```
   background-color: #d96a02;
   width: 100%;

```

}

.infobox th {

```
   padding: 3px;
   text-align: left;

```

}

table.infobox > tr > th,
table.infobox > \* > tr > th {

```
   padding-left: .5em;
   padding-right: .5em;

```

}

table.infobox > tr > td,
table.infobox > \* > tr > td {

```
   text-align: right;

```

}

.infobox th.header,
.infobox th.title {

```
   background-color: var(--theme-sticky-nav-background-color);
   border: 1px solid var(--theme-border-color);
   color: var(--theme-sticky-nav-text-color);
   text-align: center;

```

}

.infobox th.title {

```
   font-size: 120%;
   padding: 0.5em;

```

}

.infobox td {

```
   padding: 3px;

```

}

.infobox td.image {

```
   padding: 1em;
   text-align: center;

```

}

.infobox.infobox-content-left > tr > td,
.infobox.infobox-content-left > \* > tr > td {

```
   text-align: left;

```

}

/\* Interface \*/
fieldset {

```
   border-color: var(--theme-border-color);

```

}

div#mw-js-message {

```
   background: var(--theme-body-dynamic-color-1);
   border: solid 1px var(--theme-border-color);

```

}

div.mw-warning-with-logexcerpt {

```
   border: solid 1px var(--theme-border-color);

```

}

.theme-fandomdesktop-dark table.mw\_metadata {

```
   background: none;
   border: 1px solid var(--theme-border-color);

```

}

.theme-fandomdesktop-dark table.mw\_metadata th {

```
   background: var(--theme-sticky-nav-background-color);
   border: 1px solid var(--theme-border-color);

```

}

.theme-fandomdesktop-dark table.mw\_metadata td {

```
   background: none;
   border: 1px solid var(--theme-border-color);

```

}

.theme-fandomdesktop-dark .mw-datatable {

```
   background: none;
   border: 1px solid var(--theme-border-color);

```

}

.theme-fandomdesktop-dark .mw-datatable th {

```
   background: var(--theme-sticky-nav-background-color);
   border: 1px solid var(--theme-border-color);

```

}

.theme-fandomdesktop-dark .mw-datatable td {

```
   background: none;
   border: 1px solid var(--theme-border-color);

```

}

.theme-fandomdesktop-dark .mw-datatable tr:hover td {

```
   background: rgba(53,168,121,.15);

```

}

li.gallerybox {

```
   border-color: transparent;

```

}

.thumb,
div.thumbinner,
li.gallerybox div.thumb {

```
   background: rgba(53,168,121,.15);
   border: solid 1px var(--theme-border-color);

```

}

/\* Wiki editor \*/
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: var(--theme-sticky-nav-background-color);
   border-left: 1px solid var(--theme-border-color);
   border-top: 1px solid var(--theme-border-color);

```

}

div.wikiEditor-ui-tabs div {

```
   background-color: rgba(var(--theme-link-dynamic-color-2--rgb),.15);
   border-right: 1px solid var(--theme-border-color);
   border-bottom: 1px solid var(--theme-border-color);

```

}

div.wikiEditor-ui-tabs div a {

```
   color: var(--theme-sticky-nav-text-color);

```

 background: none;
}

div.wikiEditor-ui-tabs div.current {

```
   background-color: rgba(var(--theme-link-dynamic-color-2--rgb),.3);
   border-bottom: 1px solid var(--theme-border-color);

```

}

div.wikiEditor-ui-tabs div.current a {

```
   color: var(--theme-sticky-nav-text-color);
   font-weight: bold;

```

}

div.wikiEditor-ui .wikiEditor-ui-top {

```
   border-bottom: 1px solid var(--theme-border-color);

```

}

div.wikiEditor-ui .wikiEditor-ui-view {

```
   border: 1px solid var(--theme-border-color);

```

}

div#wikiEditor-ui-toolbar {

```
   background: linear-gradient( to bottom, rgba(var(--theme-link-dynamic-color-2--rgb),0), rgba(var(--theme-link-dynamic-color-2--rgb),.15) 26px);

```

}

div.wikiEditor-ui-toolbar .group {

```
   border-right: 1px solid var(--theme-border-color);

```

}

div.wikiEditor-ui-toolbar .group-search {

```
   border-left: 1px solid var(--theme-border-color);
   border-right: none;

```

}

div.wikiEditor-ui-toolbar .group .label {

```
   color: var(--theme-sticky-nav-text-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-sticky-nav-text-color);

```

}

div.wikiEditor-ui-toolbar .tabs span.tab a.current,
div.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {

```
   color: var(--theme-sticky-nav-text-color);

```

}

div.wikiEditor-ui-toolbar .group .tool-select .label {

```
   color: var(--theme-body-dynamic-color-1); /* 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(0, 0, 0, 0.2);
   border-top: 1px solid var(--theme-border-color);

```

}

div.wikiEditor-ui-toolbar .booklet .index div {

```
   color: var(--theme-sticky-nav-text-color);

```

}

div.wikiEditor-ui-toolbar .booklet .index .current {

```
   background-color: rgba(var(--theme-link-dynamic-color-2--rgb),.3);
   color: var(--theme-sticky-nav-text-color);
   font-weight: bold;

```

}

div.wikiEditor-ui-toolbar .booklet .pages {

```
   background-color: transparent;

```

}

div.wikiEditor-ui-toolbar .page-characters div span {

```
   border: 1px solid var(--theme-border-color);
   color: var(--theme-sticky-nav-text-color);

```

}

div.wikiEditor-ui-toolbar .page-characters div span:hover {

```
   background-color: rgba(var(--theme-link-dynamic-color-2--rgb),.15);
   border-color: var(--theme-border-color);
   color: var(--theme-sticky-nav-text-color);

```

}

div.wikiEditor-ui-toolbar .page-table th {

```
   color: var(--theme-sticky-nav-text-color);

```

}

div.wikiEditor-ui-toolbar .page-table td {

```
   border-top: 1px solid var(--theme-border-color);
   color: var(--theme-sticky-nav-text-color);

```

}

div.wikiEditor-preview-loading {

```
   background-color: transparent;

```

}

div.wikiEditor-preview-contents {

```
   background-color: transparent;
   border: none;

```

 overflow-y: hidden;
}

div.editOptions {

```
   background-color: rgba(var(--theme-link-dynamic-color-2--rgb),.3);
   border: 1px solid var(--theme-border-color);

```

 border-top: none;
}

/\* Page history \*/
.theme-fandomdesktop-dark table.diff,
.theme-fandomdesktop-dark td.diff-otitle,
.theme-fandomdesktop-dark td.diff-ntitle {

```
   background: transparent;
   color: var(--theme-sticky-nav-text-color);

```

}

.theme-fandomdesktop-dark td.diff-context {

```
   background: rgba(0,0,0,.1);
   color: var(--theme-sticky-nav-text-color);

```

}

.theme-fandomdesktop-dark .diffchange {

```
   color: var(--theme-sticky-nav-text-color);

```

}

/\* Front page appearance styles \*/
.fpbox .heading,
.fpbox .mainheading {

```
   border: 0;
   border-bottom: 1px solid var(--theme-border-color);

```

}

.fpbox {

```
   background: rgba(var(--theme-body-background-color--rgb), 0.05);
   border: 1px solid var(--theme-border-color);
   box-shadow: 0 2px 5px var(--theme-border-color);

```

}

.fplink:not(.fplink-plain) {

```
   background: rgba(var(--theme-body-background-color--rgb),0.3);
   border: 1px solid var(--theme-border-color);

```

}

.fplink-fullwidth .fplink:not(.fplink-plain) {

```
   background: rgba(var(--theme-body-background-color--rgb),0.4);

```

}

.linkslabel {

```
   border-bottom: 2px solid var(--theme-border-color);

```

}

/\* CSS placed here will affect users of the Hydradark skin \*/
/\* For elements which only display in the mobile view \*/
.mobileonly {

```
   display: none;

```

}

/\* for "edit this page" tab and "discussion" tab etc \*/
.pagetab {

```
    border-style: solid solid none;
    border-width: thin;
    border-color: var(--theme-border-color);
    padding: 0.25ex 1ex 0ex;
    font-size: 95%;

```

}

.ambox {

```
   background-color: var(--theme-page-background-color--secondary);
   border-bottom-color: var(--theme-link-dynamic-color-2);
   border-right-color: var(--theme-link-dynamic-color-2);
   border-top-color: var(--theme-link-dynamic-color-2);
   border-collapse: collapse;
   font-size: 95%;
   margin: 0 auto 2px auto;
   width: 80%;

```

}

.ambox-gray {

```
   border-left-color: var(--theme-link-dynamic-color-2);

```

}

.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;

```

}

/\* INFOBOXES: game or book depended color style \*/
.infoboxtable {

```
   background-color: rgba(var(--theme-body-background-color--rgb), 0);
   border: 1px solid var(--theme-border-color);
   color: var(--theme-page-dynamic-color-1);
   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-page-text-mix-color-95);
   border: 2px solid inherit;
   border-radius: 5px;
   font-weight: bold;
   padding: 0.5px 7px;
   text-align: right;

```

}

.infoboxname {

```
   background-color: var(--theme-page-text-mix-color-95);
   font-size: 110%;
   font-weight: bold;
   padding: 0.5em;

```

}

.infoboxdetails {

```
   padding: 0em;

```

}

/\* copyright images tweak \*/
.skin-hydradark .copyright-icon,
.theme-fandomdesktop-dark .copyright-icon {

```
   background-image: url;
   background-size: 100%;
   height: 32px;
   width: 32px;

```

}

.theme-fandomdesktop-light .copyright-icon {

```
   background-image: url;
   background-size: 100%;
   width: 32px;
   height: 32px;

```

}

.feature {

```
   background: rgba(var(--theme-body-background-color--rgb), 0.1);
   border: 1px solid rgba(var(--theme-body-background-color--rgb), 0.5);
   border-radius: 5px;
   padding: 10px;

```

}

/\* Navbox template style \*/
table.navbox {

```
   border: 1px solid var(--theme-border-color);
   clear: both;
   font-size: 88%;
   margin: auto;
   padding: 1px;
   text-align: center;
   width: 100%;

```

}

/\* Border between adjacent navboxes \*/
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;

```

}

/\* Base background \*/
.navbox, .navbox-subgroup {

```
   background: rgba(var(--theme-body-background-color--rgb), 0.1);

```

}

.navbox-list {

```
   border-color: rgba(var(--theme-body-background-color--rgb), 0.1); /* Must match background color */

```

}

/\* Level 1 color \*/
.navbox-title,
table.navbox th {

```
   background: rgba(var(--theme-body-background-color--rgb), 0.2);
   color: var(--theme-sticky-nav-text-color);

```

}

/\* Level 2 styling \*/
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {

```
   background: rgba(var(--theme-body-background-color--rgb), 0.2);
   color: var(--theme-sticky-nav-text-color);

```

}

/\* Level 3 styling \*/
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {

```
   background: rgba(var(--theme-body-background-color--rgb), 0.1);
   color: var(--theme-sticky-nav-text-color);

```

}

/\* Even row striping \*/
.navbox-even {

```
   background: rgba(var(--theme-accent-dynamic-color-1--rgb), 0.1);
   color: var(--theme-sticky-nav-text-color);

```

}

/\* Odd row striping \*/
.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;

```

}
/\* End of new Navbox styling \*/

/\* Front page appearance styles \*/
.fpbox .heading,
.fpbox .mainheading {

```
   border: 0;
   border-bottom: 1px solid var(--theme-border-color);

```

}

.fpbox {

```
   background: rgba(var(--theme-body-background-color--rgb), 0.05);
   border: 1px solid var(--theme-border-color);
   box-shadow: 0 2px 5px var(--theme-border-color);

```

}

.fplink:not(.fplink-plain) {

```
   background: rgba(var(--theme-body-background-color--rgb),0.3);
   border: 1px solid var(--theme-border-color);

```

}

.fplink-fullwidth .fplink:not(.fplink-plain) {

```
   background: rgba(var(--theme-body-background-color--rgb),0.4);

```

}

.linkslabel {

```
   border-bottom: 2px solid var(--theme-border-color);

```

}