MediaWiki:Mobile.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.
/* CSS placed here will affect users of the mobile site */

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i');

body, nav#mw-mf-page-left, .header-container.header-chrome, #mw-mf-page-center, footer .minerva-footer, .overlay, .overlay-header-container, .overlay-footer-container {
	background-color: #06305B !important;
}

.header {
	border-color: #06305B !important;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.header-container {
	backdrop-filter: none !important;
}

.header > div {
	flex:4;
}

.header .branding-box h1 img, .header .branding-box a img{
	height: 45px;
}

@media screen and (min-width: 720px){
	.header .branding-box {
		flex: 20;
	}
	
	.header .search-box {
		flex:33;
		display: flex;
		justify-content: center;
	}

	.header .minerva-user-navigation {
		flex: 25;
	}
}


.minerva-footer  {
	border-top: 1px solid #7099c2 !important;
}

.last-modified-bar {
	background-color: #507191 !important;
	color: white !important;
}

.last-modified-bar .content,
.last-modified-bar a {
	color: white !important;
}

.footer-content, footer .hlist li::after,
.branding-box h1 sup, .branding-box a,
nav ul.hlist li a, .overlay-header-container {
	color: #FFFFFF !important;
}

.footer-content a{
        color:#A0C4E8 !important;
}

.search-content .caption{
        color:#FFFFFF;
}

.search-overlay .results, .search-overlay .search-feedback{
        background-color: #A0C4E8 !important;
}

.page-list li, .topic-title-list li, .site-link-list li {
	border-bottom: 1px solid #7099c2 !important;
}

.mw-body h1, .mw-body-content h1{
	font-family: "Roboto Slab","Linux Libertine","Georgia","Times",serif;
}

/*************************************************
**
**		INFOBOX
**
**************************************************/
.infobox {
	float:right;
	color:#FFFFFF;
	background:#EDEDED;
	box-shadow:0 0 7px 0 #00000099;
}

.panel-bar{
	padding:.25em;
}

.news .infoboxImage img{
	width: 100%;
    height: auto;
}

.infobox .highlights ul, .infobox .highlights p{
	padding:5px;
}

.infobox ul {
 	margin-left: 1.5em;
}

.infobox .row{
	display:flex;
}

.infobox .row .label{
	padding:5px;
	flex:1;
}

.infobox .row .content{
	padding:5px;
	flex:2;
}

.infobox .content a{
	color:#9DEEFF !important;
}

.infobox .row{
	flex-direction:row;
}

.infobox .row .label{
	text-align:right;
}

.infobox .row .content{
	text-align:left;
margin:0;
}

@media (max-width:720px){
	.infobox{
		width:100%;
		margin:5px 0 5px 0;
	}
	
	.tabber.infoboxTab{
		width:100%;
	}
}

@media (min-width:720px){
	.infobox {
		width:360px;
		margin:5px;
	}
}

.title{
	font-family: Roboto Slab;
    font-size: 1.2em;
    color: #FFFFFF;
    padding: 10px;
    text-align: center;
}

/*************************************************
**
**		MAIN PAGE
**
**************************************************/

@media (min-width:1000px) {
	.series-nav{
		display: block;
	}
	.mainpageContent{
		flex-direction: row;
	} 

	.mainpageContentOne{
		flex:2;
	}
	
	.mainpageContentTwo{
		flex:1;
	}
}

@media (max-width:1000px) {
	.series-nav{
		display:none;
	}
	.mainpageContent{
		flex-direction: column;
	} 

	.mainpageContentOne{
		flex:1;
	}
	
	.mainpageContentTwo{
		flex:1;
	}
}


/*************************************************
**
**		MAIN PAGE PORTALS
**
**************************************************/
.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px;
    font-size: 17px;
    flex:1;
    transition:ease-in 0.1s;
    border-radius:0;
}

.tablink:hover {
	background-color: #d4d4d4;
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);
	z-index:99;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
    color: white;
    display: none;
    padding: 50px 20px;
    height: 50%;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
	-webkit-animation: fadeEffect 1s;
	animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

#KH {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/2/2a/Foreboding_%28art%29_KH.png"); 
	background-repeat:no-repeat; 
}

#COM {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/e/e8/Deck_%28art%29_COM.png"); 
	background-repeat:no-repeat; 
}

#KHII {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/b/ba/Heart_%28art%29_KHII.png"); 
	background-repeat:no-repeat; 
}

#DAYS {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/e/e9/Boundary_%28art%29_358.png");
	background-repeat:no-repeat; 
}

#BBS {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/c/cd/Soar_%28art%29_BBS.png"); 
	background-repeat:no-repeat; 
}

#RECO {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/9/91/Smile_%28art%29_RECO.png");
	background-repeat:no-repeat; 
}

#KH3D {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/1/11/Sea_of_Clouds_%28art%29_KH3D.png");
	background-repeat:no-repeat; 
}

#KHX {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.khwiki.com/images/2/26/Kingdom_Hearts_χ_artwork.png");
	background-repeat:no-repeat;
}
	
#UCX, #UXC {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.khwiki.com/images/4/4b/Kingdom_Hearts_Unchained_χ_Promotional_Art.png");
	background-repeat:no-repeat;
}

#BBS2 {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/f/f4/Time_Stands_Still_01_0.2BBS.png");
	background-repeat:no-repeat;
}

#XBC {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/d/d8/The_Case_of_Ira_01_XBC.png");
	background-repeat:no-repeat;
}

#KHIII {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url("/images/c/ce/Kingdom_Hearts_III_cover_art.png");
	background-repeat:no-repeat;
}

/*************************************************
**
**		PANEL & CARD FIXES
**
**************************************************/
#bodyContent #bodyMainPage .panel .content{
	padding:0;
	width: 100%;
	margin:0;
}