From fff89b5352a7da8abefc6d2d038bd8bcba41a1b4 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Wed, 23 May 2018 10:55:15 +0200
Subject: [PATCH] Lower CSS selector specificity on Vector tabs and menu

Lowering selector specificity, higher specificity is unneeded here.

Change-Id: I36779db2d526e1496d2ddcb70ce86968e0d8ad39
---
 components/tabs.less | 38 +++++++++++++++++++-------------------
 responsive.less      |  4 ++--
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/components/tabs.less b/components/tabs.less
index 29d46052c..1f9b9424c 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -3,12 +3,12 @@
  */
 
 /* Navigation Labels */
-div.vectorTabs h3 {
+.vectorTabs h3 {
 	display: none;
 }
 
 /* Namespaces and Views */
-div.vectorTabs {
+.vectorTabs {
 	float: left;
 	height: 2.5em;
 	.background-image('images/tab-break.png');
@@ -92,7 +92,7 @@ div.vectorTabs {
 }
 
 /* Variants and Actions */
-div.vectorMenu {
+.vectorMenu {
 	direction: ltr;
 	float: left;
 	cursor: pointer;
@@ -100,7 +100,7 @@ div.vectorMenu {
 	line-height: 1.125em;
 }
 
-div#mw-head div.vectorMenu h3 {
+#mw-head .vectorMenu h3 {
 	float: left;
 	.background-image('images/tab-break.png');
 	background-repeat: no-repeat;
@@ -108,12 +108,12 @@ div#mw-head div.vectorMenu h3 {
 	font-size: 1em;
 	height: 2.5em;
 	// `padding-right` >= `1px` effectively moves the "background border" outside of the element to act like a real
-	// border. It is necessary for `div.vectorMenu div.menu` dropdown to align well.
-	padding-right: 0.5em; // equals `8px` at computed `font-size` of `14px` as visually harmonically with `padding-left` in `div.vectorMenu h3 span`
+	// border. It is necessary for `.vectorMenu .menu` dropdown to align well.
+	padding-right: 0.5em; // equals `8px` at computed `font-size` of `14px` as visually harmonically with `padding-left` in `.vectorMenu h3 span`
 	margin-right: -1px;
 }
 
-div.vectorMenu h3 {
+.vectorMenu h3 {
 	span {
 		position: relative;
 		display: block;
@@ -149,17 +149,17 @@ div.vectorMenu h3 {
 	}
 }
 
-div.vectorMenu .vectorMenuCheckbox:checked + h3 span:after {
+.vectorMenu .vectorMenuCheckbox:checked + h3 span:after {
 	transform: scaleY( -1 );
 }
 
-div.vectorMenu .vectorMenuCheckbox:focus + h3 {
+.vectorMenu .vectorMenuCheckbox:focus + h3 {
 	// Simulate browser focus ring
 	outline: dotted 1px; // Firefox style
 	outline: auto -webkit-focus-ring-color; // Webkit style
 }
 
-div.vectorMenu div.menu {
+.vectorMenu .menu {
 	// Match the width of the dropdown "heading" (the tab)
 	min-width: 100%;
 	position: absolute;
@@ -176,16 +176,16 @@ div.vectorMenu div.menu {
 	z-index: 2;
 }
 
-div.vectorMenu:hover div.menu {
+.vectorMenu:hover .menu {
 	display: block;
 }
 // This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
 // Support: IE8
-div.vectorMenu .vectorMenuCheckbox:checked ~ div.menu {
+.vectorMenu .vectorMenuCheckbox:checked ~ .menu {
 	display: block;
 }
 
-div.vectorMenu ul {
+.vectorMenu ul {
 	list-style-type: none;
 	list-style-image: none;
 	padding: 0;
@@ -196,13 +196,13 @@ div.vectorMenu ul {
 // stylelint-disable selector-no-vendor-prefix, selector-type-no-unknown
 
 /* Fixes old versions of FireFox */
-div.vectorMenu ul,
+.vectorMenu ul,
 x:-moz-any-link {
 	min-width: 5em;
 }
 
 /* Returns things back to normal in modern versions of FireFox */
-div.vectorMenu ul,
+.vectorMenu ul,
 x:-moz-any-link,
 x:default {
 	min-width: 0;
@@ -210,14 +210,14 @@ x:default {
 
 // stylelint-enable selector-no-vendor-prefix, selector-type-no-unknown
 
-div.vectorMenu li {
+.vectorMenu li {
 	padding: 0;
 	margin: 0;
 	text-align: left;
 	line-height: 1em;
 }
 
-div.vectorMenu li a {
+.vectorMenu li a {
 	display: block;
 	padding: 0.625em;
 	white-space: nowrap;
@@ -226,8 +226,8 @@ div.vectorMenu li a {
 	font-size: 0.8em;
 }
 
-div.vectorMenu li.selected a,
-div.vectorMenu li.selected a:visited {
+.vectorMenu li.selected a,
+.vectorMenu li.selected a:visited {
 	color: #222;
 	text-decoration: none;
 }
diff --git a/responsive.less b/responsive.less
index 17e683c40..3877e2bb8 100644
--- a/responsive.less
+++ b/responsive.less
@@ -5,7 +5,7 @@
 */
 
 @media screen and ( max-width: @deviceWidthTablet ) {
-	div#mw-head {
+	#mw-head {
 		position: static !important; /* stylelint-disable-line declaration-no-important */
 		margin-top: 0.5em;
 	}
@@ -98,7 +98,7 @@
 		width: 80vw;
 		padding: 0;
 	}
-	div.vectorMenu div.menu {
+	.vectorMenu .menu {
 		left: inherit;
 		right: -1px;
 	}