From 9811d447744647e00cc717330c2c15f631c32718 Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Fri, 7 Apr 2017 23:11:00 +0000
Subject: [PATCH] Move echo styles to the correct module

Change-Id: I28af6af3d1fe4d2dca363175e430976bb3ab03ec
---
 resources/extensions/Echo.less      | 78 +++++++++++++++++++++++++++++
 resources/screen-common.less        | 24 ---------
 resources/screen-desktop-mid.less   | 10 ----
 resources/screen-desktop-small.less |  8 ---
 resources/screen-desktop.less       | 11 ----
 resources/screen-mobile.less        | 15 ------
 skin.json                           |  1 +
 7 files changed, 79 insertions(+), 68 deletions(-)
 create mode 100644 resources/extensions/Echo.less

diff --git a/resources/extensions/Echo.less b/resources/extensions/Echo.less
new file mode 100644
index 0000000..e91d039
--- /dev/null
+++ b/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;
+			}
+		}
+	}
+}
diff --git a/resources/screen-common.less b/resources/screen-common.less
index 689888c..41b8427 100644
--- a/resources/screen-common.less
+++ b/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,
diff --git a/resources/screen-desktop-mid.less b/resources/screen-desktop-mid.less
index 3550130..9768e7f 100644
--- a/resources/screen-desktop-mid.less
+++ b/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;
diff --git a/resources/screen-desktop-small.less b/resources/screen-desktop-small.less
index b0b5e3d..0a88dce 100644
--- a/resources/screen-desktop-small.less
+++ b/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;
-}
diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less
index 0b5f403..e0f7501 100644
--- a/resources/screen-desktop.less
+++ b/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 {
diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less
index a9b3cc4..de13219 100644
--- a/resources/screen-mobile.less
+++ b/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 {
diff --git a/skin.json b/skin.json
index 5257150..5e38aa2 100644
--- a/skin.json
+++ b/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"
 		}