Echo mobile styles

resources/components/common.less

@@ -141,7 +141,7 @@ a {
 .parsoid-body {
 	margin-top: @header-height + @margin-side;
   padding: 0 @margin-side;
-	min-height: 60vh; // avoid footer being in the middle of the page
+	min-height: 80vh; // avoid footer being in the middle of the page
 	direction: ltr;
 }
 
@@ -451,6 +451,10 @@ a {
 	ul {
 		margin: 0.8rem 0 0 1.6rem;
 	}
+
+	img {
+		vertical-align: middle;
+	}
 }
 
 // Namespace button

skin.json

@@ -172,6 +172,7 @@
 			"+mediawiki.special.search.styles": "skinStyles/mediawiki.special.search.styles.less",
 			"+oojs-ui-core": "skinStyles/oojs-ui-core.less",
 			"+ext.echo.styles.badge": "skinStyles/ext.echo.styles.badge.less",
+			"+ext.echo.ui": "skinStyles/ext.echo.ui.less",	
 			"+ext.popups.main": "skinStyles/ext.popups.main.less",
 			"+ext.relatedArticles.cards": "skinStyles/ext.relatedArticles.cards.less",
 			"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",

skinStyles/echo.styles.badge.less

@@ -1,58 +0,0 @@
-/*
- * Citizen - Echo Styles
- * https://starcitizen.tools
-*/
-
-@import '../resources/variables.less';
-
-// Styles for echo badges
-#pt-notifications {
-	&-alert,
-	&-notice {
-
-		.mw-echo-notifications-badge {
-			top: -1000px; // Default was -1005px for some reason
-			margin: 0;
-			width: @icon-box-size + @icon-padding;
-			height: @header-height;
-
-			&:hover,
-			&:focus,
-			&:active {
-				&:before {
-					opacity: 0.6!important; // override all styles
-				}
-			}
-
-			// Icon tweaks
-			&:before {
-				opacity: 0.4;
-				background-position: center;
-				transition: @transition-opacity, @transition-transform;
-			}
-
-			// Badge tweaks
-			&:after {
-				background-color: @red-50;
-				font-size: 11px;
-			}
-
-			&.mw-echo-notifications-badge-all-read {
-				opacity: 0.75; // 0.75 * 0.4 = 0.3
-			}
-		}
-	}
-
-	// Rotate bell
-	&-alert {
-		.mw-echo-notifications-badge {
-			&:hover,
-			&:focus,
-			&:active {
-				&:before {
-					transform: rotateZ(20deg);
-				}
-			}
-		}
-	}
-}

skinStyles/ext.echo.ui.less

@@ -0,0 +1,29 @@
+/*
+ * Citizen - Echo Styles
+ * https://starcitizen.tools
+*/
+
+@import '../resources/variables.less';
+
+.mw-echo-ui-overlay {
+	z-index: 6;
+}
+
+// 500px or below will break the message box, +40px margin
+@media only screen and (max-width: 540px) {
+	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
+		left: 0!important;
+
+		> .oo-ui-popupWidget-popup {
+			width: auto!important;
+
+			> .oo-ui-popupWidget-body {
+				width: auto!important;
+			}
+		}
+
+    > .oo-ui-popupWidget-anchor {
+      display: none;
+    }
+	}
+}

skinStyles/ext.translate.tag.languages.less

@@ -32,6 +32,11 @@
 	padding: @content-margin-top 0 0 0;
 	display: flex;
 	width: auto;
+	visibility: hidden; // Hide dots
+
+	> * {
+		visibility: visible;
+	}
 }
 
 .mw-pt-languages-selected,
@@ -45,7 +50,7 @@
 }
 
 .mw-pt-progress {
-	margin: 0 @margin-side / 2 @margin-side / 2 0;
+	margin: 0 0 @margin-side / 2 0;
 	padding: @margin-side / 4 @margin-side / 2;
   display: block;
   border: 1px solid @base-90;

skinStyles/mediawiki.special.changeslist.less

@@ -9,6 +9,10 @@
  * Styling for Special:Watchlist and Special:RecentChanges
  */
 
+#siteSub {
+	display: none!important;
+}
+
 .rcoptions {
 	margin: @content-margin-top * 2 0;
 	padding: 0;