Information.png

Welcome to the Kingdom Hearts Database! 👑 Pardon the dust! We're rolling out new updates and improvements to the design of the Kingdom Hearts Database! Stay tuned for details this week! 👑 Our Spoiler policy is in effect! All articles related to Kingdom Hearts III must have the Unreleased template until checked and cleared by a member of the site staff! 👑 Be sure to join our Discord server and meet our growing community!

Difference between revisions of "MediaWiki:Mobile.css"

From Kingdom Hearts Database
Jump to: navigation, search
(Tags: Mobile edit, Mobile web edit)
(Tags: Mobile edit, Mobile web edit)
(One intermediate revision by the same user not shown)
Line 122: Line 122:
 
text-align:left;
 
text-align:left;
 
}
 
}
 +
}
 +
 +
/*************************************************
 +
**
 +
** 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;
 +
}
 +
}
 +
 +
 +
/*************************************************
 +
**
 +
** PANEL & CARD FIXES
 +
**
 +
**************************************************/
 +
#bodyContent #bodyMainPage .panel .content{
 +
padding:0;
 
}
 
}

Revision as of 18:15, 8 February 2020

/* 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, .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;
}

.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 Ver. II
*
***********************************************/

.infobox {
	float:right;
	color:#FFFFFF;
	background:#DEE8F2;
}

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

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

.infobox .row{
	display:flex;
}

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

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

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

@media (max-width:720px){
	.infobox{
		width:100%;
		margin:5px 0 5px 0;
	}
	
	.infobox .row{
		flex-direction:column;
	}
	
	.infobox .row .content, .infobox .row .label{
		text-align:center;
	}
}

@media (min-width:720px){
	.infobox {
		width:360px;
		margin:5px;
	}
	
	.infobox .row{
		flex-direction:row;
	}
	
	.infobox .row .label{
		text-align:right;
	}
	
	.infobox .row .content{
		text-align:left;
	}
}

/*************************************************
**
**		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;
	}
}


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