MediaWiki:Gadget-ResponsiveDesktop.css

/* Some fixes for responsive desktop skins */

/* Standard changes */
@media all and (max-width: 550px) {
	#bodyContent {
		overflow: visible !important;
	}
	.ui-dialog {
		max-width: 98% !important;
	}
	.infobox {
		margin: 1em 0 !important;
	}
	.infobox, .nav-right,
	#mw-content-text table {
		float: none !important;
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	#mw-content-text table > tbody {
		width: 100% !important;
		display: table !important;
	}
	#mw-content-text table.wikitable {
		border: 0 !important;
		min-width: 55% !important;
	}
	#mw-content-text table.wikitable > tbody {
		width: calc(100% - 1px) !important;
	}
	#mw-content-text table.wikitable > thead + tbody {
		display: table-row-group !important;
	}
	.floatleft, .floatright {
		max-width: 45% !important;
	}
	body div.thumb {
		float: none !important;
		width: auto !important;
		max-width: none !important;
		display: block !important;
		margin: 1em 0;
	}
	body div.thumbinner {
		width: 100% !important;
		box-sizing: border-box;
	}
	div.thumb, div.thumbinner {
		overflow: auto !important;
	}
	div.autoResize > iframe {
		margin: 0 auto !important;
	}
	div.thumbinner > div {
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	div.thumbcaption {
		margin-top: 3px !important;
	}
	div.thumbimage {
		max-width: max-content;
	}
	ul.gallery {
		text-align: center;
	}
	div.gallerytext {
		text-align: left;
	}
	center div.gallerytext,
	.gallery.center div.gallerytext,
	.gallery[style*="center"] div.gallerytext {
		text-align: center;
	}
	caption {
		display: block;
	}
	a.feedlink {
		padding-left: 16px;
	}
	body.skin-monobook .mobileonly {
		display: revert;
	}
}
@media all and (max-width: 850px) {
	body.skin-timeless .mobileonly {
		display: revert;
	}
}

/* Custom changes */
@media all and (max-width: 550px) {
	/* Thumb shadows */
	div.thumb div.thumbinner {
		box-shadow: none !important;
	}
	/* Tabber boxes */
	.tabber {
		display: block;
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.tabber.goleft, .tabber.goright {
		margin-bottom: 1em !important;
	}
	.tabber.goleft .tabbertab,
	.tabber.goright .tabbertab {
		text-align: center !important;
	}
	.tabber.info {
		margin: 0 0 1em !important;
	}
	/* Suite tabs */
	.suiteul {
		font-size: 12px !important;
		padding-right: 0 !important;
	}
	.suite_tab, .suite_tab_selected {
		display: inline-flex;
		border: none !important;
		border-radius: 5px !important;
		padding: 2px 6px 1px !important;
		margin-bottom: 3px !important;
		vertical-align: bottom !important;
	}
	.suite_tab {
		background: #f4f4f4;
		box-shadow: -2px 2px 4px #333;
	}
	.suite_tab.suite_tab_selected {
		background: #fff;
		box-shadow: 0 1px 2px #333;
	}
	.suite_tab_large {
		position: relative;
	}
	.suite_tab_mini {
		top: -2px;
		position: relative;
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}
}