Start using CSS vars for theming (#3057)

web/css/src/base.css

@@ -0,0 +1,81 @@
+/* Base
+   ========================================================================== */
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+:focus { outline: none; }
+
+html,
+input,
+textarea,
+select,
+button {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-family);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  height: 100%;
+  color: var(--color-text);
+  background-color: var(--color-background);
+}
+
+a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+p,
+pre {
+  margin: 0;
+}
+
+dialog {
+  position: fixed;
+  padding: 0;
+
+  &::backdrop {
+    background-color: rgb(0 0 0 / 60%);
+  }
+}
+
+summary {
+  list-style: none;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  cursor: pointer;
+  line-height: inherit;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

web/css/src/dependencies/animate.css

@@ -1,4 +1,4 @@
-/*!
+/*
  * Some parts of Animate.css v4.1.1
  */
 

web/css/src/dependencies/fontawesome.css

@@ -1,4 +1,4 @@
-/*!
+/*
  * Some overrides of Font Awesome Free 6.2.1 to change webfont paths
  */
 

web/css/src/dependencies/jquery-ui.css

@@ -1,4 +1,4 @@
-/*!
+/*
  * Some parts of jQuery UI v1.13.2
  */
 

web/css/src/fonts.css

@@ -0,0 +1,165 @@
+/* ==========================================================================
+   Define Exo font family
+   Primary font used throughout the user interface
+   ========================================================================== */
+
+/* exo-300 - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: normal;
+  font-weight: 300;
+  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");
+  font-display: swap;
+}
+
+/* exo-300italic - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: italic;
+  font-weight: 300;
+  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");
+  font-display: swap;
+}
+
+/* exo-regular - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: normal;
+  font-weight: 400;
+  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");
+  font-display: swap;
+}
+
+/* exo-italic - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: italic;
+  font-weight: 400;
+  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");
+  font-display: swap;
+}
+
+/* exo-500 - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: normal;
+  font-weight: 500;
+  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");
+  font-display: swap;
+}
+
+/* exo-500italic - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: italic;
+  font-weight: 500;
+  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");
+  font-display: swap;
+}
+
+/* exo-600 - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: normal;
+  font-weight: 600;
+  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");
+  font-display: swap;
+}
+
+/* exo-600italic - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: italic;
+  font-weight: 600;
+  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");
+  font-display: swap;
+}
+
+/* exo-700 - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: normal;
+  font-weight: 700;
+  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");
+  font-display: swap;
+}
+
+/* exo-700italic - latin-ext_latin */
+@font-face {
+  font-family: Exo;
+  font-style: italic;
+  font-weight: 700;
+  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");
+  font-display: swap;
+}
+
+/* ==========================================================================
+   Define Inconsolata font family
+   Console font
+   ========================================================================== */
+
+/* Inconsolata-bold - 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;
+  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;
+  font-display: swap;
+}

web/css/src/themes/dark.css

@@ -4,13 +4,9 @@
     Website:     www.hestiacp.com
 */
 
-body {
-  color: #cdcdcd;
-  background-color: #282828;
-}
-
-a {
-  color: #cdcdcd;
+:root {
+  --color-text: #cdcdcd;
+  --color-background: #282828;
 }
 
 b,
@@ -33,25 +29,25 @@ strong {
   border-right-color: #353535;
 }
 
-.l-menu__item a {
-  color: #e7e7e7;
+.l-menu__item.l-menu__item--active:hover {
+  background: linear-gradient(to bottom, rgb(255 255 255 / 15%) 0%, rgb(255 255 255 / 15%) 30%, rgb(255 255 255 / 15%) 95%) !important;
 }
 
-.l-menu__item a:hover {
-  color: #dadada !important;
-  text-shadow: 1px 1px rgb(0 0 0 / 50%) !important;
-  background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
-  box-shadow: none !important;
-}
+.l-menu__item a {
+  color: #e7e7e7;
 
-.l-menu__item a:active {
-  background: linear-gradient(to bottom, rgb(15 15 15 / 70%) 0%, rgb(45 45 45 / 85%) 30%, rgb(50 50 50 / 100%) 95%) !important;
-  color: #fff !important;
-  text-shadow: 0 -1px 1px rgb(0 0 0 / 50%) !important;
-}
+  &:hover {
+    color: #dadada !important;
+    text-shadow: 1px 1px rgb(0 0 0 / 50%) !important;
+    background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
+    box-shadow: none !important;
+  }
 
-.l-menu__item.l-menu__item--active:hover {
-  background: linear-gradient(to bottom, rgb(255 255 255 / 15%) 0%, rgb(255 255 255 / 15%) 30%, rgb(255 255 255 / 15%) 95%) !important;
+  &:active {
+    background: linear-gradient(to bottom, rgb(15 15 15 / 70%) 0%, rgb(45 45 45 / 85%) 30%, rgb(50 50 50 / 100%) 95%) !important;
+    color: #fff !important;
+    text-shadow: 0 -1px 1px rgb(0 0 0 / 50%) !important;
+  }
 }
 
 .lang-ar .l-menu__item a {
@@ -77,26 +73,26 @@ strong {
   line-height: 0.95rem;
   border-left: 1px solid transparent !important;
   border-right: 1px solid transparent !important;
-}
-
-.l-profile__notifications.active.l-profile__notifications.updates:active {
-  background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
-  color: #046c98 !important;
-  text-shadow: 0 -1px 1px rgb(0 0 0 / 50%) !important;
-  box-shadow: none !important;
-  transition: 0.2s;
-  border-left: 1px solid transparent !important;
-  border-right: 1px solid transparent !important;
-}
 
-.l-profile__notifications:hover,
-.l-profile__notifications.updates:hover {
-  text-shadow: 1px 1px rgb(0 0 0 / 50%) !important;
-  background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
-  border: none !important;
-  border-left: 1px solid transparent !important;
-  border-right: 1px solid transparent !important;
-  box-shadow: none !important;
+  &.active.l-profile__notifications.updates:active {
+    background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
+    color: #046c98 !important;
+    text-shadow: 0 -1px 1px rgb(0 0 0 / 50%) !important;
+    box-shadow: none !important;
+    transition: 0.2s;
+    border-left: 1px solid transparent !important;
+    border-right: 1px solid transparent !important;
+  }
+
+  &:hover,
+  &.updates:hover {
+    text-shadow: 1px 1px rgb(0 0 0 / 50%) !important;
+    background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%) !important;
+    border: none !important;
+    border-left: 1px solid transparent !important;
+    border-right: 1px solid transparent !important;
+    box-shadow: none !important;
+  }
 }
 
 .notification-container {
@@ -147,18 +143,12 @@ strong {
   border: 1px solid #212121;
 }
 
-.alert.alert-danger {
+.alert-danger {
   background-color: #d13535;
-}
 
-.alert.alert-danger i.fas {
-  color: #d13535;
-}
-
-.alert.alert-success {
-}
-
-.alert.alert-success i.fas {
+  & i.fas {
+    color: #d13535;
+  }
 }
 
 .card {
@@ -339,38 +329,26 @@ strong {
   box-shadow: inset 1px 1px 0 rgb(0 0 0 / 20%);
 }
 
-.l-sort-toolbar .vst {
+.l-sort-toolbar .toolbar-link {
   color: #dadada;
-}
 
-.l-sort-toolbar .vst:hover {
-  color: #ff3478;
-}
-
-.l-sort-toolbar .vst:active {
-}
+  &.selected {
+    color: #ff3478;
+  }
 
-.l-sort-toolbar .vst.selected {
-  color: #ff3478;
+  &:hover {
+    color: #ff3478;
+  }
 }
 
 .l-select {
   border: 1px solid #454545;
   box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
-}
-
-.l-select select {
-  background-color: #212121;
-  box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
-}
-
-.l-select select:focus {
-}
-
-.lang-ru .l-select select {
-}
 
-.l-select select option {
+  & select {
+    background-color: #212121;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 40%) !important;
+  }
 }
 
 .l-sort-toolbar .l-select {
@@ -393,16 +371,13 @@ strong {
   border-bottom-right-radius: 0 !important;
   color: #dadada;
   box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%) !important;
-}
 
-.table-header:hover {
-  background-color: #404040 !important;
-  border-left: 1px solid #212121 !important;
-  border-right: 1px solid #212121 !important;
-  box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%) !important;
-}
-
-.table-header .fas {
+  &:hover {
+    background-color: #404040 !important;
+    border-left: 1px solid #212121 !important;
+    border-right: 1px solid #212121 !important;
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%) !important;
+  }
 }
 
 .units .l-unit {
@@ -529,23 +504,20 @@ strong {
 
 /* form styles */
 
-.vst-error {
+.inline-danger {
   color: #f33;
 }
 
-.vst-ok {
+.inline-success {
   color: #53ba55;
-}
-
-.vst-ok a {
-  color: #fff;
-}
 
-.vst-ok a:hover {
-  color: #ff3478;
-}
+  & a {
+    color: #fff;
 
-.vst-ok a:active {
+    &:hover {
+      color: #ff3478;
+    }
+  }
 }
 
 .form-label,
@@ -723,30 +695,30 @@ td.hint {
 
 .to-shortcuts,
 .to-top {
-  font-size: 0.85rem !important;
-  font-weight: 400 !important;
-  color: #eee !important;
-  border: 1px solid #707070 !important;
-  background: rgb(48 48 48) !important;
-  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(69 69 69 / 100%) 100%) !important;
+  font-size: 0.85rem;
+  font-weight: 400;
+  color: #eee;
+  border: 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:
     0 1px 4px rgb(0 0 0 / 20%),
     inset 0 0 1px rgb(20 20 20 / 100%),
-    inset 0 0 3px rgb(0 0 0 / 50%) !important;
-  text-shadow: 0 1px 1px rgb(0 0 0 / 35%) !important;
+    inset 0 0 3px rgb(0 0 0 / 50%);
+  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
 }
 
 .to-shortcuts:hover,
 .to-top:hover {
-  color: #fff !important;
-  text-shadow: 1px 1px rgb(0 0 0 / 25%) !important;
-  border: 1px solid #0098ff !important;
-  background: linear-gradient(0deg, rgb(58 58 58 / 100%) 0%, rgb(68 68 68 / 100%) 35%, rgb(79 79 79 / 100%) 100%) !important;
+  color: #fff;
+  text-shadow: 1px 1px rgb(0 0 0 / 25%);
+  border: 1px solid #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:
     0 1px 3px rgb(0 0 0 / 35%),
     inset 0 0 1px rgb(0 0 0 / 100%),
-    inset 0 0 3px rgb(0 0 0 / 65%) !important;
+    inset 0 0 3px rgb(0 0 0 / 65%);
   transition: 0.2s;
 }
 
@@ -754,14 +726,14 @@ td.hint {
 .to-top:active,
 .to-shortcuts:focus,
 .to-top:focus {
-  border: 1px solid #0066b4 !important;
-  background: linear-gradient(0deg, rgb(69 69 69 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(48 48 48 / 100%) 100%) !important;
-  color: #d4d4d4 !important;
-  text-shadow: 0 -1px 1px rgb(0 0 0 / 55%) !important;
+  border: 1px solid #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%);
   box-shadow:
     0 1px 3px rgb(0 0 0 / 30%),
     inset 0 0 1px rgb(0 0 0 / 100%),
-    inset -1px -1px 4px rgb(30 30 30 / 40%) !important;
+    inset -1px -1px 4px rgb(30 30 30 / 40%);
 }
 
 .ui-dialog button.cancel span {

web/css/src/themes/default.css

@@ -1,263 +1,20 @@
 @import url("normalize.css");
-@import url("@fortawesome/fontawesome-free/css/fontawesome.css");
-@import url("@fortawesome/fontawesome-free/css/brands.css");
-@import url("@fortawesome/fontawesome-free/css/solid.css");
-@import url("../dependencies/fontawesome.css");
-@import url("../dependencies/animate.css");
-@import url("../dependencies/jquery-ui.css");
+@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");
+@import url("../base");
 
 @custom-media --viewport-medium (min-width: 768px);
 
 :root {
   --animate-duration: 300ms;
-}
-
-/* ==========================================================================
-   Define Exo font family
-   Primary font used throughout the user interface
-   ========================================================================== */
-
-/* exo-300 - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: normal;
-  font-weight: 300;
-  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");
-  font-display: swap;
-}
-
-/* exo-300italic - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: italic;
-  font-weight: 300;
-  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");
-  font-display: swap;
-}
-
-/* exo-regular - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: normal;
-  font-weight: 400;
-  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");
-  font-display: swap;
-}
-
-/* exo-italic - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: italic;
-  font-weight: 400;
-  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");
-  font-display: swap;
-}
-
-/* exo-500 - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: normal;
-  font-weight: 500;
-  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");
-  font-display: swap;
-}
-
-/* exo-500italic - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: italic;
-  font-weight: 500;
-  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");
-  font-display: swap;
-}
-
-/* exo-600 - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: normal;
-  font-weight: 600;
-  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");
-  font-display: swap;
-}
-
-/* exo-600italic - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: italic;
-  font-weight: 600;
-  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");
-  font-display: swap;
-}
-
-/* exo-700 - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: normal;
-  font-weight: 700;
-  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");
-  font-display: swap;
-}
-
-/* exo-700italic - latin-ext_latin */
-@font-face {
-  font-family: Exo;
-  font-style: italic;
-  font-weight: 700;
-  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");
-  font-display: swap;
-}
-
-/* ==========================================================================
-   Define Inconsolata font family
-   Console font
-   ========================================================================== */
-
-/* Inconsolata-bold - 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;
-  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;
-  font-display: swap;
-}
-
-/* Base
-   ========================================================================== */
-
-html {
-  height: 100%;
-  box-sizing: border-box;
-  font-family: sans-serif;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-html,
-input,
-textarea,
-select,
-button {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: Exo, system-ui;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  height: 100%;
-  color: #7c7c7c;
-  background-color: #fff;
-}
-
-:focus { outline: none; }
-
-h1,
-h2,
-h3,
-p,
-pre {
-  margin: 0;
-}
-
-dialog {
-  position: fixed;
-  padding: 0;
-
-  &::backdrop {
-    background-color: rgb(0 0 0 / 60%);
-  }
-}
-
-summary {
-  list-style: none;
-
-  &::-webkit-details-marker {
-    display: none;
-  }
-}
-
-ol,
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  text-decoration: none;
-  color: #7c7c7c;
-}
-
-button {
-  cursor: pointer;
-  line-height: inherit;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
+  --font-family: "Exo", system-ui;
+  --color-text: #7c7c7c;
+  --color-background: #fff;
 }
 
 .check-label {
@@ -289,7 +46,8 @@ table {
 }
 
 .l-center {
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
   max-width: 1020px;
 }
 
@@ -574,6 +332,15 @@ table {
   text-shadow: 0 1px rgb(0 0 0 / 45%);
   border: 1px solid #fff;
 
+  & a {
+    font-weight: bold;
+    color: #fff;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   & i.fas {
     border-radius: 1rem;
     font-size: 1.4rem;
@@ -587,47 +354,38 @@ table {
   }
 }
 
-.alert.alert-with-icon {
+.alert-with-icon {
   padding-left: 3.2rem;
   min-height: 3.5rem;
 }
 
-.alert.alert-info {
+.alert-info {
   color: #fff;
   background-color: #618ecc;
-}
 
-.alert.alert-info i.fas {
-  color: #618ecc;
-  background-color: white;
+  & i.fas {
+    color: #618ecc;
+    background-color: #fff;
+  }
 }
 
-.alert.alert-danger {
+.alert-danger {
   color: #fff;
   background-color: #ec6c6c;
-}
 
-.alert.alert-danger i.fas {
-  color: #ec6c6c;
-  background-color: white;
+  & i.fas {
+    color: #ec6c6c;
+    background-color: #fff;
+  }
 }
 
-.alert.alert-success {
+.alert-success {
   color: #fff;
   background-color: #5ea64c;
-}
-
-.alert.alert-success i.fas {
-  color: #5ea64c;
-  background-color: white;
-}
-
-.alert a {
-  font-weight: bold;
-  color: #fff;
 
-  &:hover {
-    text-decoration: underline;
+  & i.fas {
+    color: #5ea64c;
+    background-color: #fff;
   }
 }
 
@@ -1031,13 +789,16 @@ table {
   border-color: #50bdb5;
 }
 
-.l-sort-toolbar .vst {
-  padding: 0 12px;
+.l-sort-toolbar .toolbar-link {
+  display: block;
+  padding: 6px 12px;
   color: #777;
   text-transform: uppercase;
-  font-size: 0.8rem;
   font-weight: 600;
-  line-height: 30px;
+
+  &.selected {
+    color: #c36;
+  }
 
   &:hover {
     color: #c36;
@@ -1048,12 +809,9 @@ table {
   }
 }
 
-.l-sort-toolbar .vst.selected {
-  color: #c36;
-}
-
 .l-unit-toolbar__buttonstrip {
   display: flex;
+  align-items: center;
 }
 
 .l-unit-toolbar__buttonstrip .button {
@@ -1212,15 +970,15 @@ table {
   padding-top: 4px;
   padding-bottom: 4px;
 
-  & .fas {
-    font-size: 1rem;
-  }
-
   &:hover {
     background-color: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%) !important;
     border-left: 1px solid #d0d0d0 !important;
     border-right: 1px solid #d0d0d0 !important;
   }
+
+  & .fas {
+    font-size: 1rem;
+  }
 }
 
 .units {
@@ -1938,7 +1696,7 @@ body.mobile .l-unit-toolbar__col--right {
   padding: 2em 1em 2em 9rem;
 }
 
-.vst-error {
+.inline-danger {
   color: #f33;
   font-weight: 600;
   overflow: hidden;
@@ -1947,7 +1705,7 @@ body.mobile .l-unit-toolbar__col--right {
   white-space: nowrap;
 }
 
-.vst-ok {
+.inline-success {
   color: #53ba55;
   font-weight: 600;
   overflow: hidden;
@@ -1955,23 +1713,23 @@ body.mobile .l-unit-toolbar__col--right {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.8rem;
-}
 
-.l-unit-toolbar__buttonstrip .vst-ok,
-.l-unit-toolbar__buttonstrip .vst-error {
-  margin-right: 20px;
-}
+  & a {
+    color: #326b9b;
 
-.vst-ok a {
-  color: #326b9b;
+    &:hover {
+      color: #c36;
+    }
 
-  &:hover {
-    color: #c36;
+    &:active {
+      color: #d53067;
+    }
   }
+}
 
-  &:active {
-    color: #d53067;
-  }
+.l-unit-toolbar__buttonstrip .inline-success,
+.l-unit-toolbar__buttonstrip .inline-danger {
+  margin-right: 20px;
 }
 
 .jump-top {
@@ -2438,7 +2196,7 @@ body.mobile .l-unit-toolbar__col--right {
 
 .login {
   font-size: 0.85rem;
-  padding: 60px 50px;
+  padding: 70px 50px;
   min-width: 320px;
   margin-bottom: 20%;
   background-color: rgb(255 255 255 / 70%);
@@ -3387,12 +3145,12 @@ li[aria-expanded="true"] a {
   width: 100% !important;
 }
 
-.u-input-width {
-  width: 400px !important;
+.u-max-width400 {
+  max-width: 400px !important;
 }
 
-.u-wide-input-width {
-  width: 600px !important;
+.u-max-width600 {
+  max-width: 600px !important;
 }
 
 .u-min-height100 {

web/css/src/themes/flat.css

@@ -13,11 +13,6 @@ strong {
   font-weight: 600;
 }
 
-.body-login,
-.body-reset {
-  background: #5f7eb3 !important;
-}
-
 .table-header {
   box-shadow: none !important;
   background: #fafafa !important;
@@ -123,28 +118,28 @@ strong {
 .to-shortcuts:hover,
 .to-top:active,
 .to-shortcuts:active {
-  box-shadow: none !important;
-  background: none !important;
-  background-color: #eee !important;
+  box-shadow: none;
+  background: none;
+  background-color: #eee;
 }
 
 .to-top,
 .to-shortcuts {
-  box-shadow: none !important;
-  background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(241 241 241 / 100%) 100%) !important;
+  box-shadow: none;
+  background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(241 241 241 / 100%) 100%);
 }
 
 .to-top:hover,
 .to-shortcuts:hover {
-  color: #6986b7 !important;
-  box-shadow: none !important;
-  background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%) !important;
+  color: #6986b7;
+  box-shadow: none;
+  background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%);
 }
 
 .to-top:focus,
 .to-shortcuts:focus {
-  box-shadow: none !important;
-  background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%) !important;
+  box-shadow: none;
+  background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%);
 }
 
 .ui-dialog .ui-dialog-buttonpane button:nth-of-type(2) {
@@ -180,6 +175,11 @@ strong {
   background: #fff !important;
 }
 
+.body-login,
+.body-reset {
+  background: #5f7eb3;
+}
+
 .login {
   background-color: rgb(255 255 255 / 80%);
   box-shadow:

web/css/src/themes/vestia.css

@@ -6,13 +6,10 @@
 
 :root {
   --animate-duration: 0s;
+  --font-family: "Arial", system-ui;
 }
 
-/* Base
-   ========================================================================== */
-
 body {
-  font-family: Arial, system-ui !important;
   letter-spacing: 0;
 }
 
@@ -211,7 +208,6 @@ strong {
 
 .form-control,
 .form-select {
-  font-family: Arial, system-ui;
   box-shadow: none;
   border-radius: 0;
 }
@@ -294,22 +290,22 @@ strong {
   border-radius: 0 !important;
   color: #fff;
   text-shadow: 0 1px 2px rgb(0 0 0 / 35%) !important;
-}
 
-.l-sort-toolbar__filter-apply:hover {
-  color: #777;
-  text-shadow: 0 1px 2px rgb(255 255 255 / 45%) !important;
-}
+  &:hover {
+    color: #777;
+    text-shadow: 0 1px 2px rgb(255 255 255 / 45%) !important;
+  }
 
-.l-sort-toolbar__filter-apply:active {
-  text-shadow: none !important;
-  color: #a9cc06;
+  &:active {
+    text-shadow: none !important;
+    color: #a9cc06;
+  }
 }
 
 .ui-widget,
 .ui-dialog,
 .ui-dialog .ui-dialog-title {
-  font-family: Arial, system-ui;
+  font-family: var(--font-family);
 }
 
 .ui-dialog .ui-dialog-title {
@@ -458,23 +454,23 @@ a#btn-back:focus {
 .to-top:hover,
 .to-shortcuts:focus,
 .to-top:focus {
-  background: none !important;
-  background-color: none !important;
-  border: none !important;
-  text-shadow: none !important;
-  box-shadow: none !important;
+  background: none;
+  background-color: none;
+  border: none;
+  text-shadow: none;
+  box-shadow: none;
 }
 
 .to-shortcuts:hover,
 .to-top:hover {
-  color: #94be00 !important;
+  color: #94be00;
 }
 
 .to-shortcuts:focus,
 .to-top:focus,
 .to-shortcuts:active,
 .to-top:active {
-  color: #809c00 !important;
+  color: #809c00;
 }
 
 .body-login,
@@ -485,7 +481,6 @@ a#btn-back:focus {
 .login {
   background-color: rgb(255 255 255 / 100%);
   box-shadow: 0 2px 5px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255);
-  font-family: Arial, system-ui;
   border-radius: 0;
 }
 

web/inc/main.php

@@ -222,13 +222,13 @@ function show_alert_message($data) {
         if (!empty($data['error_msg'])) {
             $msg_icon = 'fa-circle-exclamation status-icon red';
             $msg_text = htmlentities($data['error_msg']);
-            $msg_id = 'vst-error';
+            $msg_class = 'inline-danger';
         } else {
             $msg_icon = 'fa-circle-check status-icon green';
             $msg_text = $data['ok_msg'];
-            $msg_id = 'vst-ok';
+            $msg_class = 'inline-success';
         }
-        echo '<p class="'.$msg_id.' u-mb20"><i class="fas '.$msg_icon.'"></i> '.$msg_text.'</p>';
+        echo '<p class="'.$msg_class.' u-mb20"><i class="fas '.$msg_icon.'"></i> '.$msg_text.'</p>';
     }
 }
 

web/js/app.js

@@ -1003,7 +1003,7 @@ function elementHideShow(elementToHideOrShow,trigger){
     el.style.display = el.style.display === 'none' ? 'block' : 'none';
 
     if (typeof trigger !== 'undefined') {
-        trigger.querySelector('.section-toggle-icon').classList.toggle('fa-minus-square');
+        trigger.querySelector('.section-toggle-icon').classList.toggle('fa-square-minus');
         trigger.querySelector('.section-toggle-icon').classList.toggle('fa-square-plus');
     }
 }

web/js/pages/edit_web.js

@@ -208,12 +208,12 @@ App.Actions.WEB.randomPasswordGenerated = function(elm) {
 
 App.Actions.WEB.passwordChanged = function(elm) {
     var ref = $(elm).parents('.js-ftp-account');
-    if (ref.find('.vst-email-alert-on-psw').length == 0) {
+    if (ref.find('.js-email-alert-on-psw').length == 0) {
         var inp_name = ref.find('.v-ftp-user-is-new').prop('name');
         inp_name = inp_name.replace('is_new', 'v_ftp_email');
         ref.find('div:last').after('<div class="u-pl30 u-mb10">\
                                       <label for="' + inp_name + '" class="form-label">Send FTP credentials to email</label>\
-                                      <input type="email" class="form-control vst-email-alert-on-psw" value="" name="' + inp_name + '" id="' + inp_name + '">\
+                                      <input type="email" class="form-control js-email-alert-on-psw" value="" name="' + inp_name + '" id="' + inp_name + '">\
                                    </div>');
     }
 }
@@ -223,7 +223,6 @@ App.Actions.WEB.passwordChanged = function(elm) {
 App.Listeners.WEB.keypress_ftp_username();
 App.Listeners.WEB.keypress_ftp_path();
 
-
 $(function() {
     $('.v-ftp-user-psw').on('keypress', function (evt) {
         var elm = $(evt.target);

web/templates/pages/add_access_key.html

@@ -23,7 +23,7 @@
     <div class="form-container">
       <h1 class="form-title"><?= _('Adding Access Key'); ?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <p class="u-mb10"><?= _('Permissions'); ?></p>
         <?php foreach ($apis as $api_name => $api_data) { ?>
           <div class="form-check">

web/templates/pages/add_db.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding database');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true"))) {?>
           <div class="alert alert-danger alert-with-icon" role="alert">
             <i class="fas fa-exclamation"></i>

web/templates/pages/add_dns.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding DNS Domain');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true"))) {?>
           <div class="alert alert-danger alert-with-icon" role="alert">
             <i class="fas fa-exclamation"></i>

web/templates/pages/add_dns_rec.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding DNS Record');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_domain" class="form-label"><?=_('Domain');?></label>
           <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>

web/templates/pages/add_firewall.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding Firewall Rule');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_action" class="form-label"><?=_('Action') ?></label>
           <select class="form-select" name="v_action" id="v_action">

web/templates/pages/add_firewall_banlist.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding IP Address to Banlist');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb20">
           <label for="v_ip" class="form-label">
             <?=_('IP address');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>

web/templates/pages/add_firewall_ipset.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding Firewall Ipset List');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_ipname" class="form-label"><?=_('Ip List Name') ?></label>
           <input type="text" class="form-control" name="v_ipname" id="v_ipname" maxlength="255" value="<?=htmlentities(trim($v_ipname, "'"))?>">

web/templates/pages/add_ip.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding IP address');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_ip" class="form-label"><?=_('IP address') ?></label>
           <input type="text" class="form-control" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">

web/templates/pages/add_key.html

@@ -24,7 +24,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Add SSH Key');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
         <label for="v_key" class="form-label"><?=_('SSH KEY') ?></label>
         <textarea class="form-control u-min-height100" name="v_key" id="v_key"><?=htmlentities(trim($v_key, "'"))?></textarea>
       </div>

web/templates/pages/add_mail.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding Mail Domain');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true"))) {?>
           <div class="alert alert-danger alert-with-icon" role="alert">
             <i class="fas fa-exclamation"></i>

web/templates/pages/add_mail_acc.html

@@ -21,7 +21,7 @@
       <h1 class="form-title"><?=_('Adding Mail Account');?></h1>
       <?php show_alert_message($_SESSION);?>
       <div style="display: flex; justify-content: space-between;">
-        <div class="u-input-width">
+        <div class="u-max-width400 u-width-full">
           <div class="u-mb10">
             <label for="v_domain" class="form-label"><?=_('Domain');?></label>
             <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
@@ -107,7 +107,7 @@
               <tr><td colspan="2"><strong><?=strtoupper(_('Common account settings'));?></strong></td><tr>
               <tr><td><?=_('Username');?>: </td><td><span class="js-account-output">example</span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
               <tr><td><?=_('Password');?>: </td><td><span class="js-password-output"></span></td></tr>
-              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr>
+              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr>
               <?php } ?>
               <tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
 

web/templates/pages/add_package.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding Package');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_package" class="form-label"><?=_('Package Name');?></label>
           <input type="text" class="form-control" name="v_package" id="v_package" value="<?=htmlentities(trim($v_package, "'"))?>">

web/templates/pages/add_user.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Adding User');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_username" class="form-label"><?=_('Username');?></label>
           <input type="text" class="form-control" name="v_username" id="v_username" value="<?=htmlentities(trim($v_username, "'"))?>" tabindex="1">

web/templates/pages/add_web.html

@@ -22,7 +22,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Add Web Domain');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <?php if (($user_plain == 'admin') && (($_GET['accept'] !== "true"))) {?>
           <div class="alert alert-danger alert-with-icon" role="alert">
             <i class="fas fa-exclamation"></i>

web/templates/pages/edit_backup_exclusions.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing Backup Exclusions');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
         <div class="u-mb10">
           <label for="v_web" class="form-label"><?=_('Web Domains');?></label>
           <textarea class="form-control" name="v_web" id="v_web" placeholder="<?=_('WEB_EXCLUSIONS') ?>"><?=htmlentities(trim($v_web, "'"))?></textarea>

web/templates/pages/edit_db.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing Database');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_database" class="form-label"><?=_('Database');?></label>
           <input type="text" class="form-control" name="v_database" id="v_database" value="<?=htmlentities(trim($v_database, "'"))?>" disabled>

web/templates/pages/edit_dns.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing DNS Domain');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_domain" class="form-label"><?=_('Domain');?></label>
           <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>

web/templates/pages/edit_dns_rec.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing DNS Record');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_domain" class="form-label"><?=_('Domain');?></label>
           <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>

web/templates/pages/edit_firewall.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing Firewall Rule');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_action" class="form-label"><?=_('Action') ?></label>
           <select class="form-select" name="v_action" id="v_action">

web/templates/pages/edit_ip.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing IP Address');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_ip" class="form-label"><?=_('IP address') ?></label>
           <input type="text" class="form-control" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>" disabled>

web/templates/pages/edit_mail.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing Mail Domain');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb20">
           <label for="v_domain" class="form-label"><?=_('Domain');?></label>
           <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>

web/templates/pages/edit_mail_acc.html

@@ -21,7 +21,7 @@
       <h1 class="form-title"><?=_('Editing Mail Account');?></h1>
       <?php show_alert_message($_SESSION);?>
       <div style="display: flex; justify-content: space-between;">
-        <div class="u-input-width">
+        <div class="u-max-width400 u-width-full">
           <div class="u-mb10">
             <label for="v_email" class="form-label"><?=_('Account');?></label>
             <input type="text" class="form-control" name="v_email" id="v_email" value="<?=htmlentities($_GET['account'])."@".htmlentities($_GET['domain'])?>" disabled>
@@ -113,7 +113,7 @@
               <tr><td colspan="2"><strong><?=strtoupper(_('Common account settings'));?></strong></td><tr>
               <tr><td><?=_('Username');?>: </td><td><span class="js-account-output"></span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
               <tr><td><?=_('Password');?>: </td><td><span class="js-password-output"></span></td></tr>
-              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr>
+              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr>
               <?php } ?>
               <tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
 

web/templates/pages/edit_package.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing Package');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_package_new" class="form-label"><?=_('Package Name');?></label>
           <input type="text" class="form-control" name="v_package_new" id="v_package_new" value="<?=htmlentities(trim($v_package_new, "'"))?>">

web/templates/pages/edit_server.html

@@ -24,7 +24,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
 
         <!-- Basic options tab -->
         <details class="collapse u-mb10">
@@ -32,7 +32,7 @@
             <i class="fas fa-gear u-mr15"></i><?=_('Basic options');?>
           </summary>
           <div class="collapse-content u-pl50">
-            <div class="u-input-width">
+            <div class="u-max-width400">
               <div class="u-mb10">
                 <label for="v_hostname" class="form-label"><?=_('Hostname');?></label>
                 <input type="text" class="form-control" name="v_hostname" id="v_hostname" value="<?=htmlentities(trim($v_hostname, "'"))?>">
@@ -142,7 +142,7 @@
             <i class="fas fa-earth-americas u-mr15"></i><?=_('Web Server');?>
           </summary>
           <div class="collapse-content u-pl50">
-            <div class="u-input-width">
+            <div class="u-max-width400">
               <?php if (!empty($_SESSION['PROXY_SYSTEM'])) { ?>
                 <p>
                   <?=_('Proxy Server');?>: <span class="optional"><?=$_SESSION['PROXY_SYSTEM']; ?> <a href="/edit/server/<? echo $_SESSION['PROXY_SYSTEM'] ?>/"><i class="fas fa-pencil status-icon orange icon-pad-right"></i></a></span>
@@ -233,7 +233,7 @@
                 foreach ($dns_cluster as $key => $value) {
                   $i++;
                 ?>
-                <div class="u-input-width">
+                <div class="u-max-width400">
                   <label for="v_dns_remote_host" class="form-label"><?=_('Host'). ' #'.$i ?></label>
                   <input type="text" class="form-control" name="v_dns_remote_host" id="v_dns_remote_host" value="<?=$key; ?>" disabled>
                 </div>
@@ -263,7 +263,7 @@
                 </p>
               <?php } ?>
               <?php if($_SESSION['WEBMAIL_SYSTEM']){?>
-                <div class="u-input-width u-mt15 u-mb10">
+                <div class="u-max-width400 u-mt15 u-mb10">
                   <label for="v_webmail_alias" class="form-label">
                     <?=_('Webmail URL');?> <span class="hint">(<?=$_SESSION['WEBMAIL_ALIAS'];?>.example.com)</span>
                   </label>
@@ -277,7 +277,7 @@
                 </label>
               </div>
               <div id="smtp_relay_table" class="u-pl30 u-mt20" style="display:<?php if ($v_smtp_relay == 'true') {echo 'block';} else {echo 'none';}?> ;">
-                <div class="u-input-width">
+                <div class="u-max-width400">
                   <div class="u-mb10">
                     <label for="v_smtp_relay_host" class="form-label"><?=_('Host');?></label>
                     <input type="text" class="form-control" name="v_smtp_relay_host" id="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
@@ -309,7 +309,7 @@
               <i class="fas fa-database u-mr15"></i><?=_('Databases');?>
             </summary>
             <div class="collapse-content u-pl50">
-              <div class="u-input-width">
+              <div class="u-max-width400">
                 <div class="u-mb10">
                   <label for="v_mysql" class="form-label">
                     <?=_('MySQL Support');?> <a href="/edit/server/mysql/"><i class="fas fa-pencil status-icon orange icon-pad-right"></i></a>
@@ -341,7 +341,7 @@
                 foreach ($v_mysql_hosts as $value) {
                   $i++;
                 ?>
-                <div class="u-input-width u-pl30">
+                <div class="u-max-width400 u-pl30">
                   <div class="u-mb10">
                     <label for="v_mysql_host" class="form-label"><?=_('Host'). ' #'.$i ?></label>
                     <input type="text" class="form-control" name="v_mysql_host" id="v_mysql_host" value="<?=$value['HOST']?>" disabled>
@@ -368,7 +368,7 @@
               <?php }} ?>
               <!-- PostgreSQL Options-->
               <?php if ($v_pgsql == 'yes') { ?>
-                <div class="u-input-width">
+                <div class="u-max-width400">
                   <div class="u-mb10">
                     <label for="v_pgsql" class="form-label">
                       <?=_('PostgreSQL Support');?> <a href="/edit/server/postgresql/"><i class="fas fa-pencil status-icon orange icon-pad-right"></i></a>
@@ -391,7 +391,7 @@
                 foreach ($v_pgsql_hosts as $value) {
                   $i++;
                 ?>
-                <div class="u-input-width u-pl30">
+                <div class="u-max-width400 u-pl30">
                   <div class="u-mb10">
                     <label for="v_pgsql_host" class="form-label"><?=_('Host'). ' #'.$i ?></label>
                     <input type="text" class="form-control" name="v_pgsql_host" id="v_pgsql_host" value="<?=$value['HOST']?>" disabled>
@@ -420,7 +420,7 @@
             <i class="fas fa-arrow-rotate-left u-mr15"></i><?=_('Backups');?>
           </summary>
           <div class="collapse-content u-pl50">
-            <div class="u-input-width">
+            <div class="u-max-width400">
               <div class="u-mb10">
                 <label for="v_backup" class="form-label"><?=_('Local backup');?></label>
                 <select class="form-select" name="v_backup" id="v_backup">
@@ -461,7 +461,7 @@
               </div>
             </div>
             <div id="remote_backup" class="u-pl50 u-mt20" style="display:<?php if (empty($v_backup_remote_adv)) echo 'none';?> ;">
-              <div class="u-input-width">
+              <div class="u-max-width400">
                 <div class="u-mb10">
                   <label for="backup_type" class="form-label">
                     <?=_('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>
@@ -532,7 +532,7 @@
             <i class="fas fa-lock u-mr15"></i><?=_('SSL');?>
           </summary>
           <div class="collapse-content u-pl50">
-            <div class="u-input-width">
+            <div class="u-max-width400">
               <div class="u-mb20">
                 <label for="v_ssl_crt" class="form-label">
                   <?=_('SSL Certificate');?>
@@ -614,7 +614,7 @@
             <i class="fas fa-key u-mr15"></i><?=_('Security');?>
           </summary>
           <div class="collapse-content u-pl50">
-            <div class="u-input-width">
+            <div class="u-max-width400">
               <h3 class="section-title" onclick="javascript:elementHideShow('security-system-table',this);">
                 <?=_('System');?>
                 <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
@@ -789,7 +789,7 @@
             <i class="fas fa-puzzle-piece u-mr15"></i><?=_('Hestia Control Panel Plugins');?>
           </summary>
           <div class="collapse-content u-pl50">
-            <div class="u-input-width">
+            <div class="u-max-width400">
               <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">

web/templates/pages/edit_server_bind9.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?>: <?=$v_service_name;?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
         <div class="u-mb20">
           <label for="v_options" class="form-label"><?=$v_options_path;?></label>
           <textarea class="form-control u-min-height300 u-console" name="v_options" id="v_options"><?=$v_options;?></textarea>

web/templates/pages/edit_server_dovecot.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?>: <?=$v_service_name;?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
         <div class="u-mb20">
           <label for="v_config" class="form-label"><?=$v_config_path;?></label>
           <textarea class="form-control u-min-height300 u-console" name="v_config" id="v_config"><?=$v_config?></textarea>

web/templates/pages/edit_server_httpd.html

@@ -21,7 +21,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?>: <?=$v_service_name;?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
         <div class="u-mb20">
           <label for="v_config" class="form-label"><?=$v_config_path;?></label>
           <textarea class="form-control u-min-height300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>

web/templates/pages/edit_server_mysql.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?>: <?=$v_service_name;?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div id="basic-options" class="u-input-width">
+      <div id="basic-options" class="u-max-width400">
         <div class="u-mb10">
           <label for="v_max_connections" class="form-label">max_connections</label>
           <input type="text" class="form-control" regexp="max_connections" prev_value="<?=htmlentities($v_max_connections)?>" name="v_max_connections" id="v_max_connections" value="<?=htmlentities($v_max_connections)?>">
@@ -45,7 +45,7 @@
           <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Advanced options');?></a>
         </div>
       </div>
-      <div id="advanced-options" class="u-wide-input-width" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
+      <div id="advanced-options" class="u-max-width600" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
         <div class="u-mb20">
           <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Basic options');?></a>
         </div>

web/templates/pages/edit_server_nginx.html

@@ -21,7 +21,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?>: <?=$v_service_name;?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div id="basic-options" class="u-input-width">
+      <div id="basic-options" class="u-max-width400">
         <div class="u-mb10">
           <label for="v_worker_processes" class="form-label">worker_processes</label>
           <input type="text" class="form-control" regexp="worker_processes" prev_value="<?=htmlentities($v_worker_processes)?>" name="v_worker_processes" id="v_worker_processes" value="<?=htmlentities($v_worker_processes)?>">
@@ -66,7 +66,7 @@
           <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Advanced options');?></a>
         </div>
       </div>
-      <div id="advanced-options" class="u-wide-input-width" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
+      <div id="advanced-options" class="u-max-width600" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
         <div class="u-mb20">
           <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Basic options');?></a>
         </div>

web/templates/pages/edit_server_pgsql.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?>: <?=$v_service_name;?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
         <div class="u-mb20">
           <label for="v_options" class="form-label"><?=$v_options_path;?></label>
           <textarea class="form-control u-min-height300 u-console" name="v_options" id="v_options"><?=$v_options;?></textarea>

web/templates/pages/edit_server_php.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?>: PHP</h1>
       <?php show_alert_message($_SESSION);?>
-      <div id="basic-options" class="u-input-width">
+      <div id="basic-options" class="u-max-width400">
         <div class="u-mb10">
           <label for="v_max_execution_time" class="form-label">max_execution_time</label>
           <input type="text" class="form-control" regexp="max_execution_time" prev_value="<?=htmlentities($v_max_execution_time)?>" name="v_max_execution_time" id="v_max_execution_time" value="<?=htmlentities($v_max_execution_time)?>">
@@ -53,7 +53,7 @@
           <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Advanced options');?></a>
         </div>
       </div>
-      <div id="advanced-options" class="u-wide-input-width" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
+      <div id="advanced-options" class="u-max-width600" style="display:<?php if (empty($v_adv)) echo 'none';?> ;">
         <div class="u-mb20">
           <a href="javascript:toggleOptions();" class="button button-secondary"><?=_('Basic options');?></a>
         </div>

web/templates/pages/edit_server_service.html

@@ -20,7 +20,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Configuring Server');?>: <?=$v_service_name;?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
         <div class="u-mb20">
           <label for="v_config" class="form-label"><?=$v_config_path;?></label>
           <textarea class="form-control u-min-height300 u-console" name="v_config" id="v_config"><?=$v_config;?></textarea>

web/templates/pages/edit_user.html

@@ -53,7 +53,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing User');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_user" class="form-label"><?=_('Username');?></label>
           <input type="text" class="form-control" name="v_user" id="v_user" value="<?=htmlentities(trim($v_username, "'"))?>" disabled>

web/templates/pages/edit_web.html

@@ -28,7 +28,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Editing Domain');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_domain" class="form-label"><?=_('Domain');?></label>
           <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
@@ -426,7 +426,7 @@
                 <?php if ($ftp_user['is_new'] == 1): ?>
                   <div class="u-pl30 u-mb10">
                     <label for="v_ftp_user[<?=$i ?>][v_ftp_email]" class="form-label"><?=_('Send FTP credentials to email');?></label>
-                    <input type="email" class="form-control vst-email-alert-on-psw" name="v_ftp_user[<?=$i ?>][v_ftp_email]" id="v_ftp_user[<?=$i ?>][v_ftp_email]" value="<?=htmlentities(trim($v_ftp_email, "'"))?>">
+                    <input type="email" class="form-control js-email-alert-on-psw" name="v_ftp_user[<?=$i ?>][v_ftp_email]" id="v_ftp_user[<?=$i ?>][v_ftp_email]" value="<?=htmlentities(trim($v_ftp_email, "'"))?>">
                   </div>
                 <?php endif; ?>
               </div>
@@ -476,7 +476,7 @@
     </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>
-      <input type="email" class="form-control vst-email-alert-on-psw" name="v_ftp_user[%INDEX%][v_ftp_email]" id="v_ftp_user[%INDEX%][v_ftp_email]" value="">
+      <input type="email" class="form-control js-email-alert-on-psw" name="v_ftp_user[%INDEX%][v_ftp_email]" id="v_ftp_user[%INDEX%][v_ftp_email]" value="">
     </div>
   </div>
 </div>

web/templates/pages/generate_ssl.html

@@ -14,7 +14,7 @@
 
     <div class="form-container">
       <h1 class="form-title"><?=_('Generating CSR');?></h1>
-      <div class="u-input-width">
+      <div class="u-max-width400">
         <div class="u-mb10">
           <label for="v_domain" class="form-label"><?=_('Domain');?></label>
           <input type="text" class="form-control" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'")) ?>">

web/templates/pages/list_access_key.html

@@ -27,7 +27,7 @@ if (!empty($_POST['ok'])) {
     <div class="form-container">
       <h1 class="form-title"><?= _("Access Key") ?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-input-width">
+      <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>

web/templates/pages/list_mail_dns.html

@@ -28,13 +28,13 @@
   <div class="l-unit animate__animated animate__fadeIn">
     <div class="l-unit__col l-unit__col--right">
       <div class="clearfix l-unit__stat-col--left wide-3">
-        <b><input type="text" class="form-control" style="width:260px;" value="mail.<?=htmlspecialchars($_GET['domain']);?>"></b>
+        <input type="text" class="form-control" style="width:260px;" value="mail.<?=htmlspecialchars($_GET['domain']);?>">
       </div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>A</b></div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>&nbsp;</b></div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>14400</b></div>
       <div class="clearfix l-unit__stat-col--left wide-3">
-        <b><input type="text" class="form-control u-input-width" value="<?=(empty($ips[array_key_first($ips)]['NAT'])) ? array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>"></b>
+        <input type="text" class="form-control" style="width:400px;" value="<?=(empty($ips[array_key_first($ips)]['NAT'])) ? array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>">
       </div>
     </div>
   </div>
@@ -42,13 +42,13 @@
     <div class="l-unit animate__animated animate__fadeIn">
       <div class="l-unit__col l-unit__col--right">
         <div class="clearfix l-unit__stat-col--left wide-3">
-          <b><input type="text" class="form-control" style="width:260px;" value="<?=$v_webmail_alias;?>.<?=htmlspecialchars($_GET['domain']);?>"></b>
+          <input type="text" class="form-control" style="width:260px;" value="<?=$v_webmail_alias;?>.<?=htmlspecialchars($_GET['domain']);?>">
         </div>
         <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>A</b></div>
         <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>&nbsp;</b></div>
         <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>14400</b></div>
         <div class="clearfix l-unit__stat-col--left wide-3">
-          <b><input type="text" class="form-control u-input-width" value="<?=(empty($ips[array_key_first($ips)]['NAT'])) ? array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>"></b>
+          <input type="text" class="form-control" style="width:400px;" value="<?=(empty($ips[array_key_first($ips)]['NAT'])) ? array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>">
         </div>
       </div>
     </div>
@@ -56,40 +56,40 @@
   <div class="l-unit animate__animated animate__fadeIn">
     <div class="l-unit__col l-unit__col--right">
       <div class="clearfix l-unit__stat-col--left wide-3">
-        <b><input type="text" class="form-control" style="width:260px;" value="<?=htmlspecialchars($_GET['domain']);?>"></b>
+        <input type="text" class="form-control" style="width:260px;" value="<?=htmlspecialchars($_GET['domain']);?>">
       </div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>MX</b></div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>10</b></div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>14400</b></div>
       <div class="clearfix l-unit__stat-col--left wide-3">
-        <b><input type="text" class="form-control u-input-width" value="mail.<?=htmlspecialchars($_GET['domain']);?>."></b>
+        <input type="text" class="form-control" style="width:400px;" value="mail.<?=htmlspecialchars($_GET['domain']);?>.">
       </div>
     </div>
   </div>
   <div class="l-unit animate__animated animate__fadeIn">
     <div class="l-unit__col l-unit__col--right">
       <div class="clearfix l-unit__stat-col--left wide-3">
-        <b><input type="text" class="form-control" style="width:260px;" value="<?=htmlspecialchars($_GET['domain']);?>"></b>
+        <input type="text" class="form-control" style="width:260px;" value="<?=htmlspecialchars($_GET['domain']);?>">
       </div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>TXT</b></div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>&nbsp;</b></div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>14400</b></div>
       <?php $ip = (empty($ips[array_key_first($ips)]['NAT'])) ? array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>
       <div class="clearfix l-unit__stat-col--left wide-3">
-        <b><input type="text" class="form-control u-input-width" value="<?=htmlspecialchars('v=spf1 a mx ip4:'.$ip.' -all');?>"></b>
+        <input type="text" class="form-control" style="width:400px;" value="<?=htmlspecialchars('v=spf1 a mx ip4:'.$ip.' -all');?>">
       </div>
     </div>
   </div>
   <div class="l-unit animate__animated animate__fadeIn">
     <div class="l-unit__col l-unit__col--right">
       <div class="clearfix l-unit__stat-col--left wide-3">
-        <b><input type="text" class="form-control" style="width:260px;" value="_dmarc"></b>
+        <input type="text" class="form-control" style="width:260px;" value="_dmarc">
       </div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>TXT</b></div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>&nbsp;</b></div>
       <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>14400</b></div>
       <div class="clearfix l-unit__stat-col--left wide-3">
-        <b><input type="text" class="form-control u-input-width" value="<?=htmlspecialchars('v=DMARC1; p=quarantine; pct=100');?>"></b>
+        <input type="text" class="form-control" style="width:400px;" value="<?=htmlspecialchars('v=DMARC1; p=quarantine; pct=100');?>">
       </div>
     </div>
   </div>
@@ -97,13 +97,13 @@
     <div class="l-unit animate__animated animate__fadeIn">
       <div class="l-unit__col l-unit__col--right">
         <div class="clearfix l-unit__stat-col--left wide-3">
-          <b><input type="text" class="form-control" style="width:260px;" value="<?=htmlspecialchars($key);?>"></b>
+          <input type="text" class="form-control" style="width:260px;" value="<?=htmlspecialchars($key);?>">
         </div>
         <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>TXT</b></div>
         <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>&nbsp;</b></div>
         <div class="clearfix l-unit__stat-col--left text-center u-pt10"><b>3600</b></div>
         <div class="clearfix l-unit__stat-col--left wide-3">
-          <b><input type="text" class="form-control u-input-width" value="<?=htmlspecialchars(str_replace(array('"',"'"),'',$dkim[$key]['TXT']));?>"></b>
+          <input type="text" class="form-control" style="width:400px;" value="<?=htmlspecialchars(str_replace(array('"',"'"),'',$dkim[$key]['TXT']));?>">
         </div>
       </div>
     </div>

web/templates/pages/list_rrd.html

@@ -6,12 +6,10 @@
       <a href="/list/server/?cpu" class="button button-secondary"><i class="fas fa-chart-pie status-icon green"></i><?=_('show: CPU / MEM / NET / DISK');?></a>
     </div>
     <div class="l-sort-toolbar">
-      <div>
-        <a class="vst<?php if ((empty($period)) || ($period == 'day')) echo " selected" ?>" href="?period=day"><?=_('Daily');?></a>
-        <a class="vst<?php if ((!empty($period)) && ($period == 'week')) echo " selected" ?>" href="?period=week"><?=_('Weekly');?></a>
-        <a class="vst<?php if ((!empty($period)) && ($period == 'month')) echo " selected" ?>" href="?period=month"><?=_('Monthly');?></a>
-        <a class="vst<?php if ((!empty($period)) && ($period == 'year')) echo " selected" ?>" href="?period=year"><?=_('Yearly');?></a>
-      </div>
+      <a class="toolbar-link<?php if ((empty($period)) || ($period == 'day')) echo " selected" ?>" href="?period=day"><?=_('Daily');?></a>
+      <a class="toolbar-link<?php if ((!empty($period)) && ($period == 'week')) echo " selected" ?>" href="?period=week"><?=_('Weekly');?></a>
+      <a class="toolbar-link<?php if ((!empty($period)) && ($period == 'month')) echo " selected" ?>" href="?period=month"><?=_('Monthly');?></a>
+      <a class="toolbar-link<?php if ((!empty($period)) && ($period == 'year')) echo " selected" ?>" href="?period=year"><?=_('Yearly');?></a>
     </div>
   </div>
 </div>

web/templates/pages/list_ssl.html

@@ -16,7 +16,7 @@
     <div class="form-container">
       <h1 class="form-title"><?=_('Generating CSR');?></h1>
       <?php show_alert_message($_SESSION);?>
-      <div class="u-wide-input-width">
+      <div class="u-max-width600">
         <div class="u-mb20">
           <label for="v_crt" class="form-label">
             <?=_('SSL Certificate');?>

web/templates/pages/list_web.html

@@ -55,7 +55,7 @@
 </div>
 <!-- End toolbar -->
 
-<div class="l-center units narrow">
+<div class="l-center units">
 
   <!-- Table header -->
   <div class="header table-header">

web/templates/pages/list_webapps.html

@@ -14,26 +14,22 @@
 
   <div style="margin-left:68px; margin-top: 20px">
     <h1 class="form-title"><?=_('Quick Install App');?></h1>
-    <div>
-      <span>
-        <?php
-          if (!empty($_SESSION['error_msg'])) {
-            $msg_icon = 'fa-circle-exclamation status-icon red';
-            $msg_text = htmlentities($_SESSION['error_msg']);
-            $msg_id = 'vst-error';
-          } else {
-            if (!empty($_SESSION['ok_msg'])) {
-              $msg_icon = 'fa-circle-check status-icon green';
-              $msg_text = $_SESSION['ok_msg'];
-              $msg_id = 'vst-ok';
-            }
-          }
-          if(!empty($msg_id)){
-        ?>
-        <span class="<?=$msg_id;?>"> <i class="fas <?=$msg_icon;?>"></i> <?=$msg_text;?></span>
-        <?php }; ?>
-      </span>
-    </div>
+    <?php
+      if (!empty($_SESSION['error_msg'])) {
+        $msg_icon = 'fa-circle-exclamation status-icon red';
+        $msg_text = htmlentities($_SESSION['error_msg']);
+        $msg_class = 'inline-danger';
+      } else {
+        if (!empty($_SESSION['ok_msg'])) {
+          $msg_icon = 'fa-circle-check status-icon green';
+          $msg_text = $_SESSION['ok_msg'];
+          $msg_class = 'inline-success';
+        }
+      }
+      if(!empty($msg_class)){
+    ?>
+    <p class="<?=$msg_class;?> u-mb20"><i class="fas <?=$msg_icon;?>"></i> <?=$msg_text;?></p>
+    <?php }; ?>
   </div>
   <div class="cards">
     <!-- List available web apps -->

web/templates/pages/setup_webapp.html

@@ -7,10 +7,10 @@
     <div class="l-unit-toolbar__buttonstrip">
       <?php
         if (!empty($_SESSION['error_msg'])) {
-          echo "<p class=\"vst-error\"> → ".htmlentities($_SESSION['error_msg'])."</p>";
+          echo "<p class=\"inline-danger\"> → ".htmlentities($_SESSION['error_msg'])."</p>";
         } else {
           if (!empty($_SESSION['ok_msg'])) {
-            echo "<p class=\"vst-ok\"> → ".$_SESSION['ok_msg']."</p>";
+            echo "<p class=\"inline-success\"> → ".$_SESSION['ok_msg']."</p>";
           }
         }
       ?>
@@ -29,14 +29,14 @@
 
       <div class="form-container">
         <?php if( !$WebappInstaller->isDomainRootClean()): ?>
-          <div class="alert alert-info alert-with-icon u-input-width" role="alert">
+          <div class="alert alert-info alert-with-icon u-max-width400" role="alert">
             <i class="fas fa-info"></i>
             <p class="u-mb10"><?=_('Data loss warning!');?></p>
             <p class="u-mb10"><?=_('Your web folder already has files uploaded to it. The installer will overwrite your files and / or the installation might fail.');?></p>
             <p><?php echo sprintf(_('Please make sure ~/web/%s/public_html is empty!'),$v_domain);?></p>
           </div>
         <?php endif; ?>
-        <div class="u-input-width u-mt20">
+        <div class="u-max-width400 u-mt20">
           <?php foreach ($WebappInstaller->getOptions() as $form_name => $form_control):?>
             <?php
               $f_name = $WebappInstaller->formNs() . '_' . $form_name;