Simplify header menus (#3079)

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;
+  }
 }

web/css/themes/flat.min.css

@@ -1 +1 @@
-:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-nav-link{text-shadow:none}.top-bar-nav-link:active,.top-bar-nav-link:hover{background:#fff;box-shadow:none}.top-bar-nav-link.active{background:#fff}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.button,.form-control,.form-select,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active,.button-danger:focus{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.badge{box-shadow:none}.context-menu.sort-order,.notification-container{border:1px solid #ccc;box-shadow:none}.context-menu.sort-order{background:#fff!important}.body-login,.body-reset{background:#5f7eb3}.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}.collapse-header{background:#fafafa;box-shadow:none}
+:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-nav-link{text-shadow:none}.top-bar-nav-link:active,.top-bar-nav-link:hover{background:#fff;box-shadow:none}.top-bar-nav-link.active{background:#fff}.top-bar-usage-inner{text-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.button,.form-control,.form-select,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active,.button-danger:focus{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.badge,.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.context-menu.sort-order,.notification-container{border:1px solid #ccc;box-shadow:none}.context-menu.sort-order{background:#fff!important}.body-login,.body-reset{background:#5f7eb3}.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}.collapse-header{background:#fafafa;box-shadow:none}

web/templates/includes/panel.html

@@ -3,7 +3,7 @@
 <header class="top-bar">
   <div class="l-center top-bar-inner">
 
-    <!-- Logo / Left Menu wrapper -->
+    <!-- Logo / Usage Statistics wrapper -->
     <div class="top-bar-left">
 
       <!-- Logo / Home Button -->
@@ -11,48 +11,6 @@
         <img src="/images/logo-header.svg" alt="<?=_('Hestia Control Panel');?>" width="54" height="29">
       </a>
 
-      <!-- Left Menu -->
-      <nav class="top-bar-nav">
-        <ul class="top-bar-nav-list">
-
-          <!-- 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 { ?>
-              <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 } ?>
-
-          <!-- 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>
-
-    <!-- Usage Statistics / Right Menu wrapper -->
-    <div class="top-bar-right">
-
       <!-- Usage Statistics -->
       <div class="top-bar-usage">
         <?php
@@ -80,10 +38,37 @@
         </div>
       </div>
 
-      <!-- Right Menu -->
+    </div>
+
+    <!-- Menu wrapper -->
+    <div class="top-bar-right">
+
+      <!-- Menu -->
       <nav class="top-bar-nav">
         <ul class="top-bar-nav-list">
 
+          <!-- File Manager -->
+          <?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 { ?>
+              <li class="top-bar-nav-item">
+                <a title="<?=_('Files');?>" class="top-bar-nav-link <?php if($TAB == 'FM') echo 'active' ?>" href="/fm/">
+                  <i class="fas fa-folder-open"></i>
+                  <span class="u-hidden"><?=_('Files');?></span>
+                </a>
+              </li>
+            <?php } ?>
+          <?php } ?>
+
+          <!-- Statistics -->
+          <li class="top-bar-nav-item">
+            <a title="<?=_('Statistics');?>" class="top-bar-nav-link <?php if($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
+              <i class="fas fa-chart-line"></i>
+              <span class="u-hidden"><?=_('Statistics');?></span>
+            </a>
+          </li>
+
           <!-- Notifications -->
           <?php if (($_SESSION['userContext'] === 'admin') && (isset($_SESSION['look']) && ($user == 'admin'))) {?>
             <!-- Do not show notifications panel when impersonating 'admin' user -->
@@ -131,7 +116,7 @@
             <?php } ?>
           <?php } ?>
 
-          <!-- Help / Documentation-->
+          <!-- 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>