mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/tablet/common.less

/*
A file for css that optimises the Minerva skin on larger devices.
*/

@import '../../../../minerva.less/minerva.variables.less';
@import '../../../../minerva.less/minerva.mixins.less';

@media screen and ( min-width: @min-width-breakpoint-tablet ) {
	.client-js #searchIcon { // stylelint-disable-line selector-max-id
		display: none;
	}

	// stylelint-disable selector-max-id
	// FIXME: Have a class that identifies all of these selectors
	.pre-content,
	/* Form only pages e.g. Special:MobileOptions */
	.minerva-anon-talk-message,
	#mw-content-text > form,
	.content,
	.content-unstyled,
	.post-content {
		max-width: @max-width-content-tablet;
		margin: 0 @padding-content-tablet;
	}
	// stylelint-enable selector-max-id

	figure[ typeof~='mw:File/Thumb' ],
	figure[ typeof~='mw:File/Frame' ] {
		// Default where page content language is not set
		// Allow to flip
		clear: right;
		float: right;
		margin-left: 1.4em;
		margin-right: 0;

		// Defaults for page content language
		// These will be overriden below when explicit classes are set

		.mw-content-ltr & {
			/* @noflip */
			float: right;
			/* @noflip */
			clear: right;
			/* @noflip */
			margin-left: 1.4em;
			/* @noflip */
			margin-right: 0;
		}

		.mw-content-rtl & {
			/* @noflip */
			float: left;
			/* @noflip */
			clear: left;
			/* @noflip */
			margin-left: 0;
			/* @noflip */
			margin-right: 1.4em;
		}
	}

	.content {
		// Classes added by thumbnails
		// e.g. [[File:Scholars mate animation.gif|frame|left|"[[Scholar's mate]]"]]
		// We use @noflip because we still want .tleft to be on the left and
		// .tright to be on the right in RTL languages.
		figure[ typeof~='mw:File/Thumb' ],
		figure[ typeof~='mw:File/Frame' ],
		.thumb {
			max-width: calc( @max-width-breakpoint-mobile - @margin-content );

			&.mw-halign-left,
			&.tleft {
				/* @noflip */
				float: left;
				/* @noflip */
				clear: left;
				/* @noflip */
				margin-left: 0;
				/* @noflip */
				margin-right: 1.4em;
			}

			&.mw-halign-right,
			&.tright {
				/* @noflip */
				float: right;
				/* @noflip */
				clear: right;
				/* @noflip */
				margin-left: 1.4em;
				/* @noflip */
				margin-right: 0;
			}

			&.mw-halign-none {
				float: none;
				clear: none;
				margin-left: 0;
				margin-right: 0;
			}

			&.mw-halign-center {
				float: none;
				clear: none;
				margin-left: auto;
				margin-right: auto;
			}
		}

		table {
			caption {
				background: inherit; // T170344
			}

			tbody {
				display: table-row-group;
			}
		}
	}

	.last-modified-bar {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		font-size: 1em;
	}
}

@media screen and ( min-width: @max-width-content-tablet ) {
	// stylelint-disable-next-line selector-max-id
	.banner-container,
	.minerva-anon-talk-message,
	.minerva-header,
	.page-header-bar,
	.overlay-header,
	/* FIXME: Generic content class needed? */
	.content,
	.overlay-content,
	.content-unstyled,
	.pre-content,
	.post-content,
	/* Form only pages e.g. Special:MobileOptions */
	#mw-content-text > form {
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		max-width: @max-width-content-tablet;
	}
}