Set top offset for notifications

Set the top offset for notifications to match the height of the
top tab and link area. Also move this height to a common Less
variable to use in both places it's used.

Bug: T260262
Depends-On: I12db7c1745d17851f6421123a145de4cb916ad51
Change-Id: I679b7bba8d0c43c36c5911b30540e86a77125497

resources/screen-desktop.less

@@ -2,13 +2,15 @@
 ** Desktop-specific styles for MonoBook
 */
 
+@import 'variables.less';
+
 #column-content {
 	float: right;
 	margin: 0 0 0.6em -12.2em;
 }
 
 .mw-body {
-	margin: 2.8em 0 0 12.2em;
+	margin: @top-area-height 0 0 12.2em;
 	border-right: 0;
 }
 

resources/skinStyles/mediawiki.notification.less

@@ -1,5 +1,16 @@
 /* mediawiki.notification */
 
+@import '../variables.less';
+
+.mw-notification-area {
+	// To match #globalWrapper (see screen-common.less).
+	font-size: 127%;
+}
+
+.mw-notification-area-layout {
+	top: @top-area-height + 0.1em;
+}
+
 .mw-notification {
 	border: 1px solid #ccc;
 	border-radius: 3px;

resources/variables.less

@@ -1,5 +1,4 @@
 // Variables for common colours and things
-// Note that this does not affect screen-desktop.css and IEFixes files; update those separately.
 
 @import 'mediawiki.mixins';
 
@@ -14,6 +13,8 @@
 @link-visited: #5a3696;
 @link-new: #c20;
 
+@top-area-height: 2.8em;
+
 // mobile objects
 @top-position: 5px;
 @block-size: 35px;

skin.json

@@ -45,7 +45,7 @@
 				"resources/screen-common.less": {
 					"media": "screen"
 				},
-				"resources/screen-desktop.css": {
+				"resources/screen-desktop.less": {
 					"media": "screen"
 				},
 				"resources/print-common.less": {
@@ -71,7 +71,7 @@
 				"resources/screen-common.less": {
 					"media": "screen"
 				},
-				"resources/screen-desktop.css": {
+				"resources/screen-desktop.less": {
 					"media": "screen and (min-width: 551px)"
 				},
 				"resources/screen-mobile.less": {