Refactor main menu (hestiacp#3066)

Author: AlecRust

web/css/src/themes/dark.css

@@ -4,9 +4,12 @@
     Website:     www.hestiacp.com
 */
 
+@custom-media --viewport-medium (min-width: 768px);
+
 :root {
   --color-text: #cdcdcd;
   --color-background: #282828;
+  --alert-border-color: #212121;
 }
 
 b,
@@ -139,9 +142,8 @@ strong {
   color: #0079cb;
 }
 
-.alert {
-  border-color: #212121;
-}
+/* Alerts
+   ========================================================================== */
 
 .alert-danger {
   background-color: #d13535;
@@ -151,6 +153,9 @@ strong {
   }
 }
 
+/* Cards
+   ========================================================================== */
+
 .card {
   background: #454545;
   color: #fafafa;
@@ -165,66 +170,46 @@ strong {
   }
 }
 
-.l-stat {
-  background-color: #282828;
-}
-
-.l-stat__col {
-}
-
-.l-stat__col li {
-  color: #b7b7b7 !important;
-}
-
-.l-stat__col a {
-  border-bottom: 4px solid #282828;
-  background-color: #282828;
-}
-
-.l-stat__col a:hover {
-  border-bottom: 4px solid #d7d7d7;
-}
+/* Main menu
+   ========================================================================== */
 
-.l-stat__col a:active,
-.l-stat__col a:focus {
-  border-bottom: 4px solid #d11755;
-}
+.main-menu-item-link {
+  &:hover {
+    & .main-menu-item-label {
+      color: #d7d7d7;
+    }
+  }
 
-.l-stat__col--active a {
-  border-bottom: 4px solid #e93b76;
-}
+  &.active {
+    & .main-menu-item-label {
+      color: #c36;
 
-.l-stat.active .l-stat__col.focus a {
-  border-bottom: 4px solid #e93b76;
-}
+      & .fas {
+        color: #d7d7d7;
+      }
+    }
+  }
 
-.l-stat.active .l-stat__col.focus a .l-stat__col-title {
-}
+  @media (--viewport-medium) {
+    border-bottom-color: #282828;
 
-.l-stat__col a:hover .l-stat__col-title {
-  color: #d7d7d7;
-}
+    &:hover {
+      border-bottom-color: #d7d7d7;
+    }
 
-.l-stat__col a:active .l-stat__col-title {
+    &.active {
+      border-bottom-color: #c36;
+    }
+  }
 }
 
-.l-stat__col-title {
+.main-menu-item-label {
   font-weight: 500;
   color: #bcbcbc;
-  text-shadow: 0 1px rgb(0 0 0 / 40%);
-}
-
-.l-stat__col--active .l-stat__col-title {
-  color: #ff558f;
-}
 
-.l-stat__col .fas {
-  color: #707070;
-  padding: 4px;
-}
-
-.l-stat__col--active .fas {
-  color: #aaa;
+  & .fas {
+    color: #707070;
+  }
 }
 
 .l-separator {

web/css/src/themes/default.css

@@ -17,6 +17,9 @@
   --font-family-monospace: "Inconsolata", "Lucida Console", "Monaco", monospace;
   --color-text: #7c7c7c;
   --color-background: #fff;
+  --alert-border-color: #fff;
+  --alert-box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  --alert-text-shadow: 0 1px rgb(0 0 0 / 45%);
 }
 
 .check-label {
@@ -324,15 +327,18 @@
   padding-top: 0.6rem;
 }
 
+/* Alerts
+   ========================================================================== */
+
 .alert {
   border-radius: 4px;
-  border: 1px solid #fff;
+  border: 1px solid var(--alert-border-color);
   font-weight: 400;
   padding: 0.8rem;
   position: relative;
   text-align: left;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  text-shadow: 0 1px rgb(0 0 0 / 45%);
+  box-shadow: var(--alert-box-shadow);
+  text-shadow: var(--alert-text-shadow);
 
   & a {
     font-weight: bold;
@@ -391,6 +397,9 @@
   }
 }
 
+/* Cards
+   ========================================================================== */
+
 .cards {
   @media (--viewport-small) {
     display: grid;
@@ -456,92 +465,96 @@
   }
 }
 
-.l-stat {
-  background-color: #fff;
-  padding-top: 31px;
-  overflow: hidden;
-  text-align: center;
-  display: flex;
-}
-
-.l-stat__col {
-  flex: 1;
-}
+/* Main menu
+   ========================================================================== */
 
-.l-stat__col a {
-  display: block;
-  min-height: 110px;
-  overflow: hidden;
-  margin-left: 20px;
-  margin-right: 20px;
-  border-bottom: 4px solid #fff;
-  padding-bottom: 16px;
-  background-color: #fff;
+.main-menu {
+  margin-top: 10px;
+  margin-bottom: 10px;
 
-  &:hover {
-    border-bottom: 4px solid #e83b75;
-    transition: 0.3s;
+  @media (--viewport-medium) {
+    margin-top: 20px;
+    margin-bottom: 0;
   }
+}
 
-  &:active {
-    border-bottom: 4px solid #d53067;
+.main-menu-list {
+  @media (--viewport-medium) {
+    display: flex;
+    justify-content: space-evenly;
   }
 }
 
-.l-stat__col--active a {
-  border-bottom: 4px solid #c36;
-}
+.main-menu-item {
+  @media (--viewport-medium) {
+    display: flex;
 
-.l-stat.active .l-stat__col.focus a {
-  border-bottom: 4px solid #5edad0;
-}
+    &.focus {
+      & .main-menu-item-link {
+        border-bottom-color: #5edad0;
+      }
 
-.l-stat.active .l-stat__col.focus a .l-stat__col-title {
-  color: #36b3a9;
+      & .main-menu-item-label {
+        color: #5edad0;
+      }
+    }
+  }
 }
 
-.l-stat__col a:hover .l-stat__col-title {
-  color: #e83b75;
-}
+.main-menu-item-link {
+  display: block;
+  text-align: center;
+  padding: 10px;
 
-.l-stat__col a:active .l-stat__col-title {
-  color: #d53067;
-}
+  &:hover {
+    & .main-menu-item-label {
+      color: #c36;
+    }
+  }
 
-.l-stat__col ul {
-  font-size: 0.75rem;
-  padding-left: 0;
-  line-height: 14px;
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
+  &.active {
+    & .main-menu-item-label {
+      color: #c36;
 
-.l-stat__col li {
-  color: #7b7b7b;
-  margin-bottom: 8px;
-  text-transform: lowercase;
+      & .fas {
+        color: #c36;
+      }
+    }
+  }
+
+  @media (--viewport-medium) {
+    padding-left: 30px;
+    padding-right: 30px;
+    border-bottom: 4px solid #fff;
+
+    &:hover,
+    &.active {
+      border-bottom-color: #c36;
+      transition: 0.3s;
+    }
+  }
 }
 
-.l-stat__col-title {
-  text-transform: uppercase;
-  font-weight: 600;
+.main-menu-item-label {
   color: #5b5b5b;
-  min-height: 21px;
+  font-weight: 600;
   font-size: 16px;
-}
 
-.l-stat__col--active .l-stat__col-title {
-  color: #c36;
-  font-size: 16px;
+  & .fas {
+    color: #999;
+  }
 }
 
-.l-stat__col .fas {
-  color: #999;
-  padding: 4px;
-}
+.main-menu-stats {
+  display: none;
 
-.l-stat__col--active .fas {
-  color: #c36;
+  @media (--viewport-medium) {
+    display: block;
+    font-size: 0.75rem;
+    text-transform: lowercase;
+    padding-top: 10px;
+    padding-bottom: 25px;
+  }
 }
 
 .l-separator {

web/css/src/themes/flat.css

@@ -4,8 +4,9 @@
     Website:     www.hestiacp.com
 */
 
-body {
-  letter-spacing: 0;
+:root {
+  --alert-box-shadow: none;
+  --alert-text-shadow: none;
 }
 
 b,
@@ -150,11 +151,6 @@ strong {
   box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
 }
 
-.alert {
-  text-shadow: none;
-  box-shadow: none;
-}
-
 .usage-pill {
   box-shadow: none;
 }