Rebuild top bar for mobile (#3074)

web/css/src/base.css

@@ -58,6 +58,10 @@ button {
   line-height: inherit;
 }
 
+img {
+  vertical-align: middle;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;

web/css/src/themes/dark.css

@@ -17,69 +17,48 @@ strong {
   color: #cacaca;
 }
 
-.l-header {
+/* Top bar
+   ========================================================================== */
+
+.top-bar {
   background: #454545;
   border-bottom: 1px solid #505050;
-  text-shadow: 1px 1px rgb(0 0 0 / 50%);
   box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
 }
 
-.l-menu__item.l-menu__item--active a {
-  color: #dadada;
-  background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%);
-  text-shadow: 0 1px rgb(0 0 0 / 50%);
-  border-left-color: #353535;
-  border-right-color: #353535;
-}
-
-.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 {
-  color: #e7e7e7;
-
+.top-bar-nav-link {
   &: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;
+    color: #dadada;
+    text-shadow: 1px 1px rgb(0 0 0 / 50%);
+    background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%);
+    box-shadow: none;
   }
 
   &: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;
+    background: linear-gradient(to bottom, rgb(15 15 15 / 70%) 0%, rgb(45 45 45 / 85%) 30%, rgb(50 50 50 / 100%) 95%);
+    color: #fff;
+    text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
   }
-}
 
-.l-profile__logout {
-  color: #e7e7e7 !important;
+  &.active {
+    color: #dadada;
+    background: linear-gradient(to bottom, rgb(15 15 15 / 60%) 0%, rgb(45 45 45 / 75%) 30%, rgb(60 60 60 / 100%) 95%);
+    text-shadow: 0 1px rgb(0 0 0 / 50%);
+    border-left-color: #353535;
+    border-right-color: #353535;
+  }
 }
 
-.l-profile__notifications {
-  border-left: 1px solid transparent !important;
-  border-right: 1px solid transparent !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;
-  }
+.top-bar-nav-link-logout {
+  color: #e7e7e7;
+}
 
-  &: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;
-  }
+.top-bar-usage-inner {
+  color: #909090;
+  box-shadow: inset 0 1px 1px rgb(0 0 0 / 85%), 0 1px 1px rgb(0 0 0 / 20%);
+  background-color: rgb(15 15 15 / 50%);
+  border-color: rgb(120 120 120 / 95%);
+  text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
 }
 
 .notification-container {
@@ -628,48 +607,6 @@ textarea:focus::placeholder {
   border-color: rgb(251 71 51);
 }
 
-.to-shortcuts,
-.to-top {
-  font-weight: 400;
-  color: #eee;
-  border-color: 1px solid #707070;
-  background: rgb(48 48 48);
-  background: linear-gradient(0deg, rgb(48 48 48 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(69 69 69 / 100%) 100%);
-  box-shadow:
-    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%);
-  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
-}
-
-.to-shortcuts:hover,
-.to-top:hover {
-  color: #fff;
-  text-shadow: 1px 1px rgb(0 0 0 / 25%);
-  border-color: #0098ff;
-  background: linear-gradient(0deg, rgb(58 58 58 / 100%) 0%, rgb(68 68 68 / 100%) 35%, rgb(79 79 79 / 100%) 100%);
-  background-color: #454545;
-  box-shadow:
-    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%);
-  transition: 0.2s;
-}
-
-.to-shortcuts:active,
-.to-top:active,
-.to-shortcuts:focus,
-.to-top:focus {
-  border-color: #0066b4;
-  background: linear-gradient(0deg, rgb(69 69 69 / 100%) 0%, rgb(53 53 53 / 100%) 35%, rgb(48 48 48 / 100%) 100%);
-  color: #d4d4d4;
-  text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
-  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%);
-}
-
 .ui-dialog button.cancel span {
   color: #fff !important;
 }
@@ -814,18 +751,6 @@ form#vstobjects.suspended {
   background-color: #282828;
 }
 
-.usage-pill {
-  box-shadow: inset 0 1px 1px rgb(0 0 0 / 85%), 0 1px 1px rgb(0 0 0 / 20%);
-  background-color: rgb(15 15 15 / 50%);
-  border: 1px solid rgb(120 120 120 / 95%);
-  text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
-  color: #909090;
-}
-
-.usage-pill b {
-  color: #d8d8d8;
-}
-
 .badge {
   box-shadow:
     0 1px 2px rgb(70 70 70 / 50%),

web/css/src/themes/default.css

@@ -51,168 +51,206 @@
   left: -6px;
 }
 
-.l-center {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1024px;
-}
-
-.l-logo {
-  background-image: url("/images/logo-header.svg");
-  background-repeat: no-repeat;
-  size: 54px 28px;
-}
+/* Top bar
+   ========================================================================== */
 
-.l-header {
+.top-bar {
   background: linear-gradient(to bottom, rgb(104 145 196 / 100%) 0%, rgb(69 114 181 / 100%) 50%, rgb(65 90 149 / 100%) 100%);
   background-color: #5070a6;
-  position: fixed;
-  size: 100% 40px;
-  z-index: 900;
-  top: 0;
   box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
   border-bottom: 1px solid #fff;
-}
 
-.l-header__inner {
-  display: flex;
-  height: 100%;
-  justify-content: space-between;
+  @media (--viewport-medium) {
+    position: fixed;
+    width: 100%;
+    z-index: 2;
+    top: 0;
+  }
 }
 
-.l-header__left {
-  display: flex;
-  align-items: center;
-}
+.top-bar-inner {
+  padding-top: 10px;
 
-.l-menu__item.l-menu__item--active a {
-  color: #4686b8;
-  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%);
-  border-right: 1px solid rgb(255 255 255 / 98%);
+  @media (--viewport-medium) {
+    display: flex;
+    padding-top: 0;
+    padding-left: 20px;
+    padding-right: 20px;
+    justify-content: space-between;
+  }
+
+  @media (--viewport-large) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
-.l-menu__item.l-menu__item--active:hover {
-  box-shadow: none;
+.top-bar-left {
+  @media (--viewport-medium) {
+    display: flex;
+    align-items: center;
+  }
 }
 
-.l-menu {
-  display: flex;
-  align-self: stretch;
-  margin-left: 16px;
+.top-bar-logo {
+  display: block;
+  width: 54px;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media (--viewport-medium) {
+    margin-right: 16px;
+  }
 }
 
-.l-menu .l-menu__item > a {
-  font-size: 0.8rem;
+.top-bar-nav {
+  margin-top: 10px;
 
-  & .fas {
-    font-size: 1rem;
-    margin-right: 8px;
+  @media (--viewport-medium) {
+    margin-top: 0;
+    display: flex;
+    align-self: stretch;
   }
 }
 
-.l-profile .l-menu__item > a {
-  font-size: 1.1rem;
+.top-bar-nav-list {
+  display: flex;
 }
 
-.l-menu__item {
+.top-bar-nav-item {
   display: flex;
-  align-self: stretch;
   position: relative;
+  flex-grow: 1;
 }
 
-.l-menu__item > a {
+.top-bar-nav-link {
   color: #f7f7f7;
   display: flex;
+  flex-grow: 1;
   align-items: center;
-  position: relative;
+  justify-content: center;
+  font-size: 0.8rem;
   font-weight: 600;
   text-shadow: 1px 1px rgb(0 0 0 / 25%);
-  padding-left: 10px;
-  padding-right: 10px;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
+  padding: 10px;
 
   &:hover {
-    border: 0;
-    box-shadow: inset 0 0 6px rgb(255 255 255 / 60%) !important;
+    box-shadow: inset 0 0 6px rgb(255 255 255 / 60%);
     transition: 0.2s;
+    color: #4686b8;
     border-left: 1px solid rgb(0 0 0 / 10%);
     border-right: 1px solid rgb(0 0 0 / 10%);
-    color: #4686b8 !important;
     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%);
   }
 
   &:active {
-    border: 0;
+    color: #046c98;
+    border-left: 1px solid rgb(0 0 0 / 15%);
+    border-right: 1px solid rgb(0 0 0 / 15%);
+    text-shadow: 0 -1px 1px rgb(255 255 255 / 50%);
     background: linear-gradient(to bottom, rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 60%) 30%, rgb(255 255 255 / 95%) 95%);
-    color: #046c98 !important;
-    text-shadow: 0 -1px 1px rgb(255 255 255 / 50%) !important;
     box-shadow:
       inset 0 0 1px #fff,
-      inset -1px -1px 4px rgb(220 220 220 / 40%) !important;
+      inset -1px -1px 4px rgb(220 220 220 / 40%);
     transition: 0.2s;
-    border-left: 1px solid rgb(0 0 0 / 15%);
-    border-right: 1px solid rgb(0 0 0 / 15%);
+  }
+
+  &.active {
+    color: #4686b8;
+    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%);
+    border-right: 1px solid rgb(255 255 255 / 98%);
+  }
+
+  & .fas {
+    font-size: 1.1rem;
   }
 }
 
-.l-menu.active .l-menu__item.focus a {
-  text-decoration: underline;
-  color: #5edad0;
+.top-bar-nav-link-logout {
+  color: #dbf94e;
+}
 
-  &:hover {
-    background-color: #f79b44;
-    color: #fff;
+.top-bar-nav-link-label {
+  margin-left: 6px;
+}
+
+.top-bar-right {
+  @media (--viewport-medium) {
+    display: flex;
+    align-items: center;
   }
 }
 
-.l-profile {
+.top-bar-usage {
   display: flex;
-  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+
+  @media (--viewport-medium) {
+    margin-top: 0;
+    margin-right: 10px;
+  }
 }
 
-.l-profile__logout {
-  color: #dbf94e !important;
+.top-bar-usage-inner {
+  display: flex;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 0.75rem;
+  padding: 4px 8px;
+  color: #30659d;
+  box-shadow: 0 1px 1px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(0 0 0 / 8%);
+  background-color: rgb(255 255 255 / 75%);
+  border: 1px solid rgb(255 255 255 / 75%);
+  text-shadow: 0 1px 1px rgb(255 255 255 / 60%);
 }
 
-.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;
-  text-shadow: 0 -1px 1px rgb(255 255 255 / 50%) !important;
-  box-shadow:
-    0 1px 3px rgb(0 0 0 / 15%),
-    inset 0 0 1px #fff,
-    inset -1px -1px 4px rgb(220 220 220 / 40%) !important;
-  transition: 0.2s;
+.top-bar-usage-item {
+  margin-right: 11px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  & .fas {
+    margin-right: 3px;
+  }
 }
 
-.l-profile__notifications:hover,
-.l-profile__notifications.updates:hover {
-  color: #3b9de8 !important;
-  text-shadow: 1px 1px rgb(255 255 255 / 50%) !important;
-  background: linear-gradient(to bottom, rgb(255 255 255 / 75%) 0%, rgb(255 255 255 / 87%) 30%, rgb(255 255 255 / 100%) 95%) !important;
-  transition: 0.2s;
+.l-center {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1024px;
 }
 
 .notification-container {
-  background-color: rgb(255 255 255 / 95%);
+  background-color: #fff;
   box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
   max-height: 500px;
   overflow-y: auto;
   position: absolute;
   top: 100%;
-  right: 0;
-  width: 390px;
-  z-index: 300;
+  left: 10px;
+  width: 330px;
+  z-index: 1;
   font-size: 0.8rem;
   color: #6f6f6f;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   border: 1px solid #fff;
   border-top: none;
+
+  @media (--viewport-medium) {
+    left: auto;
+    right: 0;
+    width: 390px;
+  }
 }
 
 .notification-container .empty {
@@ -510,8 +548,6 @@
   }
 
   @media (--viewport-medium) {
-    padding-left: 30px;
-    padding-right: 30px;
     border-bottom: 4px solid #fff;
 
     &:hover,
@@ -520,6 +556,11 @@
       transition: 0.3s;
     }
   }
+
+  @media (--viewport-large) {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
 }
 
 .main-menu-item-label {
@@ -552,18 +593,21 @@
 
 .l-sort {
   display: flex;
-  position: sticky;
-  z-index: 2;
-  top: 39px;
   height: 45px;
   justify-content: center;
   background-color: #fff;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
-}
 
-.l-sort.active {
-  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
+  &.active {
+    box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
+  }
+
+  @media (--viewport-medium) {
+    position: sticky;
+    z-index: 1;
+    top: 39px;
+  }
 }
 
 .l-sort__inner {
@@ -572,54 +616,12 @@
   align-items: center;
   max-width: 1024px;
   width: 100%;
-}
-
-.l-sort__create-btn {
-  background-position: -331px -107px;
-  background-repeat: no-repeat;
-  bottom: -23px;
-  display: inline-block;
-  size: 45px;
-  left: 30px;
-  position: absolute;
-  z-index: 3;
-}
-
-.l-sort__create-btn:hover {
-  background-position: -378px -107px;
-}
-
-.l-sort__create-btn:active {
-  background-position: -425px -107px;
-}
-
-.l-sort__create-btn--active {
-  background-position: -425px -107px;
-}
-
-.l-sort__create-btn.restore {
-  background-position: -331px -250px;
-  bottom: -22px;
-
-  &:hover {
-    background-position: -331px -250px;
-  }
-
-  &:active {
-    background-position: -331px -250px;
-  }
-}
-
-.l-sort__create-btn.edit {
-  background-position: -331px -154px;
-  bottom: -22px;
-
-  &:hover {
-    background-position: -378px -154px;
-  }
+  padding-left: 20px;
+  padding-right: 20px;
 
-  &:active {
-    background-position: -425px -154px;
+  @media (--viewport-large) {
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
@@ -906,7 +908,7 @@
     &.active {
       position: fixed;
       top: 84px;
-      z-index: 2;
+      z-index: 1;
     }
   }
 }
@@ -1751,9 +1753,9 @@ body.mobile .l-unit-toolbar__col--right {
   display: none;
 }
 
-/* Set high z-index for dialog to override .l-header */
+/* Set dialog z-index */
 .ui-front {
-  z-index: 1000;
+  z-index: 2;
 }
 
 /* Buttons
@@ -1832,63 +1834,33 @@ body.mobile .l-unit-toolbar__col--right {
   border-color: #f4301a;
 }
 
-.to-top,
-.to-shortcuts {
-  display: flex;
-  position: fixed;
+.button-circle {
   border-radius: 50%;
-  background-color: #eee;
-  justify-content: center;
-  align-items: center;
-  z-index: 200;
-  size: 34px;
-  text-shadow: 1px 1px #fff;
-  box-shadow:
-    0 2px 4px rgb(120 120 120 / 25%),
-    inset 0 0 1px rgb(255 255 255 / 90%);
-  top: 90%;
-  color: #717171;
-  border: 1px solid #aaa;
-  background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(230 230 230 / 100%) 51%, rgb(242 242 242 / 100%) 100%);
-}
+  min-width: 28px;
+  padding: 3px;
 
-.to-top {
-  right: 4%;
+  & .fas {
+    margin-right: 0;
+  }
 }
 
-.to-shortcuts {
-  right: 8%;
-}
+.button-floating {
+  display: none;
 
-.to-top:hover,
-.to-shortcuts:hover {
-  color: #0077c6;
-  text-shadow: 1px 1px rgb(255 255 255 / 50%);
-  border-color: #54a6e5;
-  background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(190 221 246 / 100%) 51%, rgb(227 240 251 / 100%) 100%);
-  box-shadow:
-    0 1px 3px rgb(0 0 0 / 25%),
-    inset 0 0 1px #fff,
-    inset 0 0 6px rgb(255 255 255 / 60%);
-  transition: 0.2s;
+  @media (--viewport-medium) {
+    display: block;
+    position: fixed;
+    z-index: 1;
+    bottom: 70px;
+  }
 }
 
-.to-top:focus,
-.to-shortcuts:focus {
-  border-color: #0066b4;
-  background: linear-gradient(to bottom, rgb(194 224 248 / 100%) 0%, rgb(162 207 244 / 100%) 51%, rgb(210 232 250 / 100%) 100%);
-  color: #517bab;
-  text-shadow: 0 -1px 2px rgb(255 255 255 / 85%);
-  box-shadow:
-    0 1px 2px rgb(0 0 0 / 20%),
-    inset 0 0 1px #fff,
-    inset -1px -1px 4px rgb(220 220 220 / 40%);
+.button-floating-top {
+  right: 60px;
 }
 
-.to-top:active,
-.to-shortcuts:active {
-  border-color: #378ccd;
-  background-color: #378ccd;
+.button-floating-shortcuts {
+  right: 110px;
 }
 
 .additional-control {
@@ -2116,7 +2088,9 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 .l-content {
-  padding-top: 40px;
+  @media (--viewport-medium) {
+    padding-top: 40px;
+  }
 }
 
 .l-content.collapsed .l-sort {
@@ -2140,14 +2114,6 @@ form#vstobjects.suspended {
   z-index: 3;
 }
 
-.l-sort__create-btn.restore #add-icon {
-  background-position: -378px -250px;
-}
-
-.l-sort__create-btn.edit #add-icon {
-  background-position: -378px -154px;
-}
-
 #tooltip {
   background-color: #3b9de8;
   border-radius: 15px;
@@ -2169,59 +2135,6 @@ form#vstobjects.suspended {
   z-index: -1;
 }
 
-.l-sort__create-btn:active #add-icon {
-  background-position: -425px -107px;
-}
-
-.l-sort__create-btn.restore:active #add-icon {
-  background-position: -425px -250px !important;
-}
-
-.l-sort__create-btn.edit:active #add-icon {
-  background-position: -425px -154px !important;
-}
-
-.l-sort__create-btn.edit:hover #tooltip {
-  background-color: #3b9de8;
-}
-
-.l-sort__create-btn.edit:active #tooltip {
-  background-color: #3bf0e6 !important;
-}
-
-.l-sort__create-btn:active #tooltip {
-  background-color: #54a6e5;
-}
-
-.usage-pill {
-  border-radius: 12px;
-  display: flex;
-  font-size: 0.75rem;
-  padding: 4px;
-  padding-left: 8px;
-  padding-right: 8px;
-  margin-right: 10px;
-  line-height: 0.75rem;
-  box-shadow: 0 1px 1px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(0 0 0 / 8%);
-  background-color: rgb(255 255 255 / 75%);
-  font-weight: 500;
-  border: 1px solid rgb(255 255 255 / 75%);
-  text-shadow: 0 1px 1px rgb(255 255 255 / 60%);
-  color: #30659d;
-
-  & b {
-    color: #30659d;
-  }
-}
-
-.usage-pill__item {
-  margin-right: 11px;
-}
-
-.usage-pill__item:last-child {
-  margin-right: 0;
-}
-
 .badge {
   display: inline-block;
   min-width: 24px;
@@ -2691,7 +2604,7 @@ li[aria-expanded="true"] a {
   color: #000;
   position: sticky;
   top: 0;
-  z-index: 3001;
+  z-index: 301;
 }
 
 .debug-panel-header a {
@@ -2705,7 +2618,7 @@ li[aria-expanded="true"] a {
   padding: 18px;
   position: absolute;
   top: 0;
-  z-index: 3000;
+  z-index: 300;
   height: 250px;
   overflow-x: hidden;
   overflow-y: scroll;

web/css/src/themes/flat.css

@@ -14,42 +14,31 @@ strong {
   font-weight: 600;
 }
 
-.l-header {
+/* Top bar
+   ========================================================================== */
+
+.top-bar {
   box-shadow: none;
   background: #5070a6;
-  text-shadow: none;
 }
 
-.table-header {
-  box-shadow: none;
-  background: #fafafa;
-}
+.top-bar-nav-link {
+  text-shadow: none;
 
-.l-menu__item--active {
-  background-color: #fff;
-}
+  &:hover,
+  &:active {
+    background: #fff;
+    box-shadow: none;
+  }
 
-.l-menu__item.l-menu__item--active a {
-  background: none;
-  box-shadow: none !important;
+  &.active {
+    background: #fff;
+  }
 }
 
-.l-menu__item > a:hover {
-  background: #fff !important;
+.table-header {
   box-shadow: none;
-}
-
-.l-menu__item > a:active {
-  background: none;
-  box-shadow: none !important;
-}
-
-.l-profile__notifications:hover,
-.l-profile__notifications.updates:hover,
-.l-profile__notifications.active.l-profile__notifications.updates:active {
-  background: white !important;
-  border: 1px solid transparent !important;
-  box-shadow: none !important;
+  background: #fafafa;
 }
 
 .l-unit:hover {
@@ -113,36 +102,6 @@ strong {
   border-color: #f4301a;
 }
 
-.to-top,
-.to-shortcuts,
-.to-top:hover,
-.to-shortcuts:hover,
-.to-top:active,
-.to-shortcuts:active {
-  box-shadow: none;
-  background: none;
-  background-color: #eee;
-}
-
-.to-top,
-.to-shortcuts {
-  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;
-  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;
-  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) {
   box-shadow: none;
 }
@@ -151,10 +110,6 @@ strong {
   box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
 }
 
-.usage-pill {
-  box-shadow: none;
-}
-
 .badge {
   box-shadow: none;
 }
@@ -162,7 +117,6 @@ strong {
 .notification-container {
   box-shadow: none;
   border: 1px solid #ccc;
-  background: #fff;
 }
 
 .context-menu.sort-order {

web/css/src/themes/vestia.css

@@ -18,47 +18,44 @@ strong {
   font-weight: 600;
 }
 
-.table-header {
-  box-shadow: none;
-  background: #fafafa;
-  line-height: 1.2rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
+/* Top bar
+   ========================================================================== */
 
-.l-header {
+.top-bar {
   box-shadow: none;
   background: #5d5d5d;
-  text-shadow: 0 1px 1px rgb(0 0 0 / 25%);
 }
 
-.l-menu__item--active {
-  background-color: #fff;
-}
+.top-bar-nav-link {
+  &:hover,
+  &:active {
+    color: #fff;
+    background: #f79b44;
+    box-shadow: none;
+    text-shadow: none;
+    transition: none;
+  }
 
-.l-menu__item > a:hover {
-  background: #f79b44 !important;
-  box-shadow: none !important;
-  padding: 12px 10px !important;
-  border-left: 1px solid #f79b44;
-  border-right: 1px solid #f79b44;
-  color: #fff !important;
-  transition: none !important;
-  text-shadow: none !important;
+  &.active {
+    color: #ff6701;
+    background: #fff;
+  }
 }
 
-.l-menu__item > a:active {
+.top-bar-usage-inner {
+  color: #fff;
+  border: none;
   background: none;
-  box-shadow: none !important;
-  text-shadow: none !important;
+  box-shadow: none;
+  text-shadow: none;
 }
 
-.l-profile__notifications:hover,
-.l-profile__notifications.updates:hover,
-.l-profile__notifications.active.l-profile__notifications.updates:active {
-  background: #f79b44 !important;
-  border: 1px solid transparent !important;
-  box-shadow: none !important;
+.table-header {
+  box-shadow: none;
+  background: #fafafa;
+  line-height: 1.2rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .l-unit:hover {
@@ -148,6 +145,12 @@ strong {
   text-shadow: none;
 }
 
+.button-floating {
+  & .fas {
+    display: block;
+  }
+}
+
 .ui-dialog .ui-dialog-buttonpane button {
   box-shadow: none;
 }
@@ -158,7 +161,6 @@ strong {
 
 .notification-container {
   border: 1px solid #ccc;
-  background: #fff;
   border-bottom-left-radius: 2px !important;
   border-bottom-right-radius: 2px !important;
   box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%) !important;
@@ -181,21 +183,6 @@ strong {
   border-radius: 0;
 }
 
-.usage-pill {
-  border-radius: 4px;
-  color: #fafafa;
-  line-height: 0.8em;
-  text-shadow: none;
-  padding: 5px;
-  border: none;
-  background: none;
-  box-shadow: none;
-
-  & b {
-    color: #fff;
-  }
-}
-
 /* Main menu
    ========================================================================== */
 
@@ -233,12 +220,6 @@ strong {
   font-size: 0.9rem;
 }
 
-.l-menu__item.l-menu__item--active a {
-  color: #ff6701;
-  background: none;
-  box-shadow: none !important;
-}
-
 .notification-container .unseen .notification-title a,
 .notification-container .unseen .notification-title {
   color: #111;
@@ -409,33 +390,6 @@ strong {
   border: 1px solid rgb(255 255 255 / 40%) !important;
 }
 
-.to-shortcuts,
-.to-top,
-.to-shortcuts:active,
-.to-top:active,
-.to-shortcuts:hover,
-.to-top:hover,
-.to-shortcuts:focus,
-.to-top:focus {
-  background: none;
-  background-color: none;
-  border: none;
-  text-shadow: none;
-  box-shadow: none;
-}
-
-.to-shortcuts:hover,
-.to-top:hover {
-  color: #94be00;
-}
-
-.to-shortcuts:focus,
-.to-top:focus,
-.to-shortcuts:active,
-.to-top:active {
-  color: #809c00;
-}
-
 .body-login,
 .body-reset {
   background: #ededed;
@@ -447,19 +401,11 @@ strong {
   border-radius: 0;
 }
 
-.l-logo {
-  height: 24px;
-}
-
 .mail-infoblock {
   border-radius: 0 !important;
   box-shadow: none !important;
 }
 
-.l-menu__item .fas.fa-circle-left {
-  display: inline-block !important;
-}
-
 .helper-container {
   margin-top: 197px;
   border-radius: 0;

web/images/logo-header.svg

@@ -1,70 +1,18 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 70.7 37.5" style="enable-background:new 0 0 70.7 37.5;" xml:space="preserve">
-<style>
-	.st0{fill:#FFFFFF;}
-	.st1{opacity:0.3;fill:#B2B2B2;}
-	.st2{opacity:0.6;fill:#FFFFFF;}
-	.st3{opacity:0.2;fill:#878787;}
-	.st4{opacity:0.17;fill:#FFFFFF;}
-	.st5{opacity:0.3;fill:#C6C6C6;}
-</style>
-<g>
-	<g>
-		<g>
-			<path class="st0" d="M6,32.6c0,0,2.2-0.9,6.8-10.2c1-2.1,1.8-3.4,2.8-4.4c0,0,1.8-0.1,0.9,2.8c-0.9,2.9-1.2,7.8-1.2,7.8
-				s-2.5,5.3-2.9,5.6c-0.4,0.4-1.6,2.3-4,2S6,32.6,6,32.6z"/>
-			<path class="st1" d="M6,32.6c0,0,2.2-0.9,6.8-10.2c1-2.1,1.8-3.4,2.8-4.4c0,0,1.8-0.1,0.9,2.8c-0.9,2.9-1.2,7.8-1.2,7.8
-				s-2.5,5.3-2.9,5.6c-0.4,0.4-1.6,2.3-4,2S6,32.6,6,32.6z"/>
-			<path class="st2" d="M12.5,29.8c-2.7,5.6-3.7,4.5-3.7,4.5s-1.3-0.2-2.6-0.4c0.3,0.9,0.9,2.1,2.3,2.3c2.4,0.3,3.7-1.6,4-2
-				c0.4-0.4,2.9-5.6,2.9-5.6s0.2-3.9,0.9-6.8C15.3,23.7,14,26.6,12.5,29.8z"/>
-			<path class="st0" d="M0.5,0c0,0,9.2-0.3,8.3,14.7C7.9,30.8,10.1,37,13.4,32.8c0,0-3.4,6.9-9.6,3.2C0.1,33.9,0,30.1,0,25.7
-				C0,25.7,1.1,11,0.5,0z"/>
-			<path class="st0" d="M21.5,30.4c0,0,2.2,6.1,9.5,4.3c0.1,0,0.1,0.1,0.1,0.1c-0.9,0.5-2.4,1.3-3.7,1.8
-				C23.4,38.2,21.9,33.2,21.5,30.4z"/>
-			<path class="st3" d="M21.5,30.4c0,0,2.2,6.1,9.5,4.3c0.1,0,0.1,0.1,0.1,0.1c-0.9,0.5-2.9,1.7-4.2,1.9
-				C22.5,37.2,21.9,33.2,21.5,30.4z"/>
-			<path class="st0" d="M20.2,17.1c-2.1-1.5-4.7,1-4.7,1c2.3-0.9-0.9,5.1,0.2,12.3c0.8,5.1,4.6,6.6,4.6,6.6l0,0c3.5,1.5,7-0.3,7-0.3
-				C17,35.7,24.1,19.9,20.2,17.1z"/>
-			<path class="st0" d="M20.2,17.1c-2.1-1.6-4.7,1-4.7,1c2.3-0.9-0.9,5.1,0.2,12.3c0.8,5.1,4.6,6.6,4.6,6.6l0,0c3.5,1.5,7-0.3,7-0.3
-				C17,35.7,24,20.4,20.2,17.1z"/>
-			<path class="st0" d="M3.8,19.5C5.1,2.4,0.5,0,0.5,0C1.2,9.9,0,25.7,0,25.7c0,4.7,0.1,8.2,3.8,10.4c6.2,3.7,9.6-3.2,9.6-3.2
-				C9.1,40.6,2.5,37.1,3.8,19.5z"/>
-			<path class="st0" d="M19,19.5c0.1-2.5-1.4-2.5-1.6-2.5c-1.2,0.4-1.9,1.1-1.9,1.1c2.3-0.9-0.9,5.1,0.2,12.3
-				c0.8,5.1,4.6,6.6,4.6,6.6l0,0c3.5,1.5,7-0.3,7-0.3C15.4,40.9,18.9,22.2,19,19.5z"/>
-			<path class="st4" d="M15.5,18.1c0,0,0.7-0.7,1.9-1.1c0.2,0,1.7,0,1.6,2.5c-0.2,2.7-4,21.4,8.4,17.1C17,35.7,24,20.4,20.2,17.1
-				C18.1,15.5,15.5,18.1,15.5,18.1z"/>
-			<path class="st5" d="M0.5,0L0.5,0c0,0,4.5,2.4,3.2,19.5c-1,13.5,2.6,18.7,6.3,16.9c1.1-0.6,2-1.6,2.5-2.3
-				c0.3-0.4,0.5-0.8,0.8-1.2c-3.3,4.2-5.5-2-4.6-18.1C9.7-0.3,0.5,0,0.5,0z"/>
-		</g>
-	</g>
-	<g>
-		<path class="st0" d="M33.3,29.1h0.8c-0.9,2.2-2.5,4.5-5.8,4.5c-2.8,0-4.8-1.6-4.8-5.6c0-2.8,1.1-6.9,5.2-6.9
-			c3.1,0,3.2,2.3,3.2,2.8c0,2.9-2.4,4.4-4.8,4.6c0,2.2,0.6,3,2.4,3C31.5,31.6,32.4,30.5,33.3,29.1z M29.1,22.4c-1.1,0-1.9,2.3-2,4.9
-			c1.6-0.1,2.9-1.6,2.9-3.4C30,22.9,29.5,22.4,29.1,22.4z"/>
-		<path class="st0" d="M39,20.5c1.6,6.3,2.1,7.3,2.1,9.7c0,2.6-2.3,3.4-4.1,3.4c-2.9,0-4.3-2-4.3-3.6c0-0.9,0.4-1.5,0.9-1.8
-			c0.9-2.4,1.6-4.8,1.9-7.2L39,20.5z M34.7,30.3c-0.2,0-0.6-0.1-0.7-0.3c0.2,1.1,0.8,1.7,1.9,1.7c0.9,0,1.7-0.4,1.7-1.7
-			c0-1.7-0.3-2.5-1.3-6.2c-0.3,1.5-0.8,3-1.3,4.5c0.4,0.2,0.7,0.5,0.7,1C35.6,29.8,35.3,30.3,34.7,30.3z"/>
-		<path class="st0" d="M48.3,11.5v5.3h2v1.3h-2v10c0,1.9,0.4,2.3,1.7,2.3c0.5,0,0.8-0.1,0.9-0.3c0,0.2,0,0.5,0,0.7
-			c0,1.8-1.2,2.8-2.9,2.8c-3.4,0-4.6-2.1-4.6-5.2V18.1h-1.1v-1.3h1.1v-4.6L48.3,11.5z"/>
-		<path class="st0" d="M54,16c1.1,0,2,0.9,2,2c0,1.1-0.9,1.9-2,1.9c-1.1,0-1.9-0.9-1.9-1.9C52.1,16.9,52.9,16,54,16z M55.8,21.2v8.3
-			c0,1.4,0.3,1.7,1.3,1.7s1.6-0.9,1.7-2.2h1c-0.5,4-2.8,4.5-4.2,4.5c-2.5,0-3.4-1.5-3.4-3.8v-8.6H55.8z"/>
-		<path class="st0" d="M68.9,21.2v8.3c0,1.4,0.3,1.7,1.3,1.7c0.2,0,0.3,0,0.5-0.1c-0.3,1.8-0.7,2.5-2.1,2.5c-1.6,0-2.4-0.9-2.7-2.2
-			c-0.5,1.1-1.4,2.2-3.2,2.2c-2.1,0-4.3-1.4-4.3-5.7c0-3,1.3-6.8,4.7-6.8c0.8,0,1.9,0.1,2.3,1.3v-1.2H68.9z M62,27.7
-			c0,3.5,1.2,3.5,1.8,3.5c0.7,0,1.6-0.7,1.6-2.1v-5.5c-0.1-0.3-0.4-0.9-1.2-0.9C62.6,22.6,62,25.6,62,27.7z"/>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 70.7 37.5" style="enable-background:new 0 0 70.7 37.5" xml:space="preserve">
+  <style>
+    .st0{fill:#fff}
+  </style>
+  <path class="st0" d="M6 32.6s2.2-.9 6.8-10.2c1-2.1 1.8-3.4 2.8-4.4 0 0 1.8-.1.9 2.8s-1.2 7.8-1.2 7.8-2.5 5.3-2.9 5.6c-.4.4-1.6 2.3-4 2S6 32.6 6 32.6z"/>
+  <path d="M6 32.6s2.2-.9 6.8-10.2c1-2.1 1.8-3.4 2.8-4.4 0 0 1.8-.1.9 2.8s-1.2 7.8-1.2 7.8-2.5 5.3-2.9 5.6c-.4.4-1.6 2.3-4 2S6 32.6 6 32.6z" style="opacity:.3;fill:#b2b2b2"/>
+  <path d="M12.5 29.8c-2.7 5.6-3.7 4.5-3.7 4.5l-2.6-.4c.3.9.9 2.1 2.3 2.3 2.4.3 3.7-1.6 4-2 .4-.4 2.9-5.6 2.9-5.6s.2-3.9.9-6.8c-1 1.9-2.3 4.8-3.8 8z" style="opacity:.6;fill:#fff"/>
+  <path class="st0" d="M.5 0s9.2-.3 8.3 14.7c-.9 16.1 1.3 22.3 4.6 18.1 0 0-3.4 6.9-9.6 3.2C.1 33.9 0 30.1 0 25.7 0 25.7 1.1 11 .5 0zM21.5 30.4s2.2 6.1 9.5 4.3c.1 0 .1.1.1.1-.9.5-2.4 1.3-3.7 1.8-4 1.6-5.5-3.4-5.9-6.2z"/>
+  <path d="M21.5 30.4s2.2 6.1 9.5 4.3c.1 0 .1.1.1.1-.9.5-2.9 1.7-4.2 1.9-4.4.5-5-3.5-5.4-6.3z" style="opacity:.2;fill:#878787"/>
+  <path class="st0" d="M20.2 17.1c-2.1-1.5-4.7 1-4.7 1 2.3-.9-.9 5.1.2 12.3.8 5.1 4.6 6.6 4.6 6.6 3.5 1.5 7-.3 7-.3-10.3-1-3.2-16.8-7.1-19.6z"/>
+  <path class="st0" d="M20.2 17.1c-2.1-1.6-4.7 1-4.7 1 2.3-.9-.9 5.1.2 12.3.8 5.1 4.6 6.6 4.6 6.6 3.5 1.5 7-.3 7-.3-10.3-1-3.3-16.3-7.1-19.6zM3.8 19.5C5.1 2.4.5 0 .5 0 1.2 9.9 0 25.7 0 25.7c0 4.7.1 8.2 3.8 10.4 6.2 3.7 9.6-3.2 9.6-3.2-4.3 7.7-10.9 4.2-9.6-13.4z"/>
+  <path class="st0" d="M19 19.5c.1-2.5-1.4-2.5-1.6-2.5-1.2.4-1.9 1.1-1.9 1.1 2.3-.9-.9 5.1.2 12.3.8 5.1 4.6 6.6 4.6 6.6 3.5 1.5 7-.3 7-.3-11.9 4.2-8.4-14.5-8.3-17.2z"/>
+  <path d="M15.5 18.1s.7-.7 1.9-1.1c.2 0 1.7 0 1.6 2.5-.2 2.7-4 21.4 8.4 17.1-10.4-.9-3.4-16.2-7.2-19.5-2.1-1.6-4.7 1-4.7 1z" style="opacity:.17;fill:#fff"/>
+  <path d="M.5 0S5 2.4 3.7 19.5C2.7 33 6.3 38.2 10 36.4c1.1-.6 2-1.6 2.5-2.3.3-.4.5-.8.8-1.2-3.3 4.2-5.5-2-4.6-18.1C9.7-.3.5 0 .5 0z" style="opacity:.3;fill:#c6c6c6"/>
+  <path class="st0" d="M33.3 29.1h.8c-.9 2.2-2.5 4.5-5.8 4.5-2.8 0-4.8-1.6-4.8-5.6 0-2.8 1.1-6.9 5.2-6.9 3.1 0 3.2 2.3 3.2 2.8 0 2.9-2.4 4.4-4.8 4.6 0 2.2.6 3 2.4 3 2 .1 2.9-1 3.8-2.4zm-4.2-6.7c-1.1 0-1.9 2.3-2 4.9 1.6-.1 2.9-1.6 2.9-3.4 0-1-.5-1.5-.9-1.5z"/>
+  <path class="st0" d="M39 20.5c1.6 6.3 2.1 7.3 2.1 9.7 0 2.6-2.3 3.4-4.1 3.4-2.9 0-4.3-2-4.3-3.6 0-.9.4-1.5.9-1.8.9-2.4 1.6-4.8 1.9-7.2l3.5-.5zm-4.3 9.8c-.2 0-.6-.1-.7-.3.2 1.1.8 1.7 1.9 1.7.9 0 1.7-.4 1.7-1.7 0-1.7-.3-2.5-1.3-6.2-.3 1.5-.8 3-1.3 4.5.4.2.7.5.7 1-.1.5-.4 1-1 1zM48.3 11.5v5.3h2v1.3h-2v10c0 1.9.4 2.3 1.7 2.3.5 0 .8-.1.9-.3v.7c0 1.8-1.2 2.8-2.9 2.8-3.4 0-4.6-2.1-4.6-5.2V18.1h-1.1v-1.3h1.1v-4.6l4.9-.7zM54 16c1.1 0 2 .9 2 2s-.9 1.9-2 1.9-1.9-.9-1.9-1.9c0-1.1.8-2 1.9-2zm1.8 5.2v8.3c0 1.4.3 1.7 1.3 1.7s1.6-.9 1.7-2.2h1c-.5 4-2.8 4.5-4.2 4.5-2.5 0-3.4-1.5-3.4-3.8v-8.6h3.6z"/>
+  <path class="st0" d="M68.9 21.2v8.3c0 1.4.3 1.7 1.3 1.7.2 0 .3 0 .5-.1-.3 1.8-.7 2.5-2.1 2.5-1.6 0-2.4-.9-2.7-2.2-.5 1.1-1.4 2.2-3.2 2.2-2.1 0-4.3-1.4-4.3-5.7 0-3 1.3-6.8 4.7-6.8.8 0 1.9.1 2.3 1.3v-1.2h3.5zM62 27.7c0 3.5 1.2 3.5 1.8 3.5.7 0 1.6-.7 1.6-2.1v-5.5c-.1-.3-.4-.9-1.2-.9-1.6-.1-2.2 2.9-2.2 5z"/>
 </svg>

web/js/app.js

@@ -970,7 +970,7 @@ set_sticky_class = function() {
     var sort = $('.l-sort');
     var tableHeader = $('.table-header');
     var sortOffset = sort.offset().top;
-    var headerHeight = $('.l-header').outerHeight();
+    var headerHeight = $('.top-bar').outerHeight();
 
     if ($(window).scrollTop() > sortOffset - headerHeight) {
         sort.addClass('active');

web/js/events.js

@@ -289,15 +289,6 @@ VE.navigation.move_focus_down = function(){
     var max_index = $('.units .l-unit:not(.header)').length-1;
     var index = parseInt($('.units .l-unit').index($('.units .l-unit.focus')));
 
-    if($('.l-menu').hasClass('active')){
-        $('.l-menu').removeClass('active');
-        $('.units').addClass('active');
-        index--;
-
-        if(index == -2)
-            index = -1;
-    }
-
     if(index < max_index){
         $('.units .l-unit.focus').removeClass('focus');
         $($('.units .l-unit:not(.header)')[index+1]).addClass('focus');
@@ -314,12 +305,6 @@ VE.navigation.move_focus_up = function(){
     if(index == -1)
         index = 0;
 
-    if($('.l-menu').hasClass('active')){
-        $('.l-menu').removeClass('active');
-        $('.units').addClass('active');
-        index++;
-    }
-
     if(index > 0){
         $('.units .l-unit.focus').removeClass('focus');
         $($('.units .l-unit:not(.header)')[index-1]).addClass('focus');
@@ -337,19 +322,6 @@ VE.navigation.switch_menu = function(position){
         VE.navigation.state.active_menu = 1;
         VE.navigation.state.menu_selector = '.main-menu-item';
         VE.navigation.state.menu_active_selector = '.active';
-        $('.l-menu').removeClass('active');
-
-        if(position == 'first'){
-            $($(VE.navigation.state.menu_selector)[0]).addClass('focus');
-        } else {
-            var max_index = $(VE.navigation.state.menu_selector).length-1;
-            $($(VE.navigation.state.menu_selector)[max_index]).addClass('focus');
-        }
-    } else {
-        VE.navigation.state.active_menu = 0;
-        VE.navigation.state.menu_selector = '.l-menu__item';
-        VE.navigation.state.menu_active_selector = '.l-menu__item--active';
-        $('.l-menu').addClass('active');
 
         if(position == 'first'){
             $($(VE.navigation.state.menu_selector)[0]).addClass('focus');
@@ -392,7 +364,6 @@ VE.notifications.get_list = function(){
         $('.notification-container').html(acc.done()).removeClass('u-hidden');
 
         $('.notification-container .mark-seen').click(function(event){
-            // VE.notifications.mark_seen($(event.target).attr('id').replace("notification-", ""));
             VE.notifications.delete($(event.target).attr('id').replace("notification-", ""));
         });
 
@@ -401,34 +372,13 @@ VE.notifications.get_list = function(){
 
 
 VE.notifications.delete = function(id){
-    $('#notification-'+id).parents('li').hide();
+    $('#notification-'+id).parent('li').hide();
     $.ajax({
         url: "/delete/notification/?delete=1&notification_id="+id+"&token="+$('#token').attr('token')
     });
     if($('.notification-container li:visible').length == 0) {
-        $('.l-profile__notifications .status-icon').removeClass('status-icon');
-        $('.l-profile__notifications').removeClass('updates').removeClass('active');
-    }
-}
-VE.notifications.mark_seen = function(id){
-    $('#notification-'+id).parents('li').removeClass('unseen');
-    $.ajax({
-        url: "/delete/notification/?notification_id="+id+"&token="+$('#token').attr('token')
-    });
-    if($('.notification-container .unseen').length == 0) {
-        $('.l-profile__notifications .status-icon').removeClass('status-icon');
-        $('.l-profile__notifications').removeClass('updates');
-    }
-}
-
-
-VE.navigation.init = function(){
-    if($('.l-menu__item.l-menu__item--active').length){
-        // VE.navigation.switch_menu();
-        VE.navigation.state.active_menu = 0;
-        VE.navigation.state.menu_selector = '.l-menu__item';
-        VE.navigation.state.menu_active_selector = '.l-menu__item--active';
-        $('.l-menu').addClass('active');
+        $('.js-notifications .status-icon').removeClass('status-icon');
+        $('.js-notifications').removeClass('updates').removeClass('active');
     }
 }
 

web/js/init.js

@@ -14,8 +14,7 @@ $(document).ready(function(){
         var selectedOption = $(this).find(":selected").text();
         $(this).next(".holder").text(selectedOption);
     }).trigger('change');
-    $('.to-top').on('click', function(evt) {
-        evt.preventDefault();
+    $('.js-to-top').on('click', function() {
         $("html, body").animate({ scrollTop: 0 }, "normal");
     });
 
@@ -44,18 +43,6 @@ $(document).ready(function(){
               $('.context-menu.sort-order').toggle().css({left: $(this).parent().parent().parent().position().left - 0});
             });
 
-
-            // CREATE BUTTON
-
-            $('.l-sort__create-btn').hover(function(){
-              $(".l-sort__create-btn").append("<div id='add-icon'></div>");
-              $(".l-sort__create-btn").append("<div id='tooltip'>"+$('.l-sort__create-btn').attr('title').replace(' ','&nbsp;')+"</div>");
-            }, function(){
-              $("#add-icon").remove();
-              $("#tooltip").remove();
-            });
-
-
             // SEARCH BOX
 
             $('.l-sort-toolbar__search, .l-sort-toolbar__search-box .js-search-input').hover(function(){
@@ -198,7 +185,6 @@ $(document).ready(function(){
                   if (evt.charCode == 97 && tag != 'input' && tag != 'textarea' && tag != 'selectbox') {
                       evt.preventDefault();
                       if (!evt.ctrlKey && !evt.shiftKey) {
-                          //if ($('.l-sort__create-btn')[0]) {
                           if ($('.button#btn-create').length) {
                               location.href=$('.button#btn-create').attr('href');
                           }
@@ -557,7 +543,7 @@ $(document).ready(function(){
                 }
               });
 
-              document.querySelector('.to-shortcuts').addEventListener('click', function() {
+              document.querySelector('.js-shortcuts').addEventListener('click', function() {
                 event.preventDefault();
                 var shortcutsDialog = document.querySelector('.shortcuts');
                 if (shortcutsDialog.open) {
@@ -569,9 +555,9 @@ $(document).ready(function(){
 
               $(document).click(function(evt){
                 //close notification popup
-                if(!$(evt.target).hasClass('l-profile__notifications') && $(evt.target).parents('ul.notification-container').length == 0){
+                if(!$(evt.target).hasClass('js-notifications') && $(evt.target).parents('ul.notification-container').length == 0){
                   $('.notification-container').addClass('u-hidden');
-                  $('.l-profile__notifications').removeClass('active');
+                  $('.js-notifications').removeClass('active');
                 }
               });
 
@@ -581,20 +567,17 @@ $(document).ready(function(){
                 $('#vstobjects .form-control:not([disabled]), #vstobjects .form-select:not([disabled])').first().focus();
               }
 
-              $('.l-profile__notifications').click(function(evt){
+              $('.js-notifications').click(function(evt){
                 evt.preventDefault();
-                if(!$('.l-profile__notifications').hasClass('active')){
+                if(!$('.js-notifications').hasClass('active')){
                   VE.notifications.get_list();
-                  $('.l-profile__notifications').addClass('active');
-
+                  $('.js-notifications').addClass('active');
                 } else {
                   $('.notification-container').addClass('u-hidden');
-                  $('.l-profile__notifications').removeClass('active');
+                  $('.js-notifications').removeClass('active');
                 }
               });
 
-            VE.navigation.init();
-
 
             $('.button').attr('title','ctrl+Enter');
             $('.button.cancel').attr('title','ctrl+Backspace');

web/templates/footer.html

@@ -45,5 +45,15 @@
       </ul>
     </div>
   </dialog>
+
+  <button type="button" class="button button-secondary button-circle button-floating button-floating-shortcuts js-shortcuts" title="<?=_('Shortcuts');?>">
+    <i class="fas fa-keyboard"></i>
+    <span class="u-hidden"><?=_('Shortcuts');?></span>
+  </button>
+  <button type="button" class="button button-secondary button-circle button-floating button-floating-top js-to-top" title="<?=_('Top');?>">
+    <i class="fas fa-arrow-up"></i>
+    <span class="u-hidden"><?=_('Top');?></span>
+  </button>
+
 </body>
 </html>

web/templates/includes/panel.html

@@ -1,42 +1,60 @@
 <div class="hidden" id="token" token="<?=$_SESSION['token']?>"></div>
-<a href="#" class="to-top" title="<?=_('Top');?>">
-  <i class="fas fa-arrow-up"></i>
-</a>
-<a href="#" class="to-shortcuts" title="<?=_('Shortcuts');?>">
-  <i class="fas fa-keyboard"></i>
-</a>
 
-<header class="l-header">
-  <div class="l-center l-header__inner">
+<header class="top-bar">
+  <div class="l-center top-bar-inner">
 
     <!-- Logo / Left Menu wrapper -->
-    <div class="l-header__left">
+    <div class="top-bar-left">
+
       <!-- Logo / Home Button -->
-      <a href="<?=htmlspecialchars($home_url)?>" class="l-logo" title="<?=_('Hestia Control Panel');?>"></a>
+      <a href="<?=htmlspecialchars($home_url)?>" class="top-bar-logo" title="<?=_('Hestia Control Panel');?>">
+        <img src="/images/logo-header.svg" alt="<?=_('Hestia Control Panel');?>" width="54" height="29">
+      </a>
 
       <!-- 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"></i><?=_('Records');?></a></div>
+      <nav class="top-bar-nav">
+        <ul class="top-bar-nav-list">
 
-        <!-- 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'))) {?>
+          <!-- Records tab -->
+          <li class="top-bar-nav-item">
+            <a class="top-bar-nav-link <?php if(in_array($TAB, ['WEB', 'DNS', 'MAIL', 'DB', 'BACKUP', 'CRON', 'PACKAGE', 'USER', 'LOG'])) echo 'active' ?>" href="<?=htmlspecialchars($home_url)?>">
+              <i class="fas fa-list-check"></i>
+              <span class="top-bar-nav-link-label"><?=_('Records');?></span>
+            </a>
+          </li>
+
+          <!-- 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"></i><?=_('Files');?></a></div>
+              <li class="top-bar-nav-item">
+                <a class="top-bar-nav-link <?php if($TAB == 'FM') echo 'active' ?>" href="/fm/">
+                  <i class="fas fa-folder-open"></i>
+                  <span class="top-bar-nav-link-label"><?=_('Files');?></span>
+                </a>
+              </li>
+            <?php } ?>
           <?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"></i><?=_('Statistics');?></a></div>
-      </div>
+          <!-- Statistics tab-->
+          <li class="top-bar-nav-item">
+            <a class="top-bar-nav-link <?php if($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
+              <i class="fas fa-chart-line"></i>
+              <span class="top-bar-nav-link-label"><?=_('Statistics');?></span>
+            </a>
+          </li>
+
+        </ul>
+      </nav>
+
     </div>
 
-    <!-- Right Menu -->
-    <div class="l-profile">
-      <!-- Logged in as / Usage Statistics Overview -->
-      <div class="usage-pill">
+    <!-- Usage Statistics / Right Menu wrapper -->
+    <div class="top-bar-right">
+
+      <!-- Usage Statistics -->
+      <div class="top-bar-usage">
         <?php
           if (isset($_SESSION['look'])) {
             $user_icon = 'fa-binoculars';
@@ -46,52 +64,103 @@
             $user_icon = 'fa-user';
           }
         ?>
-        <span class="usage-pill__item"><i class="fas <?=$user_icon;?> icon-pad-right" title="<?=_('Logged in as');?>: <?=htmlspecialchars($panel[$user]['NAME'])?>"></i><b><?=htmlspecialchars($user)?></b></span>
-        <span class="usage-pill__item"><i class="fas fa-hard-drive icon-pad-right" title="<?=_('Disk');?>: <?=humanize_usage_size($panel[$user]['U_DISK'])?> <?=humanize_usage_measure($panel[$user]['U_DISK'])?>"></i><b><?=humanize_usage_size($panel[$user]['U_DISK'])?></b> <?=humanize_usage_measure($panel[$user]['U_DISK'])?></span>
-        <span class="usage-pill__item"><i class="fas fa-right-left icon-pad-right" title="<?=_('Bandwidth');?>: <?=humanize_usage_size($panel[$user]['U_BANDWIDTH'])?> <?=humanize_usage_measure($panel[$user]['U_BANDWIDTH'])?>"></i><b><?=humanize_usage_size($panel[$user]['U_BANDWIDTH'])?></b> <?=humanize_usage_measure($panel[$user]['U_BANDWIDTH'])?></span>
+        <div class="top-bar-usage-inner">
+          <span class="top-bar-usage-item">
+            <i class="fas <?=$user_icon;?>" title="<?=_('Logged in as');?>: <?=htmlspecialchars($panel[$user]['NAME'])?>"></i>
+            <b><?=htmlspecialchars($user)?></b>
+          </span>
+          <span class="top-bar-usage-item">
+            <i class="fas fa-hard-drive" title="<?=_('Disk');?>: <?=humanize_usage_size($panel[$user]['U_DISK'])?> <?=humanize_usage_measure($panel[$user]['U_DISK'])?>"></i>
+            <b><?=humanize_usage_size($panel[$user]['U_DISK'])?></b> <?=humanize_usage_measure($panel[$user]['U_DISK'])?>
+          </span>
+          <span class="top-bar-usage-item">
+            <i class="fas fa-right-left" title="<?=_('Bandwidth');?>: <?=humanize_usage_size($panel[$user]['U_BANDWIDTH'])?> <?=humanize_usage_measure($panel[$user]['U_BANDWIDTH'])?>"></i>
+            <b><?=humanize_usage_size($panel[$user]['U_BANDWIDTH'])?></b> <?=humanize_usage_measure($panel[$user]['U_BANDWIDTH'])?>
+          </span>
+        </div>
       </div>
 
-      <!-- Notifications -->
-      <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
-        <!-- Do not show notifications panel when impersonating 'admin' user -->
-      <?php } else { ?>
-        <div class="l-menu__item">
-          <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>
-        </div>
-      <?php } ?>
-
-      <!-- Server Settings -->
-      <?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['POLICY_SYSTEM_HIDE_SERVICES'] !== 'yes') || ($_SESSION['user'] === 'admin')) {?>
-        <?php if (($_SESSION['userContext'] === 'admin') && (!empty($_SESSION['look']))) {?>
-          <!-- Hide 'Server Settings' button when impersonating 'admin' or other users -->
-        <?php } else { ?>
-          <div class="l-menu__item <?php if(in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'l-menu__item--active' ?>"><a href="/list/server/" class="l-profile__serversettings" title="<?=_('Server');?>"><i class="fas fa-gear"></i></a></div>
-        <?php } ?>
-      <?php } ?>
-
-      <!-- Edit User -->
-      <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
-        <!-- Hide 'edit user' entry point from other administrators for default 'admin' account-->
-        <div class="l-menu__item <?php if($TAB == 'LOG') echo 'l-menu__item--active' ?>"><a href="/list/log/" title="<?=_('Logs');?>" class="l-profile__username"><i class="fas fa-clock-rotate-left"></i></a></div>
-      <?php } else { ?>
-        <?php if ($panel[$user]['SUSPENDED'] === 'no') {?>
-          <div class="l-menu__item"><a href="/edit/user/?user=<?=$user; ?>&token=<?=$_SESSION['token']?>" title="<?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)" class="l-profile__username"><i class="fas fa-circle-user"></i></a></div>
-        <?php } ?>
-      <?php } ?>
+      <!-- Right Menu -->
+      <nav class="top-bar-nav">
+        <ul class="top-bar-nav-list">
+
+          <!-- Notifications -->
+          <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
+            <!-- Do not show notifications panel when impersonating 'admin' user -->
+          <?php } else { ?>
+            <li class="top-bar-nav-item">
+              <a title="<?=_('Notifications');?>" class="top-bar-nav-link js-notifications <?php if($panel[$user]['NOTIFICATIONS'] == 'yes') echo 'updates' ?>" href="#">
+                <i class="fas fa-bell <?php if($panel[$user]['NOTIFICATIONS'] == 'yes') echo 'animate__animated animate__swing status-icon orange' ?>"></i>
+                <span class="u-hidden"><?=_('Notifications');?></span>
+              </a>
+              <ul class="notification-container animate__animated animate__fadeIn u-hidden"></ul>
+            </li>
+          <?php } ?>
+
+          <!-- Server Settings -->
+          <?php if (($_SESSION['userContext'] === 'admin') && ($_SESSION['POLICY_SYSTEM_HIDE_SERVICES'] !== 'yes') || ($_SESSION['user'] === 'admin')) {?>
+            <?php if (($_SESSION['userContext'] === 'admin') && (!empty($_SESSION['look']))) {?>
+              <!-- Hide 'Server Settings' button when impersonating 'admin' or other users -->
+            <?php } else { ?>
+              <li class="top-bar-nav-item">
+                <a title="<?=_('Server');?>" class="top-bar-nav-link <?php if(in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
+                  <i class="fas fa-gear"></i>
+                  <span class="u-hidden"><?=_('Server');?></span>
+                </a>
+              </li>
+            <?php } ?>
+          <?php } ?>
+
+          <!-- Edit User -->
+          <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
+            <!-- Hide 'edit user' entry point from other administrators for default 'admin' account-->
+            <li class="top-bar-nav-item">
+              <a title="<?=_('Logs');?>" class="top-bar-nav-link <?php if($TAB == 'LOG') echo 'active' ?>" href="/list/log/">
+                <i class="fas fa-clock-rotate-left"></i>
+                <span class="u-hidden"><?=_('Logs');?></span>
+              </a>
+            </li>
+          <?php } else { ?>
+            <?php if ($panel[$user]['SUSPENDED'] === 'no') {?>
+              <li class="top-bar-nav-item">
+                <a title="<?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)" class="top-bar-nav-link" href="/edit/user/?user=<?=$user; ?>&token=<?=$_SESSION['token']?>">
+                  <i class="fas fa-circle-user"></i>
+                  <span class="u-hidden"><?=htmlspecialchars($user)?> (<?=htmlspecialchars($panel[$user]['NAME'])?>)</span>
+                </a>
+              </li>
+            <?php } ?>
+          <?php } ?>
+
+          <!-- Help / Documentation-->
+          <li class="top-bar-nav-item">
+            <a title="<?=_('Help');?>" class="top-bar-nav-link" href="https://docs.hestiacp.com/" target="_blank" rel="noopener">
+              <i class="fas fa-circle-question"></i>
+              <span class="u-hidden"><?=_('Help');?></span>
+            </a>
+          </li>
 
-      <!-- Help / Documentation-->
-      <div class="l-menu__item"><a href="https://docs.hestiacp.com/" rel="noopener" title="<?=_('Help');?>" class="l-profile__help" target="_blank"><i class="fas fa-circle-question"></i></a></div>
+          <!-- Logout -->
+          <?php if (isset($_SESSION['look']) && (!empty($_SESSION['look']))) { ?>
+            <li class="top-bar-nav-item">
+              <a title="<?=_('Log out');?> (<?=$user?>)" class="top-bar-nav-link top-bar-nav-link-logout" href="/logout/?token=<?=$_SESSION['token']?>">
+                <i class="fas fa-circle-up"></i>
+                <span class="u-hidden"><?=_('Log out');?> (<?=$user?>)</span>
+              </a>
+            </li>
+          <?php } else { ?>
+            <li class="top-bar-nav-item">
+              <a title="<?=_('Log out');?>" class="top-bar-nav-link top-bar-nav-link-logout" href="/logout/?token=<?=$_SESSION['token']?>">
+                <i class="fas fa-right-from-bracket"></i>
+                <span class="u-hidden"><?=_('Log out');?></span>
+              </a>
+            </li>
+          <?php } ?>
+
+        </ul>
+      </nav>
 
-      <!-- Logout -->
-      <?php if (isset($_SESSION['look']) && (!empty($_SESSION['look']))) { ?>
-        <div class="l-menu__item"><a href="/logout/?token=<?=$_SESSION['token']?>" title="<?=_('Log out');?> (<?=$user?>)" class="l-profile__logout"><i class="fas fa-circle-up"></i></a></div>
-      <?php } else { ?>
-        <div class="l-menu__item"><a href="/logout/?token=<?=$_SESSION['token']?>" title="<?=_('Log out');?>" class="l-profile__logout"><i class="fas fa-right-from-bracket"></i></a></div>
-      <?php } ?>
     </div>
+
   </div>
 </header>
 

web/templates/pages/list_server_info.html

@@ -25,32 +25,105 @@
 </head>
 
 <body>
-  <a href="#" class="to-top" title="<?=_('Top');?>">
-    <i class="fas fa-arrow-up"></i>
-  </a>
-  <header class="l-header">
-    <div class="l-center l-header__inner">
-      <div class="l-header__left">
-        <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"></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>
+  <header class="top-bar">
+    <div class="l-center top-bar-inner">
+      <div class="top-bar-left">
+        <a href="/list/web/" class="top-bar-logo" title="<?=_('Hestia Control Panel');?>">
+          <img src="/images/logo-header.svg" alt="<?=_('Hestia Control Panel');?>" width="54" height="29">
+        </a>
+        <nav class="top-bar-nav">
+          <ul class="top-bar-nav-list">
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link" href="/list/rrd/" title="<?=_('Back');?>">
+                <i class="fas fa-circle-left"></i>
+                <span class="u-hidden"><?=_('Back');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link <?php if(isset($_GET['cpu'])) echo 'active' ?>" href="/list/server/?cpu">
+                <i class="fas fa-microchip"></i>
+                <span class="top-bar-nav-link-label"><?=_('CPU');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link <?php if(isset($_GET['mem'])) echo 'active' ?>" href="/list/server/?mem">
+                <i class="fas fa-memory"></i>
+                <span class="top-bar-nav-link-label"><?=_('RAM');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link <?php if(isset($_GET['disk'])) echo 'active' ?>" href="/list/server/?disk">
+                <i class="fas fa-hard-drive"></i>
+                <span class="top-bar-nav-link-label"><?=_('Disk');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link <?php if(isset($_GET['net'])) echo 'active' ?>" href="/list/server/?net">
+                <i class="fas fa-hard-drive"></i>
+                <span class="top-bar-nav-link-label"><?=_('Network');?></span>
+              </a>
+            </li>
+            <?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) {?>
+              <li class="top-bar-nav-item">
+                <a class="top-bar-nav-link <?php if(isset($_GET['web'])) echo 'active' ?>" href="/list/server/?web">
+                  <i class="fas fa-earth-europe"></i>
+                  <span class="top-bar-nav-link-label"><?=_('Web');?></span>
+                </a>
+              </li>
+            <?php }?>
+            <?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) {?>
+              <li class="top-bar-nav-item">
+                <a class="top-bar-nav-link <?php if(isset($_GET['dns'])) echo 'active' ?>" href="/list/server/?dns">
+                  <i class="fas fa-book-atlas"></i>
+                  <span class="top-bar-nav-link-label"><?=_('DNS');?></span>
+                </a>
+              </li>
+            <?php }?>
+            <?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) {?>
+              <li class="top-bar-nav-item">
+                <a class="top-bar-nav-link <?php if(isset($_GET['mail'])) echo 'active' ?>" href="/list/server/?mail">
+                  <i class="fas fa-envelopes-bulk"></i>
+                  <span class="top-bar-nav-link-label"><?=_('Mail');?></span>
+                </a>
+              </li>
+            <?php }?>
+            <?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) {?>
+              <li class="top-bar-nav-item">
+                <a class="top-bar-nav-link <?php if(isset($_GET['db'])) echo 'active' ?>" href="/list/server/?db">
+                  <i class="fas fa-database"></i>
+                  <span class="top-bar-nav-link-label"><?=_('DB');?></span>
+                </a>
+              </li>
+            <?php }?>
+          </ul>
+        </nav>
       </div>
-      <div class="l-profile">
-        <div class="l-menu__item"><a href="javascript:location.reload();" title="<?=_('Refresh');?>"><i class="fas fa-arrow-rotate-right"></i></a></div>
-        <div class="l-menu__item"><a href="/logout/?token=<?=$_SESSION['token']?>" title="<?=_('Log out');?>" class="l-profile__logout"><i class="fas fa-right-from-bracket"></i></a></div>
+      <div class="top-bar-right">
+        <nav class="top-bar-nav">
+          <ul class="top-bar-nav-list">
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link" href="javascript:location.reload();" title="<?=_('Refresh');?>">
+                <i class="fas fa-arrow-rotate-right"></i>
+                <span class="u-hidden"><?=_('Refresh');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link top-bar-nav-link-logout" href="/logout/?token=<?=$_SESSION['token']?>" title="<?=_('Log out');?>">
+                <i class="fas fa-right-from-bracket"></i>
+                <span class="u-hidden"><?=_('Log out');?></span>
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </div>
   </header>
 
+  <button type="button" class="button button-secondary button-circle button-floating button-floating-top js-to-top" title="<?=_('Top');?>">
+    <i class="fas fa-arrow-up"></i>
+    <span class="u-hidden"><?=_('Top');?></span>
+  </button>
+
   <div class="server-info-output">.</div>
   <div class="l-center">
     <pre class="console-output animate__animated animate__fadeIn">

web/templates/pages/list_weblog.html

@@ -25,26 +25,78 @@
 </head>
 
 <body>
-  <a href="#" class="to-top" title="<?=_('Top');?>">
-    <i class="fas fa-arrow-up"></i>
-  </a>
-  <header class="l-header">
-    <div class="l-center l-header__inner">
-      <div class="l-header__left">
-        <a href="/" class="l-logo" title="<?=_('Hestia Control Panel');?>"></a>
-        <div class="l-menu">
-          <div class="l-menu__item"><a href="/list/web/"><i class="fas fa-circle-left"></i>&nbsp;&nbsp;&nbsp;<?=_('Back');?></a></div>
-          <div class="l-menu__item <?php if($_GET['type'] == 'access') echo 'l-menu__item--active' ?>"><a href="/list/web-log/?domain=<?=htmlentities($_GET['domain'])?>&type=access&token=<?=$_SESSION['token']?>"><i class="fas fa-eye"></i>&nbsp;&nbsp;&nbsp;<?=_('Access Log');?></a><a href="/download/web-log/?domain=<?=htmlentities($_GET['domain'])?>&type=access&&token=<?=$_SESSION['token']?>" title="<?=_('Download');?>"><i class="fas fa-download"></i></a></div>
-          <div class="l-menu__item <?php if($_GET['type'] == 'error') echo 'l-menu__item--active' ?>"><a href="/list/web-log/?domain=<?=htmlentities($_GET['domain'])?>&type=error&token=<?=$_SESSION['token']?>"><i class="fas fa-circle-exclamation"></i>&nbsp;&nbsp;&nbsp;<?=_('Error Log');?></a><a href="/download/web-log/?domain=<?=htmlentities($_GET['domain'])?>&type=error&token=<?=$_SESSION['token']?>" title="<?=_('Download');?>"><i class="fas fa-download"></i></a></div>
-        </div>
+  <header class="top-bar">
+    <div class="l-center top-bar-inner">
+      <div class="top-bar-left">
+        <a href="/" class="top-bar-logo" title="<?=_('Hestia Control Panel');?>">
+          <img src="/images/logo-header.svg" alt="<?=_('Hestia Control Panel');?>" width="54" height="29">
+        </a>
+        <nav class="top-bar-nav">
+          <ul class="top-bar-nav-list">
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link" href="/list/web/">
+                <i class="fas fa-circle-left"></i>
+                <span class="top-bar-nav-link-label"><?=_('Back');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link <?php if($_GET['type'] == 'access') echo 'active' ?>" href="/list/web-log/?domain=<?=htmlentities($_GET['domain'])?>&type=access&token=<?=$_SESSION['token']?>">
+                <i class="fas fa-eye"></i>
+                <span class="top-bar-nav-link-label"><?=_('Access Log');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link <?php if($_GET['type'] == 'access') echo 'active' ?>" href="/download/web-log/?domain=<?=htmlentities($_GET['domain'])?>&type=access&&token=<?=$_SESSION['token']?>" title="<?=_('Download');?>">
+                <i class="fas fa-download"></i>
+                <span class="u-hidden"><?=_('Download');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link <?php if($_GET['type'] == 'error') echo 'active' ?>" href="/list/web-log/?domain=<?=htmlentities($_GET['domain'])?>&type=error&token=<?=$_SESSION['token']?>">
+                <i class="fas fa-circle-exclamation"></i>
+                <span class="top-bar-nav-link-label"><?=_('Error Log');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link <?php if($_GET['type'] == 'error') echo 'active' ?>" href="/download/web-log/?domain=<?=htmlentities($_GET['domain'])?>&type=error&token=<?=$_SESSION['token']?>" title="<?=_('Download');?>">
+                <i class="fas fa-download"></i>
+                <span class="u-hidden"><?=_('Download');?></span>
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
-      <div class="l-profile">
-        <div class="l-menu__item"><a href="javascript:location.reload();" title="<?=_('Refresh');?>"><i class="fas fa-arrow-rotate-right"></i></a></div>
-        <div class="l-menu__item"><a href="/edit/user/" title="<?=htmlentities($user)?>" class="l-profile__username"><i class="fas fa-circle-user"></i></a></div>
-        <div class="l-menu__item"><a href="/logout/?token=<?=$_SESSION['token']?>" title="<?=_('Log out');?>" class="l-profile__logout"><i class="fas fa-right-from-bracket"></i></a></div>
+      <div class="top-bar-right">
+        <nav class="top-bar-nav">
+          <ul class="top-bar-nav-list">
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link" href="javascript:location.reload();" title="<?=_('Refresh');?>">
+                <i class="fas fa-arrow-rotate-right"></i>
+                <span class="u-hidden"><?=_('Refresh');?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link" href="/edit/user/" title="<?=htmlentities($user)?>">
+                <i class="fas fa-circle-user"></i>
+                <span class="u-hidden"><?=htmlentities($user)?></span>
+              </a>
+            </li>
+            <li class="top-bar-nav-item">
+              <a class="top-bar-nav-link top-bar-nav-link-logout" href="/logout/?token=<?=$_SESSION['token']?>" title="<?=_('Log out');?>">
+                <i class="fas fa-right-from-bracket"></i>
+                <span class="u-hidden"><?=_('Log out');?></span>
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </div>
   </header>
 
+  <button type="button" class="button button-secondary button-circle button-floating button-floating-top js-to-top" title="<?=_('Top');?>">
+    <i class="fas fa-arrow-up"></i>
+    <span class="u-hidden"><?=_('Top');?></span>
+  </button>
+
   <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">