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');
/* General CSS */

body.page-MegaMan_X_Corrupted_Wiki.action-view h1.firstHeading, body.page-MegaMan_X_Corrupted_Wiki.action-submit h1.firstHeading { 
	display: none; 
}
#pt-darkmode, 
#pt-betafeatures, 
#pt-mytalk {
  display: none;
}
.center * { 			/*Allows FP Image to scale with screen*/
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 800px) {
    #mw-panel {
        display: none;
    }
    #content, 
    #left-navigation, 
    .mw-footer {
        margin-left: 0;
    }
    .mw-body,
    .mw-footer { 
        margin-right: 0 !important;
    }
}
/*Colors stuff*/

body {
  background-image: url("https://static.miraheze.org/mmxcwiki/d/d5/Corrupted_mavericks_nostrike.png"), linear-gradient(to top,#14051e 0%,#1d1b48 100%);
  background-repeat: repeat-x, repeat;
  background-position: Center bottom;
  background-attachment: fixed;
  background-size: auto, cover;
  overflow-x: visible;
  overflow-y: visible;
  position: relative;
  top: 0px;
  color: #fff;
  max-width: 1300px;
  margin: auto;
}
.toc, 
.toccolours {
  border: #24062b;	
  background-color: #24062b;
  padding: 5px;
  font-size: 95%;
  clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
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: #9bffff;
}
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: #fff;
  border: none;
  border-radius: 3px;
  margin-right: 5px;
  background: #18041c;
  padding-bottom: 4px;
  padding-left: 8px;
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  font-family: Prompt, sans-serif;
}

/*Header Tabs*/

ul.vector-menu-content-list {
    padding-left: 16px !important;
}
.vector-menu-tabs {
  height: 1.5em;
}
/*#p-cactions,*/ 
.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: #0e0710;
  padding-bottom: 4px;
  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: #0e0710;
  padding-bottom: 4px;
  border: none;
  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: #9bffff;
  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: #9bffff;
  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: #9bffff;
  font-family: Prompt, sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: #0e0710;
  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.5);
    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";
  font-size: 13px;
}
.vector-menu-portal .vector-menu-heading {
  font-family: "Nunito Sans";
  color: #B2B2B2;
  font-size: 13px;
}
.mw-footer {
    background-color: rgba(0, 0, 0, 0.5);
    margin-top: 0.6em;
    padding-bottom: 3em;
    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 {
  color: #DDDDDD;
}
h2 {
	border-bottom: none;
}
.vector-body p {
    font-size: 16px;
}
#p-personal, 
#right-navigation {
  margin-right: 10px;
}
#p-personal ul {
  padding-left: 10em;
  font-family: "nunito sans";
  font-weight: 600;
}
#mw-page-base {
  background-image: none;
  background-color: rgb(0,0,0,0);
}
#content {
/*  max-width: 1300px; */
  margin-right: 16px;
  background-color: #0e0710;
  color: #DDDDDD;
  font-family: "Nunito Sans";
  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: #9bffff;
}

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

/* Darkmode stuff */
.mw-editfont-monospace, .oo-ui-textInputWidget .oo-ui-inputWidget-input {
  background-color: black;
  color: white;
}
/* Frontpage stuff */

.fp-section {
    display: flex;
    flex-wrap: wrap;
}
.fpbox {
    margin: 16px;
    padding: 20px;
    overflow: auto;
    width: calc(100% - 2px);
    /*border: 2px solid #450079;*/
    /*background-image: linear-gradient(to top,#010026 0%,#230029 100%);*/
	background: #24062b;
    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 .heading,
.fpbox .mainheading,
.fpbox .welcome {
    margin: 0 0 10px;
    padding: 0 0 5px;
    overflow: auto;
}
.fpbox .mainheading,
.fpbox .welcome {
    font-size: 150%;
    font-weight: bold;
}
.fpbox .heading {
	color: #98d8ff;
    border: 0;
    background-color: #020119;
    text-align: center;
    font-size: 132%;
    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 */

li.gallerybox div.thumb {
	border: 1px solid #24062b;
	background: #24062b;
    clip-path: polygon(0 0,calc(100% - 24.00px) 0,100% 24.00px,100% 100%,24.00px 100%,0 calc(100% - 24.00px));
}

/* Auto-resize front page video to fit smaller columns */
.fpbox .embedvideowrap {
    width: 100%!important;
    max-width: 480px;
    margin: 0 auto;
}

.fpbox .embedvideowrap iframe {
    width: 100%!important;
}

/* 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: #9bffff;
}
.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.3);
    clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))
}
.fplink:not(.fplink-plain):hover {
  background: rgba(0, 0, 0, 0.5);
}
.fplink-fullwidth .fplink:not(.fplink-plain) {
    background: rgba(0,0,0,0.4);
}
/* 2-column layout */

#fptweets {
  min-height:calc(325px + 2.3em);
}

#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 400px;
    }
}
@media screen and (min-width:1350px) {
    #fp-2column.fp-container {
        grid-template-areas: "a b" "c b";
        grid-template-columns: auto 400px;
    }
}

#fp-top {
    grid-area: a;
}

#fp-flex {
    grid-area: b;
}

#fp-bottom {
    grid-area: c;
}
.gallerybox {
    text-align: center;
}

.infobox {
  width: 300px;
  padding: 20px;
  float: right;
  margin-left: 8px;
  margin-bottom: 8px;
  background: #24062b;
  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: #98d8ff;
  border: 0;
  background-color: #020119;
  text-align: center;
  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: #24062b;	
  background-color: #24062b;
  padding: 5px;
  margin-top: 1em;
  clear: both;
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.wikitable {
  background-color: #000;
  color: #c6c7c8;
}
.wikitable > tr > th, .wikitable > * > tr > th {
  background-color: #000;
}
pre, code, .mw-code {
  background-color: transparent;
  color: #fff;
}
#pagehistory li.selected {
  background-color: transparent;
}