MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
:root {
  --page_color: #0e0710;
  --box_color: #24062b;
  --hover_color: #390a45;
  --text_color: #DDDDDD;
  --link_color: #9bffff;
  --heading_color: #020119;
}

/* Hiding things */

#pt-mytalk {
  display: none;
}  

/*Responsive Design stuff*/
@media screen and (max-width: 900px) {
    #mw-panel {
        display: none;
    }
    #content, 
    #left-navigation, 
    .mw-footer {
        margin-left: 0;
    }
    .mw-body,
    .mw-footer { 
        margin-right: 0;
    }
    .infobox {
		width: 100%;
	}
}
.center * { 			
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/*Colors stuff*/
body {
  background-image: url("https://jkbgames.com/w/images/0/05/Corrupted_mavericks_irl.png"), linear-gradient(to top,#14051e 0%,#1d1b48 100%);
  background-repeat: repeat-x;
  background-position: Center bottom;
  background-attachment: fixed;
  background-size: auto, cover;
  overflow-x: visible;
  overflow-y: visible;
  position: relative;
  top: 0px;
  color: var(--text_color);
  max-width: 1300px;
  margin: auto;
}
#filetoc,
.toc, 
.toccolours {
  border: var(--box_color);	
  background-color: var(--box_color);
  padding: 5px;
  font-size: 95%;
  -webkit-clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.tocnumber {
  color: var(--text_color);
}
a:image {
}
a:link, 
a:visited, 
.mw-parser-output a.extiw:link, 
.mw-parser-output a.extiw:visited, 
.mw-parser-output a.external.text:link, 
.mw-parser-output a.external.text:visited {
  color: var(--link_color);
}
a.new:link, .new:visited{
  color: red;
}

/*Searchbox*/

.vector-search-box {
    margin-top: -8px;
}
.searchButton[name='go'] {
    opacity: 0.4;
    filter: invert(1);
}
.vector-search-box-input {
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--text_color);
  border: none;
  border-radius: 3px;
  margin-right: 5px;
  background: var(--page_color);
  padding-bottom: 4px;
  padding-left: 8px;
  -webkit-clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  font-family: "Nunito Sans", sans-serif;
}

/*Header Tabs*/

ul.vector-menu-content-list {
    padding-left: 16px !important;
}
.vector-menu-tabs {
  height: 1.5em;
}
.vector-menu-tabs li, 
.vector-menu-tabs .selected, 
.vector-menu-tabs .mw-watchlink-icon, 
.vector-menu-tabs .mw-watchlink.icon a {
  height: 1.5em;
  border-radius: 3px;
  margin-right: 5px;
  background: var(--page_color);
  padding-bottom: 4px;
  -webkit-clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.vector-menu-dropdown:hover .vector-menu-content {
  border-radius: 3px;
  margin-right: 5px;
  background: var(--page_color);
  padding-bottom: 4px;
  border: none;
  -webkit-clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.vector-menu-dropdown .mw-list-item a {
  color: var(--link_color);
  font-family: Prompt, sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 2px 2px 2px black;
}
.vector-menu-tabs .mw-watchlink.icon a {
  background-image: none;
}
.vector-menu-tabs li a, 
.vector-menu-tabs .new a, 
.vector-menu-tabs .new a:visited, 
.vector-menu-dropdown h3, 
#mw-head .vector-menu-dropdown h3 {
  padding-top: 6px;
  height: 1.5em;
  color: var(--link_color);
  font-family: Prompt, sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 2px 2px 2px black;
}
.vector-menu-tabs .selected a, 
.vector-menu-tabs .selected a:visited {
  padding-top: 6px;
  height: 1.5em;
  color: #B2B2B2;
  font-family: Prompt, sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.vector-menu-dropdown .vector-menu-heading {
  padding-top: 6px;
  color: var(--link_color);
  font-family: Prompt, sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--page_color);
  -webkit-clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.vector-menu-dropdown .vector-menu-heading::after {
  opacity: 0.4;
  filter: invert(100%);
}
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background-image: none;
}
.vector-menu-tabs li,
.vector-menu-dropdown {
  line-height: 1.16666667;
}
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown h3 {
  background-image: none;
}
.vector-menu-tabs .mw-watchlink.icon a::before {
  top: 0.3em;
  left: 0.6em;
}
.vector-menu-portal {
    margin: 0.7em;
    padding-right: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.vector-menu-portal .vector-menu-content li {
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
}
.vector-menu-portal .vector-menu-heading {
  background-image: none;
  font-family: "Nunito Sans", sans-serif;
  color: #B2B2B2;
  font-size: 13px;
}
.mw-footer {
    background-color: rgba(0, 0, 0, 0.7);
    margin-top: 0.6em;
    margin-right: 16px;
    padding-bottom: 3em;
    -webkit-clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
h1, h2, h3, h4, h5, h6, p, label, span.mw-headline, .mw-footer, .mw-footer li, #content, .spoilers-body {
  color: var(--text_color);
}
h2 {
	border-bottom: none;
}
.vector-body p,
.mw-content-ltr ul {
    font-size: 1.1em;
}
#p-personal, 
#right-navigation {
  margin-right: 10px;
}
#p-personal ul {
  padding-left: 10em;
  font-family: "nunito sans", sans-serif;
  font-weight: 600;
}
#mw-page-base {
  background-image: none;
  background-color: rgb(0,0,0,0);
}
#content {
  margin-right: 16px;
  background-color: var(--page_color);
  color: var(--text_color);
  font-family: "Nunito Sans";
  -webkit-clip-path: polygon(0 0,calc(100% - 40.00px) 0,100% 40.00px,100% 100%,40.00px 100%,0 calc(100% - 40.00px));
}
#p-navigation a:link, 
#p-navigation a:visited, 
#p-tb a:link, #p-tb a:visited, 
#p-managewiki-sidebar-header a:link, 
#p-managewiki-sidebar-header a:visited, 
#p-personal a:link, 
#p-personal a:visited {
  color: var(--link_color);
}

.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
	font-family: "Prompt";
}
.mw-body {
  margin-top: none;
  border: none;
}


/* Frontpage stuff */

.fp-section {
    display: flex;
    flex-wrap: wrap;
}
.fpbox {
    margin: 16px;
    padding: 20px;
    overflow: auto;
    width: calc(100% - 2px);
	background: var(--box_color);
    -webkit-clip-path: polygon(0 0,calc(100% - 40.00px) 0,100% 40.00px,100% 100%,40.00px 100%,0 calc(100% - 40.00px));
}
.fpbox.plain {
    background: transparent;
    border: none;
    box-shadow: none;
}
.fpbox .welcome {
    font-size: 150%;
    font-weight: bold;
    margin: 0 0 10px;
    padding: 0 0 5px;
    overflow: auto;
}
.fpbox .heading {
    margin: 0 0 10px;
    padding: 0 0 5px;
    overflow: auto;
	color: var(--link_color);
    border: 0;
    background-color: var(--heading_color);
    text-align: center;
    font-size: 132%;
    -webkit-clip-path: polygon(0 0,calc(100% - 24.00px) 0,100% 24.00px,100% 100%,24.00px 100%,0 calc(100% - 24.00px));
}
.fpbox:not(.fpbox-welcome) {
    padding: 20px;
}
.fpbox .body {
    padding: 5px;
}
.fpbox hr {
    background-color: #08416e !important;
}

/* Gallery Box stuff */

.gallery {
  padding: 2px;
  display: block;
  text-align: center;
}
.gallerybox {
    text-align: center;
}
li.gallerybox div.thumb {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-inline-start: 0px;
    margin-inline-end: 0px;
	border: 1px solid var(--box_color);
	background: var(--box_color);
    transition: 0.3s;
    -webkit-clip-path: polygon(0 0,calc(100% - 24.00px) 0,100% 24.00px,100% 100%,24.00px 100%,0 calc(100% - 24.00px));
}
li.gallerybox div.thumb:hover {
	border: 1px solid var(--hover_color);
	background: var(--hover_color);
    transition: 0.3s;
}
div.thumbinner {
  border: 1px solid var(--box_color);
  background: var(--box_color);
  -webkit-clip-path: polygon(0 0,calc(100% - 24.00px) 0,100% 24.00px,100% 100%,24.00px 100%,0 calc(100% - 24.00px));
}
.thumbimage {
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  background-color: transparent;
  border: none;
  -webkit-clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.mw-content-ltr .magnify {
	display: none;
}

/* Template:FP links styles */

.fplinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
    text-align: center;
}
.fplink-outer {
    padding: 5px;
    flex-basis: calc(40% - 10px);
    width: calc(25% - 15px);
    min-width: 244px;
    display: inline-block;
    vertical-align: middle;
}
.fplink-wide {
    flex-basis: calc(33% - 10px);
    width: calc(33% - 15px);
}
.fplink-fullwidth {
    flex-basis: 100%;
    width: calc(100% - 15px);
    font-weight: bold;
}
.fplink {
    padding: 0.5em;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: table;
}
.fplink-plain {
    background: transparent;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
.fplink-inner {
    display: table-row;
    color: var(--link_color);
}
.fplink a {
    display: table-cell;
    vertical-align: middle;
}
.fplink img {
    max-width: 366px;
    width: 100%;
    height: auto;
}
.fplink:not(.fplink-plain) {
    background: rgba(0,0,0,0.5);
    -webkit-clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
    transition: 0.3s;
}
.fplink:not(.fplink-plain):hover {
    background: rgba(0, 0, 0, 0.25);
    transition: 0.3s;
}
.fplink-fullwidth .fplink:not(.fplink-plain) {
    background: rgba(0,0,0,0.4);
}

/* 2-column layout */

#fp-2column.fp-container {
    display: grid;
    grid-template-areas: "a" "b" "c";
    grid-template-columns: 100%;
}
@media screen and (min-width:800px) {
    #fp-2column.fp-container {
        grid-template-areas: "a b" "c c";
        grid-template-columns: auto 368px;
    }
}
#fp-top {
    grid-area: a;
    height: auto;
}
#fp-flex {
    grid-area: b;
    height:auto;
}
#fp-bottom {
    grid-area: c;
}

/*Content Boxes*/

.infobox {
  width: 300px;
  padding: 20px;
  float: right;
  margin-left: 8px;
  margin-bottom: 8px;
  background: var(--box_color);
  -webkit-clip-path: polygon(0 0,calc(100% - 24.00px) 0,100% 24.00px,100% 100%,24.00px 100%,0 calc(100% - 24.00px));
}
.infobox-name,
.infobox-title {
  color: var(--link_color);
  border: 0;
  background-color: var(--heading_color);
  text-align: center;
  -webkit-clip-path: polygon(0 0,calc(100% - 24.00px) 0,100% 24.00px,100% 100%,24.00px 100%,0 calc(100% - 24.00px));
}
.infobox-name {
  font-size: 132%;
}
.catlinks {
  border: var(--box_color);	
  background-color: var(--box_color);
  padding: 5px;
  margin-top: 1em;
  clear: both;
  -webkit-clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.abilitybox {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 3em;
  background: var(--box_color);
  transition: 0.3s;
  -webkit-clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.abilitybox:hover {
	background: var(--hover_color);
    transition: 0.3s;
}

/*Spoiler tag stuff*/

.spoilers {
	margin: 16px;
}
.spoilers-body{
	border: none;
	background-color: transparent;
}
.spoilers-button {
	color: var(--text_color);
	background: var(--box_color);
	font-family: "nunito sans", sans-serif;
	font-weight: 600;
	border: none;
    transition: 0.3s;
}
.spoilers-button:hover {
	background: var(--hover_color);
    transition: 0.3s;
}

/* Darkmode stuff */
#footer-icons,
.wikiEditor-ui,
.mw-editform .editOptions,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field{
  filter: invert() 
}
.mw-message-box {
  background-color: var(--box_color);
  border-color: var(--box_color);
  color: var(--text_color);
}
#pagehistory li.selected,
.mw-message-box-warning,
.mw_metadata td,
.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input,
.mw-mmv-filepage-buttons .mw-mmv-view-expanded, .mw-mmv-filepage-buttons .mw-mmv-view-config,
.mw-ui-button:not(:disabled) {
  background-color: var(--box_color);
  border-color: var(--box_color);
  color: var(--text_color);
}
.mw_metadata th,
.mw-datatable th,
.mw-datatable td {
    background-color: #000000;
}
.mw-datatable tr:hover td {
    background-color: var(--box_color);
}
pre, code, .mw-code {
  background-color: inherit;
  color: inherit;
  border: inherit;
}