[dev] Favor LESS media queries to ResourceLoader

Prior to this patch, Vector used a mixture of LESS media queries and
ResourceLoader (RL) media queries[0]. So far as I can tell[1], the
latter only instructs RL to wrap the contents of a LESS file within a
query (there are no conditionals placed on style loading). Further,
according to a coauthor of RL (Roan), RL media query support was most
likely a replacement for `@media foo { @import foo.css }` to inline
print styles from a separate style sheet which Vector itself does not
use. The LESS solution is much more intuitive since it's not MediaWiki-
specific and only the LESS code needs to be considered instead of LESS
_and_ the RL configuration in skin.json.

This patch moves both screen media queries to screen.less for the
aforementioned consistency and to avoid nesting queries. It is hoped
that these changes will help make future work easier, such as those to
margin likely to take place in making the sidebar collapsible.

[0]: https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Media_queries
[1]: http://localhost:8181/w/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector

Bug: T246419
Change-Id: Ic0adfa254f3e81dfa87a26899f3aa585645956f1

resources/skins.vector.styles/screen-hd.less

@@ -1,31 +0,0 @@
-/* Vector screen styles for high definition displays */
-
-@import '../../variables.less';
-
-.mw-body,
-#mw-head-base,
-#left-navigation,
-#mw-data-after-content,
-#footer {
-	margin-left: 11em;
-}
-
-.mw-body {
-	padding: 1.25em 1.5em 1.5em 1.5em;
-}
-
-#footer {
-	padding: 1.25em;
-}
-
-#mw-panel {
-	padding-left: 0.5em;
-}
-
-#p-search {
-	margin-right: 1em;
-}
-
-#p-personal {
-	right: 1em;
-}

resources/skins.vector.styles/screen.less

@@ -1,13 +1,47 @@
 /* Vector screen styles */
-@import '../../variables.less';
-@import 'common.less';
-@import 'PersonalMenu.less';
-@import 'SearchBox.less';
-@import 'VectorTabs.less';
-@import 'watchstar.less';
-@import 'VectorMenu.less';
-@import 'Navigation.less';
-@import 'Portal.less';
-@import 'Sidebar.less';
-@import 'Footer.less';
-@import 'externalLinks.less';
+@media screen {
+	@import '../../variables.less';
+	@import 'common.less';
+	@import 'PersonalMenu.less';
+	@import 'SearchBox.less';
+	@import 'VectorTabs.less';
+	@import 'watchstar.less';
+	@import 'VectorMenu.less';
+	@import 'Navigation.less';
+	@import 'Portal.less';
+	@import 'Sidebar.less';
+	@import 'Footer.less';
+	@import 'externalLinks.less';
+}
+
+/* Vector screen styles for high definition displays. These rules cross the above components and are
+   grouped together here only for the sake of the media query common to each. */
+@media screen and ( min-width: 982px ) {
+	.mw-body,
+	#mw-head-base,
+	#left-navigation,
+	#mw-data-after-content,
+	#footer {
+		margin-left: 11em;
+	}
+
+	.mw-body {
+		padding: 1.25em 1.5em 1.5em 1.5em;
+	}
+
+	#footer {
+		padding: 1.25em;
+	}
+
+	#mw-panel {
+		padding-left: 0.5em;
+	}
+
+	#p-search {
+		margin-right: 1em;
+	}
+
+	#p-personal {
+		right: 1em;
+	}
+}

skin.json

@@ -50,12 +50,7 @@
 				"mobile"
 			],
 			"styles": {
-				"resources/skins.vector.styles/screen.less": {
-					"media": "screen"
-				},
-				"resources/skins.vector.styles/screen-hd.less": {
-					"media": "screen and ( min-width: 982px )"
-				},
+				"resources/skins.vector.styles/screen.less": [],
 				"resources/skins.vector.styles/print.less": []
 			}
 		},