MediaWiki:Vector.css

Note: After publishing, 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: Press Ctrl-F5.
/* The CSS linter is outdated and cries regarding variables. They however do work */
:root {
  --content-text-color: #ffecd6;
  --content-link-color: #ffbd61;
  --content-visited-link-color: #fca23c;
  --article-background-color: #211735;
  --article-lighter-background-color: #281e3f;
  --article-border-color: #4e204c;
  --button-background-color: #12121a;
  --button-selected-background-color: var(--article-background-color);
  --button-top-border-color: #73374e;
  --button-left-border-color: var(--button-top-border-color);
  --button-bottom-border-color: #4e204c;
  --button-right-border-color: var(--button-bottom-border-color);
  --button-selected-border-color: #a24e53;
  --button-hover-top-border-color: #e77754;
  --button-hover-left-border-color: var(--button-hover-top-border-color);
  --button-hover-bottom-border-color: #a24e53;
  --button-hover-right-border-color: var(--button-hover-bottom-border-color);
  --button-hover-highlight-color: #ffc375;
  --toc-background-color: var(--button-background-color);
  --toc-border-color: var(--article-border-color);
  --toc-number-color: #f7b24280;
  --editor-tools-background-color: var(--article-lighter-background-color); 
  --editor-tools-border-color: var(--article-border-color);
  --editor-background-color: var(--button-background-color);
  --editor-number-line-color: #0006;
  --editor-file-delimiter-color: #ffecd680;
  --editor-file-parameter-color: #fcd399;
  --editor-file-color: var(--content-link-color);
  --site-notice-background-color: var(--toc-background-color);
  --category-links-background-color: var(--toc-background-color);
  --category-links-border-color: var(--article-border-color);
  --footer-background-color: var(--toc-background-color);
  --footer-border-color: var(--article-border-color);
  --tabber-background-color: var(--article-lighter-background-color);
  --tabber-border-color: var(--article-border-color);
  --table-header-color: #5a2251;
  --table-hover-color: #6b2a57;
  --upgrade-icon-image: url(https://domekeeper.wiki.gg/images/f/f8/Upgrade_Panel_Bought_Dark.png);
  --upgrade-icon-hover-image: url(https://domekeeper.wiki.gg/images/f/f3/Upgrade_Panel_Bought_Bright.png);
}

/* Fit image to screen width*/
img:not(.upgrades-table img) {
  max-width:100%;
  height:auto;
}
/* Bad temporary solution until I figure out a better one*/
.upgrades-table .upgrade-icon img{
  height:auto;
}

/* Tabber styling for tabbers used on gallery pages */
.tabber-container {
  background-color:var(--tabber-background-color);
  padding:10px;
  box-shadow:0 -2px var(--tabber-border-color),
            -2px 0 var(--tabber-border-color),
            2px 0 var(--tabber-border-color),
            0 2px var(--tabber-border-color),
            0 -2px 0 2px var(--tabber-border-color),
            2px 0 0 2px var(--tabber-border-color),
            -2px 0 0 2px var(--tabber-border-color),
            0 2px 0 2px var(--tabber-border-color);
  margin:6px 4px;
  color:var(--content-text-color);
  box-sizing:border-box;
}
.tabber-container .tabber-gallery li.gallerybox div.thumb {
  background-color:transparent;
  border-color:transparent;
}
.tabber-container .tabber__tab[aria-selected="true"],
.tabber-container .tabber__tab[aria-selected="true"]:visited,
.tabber-container .tabber__tab {
  color:#f7b242;
}
.tabber-container .tabber__indicator {
  background-color:var(--content-text-color);
}
.tabber-container div.gallerytext {
  text-align:center;
}

/* Navigation bar used on keeper pages */
.keeper-nav-bar {
  display:grid;
  grid-template-areas: '1 2 3' 
                       '1 2 3';
  grid-template-columns: 1fr 1fr 1fr;
  background-color:transparent;
}
@media screen and (max-width: 500px){
  .keeper-nav-bar{ 
    grid-template-areas: '1'
                         '2'
                         '3';
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }
}
.keeper-nav-button,
.main-page-menu-button,
.main-page-menu-row-item,
.oo-ui-buttonElement-button {
  font-size:20px;
  flex:1;
  text-align:center;
  align-items:center;
  justify-content:center;
  padding:10px;
  border-radius: 0;
  color:var(--content-text-color);
  box-shadow:-5px 0px var(--button-left-border-color),
            0px -5px var(--button-top-border-color),
            5px 0px var(--button-right-border-color),
            0px 5px var(--button-bottom-border-color);
  margin-right:12.5px;
  margin-left:12.5px;
  background-color:var(--button-background-color);
}
.main-page-menu-row-item {
  box-shadow: none;
  background-color: transparent;
}
.main-page-menu-button {
  padding:0;
  font-size:17px;
}
.keeper-nav-button a,
.main-page-menu-button a {
  color: var(--content-link-color);
}
.keeper-nav-button a:visited,
.main-page-menu-button a:visited {
  color: var(--content-visited-link-color);
}
.keeper-nav-button.active,
.main-page-menu-button.active {
  box-shadow:-5px 0px var(--button-selected-border-color),
            0px -5px var(--button-selected-border-color),
            5px 0px var(--button-selected-border-color),
            0px 5px var(--button-selected-border-color);
  background-color:var(--article-background-color);
}
.keeper-nav-button:hover,
.main-page-menu-button:hover,
.oo-ui-buttonElement-button:hover {
  position:relative;
  box-shadow:-5px 0px var(--button-hover-left-border-color),
            0px -5px var(--button-hover-top-border-color),
            5px 0px var(--button-hover-right-border-color),
            0px 5px var(--button-hover-bottom-border-color);
}
.keeper-nav-button:hover::before,
.main-page-menu-button:hover::before,
.oo-ui-buttonElement-button:hover::before {
  content:"";
  position:absolute;
  top:0px;
  left:-4.5px;
  width:4.5px;
  height:20%;
  background-color:var(--button-hover-highlight-color);
}
.keeper-nav-button:hover::after,
.main-page-menu-button:hover::after,
.oo-ui-buttonElement-button:hover::after {
  content:"";
  position:absolute;
  top:-4.5px;
  left:0px;
  width:10%;
  height:4.5px;
  background-color:var(--button-hover-highlight-color);
}

/* Styling used for upgrade tables */
.upgrades-table {
  font-family:"Kollektif",sans-serif;
  border-collapse:collapse;
}
.upgrades-table th,
.upgrades-table td {
  border:1px solid #ddd;
  padding:10px;
  text-align:center;
  color: var(--content-text-color);
}
.upgrades-table th {
  background-color:var(--table-header-color);
}
.upgrades-table tr {
  background-color:var(--article-lighter-background-color);
}
.upgrades-table tr:hover {
  background-color:var(--table-hover-color);
}
.upgrades-table .upgrade-icon img {
  min-width:75px;
  max-width:100px;
}

/* Upgrade icons located within upgrade-table*/
.upgrade-icon {
  background-image:var(--upgrade-icon-image);
  background-size:cover;
  scale:105%;
}
.upgrade-icon img {
  scale:75%;
}
.upgrades-table tr:hover .upgrade-icon {
  background-image:var(--upgrade-icon-hover-image);
}

/* for multiple tables next to each other*/
.horizontal-table {
  display:flex;
  float:left;
  margin-right:20px;
}

/* Enemy table */
.enemy-table-container {
  width:100%;
  overflow-x:auto;
}
.enemy-table {
  font-family:"Kollektif",sans-serif;
  border-collapse:collapse;
  border-spacing:0;
  background-color:var(--article-lighter-background-color);
}
.enemy-table th,
.enemy-table td {
  padding:10px;
  text-align:center;
  color:var(--content-text-color);
  border:1px solid #ddd;
  width:1000px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.enemy-table th {
  background-color:var(--table-header-color);
  font-size:14px;
  font-weight:bold;
  padding-top:15px;
  padding-bottom:15px;
}
.enemy-table tr {
  background-color:var(--article-lighter-background-color);
}
.enemy-table tr:hover {
  background-color:var(--table-hover-color);
}

/* table text wrapping */
.upgrades-table th, .upgrades-table td,
.enemy-table th, .enemy-table td {
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

/* Table expand text color */
.mw-collapsible-toggle-default .mw-collapsible-text {
  color: var(--content-link-color)
}

/* In some cases where this is needed */
.table-text-left-align th,
.table-text-left-align td {
  text-align: left;
}

/* General infobox styling */
.mp-border,
.portable-infobox.pi-background {
  background-color:var(--article-lighter-background-color);
  /*padding:10px;
  box-shadow:0 -2px var(--article-border-color),
            -2px 0 var(--article-border-color),
            2px 0 var(--article-border-color),
            0 2px var(--article-border-color),
            0 -2px 0 2px var(--article-border-color),
            2px 0 0 2px var(--article-border-color),
            -2px 0 0 2px var(--article-border-color),
            0 2px 0 2px var(--article-border-color);
  margin:6px 4px;*/
  margin: 10px;
  box-sizing: border-box;
  font-family: "Kollektif", sans-serif;
  font-size: 15px;
}
.portable-infobox .pi-font,
.portable-infobox .pi-secondary-font {
  font-size: 12.5px;
  color: var(--content-text-color);
}
.portable-infobox .pi-secondary-background {
  background-color:transparent;
  font-size:14.5px;
  margin-bottom:3px;
  margin-top:-3px;
}
.mp-content,
.portable-infobox > * {
  background:var(--toc-background-color);
  padding:10px;
  box-shadow:-3px 0px var(--button-top-border-color),
            0px -3px var(--button-top-border-color),
            3px 0px var(--button-bottom-border-color),
            0px 3px var(--button-bottom-border-color);
  text-align:center;
}
.portable-infobox > * {
  margin:10px 0;
}
.portable-infobox > :last-child {
  margin-bottom:0;
}
.pi-group {
  border-bottom: 0px;
}
.pi-data-label {
  -webkit-box-flex:1;
  -moz-box-flex:1;
  -webkit-flex:1 1 100px;
  -ms-flex:1 1 100px;
  flex:1 1 100px;
  word-wrap:normal;
}
.pi-data-value.pi-font {
  -webkit-box-flex:2;
  -moz-box-flex:2;
  -webkit-flex:2 1 80px;
  -ms-flex:2 1 80px;
  flex:2 1 80px;
  word-wrap:normal;
}
.pi-image-thumbnail {
  max-width:220px;
  height:auto;
}
.portable-infobox .pi-title {
  background-color:var(--article-lighter-background-color);
  color:var(--content-text-color);
  text-align:center;
}

/* Styling for the Message, Discussion, Read, Edit, etc. buttons above the article page */
.vector-menu-tabs,
.vector-menu-tabs li,
.vector-menu-tabs .selected,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background:none;
}
.vector-menu-tabs li:not(.mw-watchlink) a {
  background:url(https://domekeeper.wiki.gg/images/8/89/Top_Navigation_Selector_Button.png);
  background-repeat:no-repeat;
  background-size:contain;
}
.vector-menu-tabs div ul li:not(.mw-watchlink) a:hover,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover {
  background:url(https://domekeeper.wiki.gg/images/8/89/Top_Navigation_Selector_Button.png);
  background-repeat:no-repeat;
  background-size:contain;
  transform:scale(1.05);
}
.vector-menu-tabs li.selected:not(.mw-watchlink) a {
  background:url(https://domekeeper.wiki.gg/images/8/89/Top_Navigation_Selector_Button.png);
  background-repeat:no-repeat;
  background-size:contain;
}
.vector-menu-tabs li.selected a {
  color:var(--content-link-color);
}
.vector-menu-tabs .selected a:visited {
  color:var(--content-visited-link-color);
}
.vector-menu-tabs li a {
  background-position:bottom;
  color:var(--content-link-color);
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  display:block;
  float:none;
  height:40px;
  width:100px;
  position:relative;
  padding-top:10px;
  padding-left:10px;
  font-size:14px;
}
.vector-menu-dropdown .vector-menu-content {
  background:var(--article-background-color);
  border:none;
}
.vector-menu-dropdown .vector-menu-content:hover {
  transform:scale(1.03);
}
.vector-menu-dropdown li a {
  color:var(--content-link-color);
}

/* General article styling */
body {
  background-image:url('/images/a/a0/Splash_no_logo.png');
  background-color:var(--toc-background-color); /* if the view somehow breaks*/
  background-size:cover;
  background-repeat:repeat-x;
  background-attachment:fixed;
  margin-top:-45px;
  padding:0;
}
body #content {
  background-color:var(--article-background-color);
  color:var(--content-text-color);
  border-color:transparent;
  box-shadow:0 -2px var(--article-border-color),
            -2px 0 var(--article-border-color),
            2px 0 var(--article-border-color),
            0 2px var(--article-border-color);
            /*
  box-shadow:0 -4px var(--article-background-color),
            -4px 0 var(--article-background-color),
            4px 0 var(--article-background-color),
            0 4px var(--article-background-color),
            0 -6px var(--article-border-color),
            -6px 0 var(--article-border-color),
            6px 0 var(--article-border-color),
            0 6px var(--article-border-color),
            -2px -2px var(--article-background-color),
            -4px -4px var(--article-border-color),
            -6px -4px var(--article-border-color),
            -4px -6px var(--article-border-color);*/
  margin-top:190px;
  margin-right:15px;
}
body #content h1,
body #content h2,
body #content h3,   
body #content h4,
body #content h5 {
  color:var(--content-text-color);
}

/* Table of contents */
body #toc {
  background-color:var(--toc-background-color);
  box-shadow:0 -2px var(--toc-border-color),
            -2px 0 var(--toc-border-color),
            2px 0 var(--toc-border-color),
            0 2px var(--toc-border-color);
  color:var(--content-text-color);
  border: none;
}
.vector-body .toc h2 {
  font-size:125%;
}
.tocnumber {
  color: var(--toc-number-color);
}

/* Source editor view */
body.skin-vector div.wikiEditor-ui {
  background-color:var(--editor-tools-background-color);
  box-shadow:0 -2px var(--editor-tools-border-color),
            -2px 0 var(--editor-tools-border-color),
            2px 0 var(--editor-tools-border-color),
            0 2px var(--editor-tools-border-color),
            0 -2px 0 2px var(--editor-tools-border-color),
            2px 0 0 2px var(--editor-tools-border-color),
            -2px 0 0 2px var(--editor-tools-border-color),
            0 2px 0 2px var(--editor-tools-border-color);
  margin:6px 4px;
}

div.wikiEditor-ui-toolbar {
  background:transparent;
}
body.skin-vector div.wikiEditor-ui-toolbar {
  margin:10px;
}
body.skin-vector div.wikiEditor-ui,
body.skin-vector div.wikiEditor-ui-toolbar,
body.skin-vector div.wikiEditor-ui .wikiEditor-ui-view,
body.skin-vector div.wikiEditor-ui .wikiEditor-ui-top,
body.skin-vector div.wikiEditor-ui-toolbar .group .label {
  font-size:13px;
  border-color:transparent;
}
.mw-editform #wpTextbox1,
.CodeMirror {
  background:var(--editor-background-color);
  color:var(--content-text-color);
  padding:10px;
  font-size:15px;
}
.CodeMirror-gutters {
  background-color:var(--editor-number-line-color);
  border-right:none;
}
div.wikiEditor-ui-toolbar {
  border-color:transparent;
}
.wikiEditor-ui-toolbar .sections .section {
  border:none;
}
div.wikiEditor-ui-toolbar .group {
  border-color:transparent;
  margin:2px;
  background-color:var(--button-bottom-border-color);
}
.tool.oo-ui-buttonElement-frameless,
.wikiEditor-ui-toolbar .tab {
  padding:.3em;
  margin:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:var(--button-bottom-border-color);
}
div.editOptions {
  background-color:var(--article-lighter-background-color);
  color:var(--content-text-color);
  font-size:15px;
  border:none;
  padding:10px; 
  margin-top:15px;
  box-shadow: -2px 0px var(--button-top-border-color),
            0px -2px var(--button-top-border-color),
            2px 0px var(--button-bottom-border-color),
            0px 2px var(--button-bottom-border-color);
}
.mw-editform .editOptions {
  border-radius:0;
}

/* Drop upload/mass upload box styling */

div#msupload-dropzone {
  border:none;
  background-color:var(--toc-background-color);
  color:var(--article-text-color);
}
div#msupload-div {
  border:none;
  background:none;
}
ul#msupload-list .file {
  background: var(--article-background-color);
  margin:10px;
  border-top:0px;
  box-shadow:0 -2px var(--toc-border-color),
            -2px 0 var(--toc-border-color),
            2px 0 var(--toc-border-color),
            0 2px var(--toc-border-color);
}
#msupload-list .file .file-warning {
  color: var(--article-text-color);
}

#msupload-list .file .file-name-input {
  background: var(--editor-background-color);
  color: var(--article-text-color);
  padding:5px;
}

/* X button */
#msupload-list .file .file-cancel {
  background: url(images/8/81/Gamepad_button_down_Icon.png) no-repeat 0 0;
  background-size: 100%; /* Needed to fit*/
}

#msupload-bottom{
  border: none;
  background-color: var(--article-background-color);
}

/* Save changes, show preview, show changes buttons */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button,
.mw-ui-button {
  color: var(--article-text-color);
  background-color: var(--toc-background-color);
  border:none;
  border-radius:0;
  margin-right:10px;
  box-shadow:-5px 0px var(--button-top-border-color),
            0px -5px var(--button-top-border-color),
            5px 0px var(--button-bottom-border-color),
            0px 5px var(--button-bottom-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button:hover,
.mw-ui-button {
  color: var(--article-text-color);
  background-color: var(--toc-background-color) !important;
  border:none;
  box-shadow:-5px 0px var(--button-hover-top-border-color),
            0px -5px var(--button-hover-top-border-color),
            5px 0px var(--button-hover-bottom-border-color),
            0px 5px var(--button-hover-bottom-border-color);
}

.oo-ui-labelElement .oo-ui-labelElement-label,
.oo-ui-labelElement.oo-ui-labelElement-label,
.mw-ui-button {
  color: var(--content-text-color);
}

/* cancel button */
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
  background-color: var(--toc-background-color);
  border:none;
  border-radius:0;
  box-shadow:-5px 0px var(--button-top-border-color),
            0px -5px var(--button-top-border-color),
            5px 0px var(--button-bottom-border-color),
            0px 5px var(--button-bottom-border-color);
  margin-left:10px;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
  background-color: var(--toc-background-color);
  border:none;
  box-shadow:-5px 0px var(--button-hover-top-border-color),
            0px -5px var(--button-hover-top-border-color),
            5px 0px var(--button-hover-bottom-border-color),
            0px 5px var(--button-hover-bottom-border-color);
}

/* Bullet list */
ul {
  list-style-image:none;
}
/* Hides the MainPageName on subpages like Shield/Upgrades */
span.subpages {
  display:none;
}

/* Editor links like [[File:Example.png]] and [[Page Name]] */
.cm-mw-link-pagename,
.cm-mw-link-bracket,
.cm-mw-link-pagename {
  color:var(--editor-file-color);
}
.cm-mw-link-delimiter {
  color:var(--editor-file-delimiter-color);
}
.cm-mw-link-text {
  color:var(--editor-file-parameter-color);
}

/* Article Link Colours */
a,
.vector-menu-portal .vector-menu-content li a,
.mw-parser-output a.extiw,
.mw-parser-output a.external,
.mw-parser-output a.external,
.toctogglelabel {
  color:var(--content-link-color);
}
a:visited,
.vector-menu-portal .vector-menu-content li a:visited,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited,
.mw-parser-output a.external:visited,
.toctogglelabel:visited {
  color:var(--content-visited-link-color);
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label{
  color:var(--content-text-color);
}
.oo-ui-tabSelectWidget-framed {
  background-color:transparent;
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
  background-color: black;
  color:aqua;
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
  background-color:aliceblue;
  color: blue;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
  border: none;
  border-radius: 0px;
  background-color:var(--editor-background-color);
  color:var(--content-text-color);
}

/* Site Notice */
.mw-dismissable-notice,
.sitenotice{
  box-shadow:-5px 0px var(--button-top-border-color),
            0px -5px var(--button-top-border-color),
            5px 0px var(--button-bottom-border-color),
            0px 5px var(--button-bottom-border-color);
  padding: 15px;
  margin-bottom: 10px;
  background-color: var(--site-notice-background-color);
  font-size: 15px;
  font-family: "Kollektif", sans-serif;
}
.mw-dismissable-notice .mw-dismissable-notice-close {
  padding-top: 15px;
}
.mw-dismissable-notice:hover{
  box-shadow:-5px 0px var(--button-hover-top-border-color),
            0px -5px var(--button-hover-top-border-color),
            5px 0px var(--button-hover-bottom-border-color),
            0px 5px var(--button-hover-bottom-border-color);
}

/* Category links that are on the bottom of the page */
.catlinks{
  background-color:var(--category-links-background-color);
  box-shadow:0 -2px var(--category-links-border-color),
            -2px 0 var(--category-links-border-color),
            2px 0 var(--category-links-border-color),
            0 2px var(--category-links-border-color);
  color:var(--content-text-color);
  border: none;
}

/* Footer, containing copyright info and last edited time*/
.mw-footer {
  background-color: var(--footer-background-color);
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 15px;
  box-shadow:0 -2px var(--footer-border-color),
            -2px 0 var(--footer-border-color),
            2px 0 var(--footer-border-color),
            0 2px var(--footer-border-color);
}
.mw-footer li {
  color: var(--content-text-color);
}

.mw-footer li#footer-info-lastmod {
  font-weight: bold;
}

.wikitable {
  white-space: unset;
  display: table;
  overflow-x: scroll;
  background-color: var(--article-lighter-background-color);
  color: var(--content-text-color);
}
.wikitable > tr > th, .wikitable > * > tr > th {
  background-color: var(--table-header-color);
}
/* Main Page */
.main-page-menu-container {
  background-color: transparent;
}
.main-page-menu {
  background-color: var(--article-lighter-background-color);
  box-shadow:0 -2px var(--article-border-color),
            -2px 0 var(--article-border-color),
            2px 0 var(--article-border-color),
            0 2px var(--article-border-color);
  padding: 10px;
  padding-top: 3px;
  text-align: center;
}
.main-page-menu-row {
  display: flex;
  background-color: transparent;
  margin-bottom:20px;
}
.main-page-menu-heading {
  font-size: 1.85em;
  margin-top: 10px;
  font-weight: bold; 
}

/* entire button being able to be clicked instead of only the link and image, thanks @crimroxs from the wiki.gg discord server */
.main-page-menu-button .mp-menu-btn-contents {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-page-menu-button .mp-menu-btn-contents a {
  flex-grow: 1;
}

/* difference page */
.diff-context {
  background: none;
  border-color: none;
  color: var(--content-text-color);
}
.diffchange.diffchange-inline {
  color: black;
}

/* So that there is enough space for the audio player */
.sounds-table td:first-child {
  min-width: 185px;
}

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

.wikiEditor-ui-toolbar .group .label {
  color: var(--content-text-color);
}

.wikiEditor-ui-toolbar .group .tool-select .label {
  color: var(--content-text-color);
}

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

.tool.oo-ui-buttonElement-frameless, .wikiEditor-ui-toolbar .tab {
  background-color: transparent;
}

div.thumbinner {
  background-color: var(--article-border-color);
  border-color: transparent;
}

.thumbimage {
  border: none;
}

.wikiEditor-ui-top .wikiEditor-ui-toolbar {
  box-shadow: none;
}

span.tool.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-iconElement.oo-ui-buttonWidget  {
  margin: 0px;
  padding-right: 0;
}

.oo-ui-iconElement-icon {
  filter: invert(98%) sepia(97%) saturate(396%) hue-rotate(304deg) brightness(99%) contrast(105%);
}

/* Message box styling */
div.mbox {
  border: none !important;
  border-radius: 0% !important;
  box-shadow:-5px 0px var(--button-left-border-color),
            0px -5px var(--button-top-border-color),
            5px 0px var(--button-right-border-color),
            0px 5px var(--button-bottom-border-color);
}

div.mbox:hover{
  box-shadow:-5px 0px var(--button-hover-left-border-color),
            0px -5px var(--button-hover-top-border-color),
            5px 0px var(--button-hover-right-border-color),
            0px 5px var(--button-hover-bottom-border-color);
}


/* Fix thumbnail images being too wide and creating a horizontal scroll bar when on mobile */
div.thumbinner {
  width: fit-content !important;
}

/* Lighter colours for images inside galleries */
li.gallerybox div.thumb {
  border:1px solid transparent;
  background-color:var(--article-lighter-background-color);
}

/* Temporary solution for code blocks and css pages */
.mw-highlight {
  filter: invert(100%);
}

/* Page history styling*/
#pagehistory li.selected {
  background-color: var(--article-lighter-background-color);
  color: var(--content-text-color);
  font-weight: bold;
  border: solid;
  border-color: var(--article-border-color);
  padding: 2.5px;
  outline: none;
}
form#mw-history-compare section#pagehistory {
  padding-top: 10px;
}
.mw-widget-dateInputWidget-handle {
  background-color: var(--article-lighter-background-color);
}
.oo-ui-menuSelectWidget {
  background-color: var(--article-lighter-background-color);
  box-shadow: none;
}
.oo-ui-menuOptionWidget:hover{
  background-color: var(--table-hover-color);
}

/* Recent changes styling */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle{
  background-color: var(--article-lighter-background-color);
  border: none;
  box-shadow: -2px 0px var(--button-top-border-color),
            0px -2px var(--button-top-border-color),
            2px 0px var(--button-bottom-border-color);
  border-radius: 0;
  padding: 10px;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget{
  background-color: var(--article-lighter-background-color);
  border: none;
  border-radius: 0;
}
.oo-ui-buttonElement > .oo-ui-buttonElement-button,
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button {
  border-radius: 0;
}
div.mw-rcfilters-ui-row mw-rcfilters-ui-filterTagMultiselectWidget-views {
  padding: 10px;
  box-shadow: -2px 0px var(--button-top-border-color),
            0px -2px var(--button-top-border-color),
            2px 0px var(--button-bottom-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
  background-color: transparent;
}
.mw-rcfilters-ui-table .mw-rcfilters-ui-row.mw-rcfilters-ui-filterTagMultiselectWidget-views{
  width:100%;
  background-color: var(--article-lighter-background-color);
  box-shadow: -2px 0px var(--button-top-border-color), 
              0px -2px var(--button-top-border-color), 
              2px 0px var(--button-bottom-border-color), 
              0px 2px var(--button-bottom-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled, 
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled{
  color: var(--content-text-color);
  background-color: var(--button-background-color);
  padding: 5px;
  border: none;
  border-radius: 0;
  padding-right: 50px;
  padding-bottom: 25px;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
  border: none;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
  border: none;
  outline:none;
  box-shadow:none;
}
.mw-rcfilters-ui-table.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters {
  padding-top: 15px;
  box-shadow: none;
}
.oo-ui-popupWidget-popup, 
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend{
  background-color:var(--toc-background-color);
  box-shadow:0 -2px var(--toc-border-color),
            -2px 0 var(--toc-border-color),
            2px 0 var(--toc-border-color),
            0 2px var(--toc-border-color);
  color:var(--content-text-color);
  border: none;
  border-radius: 0;
}
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected){
  background-color: var(--footer-background-color);
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
  background-color: var(--table-header-color);
}
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected,
.mw-rcfilters-ui-menuSelectWidget-footer {
  background-color: transparent;
}
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget{
  color: var(--content-text-color);
}
.oo-ui-menuSelectWidget {
  width: unset;
  border: none;
  border-radius: 0;
  box-shadow:0 -2px var(--toc-border-color),
            -2px 0 var(--toc-border-color),
            2px 0 var(--toc-border-color),
            0 2px var(--toc-border-color);
}

/* Main page grid styling */
.main-page-grid {
  display: grid;
  grid-template-areas:
    'welcome about'
    'navigation about'
    'navigation -'
    'navigation -'
    'navigation -'
    'purchase -';
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.dome-nav-grid {
  display: grid;
  grid-template-areas:
    'laser sword'
    'artillery tesla'; 
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

/* Ad positioning, small stuff */
.footer-showcase {
  margin-top: 7.5px;
}
div.games-showcase-header {
  margin-top: 0px;
}
aside.games-showcase-sidebar {
  margin-top: -20px;
}

/* Move page styling */
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled{
  background-color: var(--article-background-color);
  border: none;
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
  background-color: var(--table-hover-color);
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
  border: none;
  background-color: var(--article-lighter-background-color);
}

.oo-ui-panelLayout-framed {
  border: none;
  border-radius: 0;
  background-color: var(--article-lighter-background-color);
  box-shadow:-5px 0px var(--button-left-border-color),
            0px -5px var(--button-top-border-color),
            5px 0px var(--button-right-border-color),
            0px 5px var(--button-bottom-border-color);
}

/* Dialog boxes UI such as when you insert a link via the dialog box in the editor */
.ui-dialog {
  border: 2px solid var(--article-border-color);
}

body .ui-dialog .ui-widget-header {
  background: none;
  background-color: var(--button-background-color);
}

.ui-widget-content {
  background: none;
  background-color: var(--article-lighter-background-color); 
}

/* Heading dropdown in the editor */
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option {
  color: var(--content-text-color);
  background-color: var(--article-lighter-background-color);
}

.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
  background-color: var(--table-hover-color);
}

.wikiEditor-ui-toolbar .group .tool-select .options {
  border: 2px solid var(--article-border-color);
}

/* other random wiki editor thingies */
.wikiEditor-ui .wikiEditor-ui-view {
  border: none;
}

.ui-widget-content {
  color: var(--content-text-color);
}

/* monster infobox switcher styling */
.pi-media-collection .pi-tab-link {
  border-color: var(--button-hover-top-border-color);
}

.pi-media-collection .pi-tab-link:hover {
  background-color: var(--button-hover-bottom-border-color);
  transition: 0.2s;
}

.pi-media-collection .pi-tab-link.current {
  background-color: var(--button-hover-top-border-color);
}

.portable-infobox .pi-media-collection-tabs {
  margin-bottom: 5px;
}

/* Styling for the little bar above when you view a file page */
#filetoc {
  background-color: var(--article-lighter-background-color);
  border: 1.5px solid var(--article-border-color);
}

/* The table on the bottom of a file page */

#mw-imagepage-section-filehistory .wikitable {
  display: block;
  border: none;
}

/* notification styling */

.mw-echo-ui-notificationItemWidget {
  background-color: var(--article-lighter-background-color);
  border: none;
  border: 3px solid var(--article-border-color);
}

.oo-ui-popupWidget-popup .mw-echo-ui-notificationItemWidget,
.oo-ui-popupWidget-popup .mw-echo-ui-notificationItemWidget-unread {
  border-bottom: none;
}

.mw-echo-ui-notificationItemWidget-unread {
  background-color: var(--table-header-color) !important;
}

.mw-echo-ui-notificationItemWidget-content-message-header {
  color: var(--content-text-color);
}

.mw-echo-ui-notificationItemWidget:hover,
.mw-echo-ui-notificationItemWidget-unread:hover {
  background-color: var(--table-hover-color);
}

.mw-echo-ui-toggleReadCircleButtonWidget.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
  /* that funky dot button*/
  padding: 0;
  margin: 10px;
}

.mw-echo-ui-menuItemWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
  color: var(--content-text-color);
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
  border-bottom: none;
}

.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
  background-color: var(--article-lighter-background-color);
  border: 2px solid var(--article-border-color);
  padding-top: 10px;
}

.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
  background-color: var(--article-lighter-background-color);
}

.mw-echo-ui-crossWikiUnreadFilterWidget {
  border: 2px solid var(--article-border-color);
  margin-top: -7.5px;
}

/* Move page, reason text colour */
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
  color: var(--content-text-color);
}

/* Main page*/

/* Mobile view related stuff and fixes */

@media screen and (max-width: 820px) {
  .main-page-grid {
    grid-template-areas:
      'welcome'
      'navigation'
      'purchase'
      'about';
    grid-template-columns: 1fr;
  }
  .dome-nav-grid {
    grid-template-areas:
      'laser'
      'sword'
      'tesla'
      'artillery';
    grid-template-columns:1fr;
  }
}

@media screen and (max-width:720px) {
  #left-navigation,
  body #content,
  footer#footer {
    margin-left:5px;
    margin-right:5px;
  }
  header#wikigg-header {
    height:35px;
    width:100%;
  }
  #mw-head {
    top:0px;
  }
  #p-logo, #p-logo a {
    width:100%;
  }
}

/*@media screen and (max-width:430px) {
  #right-navigation {
    margin-top: 0px;
  }
}*/

@media screen and (max-width:425px){
  #right-navigation {
    margin-top: 45px;
  }
  body #content {
    margin-top: 230px;
  }
  .main-page-menu-row { /* So that there are only two buttons */
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0;
  }
  .main-page-menu-button {
    margin-bottom: 20px;
    padding:5px;
  }
}

/* Site logo */
.mw-wiki-logo {
  background-image:url(/images/e/e6/Site-logo.png);
  -webkit-filter:drop-shadow(1px 1px 3px #222);
  filter:drop-shadow(1px 1px 3px #222);
}
#p-logo {
  left:50%;
  position:absolute;
  top:35px;
  transform:translate(-50%,0);
}
#p-logo,
#p-logo a {
  background-size:100%;
  height:140px;
  width:370px;
  max-width: 370px; /* Mobile view fix */
}
#left-navigation,
#right-navigation {
  margin-top:175px;
}
#right-navigation {
  margin-right: 5px;
}
#content {
  margin-top:9em;
}
.mw-body {
  border: none;
}
.page-content {
  overflow-x:scroll;
}
Personal tools

Navigation menu

Namespaces

Views

Navigation

Customizing this wiki

wiki.gg

Tools

MediaWiki:Vector.css

Navigation menu

Search

MediaWiki:Vector.css
