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 52: Line 52:
 
}
 
}
  
/**********************************************
+
/*************************************************
*
+
**
* Infobox Ver. II
+
** INFOBOX
*
+
**
***********************************************/
+
**************************************************/
  
 
.infobox {
 
.infobox {
 
float:right;
 
float:right;
 
color:#FFFFFF;
 
color:#FFFFFF;
background:#DEE8F2;
+
background:#EDEDED;
 +
box-shadow:0 0 7px 0 #00000099;
 
}
 
}
  
 
.panel-bar{
 
.panel-bar{
 
padding:.25em;
 
padding:.25em;
 +
}
 +
 +
.news .infoboxImage img{
 +
width: 100%;
 +
    height: auto;
 
}
 
}
  
Line 88: Line 94:
 
.infobox .content a{
 
.infobox .content a{
 
color:#9DEEFF !important;
 
color:#9DEEFF !important;
 +
}
 +
 +
.infobox .row{
 +
flex-direction:row;
 +
}
 +
 +
.infobox .row .label{
 +
text-align:right;
 +
}
 +
 +
.infobox .row .content{
 +
text-align:left;
 +
margin:0;
 
}
 
}
  
Line 96: Line 115:
 
}
 
}
 
 
.infobox .row{
+
.tabber.infoboxTab{
flex-direction:column;
+
width:100%;
}
 
 
.infobox .row .content, .infobox .row .label{
 
text-align:center;
 
 
}
 
}
 
}
 
}
Line 110: Line 125:
 
margin:5px;
 
margin:5px;
 
}
 
}
+
}
.infobox .row{
+
 
flex-direction:row;
+
.title{
}
+
font-family: Roboto Slab;
+
    font-size: 1.2em;
.infobox .row .label{
+
    color: #FFFFFF;
text-align:right;
+
    padding: 10px;
}
+
    text-align: center;
 
.infobox .row .content{
 
text-align:left;
 
}
 
 
}
 
}
  

Revision as of 18:21, 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
**
**************************************************/

.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 .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;
	}
}


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