Simplify header menus (hestiacp#3079)

Author: AlecRust

web/css/src/themes/dark.css

@@ -55,10 +55,6 @@ strong {
 
 .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 {

web/css/src/themes/default.css

@@ -73,6 +73,7 @@
 
   @media (--viewport-medium) {
     display: flex;
+    height: 40px;
     padding-top: 0;
     padding-left: 20px;
     padding-right: 20px;
@@ -99,7 +100,7 @@
   margin-right: auto;
 
   @media (--viewport-medium) {
-    margin-right: 16px;
+    margin-right: 30px;
   }
 }
 
@@ -187,28 +188,24 @@
 }
 
 .top-bar-usage {
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
+  display: none;
+
+  @media (--viewport-medium) {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+  }
 
   @media (--viewport-medium) {
     margin-top: 0;
-    margin-right: 10px;
   }
 }
 
 .top-bar-usage-inner {
   display: flex;
-  border-radius: 12px;
-  font-size: 0.75rem;
+  color: #fff;
+  text-shadow: 1px 1px rgb(0 0 0 / 25%);
   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%);
 }
 
 .top-bar-usage-item {

web/css/src/themes/flat.css

@@ -36,6 +36,10 @@ strong {
   }
 }
 
+.top-bar-usage-inner {
+  text-shadow: none;
+}
+
 .table-header {
   box-shadow: none;
   background: #fafafa;
@@ -70,18 +74,18 @@ strong {
 .button {
   box-shadow: none;
   background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%);
-}
 
-.button:hover {
-  color: #6986b7;
-  box-shadow: none;
-  background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%);
-}
+  &:hover {
+    color: #6986b7;
+    box-shadow: none;
+    background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%);
+  }
 
-.button:active,
-.button:focus {
-  box-shadow: none;
-  background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%);
+  &:active,
+  &:focus {
+    box-shadow: none;
+    background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%);
+  }
 }
 
 .button-secondary {
@@ -102,12 +106,12 @@ strong {
   border-color: #f4301a;
 }
 
-.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2) {
-  box-shadow: none;
-}
-
 .ui-dialog {
   box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
+
+  & .ui-dialog-buttonpane button:nth-of-type(2) {
+    box-shadow: none;
+  }
 }
 
 .badge {

web/css/src/themes/vestia.css

@@ -42,14 +42,6 @@ strong {
   }
 }
 
-.top-bar-usage-inner {
-  color: #fff;
-  border: none;
-  background: none;
-  box-shadow: none;
-  text-shadow: none;
-}
-
 .table-header {
   box-shadow: none;
   background: #fafafa;
@@ -151,12 +143,12 @@ strong {
   }
 }
 
-.ui-dialog .ui-dialog-buttonpane button {
-  box-shadow: none;
-}
-
 .ui-dialog {
   box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
+
+  & .ui-dialog-buttonpane button {
+    box-shadow: none;
+  }
 }
 
 .notification-container {
@@ -432,12 +424,12 @@ li[aria-expanded="true"] a {
   background: #fafafa;
   box-shadow: none;
   color: #444;
-}
 
-.collapse-header:hover {
-  color: #ff791f;
-}
+  &:hover {
+    color: #ff791f;
+  }
 
-.collapse-header .fas {
-  display: none;
+  & .fas {
+    display: none;
+  }
 }