[dev] [Less] centralize z-indices

Move all the LESS `z-index` settings to variables.less so it's easy to
conceptualize how UI will be layered. jQuery CSS rules are untouched but
documented.

Also, remove the seemingly redundant re-setting of the `mw-searchButton`
`z-index`:

  #mw-searchButton
    z-index: 1;
  }

This rule was added in 0c77e4f.

The sidebar work will require `z-index` properties and this refactor
eases the comprehension of those changes, as well as prevents the
accrual of more `z-index` technical debt.

Bug: T246419
Change-Id: Ic112a0ee3f701f87432838797be45c6069fdb522

resources/skins.vector.styles/PersonalMenu.less

@@ -6,8 +6,7 @@
 	position: absolute;
 	top: 0.33em;
 	right: 0.75em;
-	/* Display on top of page tabs - bugs 37158, 48078 */
-	z-index: 100;
+	z-index: @z-index-personal;
 
 	h3 {
 		display: none;

resources/skins.vector.styles/SearchBox.less

@@ -104,7 +104,7 @@
 	text-indent: -99999px;
 	white-space: nowrap;
 	overflow: hidden;
-	z-index: 1;
+	z-index: @z-index-search-button;
 }
 
 #searchButton {
@@ -112,7 +112,3 @@
 	background-position: center center;
 	background-repeat: no-repeat;
 }
-
-#mw-searchButton {
-	z-index: 1;
-}

resources/skins.vector.styles/VectorMenu.less

@@ -62,8 +62,7 @@
 		opacity: 0;
 		visibility: hidden;
 		.transition( opacity 100ms );
-		// Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
-		z-index: 2;
+		z-index: @z-index-menu;
 	}
 
 	&:hover .menu {
@@ -134,7 +133,7 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	z-index: 1;
+	z-index: @z-index-menu-checkbox;
 	opacity: 0;
 	width: 100%;
 	height: 100%;

resources/skins.vector.styles/common.less

@@ -84,9 +84,8 @@ body {
 		float: right;
 		font-size: @font-size-base;
 		line-height: @line-height-base;
-		/* Ensure that this is displayed on top of .mw-body-content and clickable */
 		position: relative;
-		z-index: 1;
+		z-index: @z-index-indicators;
 	}
 
 	.mw-indicator {
@@ -101,7 +100,7 @@ body {
 	// `calc` enables to set correct calculation in place again. See T102364.
 	font-size: calc( 1em ~'*' unit( @font-size-base ) );
 	line-height: @line-height-base;
-	z-index: 0;
+	z-index: @z-index-base;
 
 	p {
 		margin: 0.5em 0;

skinStyles/ooui.less

@@ -3,7 +3,7 @@
 .oo-ui-defaultOverlay,
 .skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,
 .skin-vector .ve-ui-overlay-global {
-	z-index: 101;
+	z-index: @z-index-overlay;
 }
 
 body > .oo-ui-windowManager,

variables.less

@@ -109,3 +109,25 @@
 // FIXME: Currently calculates at 11.2px, which is worth nothing and unreadable for a big
 // part of our audiences. Push up _at least_ to 12px.
 @font-size-footer: 0.7em;
+
+// Z-indices
+// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
+// @z-index-ui-datepicker-cover: -1;
+@z-index-base: 0;
+@z-index-menu-checkbox: 1;
+@z-index-search-button: 1;
+// Ensure that this is displayed on top of .mw-body-content and clickable.
+@z-index-indicators: 1;
+// See skinStyles/jquery.ui/jquery.ui.slider.css.
+// @z-index-ui-slider-range: 1;
+// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
+@z-index-menu: 2;
+// See skinStyles/jquery.ui/jquery.ui.slider.css.
+// @z-index-ui-slider-handle: 2;
+// Display on top of page tabs (T39158, T50078).
+@z-index-personal: 100;
+// See skinStyles/jquery.ui/jquery.ui.selectable.css.
+// @z-index-ui-selectable-helper: 100;
+@z-index-overlay: 101;
+// See skinStyles/jquery.ui/jquery.ui.tooltip.css.
+// @z-index-ui-tooltip: 9999;