Mobile refactoring (#3106)

* Refactor toolbar sorting context menu

* Refactor login pages on mobile

* Reduce duplication of custom media queries

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 {

web/css/src/themes/default.css

@@ -4,14 +4,11 @@
 @import url("@fortawesome/fontawesome-free/css/solid");
 @import url("../dependencies/animate");
 @import url("../dependencies/jquery-ui");
+@import url("../media_queries");
 @import url("../fonts");
 @import url("../base");
 @import url("../utilities");
 
-@custom-media --viewport-small (min-width: 480px);
-@custom-media --viewport-medium (min-width: 768px);
-@custom-media --viewport-large (min-width: 1024px);
-
 :root {
 	--animate-duration: 300ms;
 	--font-family: "Exo", system-ui;
@@ -155,6 +152,10 @@
 	border: 1px solid #fff;
 	border-top: none;
 
+	@media (--viewport-small) {
+		width: 320px;
+	}
+
 	@media (--viewport-medium) {
 		width: 400px;
 	}
@@ -729,154 +730,156 @@
 	}
 }
 
-.context-menu.sort-order {
-	position: absolute;
-	top: 35px;
-	left: 0;
-	z-index: 1;
-	overflow: hidden;
-	border-radius: 4px;
-	font-size: 0.8rem;
-	background-color: rgb(255 255 255 / 95%);
-	box-shadow: 0 2px 14px 0 rgb(20 20 20 / 35%);
-	border: 1px solid rgb(255 255 255 / 100%);
+.toolbar-right {
+	& form {
+		display: flex;
+	}
 
-	& li {
-		padding: 0;
+	@media (--viewport-medium) {
+		display: flex;
 	}
 }
 
-.context-menu li {
-	border-bottom: 1px solid #ddd;
-	color: #2e2e2e;
-	cursor: pointer;
-	padding: 12px;
-}
+.toolbar-sorting {
+	position: relative;
+	font-size: 0.8rem;
+	padding-bottom: 5px;
 
-.context-menu.sort-order span.name {
-	display: inline-block;
-	padding: 11px;
-	width: 141px;
-	font-weight: 500;
-}
+	& form {
+		flex-grow: 1;
+	}
 
-.context-menu.sort-order span.up {
-	display: inline-block;
-	padding: 11px 14px;
-	width: 44px;
-}
+	@media (--viewport-small) {
+		display: flex;
+		align-items: center;
 
-.context-menu.sort-order span.active {
-	background-color: #4f8bbc !important;
-	color: #4686b8;
-	background: linear-gradient(
-		to bottom,
-		rgb(255 255 255 / 60%) 0%,
-		rgb(255 255 255 / 75%) 50%,
-		rgb(255 255 255 / 95%) 95%
-	);
-	text-shadow: 0 1px rgb(255 255 255 / 80%);
-}
+		& form {
+			margin-left: 10px;
+		}
+	}
 
-.context-menu.sort-order span:hover {
-	color: #3b9de8;
-	text-shadow: 1px 1px rgb(255 255 255 / 50%);
-	background: linear-gradient(
-		to bottom,
-		rgb(241 248 253 / 100%) 0%,
-		rgb(218 236 250 / 100%) 50%,
-		rgb(190 221 246 / 100%) 51%,
-		rgb(227 240 251 / 100%) 100%
-	);
-	box-shadow: inset 0 0 1px #fff, inset 0 0 6px rgb(255 255 255 / 60%);
-	transition: 0.2s;
+	@media (--viewport-medium) {
+		padding-bottom: 0;
+	}
 }
 
-.context-menu.sort-order span:active,
-.context-menu.sort-order span:focus {
-	background: linear-gradient(
-		to bottom,
-		rgb(210 232 250 / 100%) 0%,
-		rgb(187 220 247 / 100%) 50%,
-		rgb(162 207 244 / 100%) 51%,
-		rgb(194 224 248 / 100%) 100%
-	);
-	color: #046c98;
-	text-shadow: 0 -1px 1px rgb(255 255 255 / 50%);
-	box-shadow: inset 0 0 1px #fff, inset -1px -1px 4px rgb(220 220 220 / 40%);
-}
+.toolbar-sorting-toggle {
+	display: block;
+	padding-bottom: 5px;
+	text-transform: uppercase;
 
-.context-menu.sort-order span.name .fas.fa-arrow-down-a-z {
-	float: right;
-	margin-top: 2px;
-}
+	&:hover {
+		color: #4b4b4b;
 
-.context-menu.sort-order li:last-child {
-	border-bottom: none;
-}
+		& b {
+			color: #4b4b4b;
+		}
+	}
 
-.toolbar-right {
-	& form {
-		display: flex;
+	&:active {
+		color: #3b9de8;
+
+		& b {
+			color: #3b9de8;
+		}
 	}
 
-	& .toggle-all:hover {
-		color: #4b4b4b;
+	& b {
+		padding-left: 3px;
 	}
 
-	& .toggle-all:active {
-		color: #3b9de8;
+	@media (--viewport-small) {
+		padding-bottom: 0;
 	}
+}
 
-	& .sort-by {
-		cursor: pointer;
-		text-transform: uppercase;
-		font-size: 0.8rem;
+.toolbar-sorting-menu {
+	position: absolute;
+	top: 25px;
+	left: 0;
+	z-index: 1;
+	overflow: hidden;
+	border-radius: 4px;
+	border: 1px solid rgb(255 255 255 / 100%);
+	background-color: rgb(255 255 255 / 95%);
+	box-shadow: 0 2px 14px 0 rgb(20 20 20 / 35%);
 
-		&:hover {
-			color: #4b4b4b;
+	& li {
+		border-bottom: 1px solid #ddd;
+		color: #2e2e2e;
+		cursor: pointer;
 
-			& b {
-				color: #4b4b4b;
-			}
+		&:last-child {
+			border-bottom: none;
 		}
+	}
 
-		&:active {
-			color: #3b9de8;
+	& span {
+		&.name {
+			display: inline-block;
+			padding: 11px;
+			width: 141px;
+			font-weight: 500;
 
-			& b {
-				color: #3b9de8;
+			& .fas.fa-arrow-down-a-z {
+				float: right;
+				margin-top: 2px;
 			}
 		}
 
-		& b {
-			text-transform: uppercase;
-			padding-left: 3px;
+		&.up {
+			display: inline-block;
+			padding: 11px 14px;
+			width: 44px;
 		}
-	}
 
-	@media (--viewport-medium) {
-		display: flex;
-	}
-}
+		&.active {
+			background-color: #4f8bbc;
+			color: #4686b8;
+			background: linear-gradient(
+				to bottom,
+				rgb(255 255 255 / 60%) 0%,
+				rgb(255 255 255 / 75%) 50%,
+				rgb(255 255 255 / 95%) 95%
+			);
+			text-shadow: 0 1px rgb(255 255 255 / 80%);
+		}
 
-.toolbar-sorting {
-	display: flex;
-	align-items: center;
-	position: relative;
-	padding-bottom: 5px;
+		&:hover {
+			color: #3b9de8;
+			text-shadow: 1px 1px rgb(255 255 255 / 50%);
+			background: linear-gradient(
+				to bottom,
+				rgb(241 248 253 / 100%) 0%,
+				rgb(218 236 250 / 100%) 50%,
+				rgb(190 221 246 / 100%) 51%,
+				rgb(227 240 251 / 100%) 100%
+			);
+			box-shadow: inset 0 0 1px #fff, inset 0 0 6px rgb(255 255 255 / 60%);
+			transition: 0.2s;
+		}
 
-	& form {
-		flex-grow: 1;
-		margin-left: 10px;
+		&:active,
+		&:focus {
+			background: linear-gradient(
+				to bottom,
+				rgb(210 232 250 / 100%) 0%,
+				rgb(187 220 247 / 100%) 50%,
+				rgb(162 207 244 / 100%) 51%,
+				rgb(194 224 248 / 100%) 100%
+			);
+			color: #046c98;
+			text-shadow: 0 -1px 1px rgb(255 255 255 / 50%);
+			box-shadow: inset 0 0 1px #fff, inset -1px -1px 4px rgb(220 220 220 / 40%);
+		}
 	}
 
-	@media (--viewport-medium) {
-		padding-bottom: 0;
+	@media (--viewport-small) {
+		top: 35px;
 	}
 }
 
-.toolbar-submit {
+.toolbar-input-submit {
 	display: flex;
 	align-items: center;
 	border: 1px solid #ddd;
@@ -1237,10 +1240,10 @@
 	color: #999;
 	margin-left: 30px;
 	font-style: italic;
-}
 
-.l-unit__name span:first-of-type {
-	margin-left: 39px;
+	&:first-of-type {
+		margin-left: 39px;
+	}
 }
 
 .l-unit__name b {
@@ -1253,13 +1256,13 @@
 	margin-left: 15%;
 	border-left: 1px solid transparent !important;
 	border-right: 1px solid transparent !important;
-}
 
-.l-unit__stats:hover {
-	border-left: 1px solid transparent !important;
-	border-right: 1px solid transparent !important;
-	box-shadow: none !important;
-	background: none !important;
+	&:hover {
+		border-left: 1px solid transparent !important;
+		border-right: 1px solid transparent !important;
+		box-shadow: none !important;
+		background: none !important;
+	}
 }
 
 .l-unit__stats table {
@@ -2143,18 +2146,38 @@
 	}
 }
 
+/* Login box
+   ========================================================================== */
+
 .login {
-	padding: 70px 50px;
-	min-width: 320px;
+	flex-grow: 1;
+	padding: 30px;
 	margin-bottom: 20%;
-	background-color: rgb(255 255 255 / 70%);
-	border-radius: 6px;
-	box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255 / 100%);
+
+	& .form-label {
+		color: #fff;
+	}
+
+	& .error {
+		color: #be5abf;
+		margin-bottom: 20px;
+	}
+
+	@media (--viewport-small) {
+		border-radius: 6px;
+		background-color: rgb(255 255 255 / 70%);
+		box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255 / 100%);
+		padding: 70px 50px;
+		max-width: 370px;
+
+		& .form-label {
+			color: #4b4b4b;
+		}
+	}
 
 	@media (--viewport-medium) {
 		display: flex;
 		align-items: flex-end;
-		width: 100%;
 		max-width: 500px;
 
 		& form {
@@ -2164,23 +2187,26 @@
 }
 
 .login-title {
-	color: #4b4b4b;
+	color: #fff;
 	font-size: 1.05rem;
 	font-weight: 500;
 	margin-bottom: 30px;
-}
 
-.login .error {
-	color: #be5abf;
-	margin-bottom: 20px;
+	@media (--viewport-small) {
+		color: #4b4b4b;
+	}
 }
 
-.login .label-link {
-	color: #326b9b;
+.login-label-link {
+	color: #fff;
 	text-transform: uppercase;
 
-	&:hover {
-		color: #0077c6;
+	@media (--viewport-small) {
+		color: #326b9b;
+
+		&:hover {
+			color: #0077c6;
+		}
 	}
 }
 

web/css/src/themes/flat.css

@@ -4,6 +4,8 @@
     Website:     www.hestiacp.com
 */
 
+@import url("../media_queries");
+
 :root {
 	--alert-box-shadow: none;
 	--alert-text-shadow: none;
@@ -131,10 +133,10 @@ strong {
 	box-shadow: none;
 }
 
-.context-menu.sort-order {
+.toolbar-sorting-menu {
 	box-shadow: none;
-	border: 1px solid #ccc;
-	background: #fff !important;
+	border-color: #ccc;
+	background-color: #fff;
 }
 
 .body-login,
@@ -142,9 +144,14 @@ strong {
 	background: #5f7eb3;
 }
 
+/* Login box
+   ========================================================================== */
+
 .login {
-	background-color: rgb(255 255 255 / 80%);
-	box-shadow: 0 2px 10px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255 / 100%);
+	@media (--viewport-small) {
+		background-color: rgb(255 255 255 / 80%);
+		box-shadow: 0 2px 10px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255 / 100%);
+	}
 }
 
 /* Collapse component

web/css/src/themes/vestia.css

@@ -4,7 +4,7 @@
     Website:     www.hestiacp.com
 */
 
-@custom-media --viewport-medium (min-width: 768px);
+@import url("../media_queries");
 
 :root {
 	--animate-duration: 0s;
@@ -212,11 +212,23 @@ strong {
 	}
 }
 
-.context-menu.sort-order {
+.toolbar-sorting-menu {
 	box-shadow: none;
-	border: 1px solid #ccc;
-	font-size: 0.75rem;
-	background: #fff;
+	border-color: #ccc;
+	background-color: #fff;
+
+	& span {
+		&:hover {
+			color: #ff6701;
+			background: none;
+		}
+
+		&.active {
+			background: none;
+			font-weight: bold;
+			color: #444;
+		}
+	}
 }
 
 .form-control,
@@ -246,7 +258,7 @@ strong {
 	font-size: 1.2rem;
 }
 
-.toolbar-submit {
+.toolbar-input-submit {
 	background-color: #cacaca;
 	border-radius: 0;
 	color: #fff;
@@ -369,17 +381,6 @@ strong {
 	color: #b5da0b;
 }
 
-.context-menu.sort-order span.active {
-	background: none !important;
-	font-weight: bold !important;
-	color: #444 !important;
-}
-
-.context-menu.sort-order span:hover {
-	color: #ff6701 !important;
-	background: none !important;
-}
-
 .badge.gray {
 	border: 1px solid rgb(255 255 255 / 40%) !important;
 }
@@ -389,10 +390,27 @@ strong {
 	background: #ededed;
 }
 
+/* Login box
+   ========================================================================== */
+
 .login {
-	background-color: rgb(255 255 255 / 100%);
-	box-shadow: 0 2px 5px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255);
-	border-radius: 0;
+	& .form-label {
+		color: #4b4b4b;
+	}
+
+	@media (--viewport-small) {
+		background-color: rgb(255 255 255 / 100%);
+		box-shadow: 0 2px 5px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255);
+		border-radius: 0;
+	}
+}
+
+.login-title {
+	color: #4b4b4b;
+}
+
+.login-label-link {
+	color: #326b9b;
 }
 
 .mail-infoblock {

web/css/themes/flat.min.css

@@ -1 +1 @@
-:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.button,.form-control,.form-select,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active,.button-danger:focus{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.badge,.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.context-menu.sort-order{background:#fff!important}.context-menu.sort-order{border:1px solid #ccc;box-shadow:none}.body-login,.body-reset{background:#5f7eb3}.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}.collapse-header{background:#fafafa;box-shadow:none}
+:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.button,.form-control,.form-select,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active,.button-danger:focus{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.badge,.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.toolbar-sorting-menu{background-color:#fff;border-color:#ccc;box-shadow:none}.body-login,.body-reset{background:#5f7eb3}@media (min-width:480px){.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}}.collapse-header{background:#fafafa;box-shadow:none}

web/js/app.js

@@ -1014,14 +1014,12 @@ set_sticky_class = function () {
 };
 
 function checkedAll(frmname) {
-	if ($('input#toggle-all').prop('checked')) {
+	if ($('#toggle-all').prop('checked')) {
 		$('.l-unit:not(.header)').addClass('selected');
 		$('.ch-toggle').prop('checked', true);
-		$('.toggle-all').addClass('clicked-on');
 	} else {
 		$('.l-unit:not(.header)').removeClass('selected');
 		$('.ch-toggle').prop('checked', false);
-		$('.toggle-all').removeClass('clicked-on');
 	}
 }
 

web/js/init.js

@@ -33,8 +33,9 @@ $(document).ready(function () {
 		set_sticky_class();
 	});
 
-	$('.toolbar-right .sort-by').click(function () {
-		$('.context-menu.sort-order').toggle();
+	$('.toolbar-sorting-toggle').click(function (evt) {
+		evt.preventDefault();
+		$('.toolbar-sorting-menu').toggleClass('u-hidden');
 	});
 
 	// SEARCH BOX
@@ -100,21 +101,21 @@ $(document).ready(function () {
 		VE.tmp.form_changed = 1;
 	});
 
-	$('.sort-order span').click(function () {
-		$('.context-menu.sort-order').toggle();
+	$('.toolbar-sorting-menu span').click(function () {
+		$('.toolbar-sorting-menu').toggleClass('u-hidden');
 		if ($(this).hasClass('active')) return;
 
-		$('.sort-order span').removeClass('active');
+		$('.toolbar-sorting-menu span').removeClass('active');
 		$(this).addClass('active');
 		VE.tmp.sort_par = $(this).parent('li').attr('entity');
 		VE.tmp.sort_as_int = $(this).parent('li').attr('sort_as_int');
 		VE.tmp.sort_direction = $(this).hasClass('up') * 1 || -1;
 
-		$('.toolbar .sort-by b').html($(this).parent('li').find('.name').html());
-		$('.toolbar .sort-by i').removeClass('fa-arrow-up-a-z fa-arrow-down-a-z');
+		$('.toolbar-sorting-toggle b').html($(this).parent('li').find('.name').html());
+		$('.toolbar-sorting-toggle .fas').removeClass('fa-arrow-up-a-z fa-arrow-down-a-z');
 		$(this).hasClass('up')
-			? $('.toolbar .sort-by i').addClass('fa-arrow-up-a-z')
-			: $('.toolbar .sort-by i').addClass('fa-arrow-down-a-z');
+			? $('.toolbar-sorting-toggle .fas').addClass('fa-arrow-up-a-z')
+			: $('.toolbar-sorting-toggle .fas').addClass('fa-arrow-down-a-z');
 		$('.units .l-unit')
 			.sort(function (a, b) {
 				if (VE.tmp.sort_as_int)
@@ -717,13 +718,8 @@ $(document).ready(function () {
 	if (location.href.search(/list/) != -1) {
 		var shift_select_ref = $('body').finderSelect({
 			children: '.l-unit',
-			onFinish: function (evt) {
-				if (
-					$('.app-content').find('.l-unit.selected').length ==
-					$('.app-content').find('.l-unit').length
-				) {
-					$('.toggle-all').addClass('clicked-on');
-				}
+			onFinish: function () {
+				// do nothing
 			},
 			toggleAllHook: function () {
 				if ($('.l-unit').length == $('.ch-toggle:checked').length) {

web/js/vendor/jquery.finder.js

@@ -176,7 +176,6 @@
 
                         var ref = $(e.target);
                         if (ref.parents('.l-unit').hasClass('selected')/* && $('.l-unit.selected').length == 1*/) {
-                            $('.toggle-all').removeClass('clicked-on');
                             f.t.toggleClick(p,c,o);
                             o.onFinish(e);
                             return;
@@ -582,13 +581,11 @@
         unHAll: function(p,o) {
             f.h.off(p.find(o.children), o);
             f.t.update(p, o);
-            $('.toggle-all').removeClass('clicked-on');
         },
         hAll: function(p,o) {
             f.h.on(p.find(o.children), o);
             f.t.update(p, o);
             o.toggleAllHook && o.toggleAllHook();
-            $('.toggle-all').addClass('clicked-on');
         },
         unHExist: function(bool,el,o) {
             if(bool) {

web/templates/pages/list_access_keys.php

@@ -7,21 +7,21 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-key"><span class="name"><?=_('Access Key');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-comment"><span class="name"><?=_('Comment');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
-				</div>
 				<form action="/bulk/access-key/" method="post" id="objects">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<select class="form-select" name="action">
 						<option value=""><?=_('apply to selected');?></option>
 						<option value="delete"><?=_('delete');?></option>
 					</select>
-					<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+					<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 						<i class="fas fa-arrow-right"></i>
 					</button>
 				</form>

web/templates/pages/list_backup.php

@@ -15,7 +15,7 @@
 						<option value=""><?=_('apply to selected');?></option>
 						<option value="delete"><?=_('delete') ?></option>
 					</select>
-					<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+					<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 						<i class="fas fa-arrow-right"></i>
 					</button>
 				</form>
@@ -24,7 +24,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_backup_detail.php

@@ -13,7 +13,7 @@
 					<option value=""><?=_('apply to selected');?></option>
 					<option value="restore"><?=_('restore') ?></option>
 				</select>
-				<button type="submit" class="toolbar-submit" value="">
+				<button type="submit" class="toolbar-input-submit">
 					<i class="fas fa-arrow-right"></i>
 				</button>
 			</form>
@@ -21,7 +21,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value=""><i class="fas fa-magnifying-glass"></i></button>
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" value=""><i class="fas fa-magnifying-glass"></i></button>
 				</form>
 			</div>
 		</div>

web/templates/pages/list_backup_exclusions.php

@@ -10,7 +10,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_cron.php

@@ -13,17 +13,17 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
-					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Command');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
 					<?=_('sort by');?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
-				</div>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Command');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+				</ul>
 				<?php if ($read_only !== 'true') {?>
 					<form action="/bulk/cron/" method="post" id="objects">
 						<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
@@ -35,7 +35,7 @@
 							<option value="unsuspend"><?=_('unsuspend');?></option>
 							<option value="delete"><?=_('delete');?></option>
 						</select>
-						<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+						<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 							<i class="fas fa-arrow-right"></i>
 						</button>
 					</form>
@@ -45,7 +45,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_db.php

@@ -32,7 +32,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>:
+					<b>
+						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+					</b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-charset"><span class="name"><?=_('Charset');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-disk" sort_as_int="1"><span class="name"><?=_('Disk');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
@@ -40,13 +47,6 @@
 					<li entity="sort-server"><span class="name"><?=_('Host');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-user"><span class="name"><?=_('Username');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>:
-					<b>
-						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
-				</div>
 				<?php if ($read_only !== 'true') {?>
 					<form action="/bulk/db/" method="post" id="objects">
 						<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
@@ -59,7 +59,7 @@
 							<?php } ?>
 							<option value="delete"><?=_('delete');?></option>
 						</select>
-						<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+						<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 							<i class="fas fa-arrow-right"></i>
 						</button>
 					</form>
@@ -69,7 +69,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_dns.php

@@ -8,20 +8,20 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display: none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>:
+					<b>
+						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+					</b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-expire" sort_as_int="1"><span class="name"><?=_('Expire');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-ip"><span class="name"><?=_('IP address');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-records"><span class="name"><?=_('Records');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>:
-					<b>
-						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
-				</div>
 				<?php if ($read_only !== 'true') {?>
 					<form action="/bulk/dns/" method="post" id="objects">
 						<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
@@ -34,7 +34,7 @@
 							<option value="unsuspend"><?=_('unsuspend');?></option>
 							<option value="delete"><?=_('delete');?></option>
 						</select>
-						<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+						<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 							<i class="fas fa-arrow-right"></i>
 						</button>
 					</form>
@@ -44,7 +44,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_dns_public.php

@@ -10,20 +10,20 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display: none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>:
+					<b>
+						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+					</b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-expire" sort_as_int="1"><span class="name"><?=_('Expire');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-ip"><span class="name"><?=_('IP address');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-records"><span class="name"><?=_('Records');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>:
-					<b>
-						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
-				</div>
 				<?php if ($read_only !== 'true') {?>
 					<form action="/bulk/dns/" method="post" id="objects">
 						<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
@@ -36,7 +36,7 @@
 							<option value="unsuspend"><?=_('unsuspend');?></option>
 							<option value="delete"><?=_('delete');?></option>
 						</select>
-						<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+						<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 							<i class="fas fa-arrow-right"></i>
 						</button>
 					</form>
@@ -46,7 +46,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_dns_rec.php

@@ -10,20 +10,20 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>:
+					<b>
+						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
+						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+					</b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-value"><span class="name"><?=_('IP or Value');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-record"><span class="name"><?=_('Record');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-ttl" sort_as_int="1"><span class="name"><?=_('TTL');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-type"><span class="name"><?=_('Type');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>:
-					<b>
-						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
-						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
-				</div>
 				<?php if ($read_only !== 'true') {?>
 					<form action="/bulk/dns/" method="post" id="objects">
 						<input type="hidden" name="domain" value="<?=htmlentities($_GET['domain'])?>">
@@ -34,7 +34,7 @@
 							<option value="unsuspend"><?=_('unsuspend');?></option>
 							<option value="delete"><?=_('delete');?></option>
 						</select>
-						<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+						<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 							<i class="fas fa-arrow-right"></i>
 						</button>
 					</form>
@@ -44,7 +44,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_firewall.php

@@ -11,23 +11,23 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>: <b><?=_('Action');?> <i class="fas fa-arrow-up-a-z"></i></b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-action"><span class="name"><?=_('Action');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up active"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-protocol"><span class="name"><?=_('Protocol');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-port"><span class="name"><?=_('Port');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-ip" sort_as_int="1"><span class="name"><?=_('IP address');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-comment"><span class="name"><?=_('Comment');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>: <b><?=_('Action');?> <i class="fas fa-arrow-up-a-z"></i></b>
-				</div>
 				<form action="/bulk/firewall/" method="post" id="objects">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<select class="form-select" name="action">
 						<option value=""><?=_('apply to selected');?></option>
 						<option value="delete"><?=_('delete') ?></option>
 					</select>
-					<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+					<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 						<i class="fas fa-arrow-right"></i>
 					</button>
 				</form>

web/templates/pages/list_firewall_banlist.php

@@ -12,7 +12,7 @@
 					<option value=""><?=_('apply to selected');?></option>
 					<option value="delete"><?=_('delete') ?></option>
 				</select>
-				<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+				<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 					<i class="fas fa-arrow-right"></i>
 				</button>
 			</form>

web/templates/pages/list_firewall_ipset.php

@@ -12,7 +12,7 @@
 					<option value=""><?=_('apply to selected');?></option>
 					<option value="delete"><?=_('delete') ?></option>
 				</select>
-				<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+				<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 					<i class="fas fa-arrow-right"></i>
 				</button>
 			</form>

web/templates/pages/list_ip.php

@@ -7,7 +7,10 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-ip"><span class="name"><?=_('ip');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-netmask"><span class="name"><?=_('Netmask');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
@@ -15,9 +18,6 @@
 					<li entity="sort-domains" sort_as_int="1"><span class="name"><?=_('Domains');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-owner"><span class="name"><?=_('Owner');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
-				</div>
 				<form action="/bulk/ip/" method="post" id="objects">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<select class="form-select" name="action">
@@ -25,7 +25,7 @@
 						<option value="reread IP"><?=_('reread IP');?></option>
 						<option value="delete"><?=_('delete');?></option>
 					</select>
-					<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+					<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 						<i class="fas fa-arrow-right"></i>
 					</button>
 				</form>

web/templates/pages/list_mail.php

@@ -8,19 +8,19 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
-					<li entity="sort-accounts" sort_as_int="1"><span class="name"><?=_('Accounts');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-disk" sort_as_int="1"><span class="name"><?=_('Disk');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
 					<?=_('sort by');?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
-				</div>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+					<li entity="sort-accounts" sort_as_int="1"><span class="name"><?=_('Accounts');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-disk" sort_as_int="1"><span class="name"><?=_('Disk');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+				</ul>
 				<?php if ($read_only !== 'true') {?>
 					<form action="/bulk/mail/" method="post" id="objects">
 						<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
@@ -33,7 +33,7 @@
 							<option value="unsuspend"><?=_('unsuspend');?></option>
 							<option value="delete"><?=_('delete');?></option>
 						</select>
-						<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+						<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 							<i class="fas fa-arrow-right"></i>
 						</button>
 					</form>
@@ -43,7 +43,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_mail_acc.php

@@ -14,19 +14,19 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
-					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-disk" sort_as_int="1"><span class="name"><?=_('Disk');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-quota" sort_as_int="1"><span class="name"><?=_('Quota');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
 					<?=_('sort by');?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
-				</div>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-disk" sort_as_int="1"><span class="name"><?=_('Disk');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-quota" sort_as_int="1"><span class="name"><?=_('Quota');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+				</ul>
 				<?php if ($read_only !== 'true') { ?>
 					<form action="/bulk/mail/" method="post" id="objects">
 						<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
@@ -37,7 +37,7 @@
 							<option value="unsuspend"><?=_('unsuspend');?></option>
 							<option value="delete"><?=_('delete');?></option>
 						</select>
-						<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+						<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 							<i class="fas fa-arrow-right"></i>
 						</button>
 					</form>
@@ -47,7 +47,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_packages.php

@@ -7,24 +7,24 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
-					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
 					<?=_('sort by');?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
-				</div>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+				</ul>
 				<form action="/bulk/package/" method="post" id="objects">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<select class="form-select" name="action">
 						<option value=""><?=_('apply to selected');?></option>
 						<option value="delete"><?=_('delete');?></option>
 					</select>
-					<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+					<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 						<i class="fas fa-arrow-right"></i>
 					</button>
 				</form>

web/templates/pages/list_search.php

@@ -7,18 +7,18 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
-				</div>
 				<div class="toolbar-search">
 					<form action="/search/" method="get">
 						<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 						<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_GET['q']) ? htmlspecialchars($_GET['q']) : '' ?>" title="<?=_('Search');?>">
-						<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+						<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 							<i class="fas fa-magnifying-glass"></i>
 						</button>
 					</form>

web/templates/pages/list_services.php

@@ -28,7 +28,7 @@
 					<option value="start"><?=_('start');?></option>
 					<option value="restart"><?=_('restart');?></option>
 				</select>
-				<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+				<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 					<i class="fas fa-arrow-right"></i>
 				</button>
 			</form>

web/templates/pages/list_stats.php

@@ -26,7 +26,7 @@
 							}
 						?>
 					</select>
-					<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+					<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 						<i class="fas fa-arrow-right"></i>
 					</button>
 				</form>
@@ -35,7 +35,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_user.php

@@ -7,19 +7,19 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
-					<li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=_('Bandwidth');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-disk" sort_as_int="1"><span class="name"><?=_('Disk');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
-				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
 					<?=_('sort by');?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
-				</div>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+					<li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=_('Bandwidth');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-disk" sort_as_int="1"><span class="name"><?=_('Disk');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
+				</ul>
 				<form action="/bulk/user/" method="post" id="objects">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<select class="form-select" name="action">
@@ -36,7 +36,7 @@
 						<option value="unsuspend"><?=_('unsuspend');?></option>
 						<option value="delete"><?=_('delete');?></option>
 					</select>
-					<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+					<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 						<i class="fas fa-arrow-right"></i>
 					</button>
 				</form>
@@ -45,7 +45,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/list_web.php

@@ -10,20 +10,20 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<ul class="context-menu sort-order animate__animated animate__fadeIn" style="display:none;">
+				<a href="#" class="toolbar-sorting-toggle" title="<?=_('Sort items');?>">
+					<?=_('sort by');?>:
+					<b>
+						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = ('Name'); } else { $label = _('Date'); } ?>
+						<?=$label?> <i class="fas fa-arrow-down-a-z"></i>
+					</b>
+				</a>
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
 					<li entity="sort-bandwidth" sort_as_int="1"><span class="name"><?=_('Bandwidth');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-disk" sort_as_int="1"><span class="name"><?=_('Disk');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 					<li entity="sort-ip" sort_as_int="1"><span class="name"><?=_('IP address');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
 				</ul>
-				<div class="sort-by" title="<?=_('Sort items');?>">
-					<?=_('sort by');?>:
-					<b>
-						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = ('Name'); } else { $label = _('Date'); } ?>
-						<?=$label?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
-				</div>
 				<?php if ($read_only !== 'true') {?>
 					<form action="/bulk/web/" method="post" id="objects">
 						<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
@@ -36,7 +36,7 @@
 							<option value="unsuspend"><?=_('unsuspend');?></option>
 							<option value="delete"><?=_('delete');?></option>
 						</select>
-						<button type="submit" class="toolbar-submit" value="" title="<?=_('apply to selected');?>">
+						<button type="submit" class="toolbar-input-submit" title="<?=_('apply to selected');?>">
 							<i class="fas fa-arrow-right"></i>
 						</button>
 					</form>
@@ -46,7 +46,7 @@
 				<form action="/search/" method="get">
 					<input type="hidden" name="token" value="<?=$_SESSION['token']?>">
 					<input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
-					<button type="submit" class="toolbar-submit" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
+					<button type="submit" class="toolbar-input-submit" onclick="return doSearch('/search/')" title="<?=_('Search');?>">
 						<i class="fas fa-magnifying-glass"></i>
 					</button>
 				</form>

web/templates/pages/login/login_1.php

@@ -13,7 +13,7 @@
 			<label for="password" class="form-label u-side-by-side">
 				<?=_('Password');?>
 				<?php if ($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] !== 'no' ) {?>
-					<a class="label-link" href="/reset/">
+					<a class="login-label-link" href="/reset/">
 						<?=_('forgot password');?>
 					</a>
 				<?php } ?>

web/templates/pages/login/login_2.php

@@ -12,7 +12,7 @@
 		<div class="u-mb20">
 			<label for="twofa" class="form-label u-side-by-side">
 				<?=_('2FA Token');?>
-				<a class="label-link" href="/reset2fa/">
+				<a class="login-label-link" href="/reset2fa/">
 					<?=_('Forgot token');?>
 				</a>
 			</label>

web/templates/pages/login/login_a.php

@@ -17,7 +17,7 @@
 			<label for="password" class="form-label u-side-by-side">
 				<?=_('Password');?>
 				<?php if ($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] !== 'no' ) {?>
-					<a class="label-link" href="/reset/">
+					<a class="login-label-link" href="/reset/">
 						<?=_('forgot password');?>
 					</a>
 				<?php } ?>