Overhauled main menu visuals

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index d13c5d9b6e0af9cada9e48295948f43aec9deb91..4fd4c647b521c1c09c95af8c6e27b91816174203 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -67,13 +67,17 @@
                
                @include wcfFontHeadline;
                
+               &:not(:last-child) {
+                       margin-right: 15px;
+               }
+               
                > a {
-                       background-color: $wcfHeaderMenuBackground;
+                       border-bottom: 3px solid $wcfHeaderMenuBackground;
                        color: $wcfHeaderMenuLink;
                        display: block;
                        font-size: 16px;
                        font-weight: 400;
-                       padding: 6px 12px;
+                       padding: 5px 0 2px;
                        
                        > .boxMenuLinkOutstandingItems {
                                background-color: rgb(255, 255, 255);
@@ -87,7 +91,7 @@
                
                &.active > a,
                &:hover > a {
-                       background-color: $wcfHeaderMenuBackgroundActive;
+                       border-color: $wcfHeaderMenuBackgroundActive;
                        color: $wcfHeaderMenuLinkActive;
                }
        }
@@ -102,22 +106,61 @@
        
        .boxMenuDepth1 {
                background-color: $wcfHeaderMenuDropdownBackground;
-               border-bottom: 1px solid $wcfHeaderMenuDropdownBorder;
-               box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
-               padding: 3px 0;
                position: absolute;
                visibility: hidden;
                
+               // align menu to the center of the menu item
+               left: 50%;
+               transform: translateX(-50%);
+               
                // offset the menu to prevent the staircase effect when two elements with dark and light
                // colors are right below each other; uses a transparent border rather than a margin to
                // prevent losing the hover on the <li> causing the menu to collapse when the cursor is
                // right between the menu item and the menu itself
                background-clip: padding-box;
-               border-top: 3px solid transparent;
+               border-top: 15px solid transparent;
                
                @include wcfFontDefault;
                
+               &::before {
+                       content: "";
+                       border: 10px solid transparent;
+                       border-bottom-color: $wcfHeaderMenuDropdownBorder;
+                       border-top-width: 0;
+                       left: calc(50% - 10px);
+                       position: absolute;
+                       top: -10px;
+               }
+               
+               &::after {
+                       content: "";
+                       border: 10px solid transparent;
+                       border-bottom-color: $wcfHeaderMenuDropdownBackground;
+                       border-top-width: 0;
+                       left: calc(50% - 10px);
+                       position: absolute;
+                       top: -9px;
+               }
+               
                > li {
+                       // the code below mimics the border surrounding the list element
+                       // as seen for similar elements such as dropdowns; we cannot use
+                       // the list border because the top border is abused to visually
+                       // push down the list w/o triggering a "hover-out" on the menu item
+                       background-color: $wcfHeaderMenuDropdownBackground;
+                       border: 1px solid $wcfHeaderMenuDropdownBorder;
+                       border-width: 0 1px;
+                       
+                       &:first-child {
+                               border-top-width: 1px;
+                               padding-top: 3px;
+                       }
+                       
+                       &:last-child {
+                               border-bottom-width: 1px;
+                               padding-bottom: 3px;
+                       }
+                       
                        > a {
                                color: $wcfHeaderMenuDropdownLink;
                        }
@@ -125,7 +168,7 @@
                        > a,
                        > span {
                                display: block;
-                               padding: 5px 20px;
+                               padding: 7px 20px;
                                white-space: nowrap;
                        }
                        

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 34aeb4464197d8f3335363c0ae2e8e9f448c362b..5ea347ef167beef3d5d5e656312f04e760f13a80 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -3,28 +3,25 @@
        will-change: transform;
 }
 
-.pageHeaderContainer.stickyPageHeader {
-       z-index: 300;
-}
-
-.pageHeader.sticky {
-       flex-wrap: nowrap;
-               
-       > div {
-               background-color: $wcfHeaderBackground; /* @TODO */
-               //@todobox-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-               left: 0;
-               position: fixed;
-               top: 0;
-               right: 0;
-               z-index: 301;
-               
-               @include small-screen-only {
-                       max-width: 100vw;
-               }
+@include large-screen-only {
+       .pageHeaderContainer.stickyPageHeader {
+               z-index: 300;
        }
        
-       @include large-screen-only {
+       .pageHeader.sticky {
+               flex-wrap: nowrap;
+               
+               > div {
+                       background-color: $wcfHeaderBackground;
+                       box-shadow: 0 0 10px rgba(0, 0, 0, .6);
+                       left: 0;
+                       position: fixed;
+                       top: 0;
+                       right: 0;
+                       z-index: 301;
+               }
+               
+               
                .layoutBoundary {
                        height: 50px;
                        
@@ -65,7 +62,6 @@
                        .boxMenu > li > a {
                                align-items: center;
                                display: flex;
-                               height: 50px;
                                
                                > span {
                                        flex: 0 0 auto;
@@ -75,10 +71,6 @@
                                        margin-left: 5px;
                                }
                        }
-                       
-                       .boxMenuDepth1 {
-                               border-top-width: 0;
-                       }
                }
                
                .userPanel {
@@ -142,3 +134,28 @@
                }
        }
 }
+
+// force sticky header on handheld devices, there is no difference when scrolled
+// all the way up and it might flicker when scrolling due to the inconsistent
+// scroll event being fired
+@include small-screen-only {
+       .pageHeaderContainer {
+               height: 50px;
+               z-index: 300;
+       }
+       
+       .pageHeader {
+               flex-wrap: nowrap;
+               
+               > div {
+                       background-color: $wcfHeaderBackground;
+                       box-shadow: 0 0 10px rgba(0, 0, 0, .6);
+                       left: 0;
+                       max-width: 100vw;
+                       position: fixed;
+                       top: 0;
+                       right: 0;
+                       z-index: 301;
+               }
+       }
+}