MediaWiki:Gadget-mobileVectorBase.css

/*
	The styles below essentially place the navigation menu below the content,
	instead of to the side of it. They also hide the logo, as there's no space
	left for it.
	This is partly from
	@deviceWidthTablet is a bit too large for most people. use 700px instead.
	You also need a hack in JS, to adapt the viewport scaling on mobile devices.
*/
@media only screen and (max-width:600px) and (orientation: portrait) {
	#siteSub,
	#ca-mobile,
	div.vectorTabs li.selected.selected,
	.after-portlet-lang,
	.uls-settings-trigger {
		display:none;
	}

	div#mw-head {
		position: static !important;
		margin-top: 0.5em;
	}
	
	/* Move the panel to the bottom and display it as in-line lists */
	div#mw-navigation div#mw-panel {
		display: table;
		position: static;
		table-layout: fixed;
		width: 100%;
		overflow: hidden;
		font-size: 150%;
		box-sizing: border-box;
		background-color: #f6f6f6;
		-webkit-transition: width 2s;
	}
	div#mw-navigation div#mw-panel.menu-closed {
		display: none;
		position:initial;
		width: 0;
	}
	div#mw-navigation div#mw-panel.menu-opened {
		display: table;
		position: absolute;
		top: 3em;
	}


	div#mw-navigation div#mw-panel .portal {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	
	div#mw-navigation div#mw-panel ul li {
		list-style: none;
	}
	
	/* Hide the logo and tabs */
	div#p-logo {
		display: none;
	}
	
	.mw-panel-toggle {
		position:absolute;
		top:0;
		left:0;
	}
	
	/* Rearrange various page elements to fill the now-available space */
	body div#footer {
		margin-left: 0;
		padding-top: 0;
	}
	
	/* don't need these in the footer either... */
	body div#footer	li#footer-info-lastmod,
	body div#footer	li#footer-info-viewcount {
			display: none;
	}
	
	#p-personal {
		display: table;
		position: absolute;
		top: 0;
		right: 0;
	}
	.client-js #p-personal ul {
		padding-left: 0;
		display: none;
		background-color: white;
		border: solid 1px silver;
		border-top-width: 0;
		border-right-width: 0;
		text-align: left;
	}
	.client-js #p-personal:focus ul,
	.client-js #p-personal:hover ul,
	.client-js #p-personal.menu-opened ul {
		cursor: pointer;
		display: block;
	}
	div#right-navigation {
		position: absolute;
		top: inherit;
		right: 0;
		margin-top: 0;
		float: none;
	}
	div#left-navigation {
		position: absolute;
		top: inherit;
		margin: 0;
		display: block;
		float: none;
	}
	#p-namespaces,
	#p-views,
	#p-variants {
		position: relative;
		top: 2.5em;
	}
	#p-namespaces {
		padding-left: 0;
	}
	#p-cactions,
	div#p-twinkle {
		top: 2.5em;
		float: right;
	}
	div#p-search {
		float: none;
		position: absolute;
		right: 0;
		/*width: 100vw;*/
		margin: 0;
		box-sizing: border-box;
	}
	div#simpleSearch {
		margin: 0 40px;
		width: auto !important;
		padding: 0;
	}
	div.vectorMenu div.menu {
		left: inherit;
		right: -1px;
	}
	div#content {
		/* Hide the 1px blue border on the left side */
		border-left: 0;
		margin-left: 0;
		padding: 1em 0.3em;
	}
	.read-more-container {
		margin: 0;
	}
	div#mw-panel {
		font-size: 100% !important;
	}
	#p-personal h3 {
		font-size: 0.75em;
		color: #4d4d4d;
		font-weight: normal;
		margin: 0;
		padding: 0.25em 0 0.25em 0.25em;
		border: none;
		display: block;
	}
	.client-js #p-personal li {
		float: none;
		margin: 0.75em 0.5em;
	}
	
	.client-js #p-personal #pt-notifications-alert, #p-personal #pt-notifications-notice {
		margin: 0 0.2em;
		display: inline-block;
	}
	
	.client-js #p-personal-label {
		background-image: linear-gradient(transparent, transparent), url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%2212px%22%20height%3D%2213.836px%22%20viewBox%3D%220%200%2012%2013.836%22%20enable-background%3D%22new%200%200%2012%2013.836%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M1.938%2C6.656c-1.32%2C1.485-1.47%2C3.15-0.97%2C4.25c0.323%2C0.707%2C0.78%2C1.127%2C1.313%2C1.375%0A%09c0.496%2C0.229%2C1.074%2C0.273%2C1.658%2C0.282c0.023%2C0%2C0.04%2C0.03%2C0.062%2C0.03h4.187c0.61%2C0%2C1.225-0.125%2C1.75-0.405%0A%09c0.527-0.28%2C0.961-0.718%2C1.188-1.376c0.335-0.964%2C0.175-2.529-1.094-4.03C9.094%2C7.954%2C7.68%2C8.719%2C6.065%2C8.719%0A%09c-1.677%2C0-3.182-0.812-4.125-2.063H1.938z%22%2F%3E%0A%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M6.063%2C0c-1.89%2C0-3.595%2C1.674-3.594%2C3.563C2.467%2C5.45%2C4.173%2C7.155%2C6.06%2C7.155%0A%09c1.89%2C0%2C3.564-1.705%2C3.563-3.593C9.625%2C1.673%2C7.95%2C0%2C6.063%2C0L6.063%2C0z%22%2F%3E%0A%3C%2Fsvg%3E%0A);
		background-repeat: no-repeat;
		background-size: 25px 25px;
		cursor: pointer;
		height: 30px;
		margin: 5px !important;
		background-position: right top;
		/* hide the text */
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	#pt-userpage, #pt-anonuserpage {
		background-image: none !important;
		padding-left: 0 !important;
	}

}
@media only screen and (min-width:600px) {
.mw-panel-toggle {
	display:none;
}
}