Mobile refactoring (hestiacp#3106)

* Refactor toolbar sorting context menu

* Refactor login pages on mobile

* Reduce duplication of custom media queries

Author: AlecRust

web/css/src/media_queries.css

@@ -0,0 +1,6 @@
+/* Custom media queries
+   ========================================================================== */
+
+@custom-media --viewport-small (min-width: 480px);
+@custom-media --viewport-medium (min-width: 768px);
+@custom-media --viewport-large (min-width: 1024px);

web/css/src/themes/dark.css

@@ -4,7 +4,7 @@
     Website:     www.hestiacp.com
 */
 
-@custom-media --viewport-medium (min-width: 768px);
+@import url("../media_queries");
 
 :root {
 	--color-text: #cdcdcd;
@@ -238,68 +238,68 @@ strong {
 	}
 }
 
-.context-menu.sort-order {
-	background-color: rgb(40 40 40 / 95%);
-	box-shadow: 0 2px 16px 0 rgb(20 20 20 / 65%);
-	border-radius: 4px;
-	border: 1px solid rgb(90 90 90 / 100%);
-}
-
-.context-menu li {
-	border-bottom: 1px solid #454545;
-	color: #dadada;
-}
+.toolbar-sorting-toggle {
+	&:hover {
+		color: #bcbcbc;
 
-.context-menu.sort-order span.active {
-	background-color: #454545 !important;
-	color: #fff;
-	background: linear-gradient(
-		to bottom,
-		rgb(15 15 15 / 60%) 0%,
-		rgb(45 45 45 / 75%) 30%,
-		rgb(60 60 60 / 100%) 95%
-	);
-	text-shadow: 0 1px rgb(0 0 0 / 80%);
+		& b {
+			color: #bcbcbc;
+		}
+	}
 }
 
-.context-menu.sort-order span:hover {
-	color: #fff;
-	background: linear-gradient(
-		to bottom,
-		rgb(25 25 25 / 60%) 0%,
-		rgb(55 55 55 / 75%) 30%,
-		rgb(70 70 70 / 100%) 95%
-	);
-	text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
-	box-shadow: inset 0 0 1px rgb(0 0 0 / 40%), inset -1px -1px 4px rgb(40 40 40 / 40%);
-}
+.toolbar-sorting-menu {
+	background-color: rgb(40 40 40 / 95%);
+	box-shadow: 0 2px 16px 0 rgb(20 20 20 / 65%);
+	border-radius: 4px;
+	border-color: rgb(90 90 90 / 100%);
 
-.context-menu.sort-order span:active,
-.context-menu.sort-order span:focus {
-	background: linear-gradient(
-		to bottom,
-		rgb(35 35 35 / 60%) 0%,
-		rgb(65 65 65 / 75%) 30%,
-		rgb(80 80 80 / 100%) 95%
-	);
-	color: #fff;
-	text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
-	box-shadow: inset 0 0 1px rgb(0 0 0 / 40%), inset -1px -1px 4px rgb(40 40 40 / 40%);
-}
+	& li {
+		border-bottom: 1px solid #454545;
+		color: #dadada;
+	}
 
-.toolbar-right .sort-by:hover {
-	color: #d4d4d4;
-}
+	& span {
+		&:hover {
+			color: #fff;
+			background: linear-gradient(
+				to bottom,
+				rgb(25 25 25 / 60%) 0%,
+				rgb(55 55 55 / 75%) 30%,
+				rgb(70 70 70 / 100%) 95%
+			);
+			text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
+			box-shadow: inset 0 0 1px rgb(0 0 0 / 40%), inset -1px -1px 4px rgb(40 40 40 / 40%);
+		}
 
-.toolbar-right .sort-by:hover b {
-	color: #d4d4d4;
-}
+		&:active,
+		&:focus {
+			background: linear-gradient(
+				to bottom,
+				rgb(35 35 35 / 60%) 0%,
+				rgb(65 65 65 / 75%) 30%,
+				rgb(80 80 80 / 100%) 95%
+			);
+			color: #fff;
+			text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
+			box-shadow: inset 0 0 1px rgb(0 0 0 / 40%), inset -1px -1px 4px rgb(40 40 40 / 40%);
+		}
 
-.toolbar-right .toggle-all:hover {
-	color: #d4d4d4;
+		&.active {
+			background-color: #454545 !important;
+			color: #fff;
+			background: linear-gradient(
+				to bottom,
+				rgb(15 15 15 / 60%) 0%,
+				rgb(45 45 45 / 75%) 30%,
+				rgb(60 60 60 / 100%) 95%
+			);
+			text-shadow: 0 1px rgb(0 0 0 / 80%);
+		}
+	}
 }
 
-.toolbar-submit {
+.toolbar-input-submit {
 	border-color: #454545;
 	background-color: #424242;
 	text-shadow: 1px 1px rgb(0 0 0 / 90%);
@@ -739,27 +739,36 @@ textarea:focus::placeholder {
 	background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%);
 }
 
+/* Login box
+   ========================================================================== */
+
 .login {
-	background-color: #282828;
-	box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%);
+	& .error {
+		color: #f864fa;
+	}
+
+	@media (--viewport-small) {
+		background-color: #282828;
+		box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%);
+
+		& .form-label {
+			color: #fff;
+		}
+	}
 }
 
 .login-title {
 	color: #fff;
 }
 
-.login .error {
-	color: #f864fa;
-}
-
-.login .label-link {
+.login-label-link {
 	color: #eee;
 	text-transform: initial;
 	font-weight: 400;
-}
 
-.login .label-link:hover {
-	color: #ff3478;
+	&:hover {
+		color: #ff3478;
+	}
 }
 
 .form-title {