Move echo styles to the correct module

Change-Id: I28af6af3d1fe4d2dca363175e430976bb3ab03ec

resources/extensions/Echo.less

@@ -0,0 +1,78 @@
+@import "../variables.less";
+
+/* Handle and position Echo icons */
+
+@media screen {
+
+	#personal h2,
+	#personal-extra,
+	#personal-extra ul,
+	#personal-extra li {
+		display: inline-block;
+	}
+	#personal-extra {
+		// Position and keep it from randomly overflowing massively for no apparent reason
+		margin: .7em 0 -2em 0;
+
+		ul {
+			list-style: none;
+			margin: 0 -1em 0 0;
+			padding: 0;
+		}
+		li {
+			margin: 0 .75em 0 0;
+		}
+	}
+	@media (min-width: @desktop-small-floor) {
+		#personal-extra {
+			float: left;
+			margin-left: -4.5em;
+		}
+		.extension-icons {
+			#p-search {
+				margin-right: 21em;
+			}
+		}
+
+		#mw-page-header-links #ca-more,
+		#mw-page-header-links #ca-languages,
+		.sidebar-chunk h2 {
+			display: none;
+		}
+	}
+
+	@media (min-width: @desktop-small-floor) and (max-width: @desktop-small-width) {
+		.extension-icons #p-search {
+			margin-right: 11em;
+		}
+		#personal-extra {
+			margin-left: -2.5em;
+		}
+	}
+
+	@media (min-width: @desktop-mid-floor) and (max-width: @desktop-mid-width) {
+		.extension-icons {
+			#user-tools {
+				width: auto;
+			}
+			.color-middle {
+				margin-right: @column-left-size + 2 * @content-padding + 4em;
+			}
+		}
+	}
+
+	@media(max-width: @mobile-width) {
+		.mw-echo-ui-notificationBadgeButtonPopupWidget {
+			z-index: 2;
+		}
+		#personal-extra {
+			position: absolute;
+			top: .9em;
+			right: 11.75em;
+
+			li {
+				margin-right: 1.25em;
+			}
+		}
+	}
+}

resources/screen-common.less

@@ -479,30 +479,6 @@ table.wikitable > * > tr > th {
 	margin-right: @column-right-size + 1em;
 }
 
-/* Extension specific junk */
-
-/* Echo */
-
-#personal h2,
-#personal-extra,
-#personal-extra ul,
-#personal-extra li {
-	display: inline-block;
-}
-#personal-extra {
-	// Position and keep it from randomly overflowing massively for no apparent reason
-	margin: .7em 0 -2em 0;
-
-	ul {
-		list-style: none;
-		margin: 0 -1em 0 0;
-		padding: 0;
-	}
-	li {
-		margin: 0 .75em 0 0;
-	}
-}
-
 /* Hidden stuff */
 
 #p-namespaces h3,

resources/screen-desktop-mid.less

@@ -13,16 +13,6 @@
 	margin-left: @column-left-size;
 }
 
-// Echo
-.extension-icons {
-	#user-tools {
-		width: auto;
-	}
-	.color-middle {
-		margin-right: @column-left-size + 2 * @content-padding + 4em;
-	}
-}
-
 // Redundant content category list
 #catlinks {
 	display: none;

resources/screen-desktop-small.less

@@ -124,11 +124,3 @@
 #p-search {
 	margin-right: 6em;
 }
-
-// Echo
-.extension-icons #p-search {
-	margin-right: 11em;
-}
-#personal-extra {
-	margin-left: -2.5em;
-}

resources/screen-desktop.less

@@ -107,17 +107,6 @@
 	}
 }
 
-/* Echo stuff */
-#personal-extra {
-	float: left;
-	margin-left: -4.5em;
-}
-.extension-icons {
-	#p-search {
-		margin-right: 21em;
-	}
-}
-
 #mw-page-header-links #ca-more,
 #mw-page-header-links #ca-languages,
 .sidebar-chunk h2 {

resources/screen-mobile.less

@@ -124,21 +124,6 @@
 	.background-image-svg('images/gear-large-grey.svg', 'images/gear-large-grey.png');
 }
 
-/* Echo icons */
-
-.mw-echo-ui-notificationBadgeButtonPopupWidget {
-	z-index: 2;
-}
-#personal-extra {
-	position: absolute;
-	top: .9em;
-	right: 11.75em;
-
-	li {
-		margin-right: 1.25em;
-	}
-}
-
 /* Logo */
 
 #p-logo-text {

skin.json

@@ -76,6 +76,7 @@
 	},
 	"ResourceModuleSkinStyles": {
 		"timeless": {
+			"+ext.echo.styles.badge": "resources/extensions/Echo.less",
 			"+ext.visualEditor.core": "resources/extensions/VisualEditor.core.less",
 			"+ext.visualEditor.desktopArticleTarget.noscript": "resources/extensions/VisualEditor.article.less"
 		}