ui: Reorg navbar CSS

ui/src/Layout.elm

@@ -131,7 +131,7 @@ externalLink url title =
 navbarLink : Page -> Route -> List (Html a) -> Page -> Html a
 navbarLink page route linkContent activePage =
     li [ classList [ ( "navbar-active", page == activePage ) ] ]
-        [ a [ class "navbar-active-bg", Route.href route ] linkContent ]
+        [ a [ Route.href route ] linkContent ]
 
 
 {-| Renders list of recent mailboxes, selecting the currently active mailbox.
@@ -170,14 +170,14 @@ navbarRecent page controls =
             a [ Route.href (Route.Mailbox mailbox) ] [ text mailbox ]
     in
     li
-        [ class "navbar-recent navbar-dropdown"
+        [ class "navbar-dropdown-container"
         , classList [ ( "navbar-active", active ) ]
         , attribute "aria-haspopup" "true"
         , ariaExpanded controls.recentVisible
         , Events.onMouseOver (controls.showRecent True)
         , Events.onMouseOut (controls.showRecent False)
         ]
-        [ span [ class "navbar-active-bg" ]
+        [ span [ class "navbar-dropdown" ]
             [ text title
             , button
                 [ class "navbar-dropdown-button"

ui/src/navbar.css

@@ -36,7 +36,7 @@
 }
 
 .navbar a,
-.navbar-dropdown span {
+.navbar-dropdown {
   color: var(--navbar-color);
   display: block;
   padding: 15px;
@@ -57,7 +57,7 @@
   color: var(--navbar-color);
 }
 
-li.navbar-active .navbar-active-bg {
+li.navbar-active > *:first-child {
   background-color: #080808;
 }
 
@@ -88,8 +88,7 @@ li.navbar-active span,
 }
 
 @media screen and (min-width: 1000px) {
-  .main-nav,
-  .navbar-bg {
+  .main-nav {
     height: var(--navbar-height);
   }
 
@@ -115,16 +114,17 @@ li.navbar-active span,
     background-image: var(--navbar-image);
     grid-column: 1 / 4;
     grid-row: 1;
+    height: var(--navbar-height);
     width: 100%;
     z-index: -1;
   }
 
-  .navbar-brand {
-    margin-left: -15px;
+  .navbar-toggle {
+    display: none;
   }
 
-  .navbar-recent {
-    margin: 0 auto;
+  .navbar-brand {
+    margin-left: -15px;
   }
 
   .navbar-mailbox {
@@ -136,12 +136,20 @@ li.navbar-active span,
     margin-top: 1px;
   }
 
+  .navbar-dropdown-container {
+    margin: 0 auto;
+  }
+
+  .navbar-dropdown {
+    padding: 15px 19px 15px 25px;
+  }
+
   .navbar-dropdown-button {
     background: none;
     border: none;
     color: var(--navbar-color);
     display: inline;
-    padding-right: 0;
+    margin-left: 3px;
   }
 
   .navbar-dropdown-content {
@@ -156,7 +164,7 @@ li.navbar-active span,
     z-index: 1;
   }
 
-  .navbar-dropdown[aria-expanded="true"] .navbar-dropdown-content {
+  .navbar-dropdown-container[aria-expanded="true"] .navbar-dropdown-content {
     display: block;
   }
 
@@ -169,8 +177,4 @@ li.navbar-active span,
     color: var(--primary-color) !important;
     background-color: var(--selected-color);
   }
-
-  .navbar-toggle {
-    display: none;
-  }
 }