MediaWiki:Cosmos.css/Mobile.css

/* All CSS here will be loaded for users of the Cosmos skin */
/* ############################################ */
/* ###          Testing mobile css          ### */
/* ###            User:Eckserah             ### */
/* ############################################ */

@media (max-width: 480px) {
	.portable-infobox {
		float: none !important;
		margin: auto;
    	width: 95%;
	}
	
	#cosmos-articleHeader-title {
		max-width:100%;
	}
	
	.mw-content-banner {
		height: auto;
	}
	
	.topBannerMobile {
		display: block;
	}
	
	.topBanner {
		display: none;
	}
}
@media screen and (max-width: 850px) {
	.topBannerMobile img, .topBanner img {
		width: 95%;
    	height: auto;
	}
	.snd_move_break {
		display: block;
	}
	.np-quote-snd-trigger {
		position: static;
		display:block;
	}
	.np-quote-snd-trigger>img {
		display: none;
	}
	
	.np-quote-snd-trigger .np-quote-snd-player {
		visibility: visible;
		position: static;
	}
	
	.np-quote-snd-trigger {
		width: 178px;
    	background-color: inherit;
	}
	
	.np-quote-snd-trigger .np-quote-snd-player {
    	width: auto;
    	background-color: #cef0ff60;
	}
	
	.np-quote-snd-player-img {
		width: 20px;
	}
	
	.np-quote-snd-player-img img {
		width: 20px;
		height: 20px;
	}
	
	.np-quote-snd-player-title {
		width: auto;
	    height: auto;
	    padding-bottom: 10px;
	}
	
	.np-quote-snd-player-title span,
	.np-quote-snd-player-title br,
	.np-quote-snd-player .center .mediaContainer .mwPlayerContainer .videoHolder 
	.np-quote-snd-player .center .mediaContainer .mwPlayerContainer .control-bar .k-options,
	.np-quote-snd-player .center .mediaContainer .mwPlayerContainer .control-bar .timed-text,
	.np-quote-snd-player .center .mediaContainer .mwPlayerContainer .control-bar .play_head,
	.np-quote-snd-player .center .mediaContainer .mwPlayerContainer .overlay-win
	{
		display: none;
	}
	
	.np-quote-snd-player .center .mediaContainer,
	.np-quote-snd-player .center .mediaContainer .mwPlayerContainer,
	.np-quote-snd-player .center .mediaContainer .mwPlayerContainer .control-bar {
		width: auto !important;
	}
	
	.np-quote-snd-player .center {
	    width: 120px !important;
	}


/* ################################################### */
/* ###        Mobile Force Header Buttons          ### */
/* ###              User:RurinGas                  ### */
/* ################################################### */
	
	.cosmos-header .wds-tabs {
		display: none !important;
	}
	
	.cosmos-header {
		padding-top: 50px !important;
	}
	
	.cosmos-header__top-container {
	    justify-content: space-between;
	}
	
	.cosmos-header__sitename {
		display:none;
	}
	
	.cosmos-header:before {
		height: 59px;
	}
	
	.user-anon .cosmos-header__top-container {
        justify-content: right;
    }
    
    .youtube {
    	width: auto !important;
    }
    
    .youtube iframe {
    	position: relative;
    }
}
@media screen and (min-width: 481px) and (max-width: 850px) {
	.toc {
	    width: auto;
	}
	
	#cosmos-articleHeader-title {
		max-width:100%;
	}
	
	.mw-content-banner {
		height: auto;
	}
}

@media screen and (max-width: 1033px) {
	.mainBoxContainer {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}