Move remaining Minerva skinStyles from MobileFrontend

To be removed in MobileFrontend by If3edac9a35b346a.

Bug: T140807
Change-Id: Ifb073d1e67602b80e0e9b45f338806f5b9cb675b

skin.json

@@ -129,6 +129,12 @@
 			],
 			"mobile.special.mobilemenu.styles": [
 				"skinStyles/mobile.special.mobilemenu.styles/minerva.less"
+			],
+			"mobile.editor.ve": [
+				"skinStyles/mobile.editor.ve/minerva.less"
+			],
+			"mobile.notifications.overlay": [
+				"skinStyles/mobile.notifications.overlay/minerva.less"
 			]
 		}
 	},

skinStyles/README.txt

@@ -0,0 +1,2 @@
+If a module introduced by MobileFrontend has Minerva specific styles they are added here and applied
+as part of ResourceModuleSkinStyles.

skinStyles/mobile.editor.ve/minerva.less

@@ -0,0 +1,105 @@
+@import 'mediawiki.mixins.less';
+@import 'minerva.variables';
+
+.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'],
+		figure[typeof*='mw:Video'],
+		figure[typeof*='mw:Audio'] {
+			max-width: 100%;
+			// 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;
+			}
+		}
+	}
+
+	.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
+	@targetIconSize: 20px;
+	.overlay-header-container {
+		box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 );
+
+		.ve-init-mw-mobileArticleTarget-toolbar {
+			/* Account for difference in height between MF toolbar (3.35em) and VE toolbar (3em) */
+			font-size: ( 3.35em / 3 );
+
+			@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
+				border-color: @colorGray12;
+				border-style: solid;
+				border-width: 0 1px;
+			}
+
+			.oo-ui-iconElement-icon {
+				/* Overwrite `contain` value here, as we're 16px base sized */
+				.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;
+}

skinStyles/mobile.notifications.overlay/minerva.less

@@ -0,0 +1,28 @@
+@import 'minerva.variables';
+
+.notifications-overlay .overlay-content {
+	top: @headerHeight;
+	bottom: @headerHeight;
+
+	.mw-echo-ui-notificationsWidget {
+		top: @headerHeight;
+	}
+}
+
+@media all and ( min-width: @deviceWidthTablet ) {
+	.notifications-overlay {
+		.mw-echo-notification {
+			padding: 1.75em @contentPaddingTablet;
+		}
+		.overlay-header .cancel {
+			// 0 because we want to have some tappable area to the left of the icon
+			left: 0;
+		}
+		.overlay-header {
+			padding-left: 0;
+			padding-right: 0;
+			// T170903
+			max-width: none;
+		}
+	}
+}