UI tidy (#3063)

web/css/src/dependencies/fontawesome.css

@@ -1,19 +0,0 @@
-/*
- * Some overrides of Font Awesome Free 6.2.1 to change webfont paths
- */
-
-@font-face {
-  font-family: "Font Awesome 6 Free";
-  font-style: normal;
-  font-weight: 900;
-  font-display: block;
-  src: url("/webfonts/fa-solid-900.woff2") format("woff2"), url("/webfonts/fa-solid-900.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Font Awesome 6 Brands";
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url("/webfonts/fa-brands-400.woff2") format("woff2"), url("/webfonts/fa-brands-400.ttf") format("truetype");
-}

web/css/src/fonts.css

@@ -1,9 +1,30 @@
-/* ==========================================================================
-   Define Exo font family
-   Primary font used throughout the user interface
+/* Overrides for Font Awesome Free 6.2.1 to change webfont paths
    ========================================================================== */
 
-/* exo-300 - latin-ext_latin */
+@font-face {
+  font-family: "Font Awesome 6 Free";
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src:
+    url("/webfonts/fa-solid-900.woff2") format("woff2"),
+    url("/webfonts/fa-solid-900.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Font Awesome 6 Brands";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src:
+    url("/webfonts/fa-brands-400.woff2") format("woff2"),
+    url("/webfonts/fa-brands-400.ttf") format("truetype");
+}
+
+/* Exo primary font
+   ========================================================================== */
+
+/* exo-300 - latin */
 @font-face {
   font-family: Exo;
   font-style: normal;
@@ -11,12 +32,12 @@
   src:
     local("Exo Light"),
     local("Exo-Light"),
-    url("/webfonts/exo-v8-latin-ext_latin-300.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-300.woff") format("woff");
+    url("/webfonts/exo-v20-latin-300.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-300.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-300italic - latin-ext_latin */
+/* exo-300italic - latin */
 @font-face {
   font-family: Exo;
   font-style: italic;
@@ -24,12 +45,12 @@
   src:
     local("Exo Light Italic"),
     local("Exo-LightItalic"),
-    url("/webfonts/exo-v8-latin-ext_latin-300italic.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-300italic.woff") format("woff");
+    url("/webfonts/exo-v20-latin-300italic.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-300italic.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-regular - latin-ext_latin */
+/* exo-regular - latin */
 @font-face {
   font-family: Exo;
   font-style: normal;
@@ -37,12 +58,12 @@
   src:
     local("Exo Regular"),
     local("Exo-Regular"),
-    url("/webfonts/exo-v8-latin-ext_latin-regular.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-regular.woff") format("woff");
+    url("/webfonts/exo-v20-latin-regular.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-regular.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-italic - latin-ext_latin */
+/* exo-italic - latin */
 @font-face {
   font-family: Exo;
   font-style: italic;
@@ -50,12 +71,12 @@
   src:
     local("Exo Italic"),
     local("Exo-Italic"),
-    url("/webfonts/exo-v8-latin-ext_latin-italic.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-italic.woff") format("woff");
+    url("/webfonts/exo-v20-latin-italic.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-italic.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-500 - latin-ext_latin */
+/* exo-500 - latin */
 @font-face {
   font-family: Exo;
   font-style: normal;
@@ -63,12 +84,12 @@
   src:
     local("Exo Medium"),
     local("Exo-Medium"),
-    url("/webfonts/exo-v8-latin-ext_latin-500.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-500.woff") format("woff");
+    url("/webfonts/exo-v20-latin-500.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-500.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-500italic - latin-ext_latin */
+/* exo-500italic - latin */
 @font-face {
   font-family: Exo;
   font-style: italic;
@@ -76,12 +97,12 @@
   src:
     local("Exo Medium Italic"),
     local("Exo-MediumItalic"),
-    url("/webfonts/exo-v8-latin-ext_latin-500italic.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-500italic.woff") format("woff");
+    url("/webfonts/exo-v20-latin-500italic.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-500italic.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-600 - latin-ext_latin */
+/* exo-600 - latin */
 @font-face {
   font-family: Exo;
   font-style: normal;
@@ -89,12 +110,12 @@
   src:
     local("Exo SemiBold"),
     local("Exo-SemiBold"),
-    url("/webfonts/exo-v8-latin-ext_latin-600.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-600.woff") format("woff");
+    url("/webfonts/exo-v20-latin-600.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-600.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-600italic - latin-ext_latin */
+/* exo-600italic - latin */
 @font-face {
   font-family: Exo;
   font-style: italic;
@@ -102,12 +123,12 @@
   src:
     local("Exo SemiBold Italic"),
     local("Exo-SemiBoldItalic"),
-    url("/webfonts/exo-v8-latin-ext_latin-600italic.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-600italic.woff") format("woff");
+    url("/webfonts/exo-v20-latin-600italic.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-600italic.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-700 - latin-ext_latin */
+/* exo-700 - latin */
 @font-face {
   font-family: Exo;
   font-style: normal;
@@ -115,12 +136,12 @@
   src:
     local("Exo Bold"),
     local("Exo-Bold"),
-    url("/webfonts/exo-v8-latin-ext_latin-700.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-700.woff") format("woff");
+    url("/webfonts/exo-v20-latin-700.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-700.woff") format("woff");
   font-display: swap;
 }
 
-/* exo-700italic - latin-ext_latin */
+/* exo-700italic - latin */
 @font-face {
   font-family: Exo;
   font-style: italic;
@@ -128,38 +149,23 @@
   src:
     local("Exo Bold Italic"),
     local("Exo-BoldItalic"),
-    url("/webfonts/exo-v8-latin-ext_latin-700italic.woff2") format("woff2"),
-    url("/webfonts/exo-v8-latin-ext_latin-700italic.woff") format("woff");
+    url("/webfonts/exo-v20-latin-700italic.woff2") format("woff2"),
+    url("/webfonts/exo-v20-latin-700italic.woff") format("woff");
   font-display: swap;
 }
 
-/* ==========================================================================
-   Define Inconsolata font family
-   Console font
+/* Inconsolata console font
    ========================================================================== */
 
-/* Inconsolata-bold - latin */
+/* inconsolata-regular - latin */
 @font-face {
   font-family: Inconsolata;
-  src:
-    local("Inconsolata Bold"),
-    local("Inconsolata-Bold"),
-    url("/webfonts/Inconsolata-Bold.woff2") format("woff2"),
-    url("/webfonts/Inconsolata-Bold.woff") format("woff");
-  font-weight: bold;
   font-style: normal;
-  font-display: swap;
-}
-
-/* Inconsolata - latin */
-@font-face {
-  font-family: Inconsolata;
+  font-weight: 400;
   src:
     local("Inconsolata Regular"),
     local("Inconsolata-Regular"),
-    url("/webfonts/Inconsolata-Regular.woff2") format("woff2"),
-    url("/webfonts/Inconsolata-Regular.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
+    url("/webfonts/inconsolata-regular.woff2") format("woff2"),
+    url("/webfonts/inconsolata-regular.woff") format("woff");
   font-display: swap;
 }

web/css/src/themes/dark.css

@@ -140,7 +140,7 @@ strong {
 }
 
 .alert {
-  border: 1px solid #212121;
+  border-color: #212121;
 }
 
 .alert-danger {
@@ -155,7 +155,7 @@ strong {
   background: #454545;
   color: #fafafa;
   text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
-  border: 1px solid #606060;
+  border-color: #606060;
   box-shadow:
     0 1px 4px rgb(0 0 0 / 20%),
     inset 0 0 60px rgb(0 0 0 / 25%);
@@ -310,23 +310,23 @@ strong {
 }
 
 .l-sort-toolbar__filter-apply {
-  border: 1px solid #454545;
+  border-color: #454545;
   background-color: #424242;
-  text-shadow: 1px 1px rgb(0 0 0 / 90%) !important;
-  box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
+  text-shadow: 1px 1px rgb(0 0 0 / 90%);
+  box-shadow: 0 1px 1px rgb(0 0 0 / 40%);
   color: #cacaca;
   font-size: 1em;
-}
 
-.l-sort-toolbar__filter-apply:hover {
-  color: #09f;
-  background-color: #454545;
-}
+  &:hover {
+    color: #09f;
+    background-color: #454545;
+  }
 
-.l-sort-toolbar__filter-apply:active {
-  color: #0074c2;
-  text-shadow: 0 -1px rgb(255 255 255 / 20%);
-  box-shadow: inset 1px 1px 0 rgb(0 0 0 / 20%);
+  &:active {
+    color: #0074c2;
+    text-shadow: 0 -1px rgb(255 255 255 / 20%);
+    box-shadow: inset 1px 1px 0 rgb(0 0 0 / 20%);
+  }
 }
 
 .l-sort-toolbar .toolbar-link {
@@ -341,20 +341,27 @@ strong {
   }
 }
 
-.l-select {
-  border: 1px solid #454545;
-  box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
+.l-sort-toolbar .form-select {
+  border-color: #454545;
+  background-color: #212121;
 
-  & select {
+  &:hover {
     background-color: #212121;
-    box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
   }
 }
 
-.l-sort-toolbar .l-select {
-  border: 1px solid #454545;
-  background-color: #454545;
-  text-shadow: 1px 1px rgb(0 0 0 / 90%);
+.l-sort-toolbar .form-control {
+  border-color: #454545;
+  background-color: #212121;
+
+  &:hover {
+    background-color: #212121;
+    border-right-color: #0090ff;
+  }
+
+  &:focus {
+    border-right-color: #0080df;
+  }
 }
 
 .l-unit {
@@ -527,82 +534,81 @@ strong {
 
 .form-control {
   background-color: #454545;
-  border: 1px solid #606060;
+  border-color: #606060;
   color: #d4d4d4;
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
-}
-
-.form-control:hover {
-  border-color: #0090ff;
-  background-color: #494949;
-}
 
-.form-control:focus {
-  background-color: #222;
-  border-color: #0080df;
-  color: #fff;
-  box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
-}
-
-.form-control:disabled,
-.form-select:disabled {
-  background-color: #303030;
-  text-shadow: 1px 1px rgb(0 0 0 / 30%);
-  color: #acacac;
-  border-color: #606060;
-}
+  &:hover {
+    border-color: #0090ff;
+    background-color: #494949;
+  }
 
-.form-control:disabled:hover,
-.form-select:disabled:hover {
-  border-color: #606060 !important;
-}
+  &:focus {
+    background-color: #222;
+    border-color: #0080df;
+    color: #fff;
+    box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
+  }
 
-.form-control.list-editor:focus {
-  background-color: #222;
-  box-shadow: none !important;
+  &.list-editor:focus {
+    background-color: #222;
+    box-shadow: none;
+  }
 }
 
 .form-select {
   background-color: #454545;
-  border: 1px solid #606060;
+  border-color: #606060;
   color: #d4d4d4;
   text-shadow: 0 0 0 #d4d4d4;
   box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
-}
 
-textarea::placeholder {
-  color: #bbb !important;
-}
+  &:hover {
+    border-color: #0090ff;
+    background-color: #494949;
+  }
 
-textarea:focus::placeholder {
-  color: #909090 !important;
+  &:focus {
+    background-color: #222;
+    border-color: #0080df;
+    color: #fff;
+    box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
+  }
 }
 
-.form-select:hover {
-  border-color: #0090ff;
-  background-color: #494949;
-}
+.form-control:disabled,
+.form-select:disabled {
+  background-color: #303030;
+  text-shadow: 1px 1px rgb(0 0 0 / 30%);
+  color: #acacac;
+  border-color: #606060;
 
-.form-select:focus {
-  background-color: #222;
-  border-color: #0080df;
-  color: #fff;
-  box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
+  &:hover {
+    border-color: #606060;
+  }
 }
 
 .generate {
   color: #29a9ff;
   border-radius: 4px;
+
+  &:hover {
+    background-color: #ff3478;
+    border-color: #ff3478;
+  }
+
+  &:active {
+    background-color: #be1f54;
+    border-color: #be1f54;
+  }
 }
 
-.generate:hover {
-  background-color: #ff3478;
-  border-color: #ff3478;
+textarea::placeholder {
+  color: #bbb;
 }
 
-.generate:active {
-  background-color: #be1f54;
-  border-color: #be1f54;
+textarea:focus::placeholder {
+  color: #909090;
 }
 
 .lets-encrypt-note {}
@@ -612,8 +618,7 @@ textarea:focus::placeholder {
 .show-passwords-enabled-action {}
 
 .ftp-path-value,
-.hint,
-td.hint {
+.hint {
   color: #a2a2a2;
   font-size: 0.8rem;
 }
@@ -698,7 +703,7 @@ td.hint {
   font-size: 0.85rem;
   font-weight: 400;
   color: #eee;
-  border: 1px solid #707070;
+  border-color: 1px solid #707070;
   background: rgb(48 48 48);
   background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(69 69 69 / 100%) 100%);
   box-shadow:
@@ -712,7 +717,7 @@ td.hint {
 .to-top:hover {
   color: #fff;
   text-shadow: 1px 1px rgb(0 0 0 / 25%);
-  border: 1px solid #0098ff;
+  border-color: #0098ff;
   background: linear-gradient(0deg, rgb(58 58 58 / 100%) 0%, rgb(68 68 68 / 100%) 35%, rgb(79 79 79 / 100%) 100%);
   background-color: #454545;
   box-shadow:
@@ -726,7 +731,7 @@ td.hint {
 .to-top:active,
 .to-shortcuts:focus,
 .to-top:focus {
-  border: 1px solid #0066b4;
+  border-color: #0066b4;
   background: linear-gradient(0deg, rgb(69 69 69 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(48 48 48 / 100%) 100%);
   color: #d4d4d4;
   text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
@@ -876,9 +881,8 @@ td.hint {
   color: #d4d4d4;
 }
 
-/* MAIN MENU COLLAPSED */
 .console-output {
-  color: #dadada !important;
+  color: #dadada;
 }
 
 form#vstobjects.suspended {
@@ -1022,12 +1026,6 @@ form#vstobjects.suspended {
   text-shadow: 0 !important;
 }
 
-.search-input {
-  background-color: #212121;
-  border: 1px solid #454545;
-  box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
-}
-
 .ui-dialog .ui-dialog-buttonpane {
   border-top: 1px solid #404040;
 }
@@ -1162,7 +1160,7 @@ li[aria-expanded="true"] a {
 
 .collapse-header {
   background: #454545;
-  border: 1px solid #505050;
+  border-color: #505050;
   text-shadow: 0 1px rgb(0 0 0 / 40%);
   box-shadow:
     inset 0 0 2px rgb(0 0 0 / 50%),

web/css/src/themes/default.css

@@ -2,7 +2,6 @@
 @import url("@fortawesome/fontawesome-free/css/fontawesome");
 @import url("@fortawesome/fontawesome-free/css/brands");
 @import url("@fortawesome/fontawesome-free/css/solid");
-@import url("../dependencies/fontawesome");
 @import url("../dependencies/animate");
 @import url("../dependencies/jquery-ui");
 @import url("../fonts");
@@ -13,6 +12,7 @@
 :root {
   --animate-duration: 300ms;
   --font-family: "Exo", system-ui;
+  --font-family-monospace: "Inconsolata", "Lucida Console", "Monaco", monospace;
   --color-text: #7c7c7c;
   --color-background: #fff;
 }
@@ -23,16 +23,16 @@
   position: relative;
   line-height: 16px;
   padding-left: 26px;
-}
 
-.check-label::before {
-  content: "";
-  size: 16px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  display: inline-block;
-  z-index: 99;
+  &::before {
+    content: "";
+    size: 16px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-block;
+    z-index: 99;
+  }
 }
 
 .clicked-on.check-label::before,
@@ -324,13 +324,13 @@
 
 .alert {
   border-radius: 4px;
+  border: 1px solid #fff;
   font-weight: 400;
   padding: 0.8rem;
   position: relative;
   text-align: left;
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
   text-shadow: 0 1px rgb(0 0 0 / 45%);
-  border: 1px solid #fff;
 
   & a {
     font-weight: bold;
@@ -693,67 +693,59 @@
   display: flex;
   position: relative;
   font-size: 0.8rem;
-}
-
-.l-sort-toolbar td {
-  vertical-align: middle;
-}
-
-.l-sort-toolbar td.toggle-all {
-  padding-top: 7px;
-  padding-right: 10px;
-}
-
-.l-sort-toolbar .toggle-all:hover {
-  color: #4b4b4b;
-}
 
-.l-sort-toolbar .toggle-all:active {
-  color: #3b9de8;
-}
+  & form {
+    display: flex;
+  }
 
-.l-sort-toolbar .sort-by {
-  cursor: pointer;
-  text-transform: uppercase;
-  padding: 6px 12px 0;
+  & .toggle-all:hover {
+    color: #4b4b4b;
+  }
 
-  & b {
-    text-transform: uppercase;
-    padding-left: 3px;
-    font-size: 0.8rem;
+  & .toggle-all:active {
+    color: #3b9de8;
   }
 
-  &:hover {
-    color: #4b4b4b;
+  & .sort-by {
+    cursor: pointer;
+    text-transform: uppercase;
+    padding: 6px 12px 0;
 
-    & b {
+    &:hover {
       color: #4b4b4b;
+
+      & b {
+        color: #4b4b4b;
+      }
     }
-  }
 
-  &:active {
-    color: #3b9de8;
+    &:active {
+      color: #3b9de8;
+
+      & b {
+        color: #3b9de8;
+      }
+    }
 
     & b {
-      color: #3b9de8;
+      text-transform: uppercase;
+      padding-left: 3px;
+      font-size: 0.8rem;
     }
   }
 }
 
 .l-sort-toolbar__filter-apply {
-  float: left;
-  width: 32px;
-  height: 30px;
+  display: flex;
+  align-items: center;
   border: 1px solid #ddd;
-  background-color: rgb(255 255 255 / 90%);
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
   border-left: 0;
+  background-color: rgb(255 255 255 / 90%);
+  border-radius: 0 4px 4px 0;
   box-shadow: inset 0 0 1px rgb(41 90 152 / 10%), inset 0 0 2px rgb(255 255 255 / 100%);
   text-shadow: 1px 1px rgb(255 255 255 / 90%);
   color: #069;
-  padding: 0;
+  padding: 0 10px;
   font-size: 0.9em;
 
   &:hover {
@@ -768,7 +760,6 @@
 }
 
 .l-sort-toolbar__search {
-  float: left;
   size: 25px;
   background-position: -333px -37px;
   border: none;
@@ -832,54 +823,6 @@
   line-height: 2rem;
 }
 
-.l-select {
-  width: 178px;
-  border: 1px solid #ddd;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-  overflow-x: hidden;
-  position: relative;
-  display: inline-block;
-  border-style: solid none solid solid;
-  font-weight: 400;
-}
-
-.body-firewall.lang-bg .l-select {
-  width: 120px;
-}
-
-.body-firewall.lang-el .l-select {
-  max-width: 90px;
-}
-
-.body-mail.lang-el .l-select {
-  max-width: 80px;
-}
-
-.body-mail.lang-el td.l-sort-toolbar__search-box {
-  display: none;
-}
-
-.body-cron.lang-el .search-input {
-  max-width: 80px;
-}
-
-.body-cron.lang-el .l-select {
-  max-width: 120px;
-}
-
-.lang-ru .l-select {
-  width: 170px;
-}
-
-.body-firewall.lang-ru .l-select {
-  max-width: 125px;
-}
-
-.body-firewall.lang-es .l-select {
-  max-width: 135px;
-}
-
 .lang-bg .l-stat__col-title {
   font-size: 0.75rem;
   font-weight: bold;
@@ -890,52 +833,40 @@
   font-size: 0.85rem;
 }
 
-.l-select::after {
-  pointer-events: none;
-  size: 7px 4px;
-  margin-top: -2px;
-  content: "";
-  position: absolute;
-  right: 10px;
-  top: 50%;
-}
-
-.l-select select {
-  border: 0;
-  background-color: transparent;
-  color: inherit;
-  height: 28px;
+.l-sort-toolbar .form-select {
   min-width: 175px;
-  padding-left: 10px;
-  background-image: url("/images/arrow.svg");
-  background-repeat: no-repeat;
-  background-size: 14px auto;
-  background-position: right 7px center;
-  appearance: none;
-}
+  color: inherit;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  box-shadow: none;
+  border-color: #ddd;
+  border-right-color: transparent;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 
-.l-select select:focus {
-  border: 0;
-  outline: 0;
+  &:focus {
+    box-shadow: none;
+  }
 }
 
-.lang-ru .l-select select {
-  min-width: 215px;
-}
+.l-sort-toolbar .form-control {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  box-shadow: none;
+  border-color: #ddd;
+  border-right-color: transparent;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 
-.l-select select option {
-  padding: 7px;
-}
+  &:hover {
+    border-right-color: #94c8f0;
+  }
 
-.l-sort-toolbar .l-select {
-  float: left;
-  border: 1px solid #ddd;
-  background-color: rgb(255 255 255 / 90%);
-  border-radius: 4px;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-  border-right: 0;
-  text-shadow: 1px 1px rgb(255 255 255 / 90%);
+  &:focus {
+    border-right-color: #008fee;
+  }
+
+  &.activated {}
 }
 
 .l-unit {
@@ -1127,7 +1058,6 @@
   padding-top: 12px;
   vertical-align: top;
   padding-bottom: 10px;
-  cursor: default;
 }
 
 .l-unit__col--left {
@@ -1552,18 +1482,6 @@ body.mobile .l-unit-toolbar__col--right {
   font-size: 0.8rem;
 }
 
-.timer-container {
-  height: 30px;
-}
-
-.timer-button {
-  cursor: pointer;
-  text-decoration: underline;
-  margin: 6px 0 2px 2px;
-  width: 20px;
-  float: left;
-}
-
 .spinner {
   -webkit-mask-box-image:
     radial-gradient(
@@ -1732,14 +1650,6 @@ body.mobile .l-unit-toolbar__col--right {
   margin-right: 20px;
 }
 
-.jump-top {
-  margin-top: -60px;
-}
-
-.jump-small-top {
-  margin-top: -12px;
-}
-
 .form-label {
   margin-bottom: 5px;
   display: inline-block;
@@ -1765,31 +1675,35 @@ body.mobile .l-unit-toolbar__col--right {
   appearance: none;
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 
+  &:hover {
+    border-color: #94c8f0;
+  }
+
+  &:focus {
+    border-color: #008fee;
+    background-color: #d7f9ff;
+    color: #333;
+  }
+
   &.list-editor {
-    border: none;
+    border-color: transparent;
     box-shadow: none;
     position: absolute;
     padding-top: 7px;
     padding-bottom: 7px;
     width: auto;
-    top: 2px;
-    left: 2px;
-    right: 23px;
+    top: 1px;
+    left: 1px;
+    right: 30px;
+
+    &:hover {
+      border-color: transparent;
+    }
 
     &:focus {
       background-color: #fff;
     }
   }
-
-  &:hover {
-    border: 1px solid #94c8f0;
-  }
-
-  &:focus {
-    border: 1px solid #008fee;
-    background-color: #d7f9ff;
-    color: #333;
-  }
 }
 
 .form-select {
@@ -1812,11 +1726,11 @@ body.mobile .l-unit-toolbar__col--right {
   box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 
   &:hover {
-    border: 1px solid #94c8f0;
+    border-color: #94c8f0;
   }
 
   &:focus {
-    border: 1px solid #008fee;
+    border-color: #008fee;
   }
 }
 
@@ -2037,7 +1951,7 @@ body.mobile .l-unit-toolbar__col--right {
 .to-shortcuts:hover {
   color: #0077c6;
   text-shadow: 1px 1px rgb(255 255 255 / 50%);
-  border: 1px solid #54a6e5;
+  border-color: #54a6e5;
   background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(190 221 246 / 100%) 51%, rgb(227 240 251 / 100%) 100%);
   box-shadow:
     0 1px 3px rgb(0 0 0 / 25%),
@@ -2048,7 +1962,7 @@ body.mobile .l-unit-toolbar__col--right {
 
 .to-top:focus,
 .to-shortcuts:focus {
-  border: 1px solid #0066b4;
+  border-color: #0066b4;
   background: linear-gradient(to bottom, rgb(194 224 248 / 100%) 0%, rgb(162 207 244 / 100%) 51%, rgb(210 232 250 / 100%) 100%);
   color: #517bab;
   text-shadow: 0 -1px 2px rgb(255 255 255 / 85%);
@@ -2060,7 +1974,7 @@ body.mobile .l-unit-toolbar__col--right {
 
 .to-top:active,
 .to-shortcuts:active {
-  border: 1px solid #378ccd;
+  border-color: #378ccd;
   background-color: #378ccd;
 }
 
@@ -2315,7 +2229,7 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 .console-output {
-  font-family: Inconsolata, "Lucida Console", Monaco, monospace;
+  font-family: var(--font-family-monospace);
   font-size: 0.92rem;
   color: #202020;
 }
@@ -2564,43 +2478,6 @@ form#vstobjects.suspended {
   text-shadow: 0 !important;
 }
 
-.search-input {
-  color: inherit;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  size: 130px 30px;
-  line-height: 28px;
-  padding-left: 7px;
-  float: left;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-  border-right: 0;
-  transition: width 0.2s ease-out;
-}
-
-.lang-ru .search-input {
-  width: 74px;
-}
-
-.lang-ru .search-input.activated {
-  width: 70px;
-}
-
-.search-input.activated {
-  width: 150px;
-  visibility: visible;
-}
-
-.lang-fr .search-input,
-.lang-de .search-input,
-.lang-nl .search-input {
-  width: 100px;
-}
-
-.lang-de .l-sort-toolbar .l-select {
-  max-width: 140px;
-}
-
 .footer-banner {
   width: 100%;
   text-align: center;
@@ -2664,11 +2541,6 @@ form#vstobjects.suspended {
   color: #fff;
 }
 
-.l-sort-toolbar table td {
-  float: left;
-  margin-left: 10px;
-}
-
 .l-sort-toolbar__search-box {
   margin-left: 12px;
 }
@@ -3045,6 +2917,10 @@ li[aria-expanded="true"] a {
   clear: both;
 }
 
+.jump-top {
+  margin-top: -60px;
+}
+
 .u-block {
   display: block !important;
 }
@@ -3173,7 +3049,7 @@ li[aria-expanded="true"] a {
 }
 
 .u-console {
-  font-family: Inconsolata, "Lucida Console", Monaco, monospace !important;
+  font-family: var(--font-family-monospace) !important;
   white-space: pre !important;
   line-height: 1.2 !important;
 }

web/css/src/themes/vestia.css

@@ -267,13 +267,13 @@ strong {
 }
 
 .form-select:focus {
-  border: 1px solid #ff6701;
+  border-color: #ff6701;
   color: #333;
 }
 
 .form-control:hover,
 .form-select:hover {
-  border: 1px solid #e95e00;
+  border-color: #e95e00;
 }
 
 .l-stat {
@@ -286,18 +286,19 @@ strong {
 }
 
 .l-sort-toolbar__filter-apply {
-  background-color: #cacaca !important;
-  border-radius: 0 !important;
+  background-color: #cacaca;
+  border-radius: 0;
   color: #fff;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 35%) !important;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
 
   &:hover {
     color: #777;
-    text-shadow: 0 1px 2px rgb(255 255 255 / 45%) !important;
+    background-color: #cacaca;
+    text-shadow: 0 1px 2px rgb(255 255 255 / 45%);
   }
 
   &:active {
-    text-shadow: none !important;
+    text-shadow: none;
     color: #a9cc06;
   }
 }
@@ -343,12 +344,14 @@ strong {
   font-size: 0.75rem !important;
 }
 
-.search-input {
-  border-radius: 0 !important;
-}
+.l-sort-toolbar .form-control {
+  &:hover {
+    border-right-color: #e95e00;
+  }
 
-.l-sort-toolbar .l-select {
-  border-radius: 0 !important;
+  &:focus {
+    border-right-color: #e95e00;
+  }
 }
 
 .l-unit__name {
@@ -373,11 +376,6 @@ strong {
   line-height: 1rem !important;
 }
 
-.form-control.list-editor:hover,
-.form-control.list-editor:focus {
-  border: none !important;
-}
-
 .shortcuts {
   border-color: #111;
   border-radius: 2px;
@@ -413,11 +411,6 @@ strong {
   font-size: 15px !important;
 }
 
-.body-firewall.lang-el .l-select {
-  max-width: 60px !important;
-  text-overflow: ellipsis;
-}
-
 .l-stat__col .fas {
   display: none !important;
 }

web/js/app.js

@@ -992,7 +992,7 @@ function checkedAll(frmname) {
 
 function doSearch(url) {
     var url = url || '/search/';
-    var loc = url + '?q=' + $('.search-input').val() + '&token=' +  $('input[name="token"]').val();
+    var loc = url + '?q=' + $('.js-search-input').val() + '&token=' +  $('input[name="token"]').val();
     location.href = loc;
     return false;
 }

web/js/init.js

@@ -55,30 +55,30 @@ $(document).ready(function(){
 
             // SEARCH BOX
 
-            $('.l-sort-toolbar__search, .l-sort-toolbar__search-box .search-input').hover(function(){
+            $('.l-sort-toolbar__search, .l-sort-toolbar__search-box .js-search-input').hover(function(){
               clearTimeout(VE.tmp.search_display_interval);
               clearTimeout(VE.tmp.search_hover_interval);
-              VE.tmp.search_display_interval = setTimeout(function(){$('.search-input').addClass('activated');}, 150);
+              VE.tmp.search_display_interval = setTimeout(function(){$('.js-search-input').addClass('activated');}, 150);
             }, function(){
               clearTimeout(VE.tmp.search_display_interval);
               clearTimeout(VE.tmp.search_hover_interval);
               VE.tmp.search_hover_interval = setTimeout(function(){
-                if(!VE.tmp.search_activated && !$(".search-input").val().length){
-                  $(".search-input").removeClass('activated');
+                if(!VE.tmp.search_activated && !$(".js-search-input").val().length){
+                  $(".js-search-input").removeClass('activated');
                 }
               }, 600);
             });
 
-            $('.search-input').focus(function(){
+            $('.js-search-input').focus(function(){
               VE.tmp.search_activated = 1;
               clearTimeout(VE.tmp.search_hover_interval);
             });
-            $('.search-input').blur(function(){
+            $('.js-search-input').blur(function(){
               VE.tmp.search_activated = 0;
               clearTimeout(VE.tmp.search_hover_interval);
               VE.tmp.search_hover_interval = setTimeout(function(){
-                if(!$(".search-input").val().length){
-                  $(".search-input").removeClass('activated');
+                if(!$(".js-search-input").val().length){
+                  $(".js-search-input").removeClass('activated');
                 }
               }, 600);
             });
@@ -181,7 +181,7 @@ $(document).ready(function(){
 
 
               shortcut.add("f", function(){
-                $('.search-input').addClass('activated').focus();
+                $('.js-search-input').addClass('activated').focus();
               }, {
                   'type':             'keydown',
                   'propagate':        false,
@@ -634,10 +634,11 @@ $(document).ready(function(){
             // todo: maybe give the save button id?
             $(".button[data-id=vstobjects][data-action=submit]").on('click', function(ev){
               let loadingAnimationEle = document.createElement("div");
-              loadingAnimationEle.innerHTML = '<div class="timer-container" style="float:right;"><div class="timer-button spinner"><div class="spinner-inner"></div><div class="spinner-mask"></div> <div class="spinner-mask-two"></div></div></div>';
+              loadingAnimationEle.className = "spinner";
+              loadingAnimationEle.innerHTML = '<div class="spinner-inner"></div><div class="spinner-mask"></div> <div class="spinner-mask-two"></div>';
+
               // improve alignment
               var buttonStrip = this.closest(".l-unit-toolbar__buttonstrip");
-              buttonStrip.style.marginTop = "8px";
               // this both gives an indication that we've clicked and is loading, also prevents double-clicking/clicking-on-something-else while loading.
               $(".button[data-id=vstobjects][data-action=submit]").replaceWith(loadingAnimationEle);
               $(".button").replaceWith('');

web/js/pages/edit_web.js

@@ -72,7 +72,7 @@ App.Listeners.WEB.keypress_ftp_username = function() {
 
 App.Actions.WEB.update_ftp_path_hint = function(elm, hint) {
     if (hint.trim() == '') {
-        $(elm).parent().find('.v-ftp-path-hint').html('');
+        $(elm).parent().find('.js-ftp-path-hint').html('');
     }
 
     if (hint[0] != '/') {
@@ -81,11 +81,11 @@ App.Actions.WEB.update_ftp_path_hint = function(elm, hint) {
 
     hint = hint.replace(/\/(\/+)/g, '/');
 
-    $(elm).parent().find('.v-ftp-path-hint').text(hint);
+    $(elm).parent().find('.js-ftp-path-hint').text(hint);
 }
 
 App.Listeners.WEB.keypress_ftp_path = function() {
-    var ftp_path_inputs = $('.v-ftp-path');
+    var ftp_path_inputs = $('.js-ftp-path');
     $.each(ftp_path_inputs, function(i, ref) {
         var ref = $(ref);
         var current_val = ref.val();

web/templates/pages/add_access_key.html

@@ -3,12 +3,12 @@
   <div class="l-sort__inner">
     <div class="l-unit-toolbar__buttonstrip">
       <a class="button button-secondary" id="btn-back" href="/list/access-key/">
-        <i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
+        <i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?>
       </a>
     </div>
     <div class="l-unit-toolbar__buttonstrip">
       <a href="#" class="button" data-action="submit" data-id="vstobjects">
-        <i class="fas fa-floppy-disk status-icon purple"></i><?= _('Save'); ?>
+        <i class="fas fa-floppy-disk status-icon purple"></i><?=_('Save');?>
       </a>
     </div>
   </div>
@@ -21,21 +21,21 @@
     <input type="hidden" name="ok" value="Add">
 
     <div class="form-container">
-      <h1 class="form-title"><?= _('Adding Access Key'); ?></h1>
+      <h1 class="form-title"><?=_('Adding Access Key');?></h1>
       <?php show_alert_message($_SESSION);?>
       <div class="u-max-width400">
-        <p class="u-mb10"><?= _('Permissions'); ?></p>
+        <p class="u-mb10"><?=_('Permissions');?></p>
         <?php foreach ($apis as $api_name => $api_data) { ?>
           <div class="form-check">
             <input class="form-check-input" type="checkbox" value="<?= $api_name ?>" name="v_apis[]" id="v_apis_<?= $api_name ?>" tabindex="5">
             <label for="v_apis_<?= $api_name ?>">
-              <?= _($api_name); ?>
+              <?=_($api_name); ?>
             </label>
           </div>
         <?php } ?>
         <div class="u-mt15">
           <label for="v_comment" class="form-label">
-            <?= _('Comment'); ?> <span class="optional">(<?= _('optional'); ?>)</span>
+            <?=_('Comment');?> <span class="optional">(<?=_('optional');?>)</span>
           </label>
           <input type="text" class="form-control" name="v_comment" id="v_comment" maxlength="255">
         </div>

web/templates/pages/add_db.html

@@ -35,7 +35,7 @@
         <?php } ?>
         <?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
           <p class="hint u-mb20">
-            <?=sprintf(_('Prefix %s will be automatically added to database name and database user'),'<b>'.$user_plain.'_</b>'); ?>
+            <?=sprintf(_('Prefix %s will be automatically added to database name and database user'),'<b>'.$user_plain.'_</b>');?>
           </p>
           <div class="u-mb10">
             <label for="v_database" class="form-label"><?=_('Database');?></label>

web/templates/pages/edit_ip.html

@@ -31,7 +31,7 @@
           <input type="text" class="form-control" name="v_netmask" id="v_netmask" value="<?=htmlentities(trim($v_netmask, "'"))?>" disabled>
         </div>
         <div class="u-mb10">
-          <label for="v_interface" class="form-label"><?=_('Interface'); ?></label>
+          <label for="v_interface" class="form-label"><?=_('Interface');?></label>
           <input type="text" class="form-control" name="v_interface" id="v_interface" value="<?=htmlentities(trim($v_interface, "'"))?>" disabled>
         </div>
         <div class="form-check u-mb10">

web/templates/pages/edit_server.html

@@ -102,12 +102,12 @@
           </summary>
           <div class="collapse-content u-pl50">
             <p class="u-mb10">
-              <?=_('Version'); ?>: <span class="optional"><?=$_SESSION['VERSION'];?></span>
+              <?=_('Version');?>: <span class="optional"><?=$_SESSION['VERSION'];?></span>
             </p>
             <?php if ($_SESSION['RELEASE_BRANCH'] !== 'release') {?>
-              <p><?=_('Release'); ?>: <span class="optional"><?=$_SESSION['RELEASE_BRANCH'];?></span></p>
+              <p><?=_('Release');?>: <span class="optional"><?=$_SESSION['RELEASE_BRANCH'];?></span></p>
             <?php } ?>
-            <p class="u-mb5"><?=_('Options'); ?></p>
+            <p class="u-mb5"><?=_('Options');?></p>
             <div class="form-check">
               <input class="form-check-input" type="checkbox" name="v_debug_mode" id="v_debug_mode" <?php if ((isset($_SESSION['DEBUG_MODE'])) && (!empty($_SESSION['DEBUG_MODE'])) && ($_SESSION['DEBUG_MODE'] == "true")) echo 'checked' ?>>
               <label for="v_debug_mode">
@@ -315,8 +315,8 @@
                     <?=_('MySQL Support');?> <a href="/edit/server/mysql/"><i class="fas fa-pencil status-icon orange icon-pad-right"></i></a>
                   </label>
                   <select class="form-select" name="v_mysql" id="v_mysql" disabled>
-                    <option value="no"><?=_('No'); ?></option>
-                    <option value="yes" <?php if($v_mysql == 'yes') echo 'selected' ?>><?=_('Yes'); ?></option>
+                    <option value="no"><?=_('No');?></option>
+                    <option value="yes" <?php if($v_mysql == 'yes') echo 'selected' ?>><?=_('Yes');?></option>
                   </select>
                 </div>
                 <!-- MySQL / MariaDB Options-->
@@ -330,8 +330,8 @@
                       <?=_('phpMyAdmin Single Sign On');?><span class="hint">(<a href="https://docs.hestiacp.com/admin_docs/database/phpmyadmin-sso.html" target="_blank"><?=_('More info');?></a>)</span>
                     </label>
                     <select class="form-select" name="v_phpmyadmin_key" id="v_phpmyadmin_key" <?php if ($_SESSION['API'] != 'yes'){ echo "disabled"; }?>>
-                      <option value="no"><?=_('Disabled'); ?></option>
-                      <option value='yes' <?php if($_SESSION['PHPMYADMIN_KEY'] != ''){ echo 'selected="selected"'; }; ?>><?=_('Enabled'); ?></option>
+                      <option value="no"><?=_('Disabled');?></option>
+                      <option value='yes' <?php if($_SESSION['PHPMYADMIN_KEY'] != ''){ echo 'selected="selected"'; }; ?>><?=_('Enabled');?></option>
                     </select>
                   </div>
                 <?php } ?>
@@ -374,8 +374,8 @@
                       <?=_('PostgreSQL Support');?> <a href="/edit/server/postgresql/"><i class="fas fa-pencil status-icon orange icon-pad-right"></i></a>
                     </label>
                     <select class="form-select" name="v_pgsql" id="v_pgsql" disabled>
-                      <option value="no"><?=_('No'); ?></option>
-                      <option value='yes' <?php if($v_pgsql == 'yes') echo 'selected' ?>><?=_('Yes'); ?></option>
+                      <option value="no"><?=_('No');?></option>
+                      <option value='yes' <?php if($v_pgsql == 'yes') echo 'selected' ?>><?=_('Yes');?></option>
                     </select>
                   </div>
                   <div class="u-mb20">
@@ -424,8 +424,8 @@
               <div class="u-mb10">
                 <label for="v_backup" class="form-label"><?=_('Local backup');?></label>
                 <select class="form-select" name="v_backup" id="v_backup">
-                  <option value="no"><?=_('No'); ?></option>
-                  <option value="yes" <?php if($v_backup == 'yes') echo 'selected' ?>><?=_('Yes'); ?></option>
+                  <option value="no"><?=_('No');?></option>
+                  <option value="yes" <?php if($v_backup == 'yes') echo 'selected' ?>><?=_('Yes');?></option>
                 </select>
               </div>
               <div class="u-mb10">
@@ -467,10 +467,10 @@
                     <?=_('Protocol');?> <a target="_blank" href="http://docs.hestiacp.com/admin_docs/backups.html#what-kind-of-protocols-are-currently-supported"><i class="fas fa-circle-question"></i></a>
                   </label>
                   <select class="form-select" name="v_backup_type" id="backup_type">
-                    <option value='ftp'><?=_('ftp'); ?></option>
-                    <option value='sftp' <?php if((!empty($v_backup_type)) && (trim($v_backup_type,"'")  == 'sftp' )) echo 'selected="selected"'; ?>><?=_('sftp'); ?></option>
-                    <option value="b2" <?php if((!empty($v_backup_type)) && (trim($v_backup_type,"'")  == 'b2' )) echo 'selected="selected"'; ?>><?=_('Backblaze'); ?>
-                    <option value="rclone" <?php if((!empty($v_backup_type)) && (trim($v_backup_type,"'")  == 'rclone' )) echo 'selected="selected"'; ?>><?=_('Rclone'); ?>
+                    <option value='ftp'><?=_('ftp');?></option>
+                    <option value='sftp' <?php if((!empty($v_backup_type)) && (trim($v_backup_type,"'")  == 'sftp' )) echo 'selected="selected"'; ?>><?=_('sftp');?></option>
+                    <option value="b2" <?php if((!empty($v_backup_type)) && (trim($v_backup_type,"'")  == 'b2' )) echo 'selected="selected"'; ?>><?=_('Backblaze');?>
+                    <option value="rclone" <?php if((!empty($v_backup_type)) && (trim($v_backup_type,"'")  == 'rclone' )) echo 'selected="selected"'; ?>><?=_('Rclone');?>
                   </select>
                 </div>
                 <div id="backup_sftp" style="display: <?php if ((!empty($v_backup_type)) && !in_array(trim($v_backup_type, "'"),array('ftp','sftp'))){ echo 'none';} else {echo 'block';} ?>">
@@ -626,16 +626,16 @@
                 <div class="u-mb10">
                   <label for="api-system" class="form-label"><?=_('Enable API access');?></label>
                   <select class="form-select" name="v_api_system" id="api-system">
-                    <option value='0' <?php if(empty($_SESSION['API_SYSTEM']) || $_SESSION['API_SYSTEM'] == '0') echo 'selected' ?>><?=_('Disabled'); ?></option>
-                    <option value='1' <?php if($_SESSION['API_SYSTEM'] == '1') echo 'selected' ?>><?=_('Enabled for admin'); ?></option>
-                    <option value='2' <?php if($_SESSION['API_SYSTEM'] == '2') echo 'selected' ?>><?=_('Enabled for all users'); ?></option>
+                    <option value='0' <?php if(empty($_SESSION['API_SYSTEM']) || $_SESSION['API_SYSTEM'] == '0') echo 'selected' ?>><?=_('Disabled');?></option>
+                    <option value='1' <?php if($_SESSION['API_SYSTEM'] == '1') echo 'selected' ?>><?=_('Enabled for admin');?></option>
+                    <option value='2' <?php if($_SESSION['API_SYSTEM'] == '2') echo 'selected' ?>><?=_('Enabled for all users');?></option>
                   </select>
                 </div>
                 <div class="u-mb10">
                   <label for="api" class="form-label"><?=_('Enable legacy API access');?></label>
                   <select class="form-select" name="v_api" id="api">
-                    <option value="yes"><?=_('Yes'); ?></option>
-                    <option value="no" <?php if($_SESSION['API'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                    <option value="yes"><?=_('Yes');?></option>
+                    <option value="no" <?php if($_SESSION['API'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                   </select>
                 </div>
                 <div id="security_ip" style="<?php if ($_SESSION['API'] == "no" && $_SESSION['API_SYSTEM'] == '0') echo 'display:none;';?>">
@@ -656,15 +656,15 @@
                 <div class="u-mb10">
                   <label for="v_login_style" class="form-label"><?=_('Login screen style');?></label>
                   <select class="form-select" name="v_login_style" id="v_login_style">
-                    <option value="default"><?=_('Default'); ?></option>
-                    <option value="old" <?php if($_SESSION['LOGIN_STYLE'] == 'old') echo 'selected' ?>><?=_('Old Style'); ?></option>
+                    <option value="default"><?=_('Default');?></option>
+                    <option value="old" <?php if($_SESSION['LOGIN_STYLE'] == 'old') echo 'selected' ?>><?=_('Old Style');?></option>
                   </select>
                 </div>
                 <div class="u-mb10">
                   <label for="v_policy_system_password_reset" class="form-label"><?=_('Allow users to reset their passwords');?></label>
                   <select class="form-select" name="v_policy_system_password_reset" id="v_policy_system_password_reset">
-                    <option value="yes"><?=_('Yes'); ?></option>
-                    <option value="no" <?php if($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                    <option value="yes"><?=_('Yes');?></option>
+                    <option value="no" <?php if($_SESSION['POLICY_SYSTEM_PASSWORD_RESET'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                   </select>
                 </div>
                 <div class="u-mb20">
@@ -694,22 +694,22 @@
                   <div class="u-mb10">
                     <label for="v_policy_system_protected_admin" class="form-label"><?=_('Restrict access to read-only for other administrators');?></label>
                     <select class="form-select" name="v_policy_system_protected_admin" id="v_policy_system_protected_admin">
-                      <option value="yes"><?=_('Yes'); ?></option>
-                      <option value="no" <?php if($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] !== 'yes') echo 'selected' ?>><?=_('No'); ?></option>
+                      <option value="yes"><?=_('Yes');?></option>
+                      <option value="no" <?php if($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] !== 'yes') echo 'selected' ?>><?=_('No');?></option>
                     </select>
                   </div>
                   <div class="u-mb10">
                     <label for="v_policy_system_hide_admin" class="form-label"><?=_('Hide account from other administrators');?></label>
                     <select class="form-select" name="v_policy_system_hide_admin" id="v_policy_system_hide_admin">
-                      <option value="yes"><?=_('Yes'); ?></option>
-                      <option value="no" <?php if($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] !== 'yes') echo 'selected' ?>><?=_('No'); ?></option>
+                      <option value="yes"><?=_('Yes');?></option>
+                      <option value="no" <?php if($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] !== 'yes') echo 'selected' ?>><?=_('No');?></option>
                     </select>
                   </div>
                   <div class="u-mb10">
                     <label for="v_policy_system_hide_services" class="form-label"><?=_('Do not allow other administrators to access Server Settings');?></label>
                     <select class="form-select" name="v_policy_system_hide_services" id="v_policy_system_hide_services">
-                      <option value="yes"><?=_('Yes'); ?></option>
-                      <option value="no" <?php if($_SESSION['POLICY_SYSTEM_HIDE_SERVICES'] !== 'yes') echo 'selected' ?>><?=_('No'); ?></option>
+                      <option value="yes"><?=_('Yes');?></option>
+                      <option value="no" <?php if($_SESSION['POLICY_SYSTEM_HIDE_SERVICES'] !== 'yes') echo 'selected' ?>><?=_('No');?></option>
                     </select>
                   </div>
                 </div>
@@ -728,44 +728,44 @@
                       <?=_('Allow suspended users to log in with read-only access');?> <span class="hint">(<?=_('Preview');?>)</span>
                     </label>
                     <select class="form-select" name="v_policy_user_view_suspended" id="v_policy_user_view_suspended">
-                      <option value="yes" <?php if($_SESSION['POLICY_USER_VIEW_SUSPENDED'] !== 'no') echo 'selected' ?>><?=_('Yes'); ?></option>
-                      <option value="no" <?php if($_SESSION['POLICY_USER_VIEW_SUSPENDED'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                      <option value="yes" <?php if($_SESSION['POLICY_USER_VIEW_SUSPENDED'] !== 'no') echo 'selected' ?>><?=_('Yes');?></option>
+                      <option value="no" <?php if($_SESSION['POLICY_USER_VIEW_SUSPENDED'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                     </select>
                   </div>
                 <?php } ?>
                 <div class="u-mb10">
                   <label for="v_policy_user_edit_details" class="form-label"><?=_('Allow users to edit their account details');?></label>
                   <select class="form-select" name="v_policy_user_edit_details" id="v_policy_user_edit_details">
-                    <option value="yes" <?php if($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'no') echo 'selected' ?>><?=_('Yes'); ?></option>
-                    <option value="no" <?php if($_SESSION['POLICY_USER_EDIT_DETAILS'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                    <option value="yes" <?php if($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'no') echo 'selected' ?>><?=_('Yes');?></option>
+                    <option value="no" <?php if($_SESSION['POLICY_USER_EDIT_DETAILS'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                   </select>
                 </div>
                 <div class="u-mb10">
                   <label for="v_policy_user_edit_web_templates" class="form-label"><?=_('Allow users to change templates when editing web domains');?></label>
                   <select class="form-select" name="v_policy_user_edit_web_templates" id="v_policy_user_edit_web_templates">
-                    <option value="yes" <?php if($_SESSION['POLICY_USER_EDIT_WEB_TEMPLATES'] !== 'no') echo 'selected' ?>><?=_('Yes'); ?></option>
-                    <option value="no" <?php if($_SESSION['POLICY_USER_EDIT_WEB_TEMPLATES'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                    <option value="yes" <?php if($_SESSION['POLICY_USER_EDIT_WEB_TEMPLATES'] !== 'no') echo 'selected' ?>><?=_('Yes');?></option>
+                    <option value="no" <?php if($_SESSION['POLICY_USER_EDIT_WEB_TEMPLATES'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                   </select>
                 </div>
                 <div class="u-mb10">
                   <label for="v_policy_user_edit_dns_templates" class="form-label"><?=_('Allow users to change templates when editing DNS zones');?></label>
                   <select class="form-select" name="v_policy_user_edit_dns_templates" id="v_policy_user_edit_dns_templates">
-                    <option value="yes" <?php if($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] !== 'no') echo 'selected' ?>><?=_('Yes'); ?></option>
-                    <option value="no" <?php if($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                    <option value="yes" <?php if($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] !== 'no') echo 'selected' ?>><?=_('Yes');?></option>
+                    <option value="no" <?php if($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                   </select>
                 </div>
                 <div class="u-mb10">
                   <label for="v_policy_user_view_logs" class="form-label"><?=_('Allow users to view action and login history logs');?></label>
                   <select class="form-select" name="v_policy_user_view_logs" id="v_policy_user_view_logs">
-                    <option value="yes" <?php if($_SESSION['POLICY_USER_VIEW_LOGS'] !== 'no') echo 'selected' ?>><?=_('Yes'); ?></option>
-                    <option value="no" <?php if($_SESSION['POLICY_USER_VIEW_LOGS'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                    <option value="yes" <?php if($_SESSION['POLICY_USER_VIEW_LOGS'] !== 'no') echo 'selected' ?>><?=_('Yes');?></option>
+                    <option value="no" <?php if($_SESSION['POLICY_USER_VIEW_LOGS'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                   </select>
                 </div>
                 <div class="u-mb10">
                   <label for="v_policy_user_delete_logs" class="form-label"><?=_('Allow users to delete log history');?></label>
                   <select class="form-select" name="v_policy_user_delete_logs" id="v_policy_user_delete_logs">
-                    <option value="yes" <?php if($_SESSION['POLICY_USER_DELETE_LOGS'] !== 'no') echo 'selected' ?>><?=_('Yes'); ?></option>
-                    <option value="no" <?php if($_SESSION['POLICY_USER_DELETE_LOGS'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                    <option value="yes" <?php if($_SESSION['POLICY_USER_DELETE_LOGS'] !== 'no') echo 'selected' ?>><?=_('Yes');?></option>
+                    <option value="no" <?php if($_SESSION['POLICY_USER_DELETE_LOGS'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                   </select>
                 </div>
                 <p class="u-pt18" style="font-size:1rem;padding-bottom:12px;">
@@ -774,8 +774,8 @@
                 <div class="u-mb10">
                   <label for="v_enforce_subdomain_ownership" class="form-label"><?=_('Enforce subdomain ownership');?></label>
                   <select class="form-select" name="v_enforce_subdomain_ownership" id="v_enforce_subdomain_ownership">
-                    <option value="yes"><?=_('Yes'); ?></option>
-                    <option value="no" <?php if($_SESSION['ENFORCE_SUBDOMAIN_OWNERSHIP'] == 'no') echo 'selected' ?>><?=_('No'); ?></option>
+                    <option value="yes"><?=_('Yes');?></option>
+                    <option value="no" <?php if($_SESSION['ENFORCE_SUBDOMAIN_OWNERSHIP'] == 'no') echo 'selected' ?>><?=_('No');?></option>
                   </select>
                 </div>
               </div>
@@ -793,29 +793,29 @@
               <div class="u-mb10">
                 <label for="v_plugin_app_installer" class="form-label"><?=_('Quick App Installer');?></label>
                 <select class="form-select" name="v_plugin_app_installer" id="v_plugin_app_installer">
-                  <option value="false"><?=_('No'); ?></option>
-                  <option value="true" <?php if($_SESSION['PLUGIN_APP_INSTALLER'] == 'true') echo 'selected' ?>><?=_('Yes'); ?></option>
+                  <option value="false"><?=_('No');?></option>
+                  <option value="true" <?php if($_SESSION['PLUGIN_APP_INSTALLER'] == 'true') echo 'selected' ?>><?=_('Yes');?></option>
                 </select>
               </div>
               <div class="u-mb10">
                 <label for="v_filemanager" class="form-label"><?=_('Filemanager');?></label>
                 <select class="form-select" name="v_filemanager" id="v_filemanager">
-                  <option value="false"><?=_('No'); ?></option>
-                  <option value="true" <?php if($_SESSION['FILE_MANAGER'] == 'true') echo 'selected' ?>><?=_('Yes'); ?></option>
+                  <option value="false"><?=_('No');?></option>
+                  <option value="true" <?php if($_SESSION['FILE_MANAGER'] == 'true') echo 'selected' ?>><?=_('Yes');?></option>
                 </select>
               </div>
               <div class="u-mb10">
                 <label for="v_quota" class="form-label"><?=_('FileSystem Disk Quota');?></label>
                 <select class="form-select" name="v_quota" id="v_quota">
-                  <option value="no"><?=_('No'); ?></option>
-                  <option value="yes" <?php if($_SESSION['DISK_QUOTA'] == 'yes') echo 'selected' ?>><?=_('Yes'); ?></option>
+                  <option value="no"><?=_('No');?></option>
+                  <option value="yes" <?php if($_SESSION['DISK_QUOTA'] == 'yes') echo 'selected' ?>><?=_('Yes');?></option>
                 </select>
               </div>
               <div class="u-mb10">
                 <label for="v_firewall" class="form-label"><?=_('Firewall');?></label>
                 <select class="form-select" name="v_firewall" id="v_firewall">
-                  <option value="no"><?=_('No'); ?></option>
-                  <option value="yes" <?php if($_SESSION['FIREWALL_SYSTEM'] == 'iptables') echo 'selected' ?>><?=_('Yes'); ?></option>
+                  <option value="no"><?=_('No');?></option>
+                  <option value="yes" <?php if($_SESSION['FIREWALL_SYSTEM'] == 'iptables') echo 'selected' ?>><?=_('Yes');?></option>
                 </select>
               </div>
             </div>

web/templates/pages/edit_user.html

@@ -107,7 +107,7 @@
             </div>
             <?php if (!empty($v_twofa)) { ?>
               <p class="u-mb10"><?=_('2FA Reset Code:').' '.$v_twofa; ?></p>
-              <p class="u-mb10"><?=_('Please scan the code below in your 2FA application:'); ?></p>
+              <p class="u-mb10"><?=_('Please scan the code below in your 2FA application:');?></p>
               <div><img class="qr-code" src="<?=htmlentities($v_qrcode); ?>" alt=""></div>
             <?php } ?>
           </div>
@@ -177,8 +177,8 @@
           <div class="u-mb10">
             <label for="v_sort_order" class="form-label"><?=_('Default list sort order');?></label>
             <select class="form-select" name="v_sort_order" id="v_sort_order">
-              <option value='date' <?php if($v_sort_order === 'date') echo 'selected' ?>><?=_('Date'); ?></option>
-              <option value='name' <?php if($v_sort_order === 'name') echo 'selected' ?>><?=_('Name'); ?></option>
+              <option value='date' <?php if($v_sort_order === 'date') echo 'selected' ?>><?=_('Date');?></option>
+              <option value='name' <?php if($v_sort_order === 'name') echo 'selected' ?>><?=_('Name');?></option>
             </select>
           </div>
         <?php if ($_SESSION['userContext'] === 'admin') {?>

web/templates/pages/edit_web.html

@@ -279,7 +279,7 @@
               <div class="form-check u-mb10">
                 <input class="form-check-input" type="checkbox" name="v_nginx_cache_check" id="v_nginx_cache_check" <?php if ($v_nginx_cache == 'yes') echo 'checked' ?> onclick="javascript:elementHideShow('v_nginx_duration');">
                 <label for="v_nginx_cache_check">
-                  <?=_('Enable FastCGI Cache'); ?>
+                  <?=_('Enable FastCGI Cache');?>
                   <a href="https://docs.hestiacp.com/admin_docs/web/fastcgi.html#nginx-fastcgi-cache" target="_blank">
                     <i class="fas fa-circle-question"></i>
                   </a>
@@ -288,7 +288,7 @@
               <div id="v_nginx_duration" class="u-pl30" style="display:<?php if ($v_nginx_cache != 'yes' ) { echo 'none';} else {echo 'block';}?> ;">
                 <div class="u-mb10">
                   <label for="v_nginx_cache_duration" class="form-label">
-                    <?=_('Cache Duration'); ?> <span class="optional"><?=_('For example: 30s, 10m or 1d');?>
+                    <?=_('Cache Duration');?> <span class="optional"><?=_('For example: 30s, 10m or 1d');?>
                   </label>
                   <input type="text" class="form-control" name="v_nginx_cache_duration" id="v_nginx_cache_duration" value="<?=htmlentities(trim($v_nginx_cache_duration, "'"))?>">
                 </div>
@@ -420,8 +420,8 @@
                   <label for="v_ftp_user[<?=$i ?>][v_ftp_path]" class="form-label"><?=_('Path');?></label>
                   <input type="hidden" name="v_ftp_pre_path" value="<?=!empty($v_ftp_pre_path) ? htmlentities(trim($v_ftp_pre_path, "'")) : '/'; ?>">
                   <input type="hidden" name="v_ftp_user[<?=$i ?>][v_ftp_path_prev]" value="<?php if (!empty($v_ftp_path)) echo ($v_ftp_path[0] != '/' ? '/' : '').htmlentities(trim($v_ftp_path, "'")) ?>">
-                  <input type="text" class="form-control v-ftp-path" name="v_ftp_user[<?=$i ?>][v_ftp_path]" id="v_ftp_user[<?=$i ?>][v_ftp_path]" value="<?php if (!empty($v_ftp_path)) echo ($v_ftp_path[0] != '/' ? '/' : '').htmlentities(trim($v_ftp_path, "'")) ?>">
-                  <span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path, "'"))?></span><span class="ftp-path-value v-ftp-path-hint"></span>
+                  <input type="text" class="form-control js-ftp-path" name="v_ftp_user[<?=$i ?>][v_ftp_path]" id="v_ftp_user[<?=$i ?>][v_ftp_path]" value="<?php if (!empty($v_ftp_path)) echo ($v_ftp_path[0] != '/' ? '/' : '').htmlentities(trim($v_ftp_path, "'")) ?>">
+                  <span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path, "'"))?></span><span class="ftp-path-value js-ftp-path-hint"></span>
                 </div>
                 <?php if ($ftp_user['is_new'] == 1): ?>
                   <div class="u-pl30 u-mb10">
@@ -471,8 +471,8 @@
     <div class="u-pl30 u-mb10">
       <label for="v_ftp_user[%INDEX%][v_ftp_path]" class="form-label"><?=_('Path');?></label>
       <input type="hidden" name="v_ftp_pre_path" value="">
-      <input type="text" class="form-control v-ftp-path" name="v_ftp_user[%INDEX%][v_ftp_path]" id="v_ftp_user[%INDEX%][v_ftp_path]" value="">
-      <span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path_new_user, "'"))?></span><span class="ftp-path-value v-ftp-path-hint"></span>
+      <input type="text" class="form-control js-ftp-path" name="v_ftp_user[%INDEX%][v_ftp_path]" id="v_ftp_user[%INDEX%][v_ftp_path]" value="">
+      <span class="ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path_new_user, "'"))?></span><span class="ftp-path-value js-ftp-path-hint"></span>
     </div>
     <div class="u-pl30 u-mb10">
       <label for="v_ftp_user[%INDEX%][v_ftp_email]" class="form-label"><?=_('Send FTP credentials to email');?></label>

web/templates/pages/generate_ssl.html

@@ -32,7 +32,7 @@
         </div>
         <div class="u-mb10">
           <label for="v_country" class="form-label">
-            <?=_('Country'); ?>
+            <?=_('Country');?>
             <span class="optional">(<?=_('2 letter code');?>)</span>
           </label>
           <input type="text" class="form-control" name="v_country" id="v_country" value="<?=htmlentities(trim($v_country, "'")) ?>">

web/templates/pages/list_access_key.html

@@ -14,7 +14,7 @@ if (!empty($_POST['ok'])) {
   <div class="l-sort__inner">
     <div class="l-unit-toolbar__buttonstrip">
       <a class="button button-secondary" id="btn-back" href="/list/access-key/">
-        <i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
+        <i class="fas fa-arrow-left status-icon blue"></i><?=_('Back');?>
       </a>
     </div>
   </div>
@@ -25,12 +25,12 @@ if (!empty($_POST['ok'])) {
   <form id="vstobjects">
 
     <div class="form-container">
-      <h1 class="form-title"><?= _("Access Key") ?></h1>
+      <h1 class="form-title"><?=_("Access Key"); ?></h1>
       <?php show_alert_message($_SESSION);?>
       <div class="u-max-width400">
         <?php if (!empty($key_data['ACCESS_KEY_ID'])) { ?>
           <div class="u-mt15 u-mb10">
-            <label for="access_key_id" class="form-label"><?= _('Access Key Id'); ?></label>
+            <label for="access_key_id" class="form-label"><?=_('Access Key Id');?></label>
             <input type="text" class="form-control" id="access_key_id" maxlength="255" readonly value="<?= htmlentities(trim($key_data['ACCESS_KEY_ID'], "'")) ?>">
           </div>
         <?php } ?>
@@ -38,21 +38,21 @@ if (!empty($_POST['ok'])) {
           <?php if (!empty($key_data['ACCESS_KEY_ID']) && !empty($key_data['SECRET_ACCESS_KEY'])) { ?>
             <div class="u-mb20">
               <label for="secret_key" class="form-label">
-                <?= _('Secret Key'); ?><br>
-                <span style="color:#ffd500;"><?= _('Warning! Last chance to save secret access key!'); ?></span>
+                <?=_('Secret Key');?><br>
+                <span style="color:#ffd500;"><?=_('Warning! Last chance to save secret access key!');?></span>
               </label>
               <input type="text" class="form-control" id="secret_key" maxlength="255" readonly value="<?= htmlentities(trim($key_data['SECRET_ACCESS_KEY'], "'")) ?>">
             </div>
           <?php } ?>
         <?php } ?>
-        <p class="u-mb10"><?= _('Permissions'); ?></p>
+        <p class="u-mb10"><?=_('Permissions');?></p>
         <ul class="u-list-bulleted u-mb10">
           <?php foreach ($key_data['PERMISSIONS'] as $api_name) { ?>
-            <li><?= _($api_name); ?></li>
+            <li><?=_($api_name); ?></li>
           <?php } ?>
         </ul>
         <div class="u-mb10">
-          <label for="service" class="form-label"><?= _('Comment'); ?></label>
+          <label for="service" class="form-label"><?=_('Comment');?></label>
           <input type="text" class="form-control" id="service" maxlength="255" readonly value="<?= htmlentities(trim($key_data['COMMENT'], "'")) ?>">
         </div>
       </div>

web/templates/pages/list_access_keys.html

@@ -16,12 +16,10 @@
       </div>
       <form action="/bulk/access-key/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-        <div class="l-select">
-          <select name="action" id="">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="delete"><?=_('delete');?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="delete"><?=_('delete');?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
           <i class="fas fa-arrow-right"></i>
         </button>

web/templates/pages/list_backup.html

@@ -11,12 +11,10 @@
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/backup/" method="post" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <option value="delete"><?=_('delete') ?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <option value="delete"><?=_('delete') ?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -25,7 +23,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_backup_detail.html

@@ -9,18 +9,16 @@
       <form action="/bulk/restore/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
         <input type="hidden" name="backup" value="<?=htmlentities($_GET['backup']); ?>">
-        <div class="l-select">
-          <select name="action" id="">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="restore"><?=_('restore') ?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="restore"><?=_('restore') ?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value=""><i class="fas fa-arrow-right"></i></button>
       </form>
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>">
+          <input type="search" class="form-control js-search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>">
           <button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value=""><i class="fas fa-magnifying-glass"></i></button>
         </form>
       </div>

web/templates/pages/list_backup_exclusions.html

@@ -9,7 +9,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_cron.html

@@ -27,16 +27,14 @@
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/cron/" method="post" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <?php if($panel[$user_plain]['CRON_REPORTS'] == 'yes') echo '<option value="delete-cron-reports">'._('turn off notifications').'</option>'; ?>
-              <?php if($panel[$user_plain]['CRON_REPORTS'] == 'no') echo '<option value="add-cron-reports">'._('turn on notifications').'</option>'; ?>
-              <option value="suspend"><?=_('suspend');?></option>
-              <option value="unsuspend"><?=_('unsuspend');?></option>
-              <option value="delete"><?=_('delete');?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <?php if($panel[$user_plain]['CRON_REPORTS'] == 'yes') echo '<option value="delete-cron-reports">'._('turn off notifications').'</option>'; ?>
+            <?php if($panel[$user_plain]['CRON_REPORTS'] == 'no') echo '<option value="add-cron-reports">'._('turn on notifications').'</option>'; ?>
+            <option value="suspend"><?=_('suspend');?></option>
+            <option value="unsuspend"><?=_('unsuspend');?></option>
+            <option value="delete"><?=_('delete');?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -45,7 +43,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_db.html

@@ -50,17 +50,15 @@
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/db/" method="post" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <?php if ($_SESSION['userContext'] === 'admin') {?>
-                <option value="rebuild"><?=_('rebuild');?></option>
-                <option value="suspend"><?=_('suspend');?></option>
-                <option value="unsuspend"><?=_('unsuspend');?></option>
-              <?php } ?>
-              <option value="delete"><?=_('delete');?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <?php if ($_SESSION['userContext'] === 'admin') {?>
+              <option value="rebuild"><?=_('rebuild');?></option>
+              <option value="suspend"><?=_('suspend');?></option>
+              <option value="unsuspend"><?=_('unsuspend');?></option>
+            <?php } ?>
+            <option value="delete"><?=_('delete');?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -69,7 +67,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_dns.html

@@ -25,17 +25,15 @@
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/dns/" method="post" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <?php if ($_SESSION['userContext'] === 'admin') {?>
-                <option value="rebuild"><?=_('rebuild');?></option>
-              <?php } ?>
-              <option value="suspend"><?=_('suspend');?></option>
-              <option value="unsuspend"><?=_('unsuspend');?></option>
-              <option value="delete"><?=_('delete');?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <?php if ($_SESSION['userContext'] === 'admin') {?>
+              <option value="rebuild"><?=_('rebuild');?></option>
+            <?php } ?>
+            <option value="suspend"><?=_('suspend');?></option>
+            <option value="unsuspend"><?=_('unsuspend');?></option>
+            <option value="delete"><?=_('delete');?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -44,7 +42,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_dns_public.html

@@ -25,17 +25,15 @@
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/dns/" method="post" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <?php if ($_SESSION['userContext'] === 'admin') {?>
-                <option value="rebuild"><?=_('rebuild');?></option>
-              <?php } ?>
-              <option value="suspend"><?=_('suspend');?></option>
-              <option value="unsuspend"><?=_('unsuspend');?></option>
-              <option value="delete"><?=_('delete');?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <?php if ($_SESSION['userContext'] === 'admin') {?>
+              <option value="rebuild"><?=_('rebuild');?></option>
+            <?php } ?>
+            <option value="suspend"><?=_('suspend');?></option>
+            <option value="unsuspend"><?=_('unsuspend');?></option>
+            <option value="delete"><?=_('delete');?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -44,7 +42,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_dns_rec.html

@@ -28,14 +28,12 @@
         <form action="/bulk/dns/" method="post" id="objects">
           <input type="hidden" name="domain" value="<?=htmlentities($_GET['domain'])?>">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <option value="suspend"><?=_('suspend');?></option>
-              <option value="unsuspend"><?=_('unsuspend');?></option>
-              <option value="delete"><?=_('delete');?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <option value="suspend"><?=_('suspend');?></option>
+            <option value="unsuspend"><?=_('unsuspend');?></option>
+            <option value="delete"><?=_('delete');?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -44,7 +42,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_firewall.html

@@ -22,12 +22,10 @@
       </div>
       <form action="/bulk/firewall/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-        <div class="l-select">
-          <select name="action" id="">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="delete"><?=_('delete') ?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="delete"><?=_('delete') ?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
           <i class="fas fa-arrow-right"></i>
         </button>

web/templates/pages/list_firewall_banlist.html

@@ -8,12 +8,10 @@
     <div class="l-sort-toolbar">
       <form action="/bulk/firewall/banlist/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-        <div class="l-select">
-          <select name="action" id="">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="delete"><?=_('delete') ?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="delete"><?=_('delete') ?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
           <i class="fas fa-arrow-right"></i>
         </button>

web/templates/pages/list_firewall_ipset.html

@@ -8,12 +8,10 @@
     <div class="l-sort-toolbar">
       <form action="/bulk/firewall/ipset/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-        <div class="l-select">
-          <select name="action" id="">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="delete"><?=_('delete') ?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="delete"><?=_('delete') ?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
           <i class="fas fa-arrow-right"></i>
         </button>

web/templates/pages/list_ip.html

@@ -19,13 +19,11 @@
       </div>
       <form action="/bulk/ip/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-        <div class="l-select">
-          <select name="action" id="">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="reread IP"><?=_('reread IP');?></option>
-            <option value="delete"><?=_('delete');?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="reread IP"><?=_('reread IP');?></option>
+          <option value="delete"><?=_('delete');?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
           <i class="fas fa-arrow-right"></i>
         </button>

web/templates/pages/list_mail.html

@@ -24,17 +24,15 @@
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/mail/" method="post" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <?php if ($_SESSION['userContext'] === 'admin') {?>
-                <option value="rebuild"><?=_('rebuild');?></option>
-              <?php } ?>
-              <option value="suspend"><?=_('suspend');?></option>
-              <option value="unsuspend"><?=_('unsuspend');?></option>
-              <option value="delete"><?=_('delete');?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <?php if ($_SESSION['userContext'] === 'admin') {?>
+              <option value="rebuild"><?=_('rebuild');?></option>
+            <?php } ?>
+            <option value="suspend"><?=_('suspend');?></option>
+            <option value="unsuspend"><?=_('unsuspend');?></option>
+            <option value="delete"><?=_('delete');?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -43,7 +41,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_mail_acc.html

@@ -31,14 +31,12 @@
         <form action="/bulk/mail/" method="post" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
           <input type="hidden" value="<?=htmlspecialchars($_GET['domain']); ?>" name="domain">
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <option value="suspend"><?=_('suspend');?></option>
-              <option value="unsuspend"><?=_('unsuspend');?></option>
-              <option value="delete"><?=_('delete');?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <option value="suspend"><?=_('suspend');?></option>
+            <option value="unsuspend"><?=_('unsuspend');?></option>
+            <option value="delete"><?=_('delete');?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -47,7 +45,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_packages.html

@@ -20,12 +20,10 @@
       </div>
       <form action="/bulk/package/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-        <div class="l-select">
-          <select class="" name="action">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="delete"><?=_('delete');?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="delete"><?=_('delete');?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
           <i class="fas fa-arrow-right"></i>
         </button>

web/templates/pages/list_rrd.html

@@ -21,7 +21,7 @@
     <div class="l-unit l-unit__stats">
       <div class="l-unit__col l-unit__col--right">
         <div class="l-unit__name separate">
-          <?= _($data[$key]['TITLE'])?>
+          <?=_($data[$key]['TITLE'])?>
         </div>
         <?php if($data[$key]['TYPE'] != 'net'){?>
         <canvas id="<?=$data[$key]['RRD'];?>" class="js-chart" width="800" height="200" period="<?php echo htmlentities($period);?>"></canvas>

web/templates/pages/list_search.html

@@ -16,7 +16,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_GET['q']) ? htmlspecialchars($_GET['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_server_preview.html

@@ -28,7 +28,7 @@
         <i class="fas fa-gear status-icon blue"></i>
       </div>
       <div class="clearfix l-unit__stat-col--left"><b><?=_('System');?></b></div>
-      <div class="clearfix l-unit__stat-col--left wide-6"><b><?=_('Policy'); ?>: <?=_('Allow suspended users to log in with read-only access'); ?></b></div>
+      <div class="clearfix l-unit__stat-col--left wide-6"><b><?=_('Policy');?>: <?=_('Allow suspended users to log in with read-only access');?></b></div>
       <div class="clearfix l-unit__stat-col--left wide-2">Partially implemented.</div>
     </div>
   </div>

web/templates/pages/list_services.html

@@ -22,14 +22,12 @@
     <div class="l-sort-toolbar">
       <form action="/bulk/service/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-        <div class="l-select">
-          <select class="" name="action">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="stop"><?=_('stop');?></option>
-            <option value="start"><?=_('start');?></option>
-            <option value="restart"><?=_('restart');?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="stop"><?=_('stop');?></option>
+          <option value="start"><?=_('start');?></option>
+          <option value="restart"><?=_('restart');?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
           <i class="fas fa-arrow-right"></i>
         </button>
@@ -41,7 +39,7 @@
 
 <div class="l-center units">
 
-  <div class="">
+  <div>
     <div class="l-unit__col l-unit__col--right server-info">
       <div class="icon-server-info"><i class="fas fa-server"></i></div>
       <div class="l-unit__servername separate server-info-name"><?=$sys['sysinfo']['HOSTNAME']?></div>

web/templates/pages/list_stats.html

@@ -10,24 +10,22 @@
       <?php if (($_SESSION['userContext'] === 'admin') && (!isset($_SESSION['look']))) { ?>
         <form action="/list/stats/" method="get" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <div class="l-select">
-            <select class="" name="user">
-              <option value=""><?=_('show per user');?></option>
-              <?php
-                foreach ($users as $key => $value) {
-                  if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($value === 'admin')) {
-                    // Hide admin user from statistics list
-                  } else {
-                  echo "\t\t\t\t<option value=\"".$value."\"";
-                  if ((!empty($v_user)) && ( $value == $_GET['user'])){
-                    echo ' selected';
-                  }
-                    echo ">".$value."</option>\n";
-                  }
+          <select class="form-select" name="user">
+            <option value=""><?=_('show per user');?></option>
+            <?php
+              foreach ($users as $key => $value) {
+                if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($value === 'admin')) {
+                  // Hide admin user from statistics list
+                } else {
+                echo "\t\t\t\t<option value=\"".$value."\"";
+                if ((!empty($v_user)) && ( $value == $_GET['user'])){
+                  echo ' selected';
                 }
-              ?>
-            </select>
-          </div>
+                  echo ">".$value."</option>\n";
+                }
+              }
+            ?>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -36,7 +34,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_user.html

@@ -22,22 +22,20 @@
       </div>
       <form action="/bulk/user/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-        <div class="l-select">
-          <select class="" name="action">
-            <option value=""><?=_('apply to selected');?></option>
-            <option value="rebuild"><?=_('rebuild');?></option>
-            <option value="rebuild user"><?=_('rebuild user');?></option>
-            <option value="rebuild web"><?=_('rebuild web');?></option>
-            <option value="rebuild dns"><?=_('rebuild dns');?></option>
-            <option value="rebuild mail"><?=_('rebuild mail');?></option>
-            <option value="rebuild db"><?=_('rebuild db');?></option>
-            <option value="rebuild cron"><?=_('rebuild cron');?></option>
-            <option value="update counters"><?=_('update counters');?></option>
-            <option value="suspend"><?= _('suspend');?></option>
-            <option value="unsuspend"><?=_('unsuspend');?></option>
-            <option value="delete"><?=_('delete');?></option>
-          </select>
-        </div>
+        <select class="form-select" name="action">
+          <option value=""><?=_('apply to selected');?></option>
+          <option value="rebuild"><?=_('rebuild');?></option>
+          <option value="rebuild user"><?=_('rebuild user');?></option>
+          <option value="rebuild web"><?=_('rebuild web');?></option>
+          <option value="rebuild dns"><?=_('rebuild dns');?></option>
+          <option value="rebuild mail"><?=_('rebuild mail');?></option>
+          <option value="rebuild db"><?=_('rebuild db');?></option>
+          <option value="rebuild cron"><?=_('rebuild cron');?></option>
+          <option value="update counters"><?=_('update counters');?></option>
+          <option value="suspend"><?=_('suspend');?></option>
+          <option value="unsuspend"><?=_('unsuspend');?></option>
+          <option value="delete"><?=_('delete');?></option>
+        </select>
         <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
           <i class="fas fa-arrow-right"></i>
         </button>
@@ -45,7 +43,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/list_web.html

@@ -25,17 +25,15 @@
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/web/" method="post" id="objects">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <div class="l-select">
-            <select name="action" id="">
-              <option value=""><?=_('apply to selected');?></option>
-              <?php if ($_SESSION['userContext'] === 'admin') {?>
-                <option value="rebuild"><?=_('rebuild');?></option>
-              <?php } ?>
-              <option value="suspend"><?=_('suspend');?></option>
-              <option value="unsuspend"><?=_('unsuspend');?></option>
-              <option value="delete"><?=_('delete');?></option>
-            </select>
-          </div>
+          <select class="form-select" name="action">
+            <option value=""><?=_('apply to selected');?></option>
+            <?php if ($_SESSION['userContext'] === 'admin') {?>
+              <option value="rebuild"><?=_('rebuild');?></option>
+            <?php } ?>
+            <option value="suspend"><?=_('suspend');?></option>
+            <option value="unsuspend"><?=_('unsuspend');?></option>
+            <option value="delete"><?=_('delete');?></option>
+          </select>
           <button type="submit" class="l-sort-toolbar__filter-apply" value="" title="<?=_('apply to selected');?>">
             <i class="fas fa-arrow-right"></i>
           </button>
@@ -44,7 +42,7 @@
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">
           <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
-          <input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
+          <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="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>">
             <i class="fas fa-magnifying-glass"></i>
           </button>

web/templates/pages/login/reset2fa.html

@@ -5,7 +5,7 @@
   <?php if ($success) {?>
     <div>
       <h1 class="login-title">
-        <?=_('2FA Reset successfully'); ?>
+        <?=_('2FA Reset successfully');?>
       </h1>
       <?php if (isset($ERROR)) echo $ERROR ?>
       <div class="u-mt20">

web/yarn.lock

@@ -259,9 +259,9 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
     color-convert "^2.0.1"
 
 anymatch@~3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
-  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
@@ -373,9 +373,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001431"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz#e7c59bd1bc518fae03a4656be442ce6c4887a795"
-  integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==
+  version "1.0.30001434"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5"
+  integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==
 
 chalk@^2.0.0:
   version "2.4.2"
@@ -1164,9 +1164,9 @@ isexe@^2.0.0:
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
 js-sdsl@^4.1.4:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.5.tgz#1ff1645e6b4d1b028cd3f862db88c9d887f26e2a"
-  integrity sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
+  integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
 
 js-tokens@^4.0.0:
   version "4.0.0"
@@ -2005,9 +2005,9 @@ postcss-selector-not@^6.0.1:
     postcss-selector-parser "^6.0.10"
 
 postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
-  version "6.0.10"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
-  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
+  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"