Current File : /home/jvzmxxx/wiki1/extensions/MobileFrontend/resources/mobile.editor.ve/VisualEditorOverlay.less

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

.editor-overlay-ve {
	.content {
		// VisualEditor doesn't have collapsible-heading class, so we need to apply
		// heading styles to the header tags directly.
		h1, h2 {
			margin-bottom: 0.5em;
			border-bottom: solid 1px @colorGray14;
			overflow: hidden;
		}

		// Styling for images (as output by Parsiod)
		// These styles are mostly derived from content.parsoid.less, which the Minerva skin
		// opts out of (since the styles are largely Vectorish).
		// FIXME: Once Parser and Parsoid output are synchronized, we'll want to move these
		// from here into the regular Minerva content styles.
		figure[typeof*='mw:Image'] {
			max-width: 100%;
			background-color: transparent;
			border: 0;
			padding: 0;
			font-size: inherit;
			// Defaults to right alignment when not explicitly set. Should be flippable.
			margin: 0.6em 0 0.6em 1.4em;

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

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

			&.mw-halign-center {
				margin: 0.6em auto 0.6em auto;
				clear: none;
				float: none;
			}

			img {
				border: 0;
			}

			figcaption {
				font-size: 0.8em;
				line-height: 1.5;
				padding: 0;
				color: @grayMedium;
			}
		}
	}

	.overlay-content {
		// prevent disappearing after scrolling when -webkit-overflow-scrolling: touch
		// is used (http://stackoverflow.com/a/10170170)
		* {
			-webkit-transform: translate( 0, 0 );
		}

		.surface {
			overflow: hidden;
		}

		.ve-init-mw-target-surface > .ve-ui-debugBar {
			margin: 0 -@contentMargin;
		}
	}

	// Toolbar
	@baseIconSize: 24px;
	@targetIconSize: 32px;
	.overlay-header-container {
		box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 );

		.ve-init-mw-mobileArticleTarget-toolbar {
			@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
				border: 1px solid @colorGray13;
				border-width: 0 1px;
			}
			// Everything is measured in ems so the easiest way to scale
			// is to change the base font size.
			font-size: unit( 0.8 * @targetIconSize / @baseIconSize, em );

			.oo-ui-iconElement-icon {
				/* We should be able to use 'contain' here, but some OOUI icon containers are oversized (T85139) */
				.background-size( @targetIconSize, @targetIconSize );
			}

			.oo-ui-toolbar-bar {
				border: 0;
				box-shadow: none;
			}
		}
	}

	.overlay-header {
		/* Reset unwanted header styles */
		border-collapse: separate;
		border: 0;
	}
}

.ve-ui-overlay {
	/* enough to cover .overlay-header-container with z-index: 5 */
	z-index: 6;
}