Horizontally scroll tables (#3071)

- Refactor font sizing

web/css/src/base.css

@@ -26,7 +26,7 @@ button {
 
 body {
   font-family: var(--font-family);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   line-height: 1.5;
   height: 100%;
   color: var(--color-text);
@@ -59,6 +59,7 @@ button {
 }
 
 table {
+  width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
 }

web/css/src/themes/dark.css

@@ -58,10 +58,6 @@ strong {
 }
 
 .l-profile__notifications {
-  color: #fff;
-  font-weight: 600;
-  font-size: 1.2rem !important;
-  line-height: 0.95rem;
   border-left: 1px solid transparent !important;
   border-right: 1px solid transparent !important;
 
@@ -136,7 +132,7 @@ strong {
 .alert-danger {
   background-color: #d13535;
 
-  & i.fas {
+  & .fas {
     color: #d13535;
   }
 }
@@ -152,10 +148,10 @@ strong {
   box-shadow:
     0 1px 4px rgb(0 0 0 / 20%),
     inset 0 0 60px rgb(0 0 0 / 25%);
+}
 
-  & p.card-title {
-    color: #fafafa;
-  }
+.card-title {
+  color: #fafafa;
 }
 
 /* Main menu
@@ -209,7 +205,7 @@ strong {
   background-color: #282828;
 }
 
-.l-sort.is-active {
+.l-sort.active {
   box-shadow: 0 4px 6px rgb(0 0 0 / 25%);
 }
 
@@ -269,7 +265,6 @@ strong {
   text-shadow: 1px 1px rgb(0 0 0 / 90%);
   box-shadow: 0 1px 1px rgb(0 0 0 / 40%);
   color: #cacaca;
-  font-size: 1em;
 
   &:hover {
     color: #09f;
@@ -332,13 +327,6 @@ strong {
   border-bottom-right-radius: 0;
   color: #dadada;
   box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%);
-
-  &:hover {
-    background-color: #404040;
-    border-left: 1px solid #212121;
-    border-right: 1px solid #212121;
-    box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%);
-  }
 }
 
 .units .l-unit {
@@ -432,10 +420,6 @@ strong {
 .l-unit--suspended .l-percent__fill {
 }
 
-.l-unit--suspended .l-unit__name,
-.l-unit--suspended .l-unit__name span {
-}
-
 .l-unit--suspended.selected .l-unit__name,
 .l-unit--suspended.selected .l-unit__name span {
   color: #707070;
@@ -571,16 +555,8 @@ textarea:focus::placeholder {
 
 .show-passwords-enabled-action {}
 
-.ftp-path-value,
 .hint {
   color: #a2a2a2;
-  font-size: 0.8rem;
-}
-
-.ftp-path-prefix {
-  padding-top: 12px;
-  font-size: 0.8rem;
-  color: #555;
 }
 
 /* Buttons
@@ -654,7 +630,6 @@ textarea:focus::placeholder {
 
 .to-shortcuts,
 .to-top {
-  font-size: 0.85rem;
   font-weight: 400;
   color: #eee;
   border-color: 1px solid #707070;

web/css/src/themes/default.css

@@ -10,6 +10,7 @@
 
 @custom-media --viewport-small (min-width: 480px);
 @custom-media --viewport-medium (min-width: 768px);
+@custom-media --viewport-large (min-width: 1024px);
 
 :root {
   --animate-duration: 300ms;
@@ -53,7 +54,7 @@
 .l-center {
   margin-left: auto;
   margin-right: auto;
-  max-width: 1020px;
+  max-width: 1024px;
 }
 
 .l-logo {
@@ -69,7 +70,6 @@
   size: 100% 40px;
   z-index: 900;
   top: 0;
-  font-size: 0.8rem;
   box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
   border-bottom: 1px solid #fff;
 }
@@ -87,7 +87,6 @@
 
 .l-menu__item.l-menu__item--active a {
   color: #4686b8;
-  font-size: 0.8rem;
   background: linear-gradient(to bottom, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 75%) 30%, rgb(255 255 255 / 100%) 95%);
   text-shadow: 0 1px rgb(255 255 255 / 80%);
   border-left: 1px solid rgb(255 255 255 / 98%);
@@ -104,6 +103,19 @@
   margin-left: 16px;
 }
 
+.l-menu .l-menu__item > a {
+  font-size: 0.8rem;
+
+  & .fas {
+    font-size: 1rem;
+    margin-right: 8px;
+  }
+}
+
+.l-profile .l-menu__item > a {
+  font-size: 1.1rem;
+}
+
 .l-menu__item {
   display: flex;
   align-self: stretch;
@@ -157,35 +169,15 @@
   }
 }
 
-.panel-icon {
-  font-size: 1rem;
-  margin-right: 8px;
-}
-
 .l-profile {
   display: flex;
   align-items: center;
 }
 
-.l-profile__username,
-.l-profile__logout,
-.l-profile__help,
-.l-profile__serversettings {
-  font-size: 1.1rem !important;
-}
-
 .l-profile__logout {
   color: #dbf94e !important;
 }
 
-.l-profile__notifications {
-  color: #fff;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 1.2rem;
-  line-height: 0.95rem;
-}
-
 .l-profile__notifications.active.l-profile__notifications.updates:active {
   background: linear-gradient(to bottom, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 75%) 30%, rgb(255 255 255 / 100%) 95%) !important;
   color: #046c98 !important;
@@ -321,7 +313,7 @@
 }
 
 .notification-container .time {
-  font-size: 0.9em;
+  font-size: 0.75rem;
   display: block;
   text-align: right;
   padding-top: 0.6rem;
@@ -349,16 +341,16 @@
     }
   }
 
-  & i.fas {
+  & .fas {
     border-radius: 1rem;
-    font-size: 1.4rem;
+    font-size: 1.3rem;
     font-weight: 600;
-    size: 2rem;
+    position: absolute;
+    top: 0.8rem;
     left: 0.6rem;
+    size: 2rem;
     line-height: 2rem;
-    position: absolute;
     text-align: center;
-    top: 0.8rem;
   }
 }
 
@@ -371,7 +363,7 @@
   color: #fff;
   background-color: #618ecc;
 
-  & i.fas {
+  & .fas {
     color: #618ecc;
     background-color: #fff;
   }
@@ -381,7 +373,7 @@
   color: #fff;
   background-color: #ec6c6c;
 
-  & i.fas {
+  & .fas {
     color: #ec6c6c;
     background-color: #fff;
   }
@@ -391,7 +383,7 @@
   color: #fff;
   background-color: #5ea64c;
 
-  & i.fas {
+  & .fas {
     color: #5ea64c;
     background-color: #fff;
   }
@@ -436,19 +428,14 @@
 }
 
 .card-details {
-  font-size: 0.8rem;
   padding: 10px;
   border-top: 1px solid #e6e6e6;
   text-align: center;
+}
 
-  & p {
-    font-size: 1em;
-
-    &.card-title {
-      font-size: 1.1em;
-      font-weight: 600;
-    }
-  }
+.card-title {
+  font-size: 1rem;
+  font-weight: 600;
 }
 
 .card-thumb {
@@ -538,7 +525,7 @@
 .main-menu-item-label {
   color: #5b5b5b;
   font-weight: 600;
-  font-size: 16px;
+  font-size: 1rem;
 
   & .fas {
     color: #999;
@@ -552,8 +539,9 @@
     display: block;
     font-size: 0.75rem;
     text-transform: lowercase;
+    line-height: 1.8;
     padding-top: 10px;
-    padding-bottom: 25px;
+    padding-bottom: 20px;
   }
 }
 
@@ -574,7 +562,7 @@
   border-bottom: 1px solid #ddd;
 }
 
-.l-sort.is-active {
+.l-sort.active {
   box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
 }
 
@@ -582,7 +570,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 1020px;
+  max-width: 1024px;
   width: 100%;
 }
 
@@ -641,6 +629,7 @@
   left: 0;
   overflow: hidden;
   border-radius: 4px;
+  font-size: 0.8rem;
   background-color: rgb(255 255 255 / 95%);
   box-shadow: 0 2px 14px 0 rgb(20 20 20 / 35%);
   border: 1px solid rgb(255 255 255 / 100%);
@@ -654,7 +643,6 @@
   border-bottom: 1px solid #ddd;
   color: #2e2e2e;
   cursor: pointer;
-  font-size: 0.8rem;
   padding: 12px;
 }
 
@@ -674,7 +662,6 @@
 .context-menu.sort-order span.active {
   background-color: #4f8bbc !important;
   color: #4686b8;
-  font-size: 0.8rem;
   background: linear-gradient(to bottom, rgb(255 255 255 / 60%) 0%, rgb(255 255 255 / 75%) 50%, rgb(255 255 255 / 95%) 95%);
   text-shadow: 0 1px rgb(255 255 255 / 80%);
 }
@@ -699,7 +686,7 @@
     inset -1px -1px 4px rgb(220 220 220 / 40%);
 }
 
-.context-menu.sort-order span.name i.fas.fa-arrow-down-a-z {
+.context-menu.sort-order span.name .fas.fa-arrow-down-a-z {
   float: right;
   margin-top: 2px;
 }
@@ -711,7 +698,6 @@
 .l-sort-toolbar {
   display: flex;
   position: relative;
-  font-size: 0.8rem;
 
   & form {
     display: flex;
@@ -729,6 +715,7 @@
     cursor: pointer;
     text-transform: uppercase;
     padding: 5px 12px 0;
+    font-size: 0.8rem;
 
     &:hover {
       color: #4b4b4b;
@@ -749,7 +736,6 @@
     & b {
       text-transform: uppercase;
       padding-left: 3px;
-      font-size: 0.8rem;
     }
   }
 }
@@ -765,7 +751,7 @@
   text-shadow: 1px 1px rgb(255 255 255 / 90%);
   color: #069;
   padding: 0 10px;
-  font-size: 0.9em;
+  font-size: 0.75rem;
 
   &:hover {
     color: #39c;
@@ -822,15 +808,20 @@
 .l-unit-toolbar__buttonstrip {
   display: flex;
   align-items: center;
-}
 
-.l-unit-toolbar__buttonstrip .button {
-  min-width: 0;
-  padding: 2px 10px;
-  margin-right: 8px;
+  & .button {
+    min-width: 0;
+    padding: 2px 10px;
+    margin-right: 8px;
 
-  &:last-child {
-    margin-right: 0;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  & .inline-success,
+  & .inline-danger {
+    margin-right: 20px;
   }
 }
 
@@ -842,16 +833,6 @@
   line-height: 2rem;
 }
 
-.lang-bg .l-stat__col-title {
-  font-size: 0.75rem;
-  font-weight: bold;
-}
-
-.lang-bg .l-stat__col .fas,
-.lang-bg .l-stat__col--active .fas {
-  font-size: 0.85rem;
-}
-
 .l-sort-toolbar .form-select {
   min-width: 175px;
   color: inherit;
@@ -899,7 +880,7 @@
 }
 
 .table-header {
-  font-size: 0.95em;
+  font-size: 0.8rem;
   background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
   background-color: #fff;
   border-left: 1px solid #d0d0d0;
@@ -912,33 +893,33 @@
   color: #707070;
   padding: 0 0 0 14px;
   overflow: hidden;
+  width: 1024px;
   line-height: 1rem;
-  margin-top: 1px;
-  position: sticky;
-  top: 82px;
-  z-index: 1;
   padding-top: 4px;
   padding-bottom: 4px;
 
-  &:hover {
-    background-color: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
-    border-left: 1px solid #d0d0d0;
-    border-right: 1px solid #d0d0d0;
-  }
-
   & .fas {
     font-size: 1rem;
   }
+
+  @media (--viewport-large) {
+    &.active {
+      position: fixed;
+      top: 84px;
+      z-index: 2;
+    }
+  }
 }
 
 .units {
-  width: 1020px;
+  overflow-x: auto;
 }
 
 .units .l-unit {
   border-bottom: 1px solid #ddd;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
+  width: 1024px;
 }
 
 .l-unit:hover,
@@ -1096,13 +1077,6 @@
   padding-left: 78px;
 }
 
-.l-unit__date {
-  font-size: 11px;
-  margin-top: 10px;
-  padding-bottom: 30px;
-  text-transform: uppercase;
-}
-
 .l-unit__suspended {
   display: none;
   font-size: 0.8rem;
@@ -1121,16 +1095,9 @@
   display: block;
 }
 
-.l-unit.l-unit--outdated .l-unit__date {
-  color: #d24c4c;
-  font-size: 10px;
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
 .l-unit__name {
   color: #414141;
-  font-size: 22px;
+  font-size: 1.4rem;
   margin-top: 10px;
   margin-bottom: 10px;
   font-weight: 500;
@@ -1139,7 +1106,7 @@
 
 .l-unit__servername {
   color: #414141;
-  font-size: 28px;
+  font-size: 1.7rem;
   margin-bottom: 10px;
   font-weight: 300;
   letter-spacing: -0.02em;
@@ -1156,18 +1123,9 @@
   color: #606060;
 }
 
-.l-unit__name.small {
-  font-size: 16px;
-}
-
-.l-unit__name.small-2 {
-  font-size: 20px;
-}
-
 .l-unit__name span {
   color: #999;
   margin-left: 30px;
-  font-size: 0.85rem;
   font-style: italic;
 }
 
@@ -1180,26 +1138,6 @@
   font-style: italic;
 }
 
-.l-unit__ip {
-  margin-bottom: 26px;
-  font-size: 0.8rem;
-  color: #383838;
-}
-
-.l-unit__ip span {
-  padding-left: 3px;
-  padding-right: 3px;
-}
-
-.display-ip {
-  font-size: 0.8rem;
-}
-
-.display-ip span {
-  padding-left: 3px;
-  padding-right: 3px;
-}
-
 .l-unit__stats {
   margin-bottom: 10px;
   margin-left: 15%;
@@ -1207,10 +1145,6 @@
   border-right: 1px solid transparent !important;
 }
 
-.lang-ar .l-unit__stats {
-  margin-left: 20%;
-}
-
 .l-unit__stats:hover {
   border-left: 1px solid transparent !important;
   border-right: 1px solid transparent !important;
@@ -1219,7 +1153,6 @@
 }
 
 .l-unit__stats table {
-  width: 100%;
   table-layout: fixed;
   margin-top: -54px;
   margin-left: -20px;
@@ -1265,12 +1198,6 @@
   border-left: 1px solid transparent;
 }
 
-.l-unit__stat-col--left.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .l-unit__stat-col--left.super-compact {
   width: 50px;
   white-space: nowrap;
@@ -1328,18 +1255,6 @@
   width: 550px;
 }
 
-.l-unit__stat-col--left.small-2 {
-  line-height: 11px;
-}
-
-.l-unit__stat-col--left.tiny {
-  font-size: 0.8rem;
-}
-
-.l-unit__stat-col--left.tiny b {
-  font-size: 18px;
-}
-
 .l-unit__stat-col--right {
   float: left;
   max-width: 170px;
@@ -1402,43 +1317,22 @@ body.mobile .l-unit-toolbar__col--right {
   background: none;
 }
 
-.l-unit__stat-col.volume {
-  font-size: 0.8rem;
-  line-height: 17px;
-  float: right;
-}
-
 .actions-panel {
   line-height: 1.1rem;
 }
 
 .actions-panel__col {
   display: inline-block;
-  min-width: 18px;
+  margin-left: 3px;
   text-transform: uppercase;
-}
 
-.actions-panel__col a {
-  color: #777;
-  font-weight: 600;
-  font-size: 0.9rem;
-  display: inline-block;
-  cursor: pointer;
-}
-
-.lang-ru .actions-panel__col a {
-  font-size: 0.9rem;
-  padding-top: 1px;
-}
-
-.lang-tw .actions-panel__col a {
-  font-size: 0.9rem;
-  font-weight: normal;
-}
-
-.lang-ar .actions-panel__col a {
-  font-size: 0.9rem;
-  font-weight: normal;
+  & a {
+    color: #777;
+    font-weight: 600;
+    font-size: 0.9rem;
+    display: inline-block;
+    cursor: pointer;
+  }
 }
 
 .l-unit__col .actions-panel .fas {
@@ -1449,10 +1343,6 @@ body.mobile .l-unit-toolbar__col--right {
   display: inline-block;
 }
 
-.icon-pad-left {
-  margin-right: 6px;
-}
-
 .icon-pad-right {
   margin-right: 6px;
 }
@@ -1469,11 +1359,6 @@ body.mobile .l-unit-toolbar__col--right {
   width: 242px;
 }
 
-.l-unit__stat-cols.tiny {
-  font-size: 12px;
-  line-height: 18px;
-}
-
 .l-percent {
   border-bottom: 3px solid #e6e6e6;
   margin-top: 2px;
@@ -1496,9 +1381,9 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 #vstobjects .l-center {
-  padding-top: 20px;
-  padding-bottom: 30px;
   font-size: 0.8rem;
+  padding-top: 30px;
+  padding-bottom: 30px;
 }
 
 .spinner {
@@ -1629,7 +1514,6 @@ body.mobile .l-unit-toolbar__col--right {
 /* form styles */
 
 .form-container {
-  font-size: 0.85rem;
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
@@ -1651,20 +1535,23 @@ body.mobile .l-unit-toolbar__col--right {
 .inline-danger {
   color: #f33;
   font-weight: 600;
-  overflow: hidden;
-  max-width: 500px;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  & .fas {
+    margin-right: 3px;
+  }
 }
 
 .inline-success {
   color: #53ba55;
   font-weight: 600;
-  overflow: hidden;
-  max-width: 500px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 0.8rem;
+
+  & .fas {
+    margin-right: 3px;
+  }
 
   & a {
     color: #326b9b;
@@ -1679,11 +1566,6 @@ body.mobile .l-unit-toolbar__col--right {
   }
 }
 
-.l-unit-toolbar__buttonstrip .inline-success,
-.l-unit-toolbar__buttonstrip .inline-danger {
-  margin-right: 20px;
-}
-
 .form-label {
   margin-bottom: 5px;
   display: inline-block;
@@ -1848,7 +1730,6 @@ body.mobile .l-unit-toolbar__col--right {
   opacity: 0.4;
 }
 
-.ftp-path-value,
 .hint {
   color: #777;
   font-size: 0.8rem;
@@ -1856,10 +1737,9 @@ body.mobile .l-unit-toolbar__col--right {
   font-weight: normal;
 }
 
-.ftp-path-prefix {
-  padding-top: 12px;
-  font-size: 0.8rem;
+.hint-prefix {
   color: #555;
+  font-size: 0.8rem;
 }
 
 .dialog {
@@ -2054,12 +1934,11 @@ body.mobile .l-unit-toolbar__col--right {
 
 .optional {
   font-size: 0.8rem;
-  padding: 0 0 0 6px;
+  margin-left: 6px;
   font-weight: normal;
 }
 
 .mail-infoblock {
-  font-size: 0.85rem;
   color: #777;
   border: 1px solid #d9d9d9;
   padding: 20px;
@@ -2073,14 +1952,13 @@ body.mobile .l-unit-toolbar__col--right {
       color: #c36;
     }
   }
-}
 
-.mail-infoblock td {
-  color: #505050;
-  font-size: 0.75rem;
-  height: 20px;
-  font-weight: normal;
-  padding-bottom: 4px;
+  & td {
+    color: #505050;
+    font-size: 0.75rem;
+    font-weight: normal;
+    padding-bottom: 5px;
+  }
 }
 
 .mail-infoblock td:first-child {
@@ -2131,7 +2009,6 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 .login {
-  font-size: 0.85rem;
   padding: 70px 50px;
   min-width: 320px;
   margin-bottom: 20%;
@@ -2196,10 +2073,6 @@ body.mobile .l-unit-toolbar__col--right {
   border-bottom: 1px solid #ccc;
 }
 
-.section-toggle-icon {
-  font-size: 13.6px;
-}
-
 .qr-code {
   border: 1px solid #cfcfcf;
   border-radius: 4px;
@@ -2533,10 +2406,10 @@ form#vstobjects.suspended {
 
 .footer-banner.alpha a {
   color: #fff;
-}
 
-.footer-banner.alpha a:hover {
-  color: #fff;
+  &:hover {
+    color: #fff;
+  }
 }
 
 .footer-banner.beta {
@@ -2586,7 +2459,6 @@ form#vstobjects.suspended {
   background: rgb(50 50 50 / 93%);
   color: #eee;
   border: 1px solid rgb(255 255 255 / 70%);
-  font-size: 0.8rem;
   border-radius: 6px;
   box-shadow: 0 4px 30px rgb(0 0 0 / 50%);
 }
@@ -2602,7 +2474,6 @@ form#vstobjects.suspended {
 .shortcuts-title {
   text-transform: uppercase;
   color: #ff3478;
-  font-size: 0.85rem;
   letter-spacing: -0.01em;
   font-weight: 600;
 }
@@ -2643,7 +2514,7 @@ form#vstobjects.suspended {
 }
 
 .shortcuts .key.bigger {
-  font-size: 18px;
+  font-size: 1.1rem;
 }
 
 .ui-dialog {
@@ -2666,7 +2537,7 @@ form#vstobjects.suspended {
 .ui-dialog .ui-dialog-title {
   margin: 0;
   color: #305ba9;
-  font-size: 1.2em;
+  font-size: 1rem;
   text-transform: none;
   letter-spacing: -0.01em;
   text-align: center;
@@ -2674,10 +2545,6 @@ form#vstobjects.suspended {
   font-weight: 500;
 }
 
-.ui-widget {
-  font-size: 0.85rem;
-}
-
 .ui-widget-overlay {
   background-color: rgb(0 0 0 / 60%);
 }
@@ -2722,7 +2589,6 @@ form#vstobjects.suspended {
 
 .cron-helper-tabs a {
   color: #777;
-  font-size: 0.8rem;
   font-weight: 600;
   line-height: 30px;
   padding: 0 12px;
@@ -2742,11 +2608,6 @@ li[aria-expanded="true"] a {
   color: #c36;
 }
 
-.cron-helper-tabs p {
-  color: #777;
-  font-size: 0.8rem;
-}
-
 .cron-helper-tabs .form-label {
   padding-right: 15px;
   padding-left: 25px;
@@ -2784,11 +2645,15 @@ li[aria-expanded="true"] a {
 .server-info-data {
   margin-left: 100px;
   margin-top: -20px;
+
+  & table {
+    width: auto;
+  }
 }
 
 .server-info-name {
   margin-top: 8px;
-  margin-bottom: 24px;
+  margin-bottom: 22px;
   font-weight: 400;
 }
 
@@ -2799,7 +2664,7 @@ li[aria-expanded="true"] a {
 }
 
 .icon-server-info {
-  font-size: 5.4em;
+  font-size: 4.6rem;
   float: left;
   margin-right: 32px;
   margin-left: 2px;
@@ -2812,15 +2677,10 @@ li[aria-expanded="true"] a {
 }
 
 .userlist-username {
-  font-size: 1em;
   margin-top: -2px;
   line-height: 1.2rem;
 }
 
-.lang-es .userlist-email {
-  width: 270px;
-}
-
 .debug-panel-header {
   text-align: center;
   border-bottom: 1px solid rgb(255 255 255 / 25%);
@@ -2841,7 +2701,7 @@ li[aria-expanded="true"] a {
 
 .debug-panel-contents {
   background-color: #fff;
-  font-size: 12px;
+  font-size: 0.75rem;
   padding: 18px;
   position: absolute;
   top: 0;

web/css/src/themes/flat.css

@@ -14,17 +14,17 @@ strong {
   font-weight: 600;
 }
 
-.table-header {
-  box-shadow: none;
-  background: #fafafa;
-}
-
 .l-header {
   box-shadow: none;
   background: #5070a6;
   text-shadow: none;
 }
 
+.table-header {
+  box-shadow: none;
+  background: #fafafa;
+}
+
 .l-menu__item--active {
   background-color: #fff;
 }

web/css/src/themes/vestia.css

@@ -171,8 +171,8 @@ strong {
 .context-menu.sort-order {
   box-shadow: none;
   border: 1px solid #ccc;
-  font-size: 0.75rem !important;
-  background: #fff !important;
+  font-size: 0.75rem;
+  background: #fff;
 }
 
 .form-control,
@@ -230,7 +230,7 @@ strong {
 }
 
 .main-menu-item-label {
-  font-size: 14px;
+  font-size: 0.9rem;
 }
 
 .l-menu__item.l-menu__item--active a {
@@ -302,31 +302,53 @@ strong {
   color: #333;
 }
 
-.l-unit-toolbar__buttonstrip .button {
-  border-color: transparent;
-  color: #fff;
-  text-transform: uppercase;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
-  margin-right: 15px;
-  background: #a0c105;
-  background-color: #a0c105;
-}
+.l-unit-toolbar__buttonstrip {
+  & .button {
+    border-color: transparent;
+    color: #fff;
+    text-transform: uppercase;
+    text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
+    margin-right: 15px;
+    background: #a0c105;
+    background-color: #a0c105;
 
-.l-unit-toolbar__buttonstrip .button:hover {
-  border-color: transparent;
-  color: #fff;
-  background: #a9cc06;
-  background-color: #a9cc06;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
-}
+    &:hover {
+      border-color: transparent;
+      color: #fff;
+      background: #a9cc06;
+      background-color: #a9cc06;
+      text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
+    }
+  }
 
-.l-unit-toolbar__buttonstrip .button-danger:hover {
-  color: #f4301a;
-  text-shadow: none;
-}
+  & .button-danger:hover {
+    color: #f4301a;
+    text-shadow: none;
+  }
+
+  & #btn-back {
+    color: #30659d;
+    background: none;
+    text-shadow: none;
+    text-transform: none;
+    font-size: 0.9rem;
+    border: none;
+
+    &:hover {
+      color: #367ac1;
+      background: none;
+      text-shadow: none;
+      text-transform: none;
+    }
 
-.l-sort-toolbar .sort-by {
-  font-size: 0.75rem !important;
+    &:active,
+    &:focus {
+      color: #ff6701;
+      background: none;
+      text-shadow: none;
+      text-transform: none;
+    }
+  }
 }
 
 .l-sort-toolbar .form-control {
@@ -372,10 +394,6 @@ strong {
   color: #b5da0b;
 }
 
-.l-sort-toolbar .sort-by b {
-  font-size: 0.75rem;
-}
-
 .context-menu.sort-order span.active {
   background: none !important;
   font-weight: bold !important;
@@ -391,30 +409,6 @@ strong {
   border: 1px solid rgb(255 255 255 / 40%) !important;
 }
 
-a#btn-back {
-  color: #30659d !important;
-  background: none !important;
-  text-shadow: none !important;
-  text-transform: none !important;
-  font-size: 14px !important;
-  border: none !important;
-}
-
-a#btn-back:hover {
-  color: #367ac1 !important;
-  background: none !important;
-  text-shadow: none !important;
-  text-transform: none !important;
-}
-
-a#btn-back:active,
-a#btn-back:focus {
-  color: #ff6701 !important;
-  background: none !important;
-  text-shadow: none !important;
-  text-transform: none !important;
-}
-
 .to-shortcuts,
 .to-top,
 .to-shortcuts:active,
@@ -462,7 +456,7 @@ a#btn-back:focus {
   box-shadow: none !important;
 }
 
-.l-menu__item i.fas.fa-circle-left {
+.l-menu__item .fas.fa-circle-left {
   display: inline-block !important;
 }
 

web/css/src/utilities.css

@@ -35,14 +35,20 @@
   text-align: center !important;
 }
 
-.text-small {
-  font-size: 0.85em !important;
+.u-text-small {
+  font-size: 0.75rem !important;
 }
 
-.text-italic {
+.u-text-italic {
   font-style: italic !important;
 }
 
+.u-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
 .u-mt15 {
   margin-top: 15px !important;
 }

web/js/app.js

@@ -968,13 +968,16 @@ String.prototype.trim = function()
 
 set_sticky_class = function() {
     var sort = $('.l-sort');
+    var tableHeader = $('.table-header');
     var sortOffset = sort.offset().top;
     var headerHeight = $('.l-header').outerHeight();
 
     if ($(window).scrollTop() > sortOffset - headerHeight) {
-        sort.addClass('is-active');
+        sort.addClass('active');
+        tableHeader.addClass('active');
     } else {
-        sort.removeClass('is-active');
+        sort.removeClass('active');
+        tableHeader.removeClass('active');
     }
 }
 
@@ -1003,7 +1006,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-square-minus');
-        trigger.querySelector('.section-toggle-icon').classList.toggle('fa-square-plus');
+        trigger.querySelector('.js-section-toggle-icon').classList.toggle('fa-square-minus');
+        trigger.querySelector('.js-section-toggle-icon').classList.toggle('fa-square-plus');
     }
 }

web/js/init.js

@@ -1,3 +1,6 @@
+// Replace .no-js class with .js
+document.documentElement.className = document.documentElement.className.replace('no-js', 'js')
+
 $(document).ready(function(){
     if($('.body-login')[0]){
         $('input').first().focus();
@@ -122,7 +125,7 @@ $(document).ready(function(){
               VE.tmp.sort_as_int = $(this).parent('li').attr('sort_as_int');
               VE.tmp.sort_direction = $(this).hasClass('up')*1 || -1;
 
-              $('.l-sort .sort-by span b').html($(this).parent('li').find('.name').html());
+              $('.l-sort .sort-by b').html($(this).parent('li').find('.name').html());
               $('.l-sort .sort-by i').removeClass('fa-arrow-up-a-z fa-arrow-down-a-z');
               $(this).hasClass('up') ? $('.l-sort .sort-by i').addClass('fa-arrow-up-a-z') : $('.l-sort .sort-by i').addClass('fa-arrow-down-a-z');
               $('.units .l-unit').sort(function (a, b) {
@@ -578,7 +581,8 @@ $(document).ready(function(){
                 $('#vstobjects .form-control:not([disabled]), #vstobjects .form-select:not([disabled])').first().focus();
               }
 
-              $('.l-profile__notifications').click(function(){
+              $('.l-profile__notifications').click(function(evt){
+                evt.preventDefault();
                 if(!$('.l-profile__notifications').hasClass('active')){
                   VE.notifications.get_list();
                   $('.l-profile__notifications').addClass('active');

web/js/pages/add_web.js

@@ -39,7 +39,7 @@ App.Listeners.WEB.keypress_domain_name = function() {
         window.frp_usr_tmt = setTimeout(function() {
             //var elm = $(evt.target);
             //App.Actions.WEB.update_ftp_username_hint(elm, $(elm).val());
-            var domain = $('.ftp-path-prefix').text(GLOBAL.FTP_USER_PREPATH + '/' + $('#v_domain').val());
+            var domain = $('.js-ftp-path-prefix').text(GLOBAL.FTP_USER_PREPATH + '/' + $('#v_domain').val());
             $('#v-custom-doc-domain-main').text($('#v_domain').val());
             $('#v-custom-doc-domain-main').val($('#v_domain').val());
             App.Actions.WEB.update_custom_doc_root(13, 12);

web/templates/header.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="<?=$_SESSION['LANGUAGE']?>">
+<html class="no-js" lang="<?=$_SESSION['LANGUAGE']?>">
 
 <head>
 <?php

web/templates/includes/panel.html

@@ -17,19 +17,19 @@
       <!-- Left Menu -->
       <div class="l-menu">
         <!-- Records tab -->
-        <div class="l-menu__item <?php if(in_array($TAB, ['WEB', 'DNS', 'MAIL', 'DB', 'BACKUP', 'CRON', 'PACKAGE', 'USER', 'LOG'])) echo 'l-menu__item--active' ?>"><a href="<?=htmlspecialchars($home_url)?>"><i class="fas fa-list-check panel-icon"></i><?=_('Records');?></a></div>
+        <div class="l-menu__item <?php if(in_array($TAB, ['WEB', 'DNS', 'MAIL', 'DB', 'BACKUP', 'CRON', 'PACKAGE', 'USER', 'LOG'])) echo 'l-menu__item--active' ?>"><a href="<?=htmlspecialchars($home_url)?>"><i class="fas fa-list-check"></i><?=_('Records');?></a></div>
 
         <!-- File Manager tab -->
         <?php if ((isset($_SESSION['FILE_MANAGER'])) && (!empty($_SESSION['FILE_MANAGER'])) && ($_SESSION['FILE_MANAGER'] == "true")) {?>
           <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($_SESSION['look'] === 'admin') && ($_SESSION['POLICY_SYSTEM_PROTECTED_ADMIN'] == 'yes'))) {?>
               <!-- Hide file manager when impersonating admin-->
             <?php } else { ?>
-              <div class="l-menu__item <?php if($TAB == 'FM') echo 'l-menu__item--active' ?>"><a href="/fm/"><i class="fas fa-folder-open panel-icon"></i><?=_('Files');?></a></div>
+              <div class="l-menu__item <?php if($TAB == 'FM') echo 'l-menu__item--active' ?>"><a href="/fm/"><i class="fas fa-folder-open"></i><?=_('Files');?></a></div>
           <?php } ?>
         <?php } ?>
 
         <!-- Statistics tab-->
-        <div class="l-menu__item <?php if($TAB == 'STATS') echo 'l-menu__item--active' ?>"><a href="/list/stats/"><i class="fas fa-chart-line panel-icon"></i><?=_('Statistics');?></a></div>
+        <div class="l-menu__item <?php if($TAB == 'STATS') echo 'l-menu__item--active' ?>"><a href="/list/stats/"><i class="fas fa-chart-line"></i><?=_('Statistics');?></a></div>
       </div>
     </div>
 
@@ -56,7 +56,7 @@
         <!-- Do not show notifications panel when impersonating 'admin' user -->
       <?php } else { ?>
         <div class="l-menu__item">
-          <a title="<?=_('Notifications');?>" class="l-profile__notifications <?php if ($panel[$user]['NOTIFICATIONS'] == 'yes') echo " updates"; ?>">
+          <a title="<?=_('Notifications');?>" href="#" class="l-profile__notifications <?php if ($panel[$user]['NOTIFICATIONS'] == 'yes') echo " updates"; ?>">
             <i class="fas fa-bell <?php if ($panel[$user]['NOTIFICATIONS'] == 'yes') echo " animate__animated animate__swing status-icon orange"; ?>"></i>
           </a>
           <ul class="notification-container u-hidden animate__animated animate__fadeIn"></ul>

web/templates/pages/add_package.html

@@ -48,7 +48,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('web-options',this)">
         <?=_('Web');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="web-options" style="display: none;">
         <div class="u-mt15 u-mb10">
@@ -123,7 +123,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('dns-options',this)">
         <?=_('DNS');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="dns-options" style="display: none;">
         <div class="u-mt15 u-mb10">
@@ -211,7 +211,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('mail-options',this)">
         <?=_('Mail');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="mail-options" style="display: none;">
         <div class="u-mt15 u-mb10">
@@ -239,7 +239,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('database-options',this)">
         <?=_('Databases');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="database-options" style="display: none;">
         <div class="u-mt15 u-mb10">
@@ -252,7 +252,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('system-options',this)">
         <?=_('System');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="system-options" style="display: none;">
         <div class="u-mt15 u-mb10">

web/templates/pages/edit_package.html

@@ -49,7 +49,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('web-options',this)">
         <?=_('Web');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="web-options" style="display: none;">
         <div class="u-mt15 u-mb10">
@@ -123,7 +123,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('dns-options',this)">
         <?=_('DNS');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="dns-options" style="display: none;">
         <div class="u-mt15 u-mb10">
@@ -214,7 +214,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('mail-options',this)">
         <?=_('Mail');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="mail-options" style="display: none;">
         <div class="u-mt15 u-mb10">
@@ -242,7 +242,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('database-options',this)">
         <?=_('Databases');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="database-options" style="display: none;">
         <div class="u-mt15 u-mb10">
@@ -255,7 +255,7 @@
       </div>
       <h2 class="section-title" onclick="javascript:elementHideShow('system-options',this)">
         <?=_('System');?>
-        <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+        <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
       </h2>
       <div id="system-options" style="display: none;">
         <div class="u-mt15 u-mb10">

web/templates/pages/edit_server.html

@@ -599,7 +599,7 @@
         <div class="collapse-content">
           <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>
+            <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
           </h3>
           <div id="security-system-table" style="display: none;">
             <p class="u-pt18" style="font-size:1rem;padding-bottom:12px;">
@@ -667,7 +667,7 @@
           <?php if (($_SESSION['userContext'] === "admin") && ($_SESSION['user'] === 'admin')) {?>
             <h3 class="section-title" onclick="javascript:elementHideShow('security-sysadminprotect-table',this);">
               <?=_('System Protection');?>
-              <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+              <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
             </h3>
             <div id="security-sysadminprotect-table" style="display: none;">
               <p class="u-pt18" style="font-size:1rem;padding-bottom:12px;">
@@ -698,7 +698,7 @@
           <?php } ?>
           <h3 class="section-title" onclick="javascript:elementHideShow('security-policies-table',this);">
             <?=_('Policies');?>
-            <i class="fas fa-square-plus status-icon dim maroon section-toggle-icon"></i>
+            <i class="fas fa-square-plus status-icon dim maroon js-section-toggle-icon"></i>
           </h3>
           <div id="security-policies-table" style="display: none;">
             <p class="u-pt18" style="font-size:1rem;padding-bottom:12px;">

web/templates/pages/edit_web.html

@@ -420,7 +420,7 @@
                 <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 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>
+                <span class="hint-prefix js-ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path, "'"))?></span><span class="hint js-ftp-path-hint"></span>
               </div>
               <?php if ($ftp_user['is_new'] == 1): ?>
                 <div class="u-pl30 u-mb10">
@@ -470,7 +470,7 @@
       <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 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>
+      <span class="hint-prefix js-ftp-path-prefix"><?=htmlentities(trim($v_ftp_pre_path_new_user, "'"))?></span><span class="hint 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/list_access_keys.html

@@ -12,7 +12,7 @@
         <li entity="sort-comment"><span class="name"><?=_('Comment');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span><b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b></span>
+        <?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
       </div>
       <form action="/bulk/access-key/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">

web/templates/pages/list_backup.html

@@ -111,7 +111,7 @@
           </div>
           <!-- END QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left text-center"><b><?=translate_date($data[$key]['DATE'])?></b></div>
-          <div class="clearfix l-unit__stat-col--left text-center"><b><?=humanize_usage_size($data[$key]['SIZE'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['SIZE'])?></span></div>
+          <div class="clearfix l-unit__stat-col--left text-center"><b><?=humanize_usage_size($data[$key]['SIZE'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['SIZE'])?></span></div>
           <div class="clearfix l-unit__stat-col--left text-center"><?=$data[$key]['TYPE']?></div>
           <div class="clearfix l-unit__stat-col--left text-center"><?=humanize_time($data[$key]['RUNTIME'])?></div>
         </div>

web/templates/pages/list_cron.html

@@ -17,12 +17,11 @@
         <li entity="sort-date" sort_as_int="1"><span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/cron/" method="post" id="objects">

web/templates/pages/list_db.html

@@ -40,12 +40,11 @@
         <li entity="sort-user"><span class="name"><?=_('Username');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/db/" method="post" id="objects">
@@ -170,7 +169,7 @@
             </div>
           </div>
           <!-- END QUICK ACTION TOOLBAR AREA -->
-          <div class="clearfix l-unit__stat-col--left text-center"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
+          <div class="clearfix l-unit__stat-col--left text-center"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
           <div class="clearfix l-unit__stat-col--left text-center compact"><?=$data[$key]['TYPE']?></div>
           <div class="clearfix l-unit__stat-col--left text-center wide"><b><?=$data[$key]['DBUSER']?></b></div>
           <div class="clearfix l-unit__stat-col--left text-center"><b><?=$data[$key]['HOST']?></b></div>

web/templates/pages/list_dns.html

@@ -15,12 +15,11 @@
         <li entity="sort-records"><span class="name"><?=_('Records');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/dns/" method="post" id="objects">

web/templates/pages/list_dns_public.html

@@ -15,12 +15,11 @@
         <li entity="sort-records"><span class="name"><?=_('Records');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/dns/" method="post" id="objects">

web/templates/pages/list_dns_rec.html

@@ -17,12 +17,11 @@
         <li entity="sort-type"><span class="name"><?=_('Type');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/dns/" method="post" id="objects">
@@ -59,7 +58,7 @@
       <div class="clearfix l-unit__stat-col--left super-compact">
         <input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?=_('Select all');?>" onchange="checkedAll('objects');" <?=$display_mode;?>>
       </div>
-      <div class="clearfix l-unit__stat-col--left small"><b><?=_('Record');?></b></div>
+      <div class="clearfix l-unit__stat-col--left"><b><?=_('Record');?></b></div>
       <div class="clearfix l-unit__stat-col--left super-compact text-right"><b>&nbsp;</b></div>
       <div class="clearfix l-unit__stat-col--left compact text-center" style="padding-left: 32px;"><b><?=_('Type');?></b></div>
       <div class="clearfix l-unit__stat-col--left compact text-center"><b><?=_('Priority');?></b></div>
@@ -91,7 +90,7 @@
         <div class="clearfix l-unit__stat-col--left super-compact">
           <input id="check<?=$data[$key]['ID']?>" class="ch-toggle" type="checkbox" title="<?=_('Select');?>" name="record[]" value="<?=$data[$key]['ID']?>" <?=$display_mode;?>>
         </div>
-        <div class="clearfix l-unit__stat-col--left small truncate">
+        <div class="clearfix l-unit__stat-col--left u-truncate">
           <b>
           <?php if (($read_only === 'true') || ($data[$key]['SUSPENDED'] == 'yes')) {?>
             <?=substr($data[$key]['RECORD'], 0, 12); if(strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?>

web/templates/pages/list_firewall.html

@@ -18,7 +18,7 @@
         <li entity="sort-comment"><span class="name"><?=_('Comment');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span><b><?=_('Action');?> <i class="fas fa-arrow-up-a-z"></i></b></span>
+        <?=_('sort by');?>: <b><?=_('Action');?> <i class="fas fa-arrow-up-a-z"></i></b>
       </div>
       <form action="/bulk/firewall/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">

web/templates/pages/list_ip.html

@@ -15,7 +15,7 @@
         <li entity="sort-owner"><span class="name"><?=_('Owner');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span><b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b></span>
+        <?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
       </div>
       <form action="/bulk/ip/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">

web/templates/pages/list_mail.html

@@ -14,12 +14,11 @@
         <li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/mail/" method="post" id="objects">
@@ -197,7 +196,7 @@
             </b>
           </div>
           <div class="clearfix l-unit__stat-col--left text-center compact-2"><b>
-              <?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span>
+              <?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span>
           </div>
           <div class="clearfix l-unit__stat-col--left text-center compact-3">
             <i class="fas <?=$antivirus_icon;?>"></i>

web/templates/pages/list_mail_acc.html

@@ -20,12 +20,11 @@
         <li entity="sort-quota" sort_as_int="1"><span class="name"><?=_('Quota');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <?php if ($read_only !== 'true') { ?>
         <form action="/bulk/mail/" method="post" id="objects">
@@ -178,8 +177,8 @@
           <!-- END QUICK ACTION TOOLBAR AREA -->
         </div>
 
-        <div class="clearfix l-unit__stat-col--left text-center compact"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
-        <div class="clearfix l-unit__stat-col--left text-center"><b><?=_(humanize_usage_size($data[$key]['QUOTA'])) ?></b> <span class="text-small"><?=_(humanize_usage_measure($data[$key]['QUOTA'])) ?></span></div>
+        <div class="clearfix l-unit__stat-col--left text-center compact"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
+        <div class="clearfix l-unit__stat-col--left text-center"><b><?=_(humanize_usage_size($data[$key]['QUOTA'])) ?></b> <span class="u-text-small"><?=_(humanize_usage_measure($data[$key]['QUOTA'])) ?></span></div>
         <div class="clearfix l-unit__stat-col--left text-center">
           <i class="fas <?=$alias_icon;?>"></i>
         </div>

web/templates/pages/list_packages.html

@@ -11,12 +11,11 @@
         <li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <form action="/bulk/package/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
@@ -112,7 +111,7 @@
             <?php if (preg_match('/[a-z]/i', $data[$key]['DISK_QUOTA'])): ?>
               <b>&infin;</b>
             <?php else: ?>
-              <b><?=humanize_usage_size($data[$key]['DISK_QUOTA'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['DISK_QUOTA'])?></span>
+              <b><?=humanize_usage_size($data[$key]['DISK_QUOTA'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['DISK_QUOTA'])?></span>
             <?php endif; ?>
           </span>
         </div>
@@ -121,7 +120,7 @@
             <?php if ($data[$key]['BANDWIDTH'] == 'unlimited'){ ?>
               <b>&infin;</b>
             <?php } else {?>
-              <b><?=humanize_usage_size($data[$key]['BANDWIDTH'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['BANDWIDTH'])?></span>
+              <b><?=humanize_usage_size($data[$key]['BANDWIDTH'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['BANDWIDTH'])?></span>
             <?php } ?>
           </span>
         </div>

web/templates/pages/list_search.html

@@ -11,7 +11,7 @@
         <li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span><b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b></span>
+        <?=_('sort by');?>: <b><?=_('Date');?> <i class="fas fa-arrow-down-a-z"></i></b>
       </div>
       <div class="l-sort-toolbar__search-box">
         <form action="/search/" method="get">

web/templates/pages/list_server_info.html

@@ -34,14 +34,14 @@
         <a href="/list/web/" class="l-logo" title="<?=_('Hestia Control Panel');?>"></a>
         <div class="l-menu">
           <div class="l-menu__item"><a href="/list/rrd/" title="<?=_('Back');?>" class="no-hide"><i class="fas fa-circle-left"></i></a></div>
-          <div class="l-menu__item <?php if(isset($_GET['cpu'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?cpu"><i class="fas fa-microchip panel-icon"></i><?=_('CPU');?></a></div>
-          <div class="l-menu__item <?php if(isset($_GET['mem'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mem"><i class="fas fa-memory panel-icon"></i><?=_('RAM');?></a></div>
-          <div class="l-menu__item <?php if(isset($_GET['disk'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?disk"><i class="fas fa-hard-drive panel-icon"></i><?=_('Disk');?></a></div>
-          <div class="l-menu__item <?php if(isset($_GET['net'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?net"><i class="fas fa-ethernet panel-icon"></i><?=_('Network');?></a></div>
-          <?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['web'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?web"><i class="fas fa-earth-europe panel-icon"></i><?=_('Web');?></a></div><?php }?>
-          <?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['dns'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?dns"><i class="fas fa-book-atlas panel-icon"></i><?=_('DNS');?></a></div><?php }?>
-          <?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['mail'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mail"><i class="fas fa-envelopes-bulk panel-icon"></i><?=_('Mail');?></a></div><?php }?>
-          <?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['db'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?db"><i class="fas fa-database panel-icon"></i><?=_('DB');?></a></div><?php }?>
+          <div class="l-menu__item <?php if(isset($_GET['cpu'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?cpu"><i class="fas fa-microchip"></i><?=_('CPU');?></a></div>
+          <div class="l-menu__item <?php if(isset($_GET['mem'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mem"><i class="fas fa-memory"></i><?=_('RAM');?></a></div>
+          <div class="l-menu__item <?php if(isset($_GET['disk'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?disk"><i class="fas fa-hard-drive"></i><?=_('Disk');?></a></div>
+          <div class="l-menu__item <?php if(isset($_GET['net'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?net"><i class="fas fa-ethernet"></i><?=_('Network');?></a></div>
+          <?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['web'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?web"><i class="fas fa-earth-europe"></i><?=_('Web');?></a></div><?php }?>
+          <?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['dns'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?dns"><i class="fas fa-book-atlas"></i><?=_('DNS');?></a></div><?php }?>
+          <?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['mail'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?mail"><i class="fas fa-envelopes-bulk"></i><?=_('Mail');?></a></div><?php }?>
+          <?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) {?><div class="l-menu__item <?php if(isset($_GET['db'])) echo 'l-menu__item--active' ?>"><a href="/list/server/?db"><i class="fas fa-database"></i><?=_('DB');?></a></div><?php }?>
         </div>
       </div>
       <div class="l-profile">

web/templates/pages/list_services.html

@@ -44,7 +44,7 @@
       <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>
       <div class="server-info-data">
-        <table class="text-small">
+        <table class="u-text-small">
           <tr>
             <td>
               <div class="l-unit__stat-cols clearfix">

web/templates/pages/list_stats.html

@@ -79,7 +79,7 @@
                       <div class="l-unit__stat-col l-unit__stat-col--left">
                         <i class="fas fa-right-left status-icon dim large icon-pad-right" title="<?=_('Bandwidth');?>"></i><b><?=_('Bandwidth');?></b>
                       </div>
-                      <div class="l-unit__stat-col l-unit__stat-col--right text-right volume">
+                      <div class="l-unit__stat-col l-unit__stat-col--right text-right">
                         <b><?=humanize_usage_size($data[$key]['U_BANDWIDTH'])?></b> <?=humanize_usage_measure($data[$key]['U_BANDWIDTH'])?>
                       </div>
                     </div>
@@ -90,7 +90,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('Web Domains');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('Web Domains');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_WEB_DOMAINS']?></b>
                     </div>
@@ -98,7 +98,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('Mail Domains');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('Mail Domains');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_MAIL_DOMAINS']?></b>
                     </div>
@@ -107,7 +107,7 @@
               </tr>
               <tr>
                 <td>
-                  <div class="l-unit__stat-cols clearfix tiny">
+                  <div class="l-unit__stat-cols clearfix u-text-small">
                     <div class="text-right">
                       <?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($data[$key]['IP_OWNED'] != "0")) {?>
                         <span style="float: left;font-weight:500;"><?=_('IP Addresses');?>:</span><b><?=$data[$key]['IP_OWNED']?></b> <?=_('IPs');?></span>
@@ -117,7 +117,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('SSL Domains');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('SSL Domains');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_WEB_SSL']?></b>
                     </div>
@@ -125,7 +125,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('Mail Accounts');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('Mail Accounts');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_MAIL_ACCOUNTS']?></b>
                     </div>
@@ -136,7 +136,7 @@
                 <td>
                   <div class="l-unit__stat-cols clearfix graph">
                     <div class="l-unit__stat-col l-unit__stat-col--left"><i class="fas fa-hard-drive status-icon dim large icon-pad-right" title="<?=_('Disk');?>"></i><b><?=_('Disk');?></b></div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right text-right volume">
+                    <div class="l-unit__stat-col l-unit__stat-col--right text-right">
                       <b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <?=humanize_usage_measure($data[$key]['U_DISK'])?>
                     </div>
                   </div>
@@ -146,7 +146,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('Web Aliases');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('Web Aliases');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_WEB_ALIASES']?></b>
                     </div>
@@ -154,7 +154,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('Databases');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('Databases');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_DATABASES']?></b>
                     </div>
@@ -163,7 +163,7 @@
               </tr>
               <tr>
                 <td>
-                  <div class="l-unit__stat-cols clearfix tiny">
+                  <div class="l-unit__stat-cols clearfix u-text-small">
                     <div class="text-right">
                       <span style="float: left;font-weight:500;"><?=_('Web');?>:</span> <b><?=humanize_usage_size($data[$key]['U_DISK_WEB'])?></b> <?=humanize_usage_measure($data[$key]['U_DISK_WEB'])?>
                     </div>
@@ -174,7 +174,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('DNS domains');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('DNS domains');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_DNS_DOMAINS']?></b>
                     </div>
@@ -182,7 +182,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('Cron Jobs');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('Cron Jobs');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_CRON_JOBS']?></b>
                     </div>
@@ -191,7 +191,7 @@
               </tr>
               <tr>
                 <td>
-                  <div class="l-unit__stat-cols clearfix tiny">
+                  <div class="l-unit__stat-cols clearfix u-text-small">
                     <div class="text-right">
                       <span style="float: left;font-weight:500;"><?=_('Mail');?>:</span> <b><?=humanize_usage_size($data[$key]['U_DISK_MAIL'])?></b> <?=humanize_usage_measure($data[$key]['U_DISK_MAIL'])?>
                     </div>
@@ -202,7 +202,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('DNS records');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('DNS records');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_DNS_RECORDS']?></b>
                     </div>
@@ -210,7 +210,7 @@
                 </td>
                 <td>
                   <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right text-italic"><?=_('Backups');?>:</div>
+                    <div class="l-unit__stat-col l-unit__stat-col--left text-right icon-pad-right u-text-italic"><?=_('Backups');?>:</div>
                     <div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
                       <b><?=$data[$key]['U_BACKUPS']?></b>
                     </div>

web/templates/pages/list_user.html

@@ -13,12 +13,11 @@
         <li entity="sort-name"><span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?=_('Name');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
-            <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+          <?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <form action="/bulk/user/" method="post" id="objects">
         <input type="hidden" name="token" value="<?=$_SESSION['token']?>">
@@ -164,8 +163,8 @@
           </b>
         </div>
         <div class="clearfix l-unit__stat-col--left text-center super-compact"><?=$data[$key]['IP_OWNED']?></div>
-        <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
-        <div class="clearfix l-unit__stat-col--left text-center compact"><b><?=humanize_usage_size($data[$key]['U_BANDWIDTH'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_BANDWIDTH'])?></span></div>
+        <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
+        <div class="clearfix l-unit__stat-col--left text-center compact"><b><?=humanize_usage_size($data[$key]['U_BANDWIDTH'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['U_BANDWIDTH'])?></span></div>
         <div class="clearfix l-unit__stat-col--left text-center super-compact" title="<?=$data[$key]['U_WEB_DOMAINS']?> <?=_('Web Domains');?>"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_WEB_DOMAINS']?></b></span></div>
         <div class="clearfix l-unit__stat-col--left text-center super-compact" title="<?=$data[$key]['U_DNS_DOMAINS']?> <?=_('DNS Domains');?>"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_DNS_DOMAINS']?></b></span></div>
         <div class="clearfix l-unit__stat-col--left text-center super-compact" title="<?=$data[$key]['U_MAIL_DOMAINS']?> <?=_('Mail Domains');?>"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_MAIL_DOMAINS']?></b></span></div>

web/templates/pages/list_web.html

@@ -15,12 +15,11 @@
         <li entity="sort-ip" sort_as_int="1"><span class="name"><?=_('IP address');?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span></li>
       </ul>
       <div class="sort-by" title="<?=_('Sort items');?>">
-        <?=_('sort by');?>: <span>
-          <b>
-            <?php if ($_SESSION['userSortOrder'] === 'name') { $label = ('Name'); } else { $label = _('Date'); } ?>
-            <?=$label?> <i class="fas fa-arrow-down-a-z"></i>
-          </b>
-        </span>
+        <?=_('sort by');?>:
+        <b>
+          <?php if ($_SESSION['userSortOrder'] === 'name') { $label = ('Name'); } else { $label = _('Date'); } ?>
+          <?=$label?> <i class="fas fa-arrow-down-a-z"></i>
+        </b>
       </div>
       <?php if ($read_only !== 'true') {?>
         <form action="/bulk/web/" method="post" id="objects">
@@ -224,8 +223,8 @@
           </div>
           <!-- END QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left text-center"><?=empty($ips[$data[$key]['IP']]['NAT']) ? $data[$key]['IP'] : "{$ips[$data[$key]['IP']]['NAT']}"; ?></div>
-          <div class="clearfix l-unit__stat-col--left text-center"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
-          <div class="clearfix l-unit__stat-col--left text-center compact"><b><?=humanize_usage_size($data[$key]['U_BANDWIDTH'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_BANDWIDTH'])?></span></div>
+          <div class="clearfix l-unit__stat-col--left text-center"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
+          <div class="clearfix l-unit__stat-col--left text-center compact"><b><?=humanize_usage_size($data[$key]['U_BANDWIDTH'])?></b> <span class="u-text-small"><?=humanize_usage_measure($data[$key]['U_BANDWIDTH'])?></span></div>
           <div class="clearfix l-unit__stat-col--left text-center">
             <i class="fas <?=$icon_ssl;?>"></i>
           </div>

web/templates/pages/list_weblog.html

@@ -46,5 +46,5 @@
     </div>
   </header>
 
-  <div style="margin-left: auto; margin-right: auto; padding-top: 80px; width: 1020px;"><?=sprintf(_('Last 70 lines of %s.%s.log'),htmlentities($_GET['domain']),htmlentities($type)) ;?></div>
-  <pre style="width: 1020px; margin-left: auto; margin-right: auto;" class="console-output">
+  <div class="l-center" style="padding-top: 80px;"><?=sprintf(_('Last 70 lines of %s.%s.log'),htmlentities($_GET['domain']),htmlentities($type)) ;?></div>
+  <pre class="l-center console-output">