slightly overhauled main menu / user panel

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 348566994bba16a974005d0f94dd7f6694cf1f47..dfebe73ca0e65c27f6f10bec35924a0054265f27 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -55,11 +55,12 @@
                        flex: 0 0 auto;
                        
                        > a {
+                               background: $wcfHeaderMenuLinkBackground;
                                align-items: center;
                                color: $wcfHeaderMenuLink;
                                display: flex;
                                height: 50px;
-                               padding: 0 10px;
+                               padding: 0 15px;
                                
                                > span {
                                        flex: 0 0 auto;
@@ -76,13 +77,9 @@
                                cursor: default;
                        }
                        
-                       &.active > a {
-                               background: linear-gradient(to top, $wcfHeaderMenuBackground 0%, $wcfHeaderMenuBackgroundActive 50%);
-                               color: $wcfHeaderMenuLinkActive;
-                       }
-                       
+                       &.active > a,
                        &:hover > a {
-                               background: $wcfHeaderMenuBackgroundActive;
+                               background: $wcfHeaderMenuLinkBackgroundActive;
                                color: $wcfHeaderMenuLinkActive;
                        }
                }
@@ -93,6 +90,19 @@
                        &:hover .boxMenuDepth1 {
                                visibility: visible;
                        }
+                       
+                       > a {
+                               &::after {
+                                       content: $fa-var-angle-down;
+                                       display: block;
+                                       font-family: 'FontAwesome';
+                                       font-size: 14px;
+                                       height: 24px;
+                                       line-height: 24px;
+                                       margin-left: 5px;
+                                       width: 10px;
+                               }
+                       }
                }
                
                .boxMenuDepth1 {
@@ -194,11 +204,12 @@
                        
                        > a {
                                align-items: center;
+                               background: $wcfHeaderMenuLinkBackground;
                                color: $wcfHeaderMenuLink;
                                display: flex;
                                flex: 0 0 auto;
                                height: 50px;
-                               padding: 0 10px;
+                               padding: 0 15px;
                                position: relative;
                                
                                /* set icon color */
@@ -223,13 +234,9 @@
                        }
                        
                        &.dropdownOpen > a,
-                       &.open > a {
-                               background: linear-gradient(to top, $wcfHeaderMenuBackground 0%, $wcfHeaderMenuBackgroundActive 50%);
-                               color: $wcfHeaderMenuLinkActive;
-                       }
-                       
+                       &.open > a,
                        &:hover > a {
-                               background: $wcfHeaderMenuBackgroundActive;
+                               background: $wcfHeaderMenuLinkBackgroundActive;
                                color: $wcfHeaderMenuLinkActive;
                        }
                        
@@ -386,7 +393,7 @@
                }
                
                &:hover::before {
-                       background-color: $wcfHeaderMenuBackgroundActive;
+                       background-color: $wcfHeaderMenuLinkBackgroundActive;
                        color: $wcfHeaderMenuLinkActive;
                }
        }

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 7020703ccb9d138b5b15c70afc263b0ccc78f960..a9bff6662bd6217b87fe41eb732dd54baf0159a3 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -83,24 +83,22 @@
                }
                
                .pageHeaderSearch {
-                       align-self: stretch;
-                       flex: 0 0 50px;
+                       flex: 0 0 62px;
                        margin-bottom: 0;
                        margin-left: 10px;
                        order: 3;
                        
                        .pageHeaderSearchLabel {
-                               background-color: $wcfHeaderMenuBackground;
-                               bottom: 0;
+                               background: $wcfHeaderMenuLinkBackground;
                                color: $wcfHeaderMenuLink;
                                cursor: pointer;
                                display: block;
-                               position: absolute;
-                               top: 0;
-                               width: 50px;
+                               height: 50px;
+                               position: relative;
+                               width: 62px;
                                
                                &:hover {
-                                       background: $wcfHeaderMenuBackgroundActive;
+                                       background: $wcfHeaderMenuLinkBackgroundActive;
                                        color: $wcfHeaderMenuLinkActive;
                                }
                                
@@ -112,7 +110,7 @@
                                        font-size: 28px;
                                        line-height: 32px;
                                        position: absolute;
-                                       right: 11px;
+                                       right: 18px;
                                        top: 50%;
                                        transform: translateY(-50%);
                                }
@@ -135,7 +133,7 @@
                        }
                        
                        .pageHeaderSearchLabel {
-                               background: $wcfHeaderMenuBackgroundActive;
+                               background: $wcfHeaderMenuLinkBackgroundActive;
                                color: $wcfHeaderMenuLinkActive;
                        }
                }

diff --git a/wcfsetup/install/files/style/layout/pageNavigation.scss b/wcfsetup/install/files/style/layout/pageNavigation.scss
index 0b06410fb2036f43155b403e1651bc47076d4ff4..a2f55c460cd80b79c3ed527e7b2688974ae47a9b 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageNavigation.scss
+++ b/wcfsetup/install/files/style/layout/pageNavigation.scss
@@ -23,10 +23,6 @@
                                color: $wcfNavigationLinkActive;
                        }
                }
-               
-               .breadcrumbs {
-                       margin-left: 10px;
-               }
        }
        
        .boxesHeaderBoxes + .pageNavigation {
@@ -37,7 +33,6 @@
                display: flex;
                flex: 0 0 auto;
                flex-direction: row-reverse;
-               margin-right: 10px;
                
                > li {
                        flex: 0 0 auto;

diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index ba88eb5706747e192c3b77ac2a890fedac2c3748..15b9fc38d4088673dd3b405deb51385662d4eb0f 100644 (file)
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -230,7 +230,7 @@
                        &:hover,
                        &.redactor-act,
                        &.dropact {
-                               background-color: $wcfHeaderMenuBackgroundActive;
+                               background-color: $wcfHeaderMenuLinkBackgroundActive;
                                color: $wcfHeaderMenuLinkActive;
                        }
                        

diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index f793b92e18d87f312a85e108c729a3bd8454f760..dfc4b4e86fdb0d63293e3ed5e99098c9e200a007 100644 (file)
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -247,7 +247,7 @@
                        
                        &:hover {
                                > a {
-                                       background-color: $wcfHeaderMenuBackgroundActive;
+                                       background-color: $wcfHeaderMenuLinkBackgroundActive;
                                        color: $wcfHeaderMenuLinkActive;
                                }
                                

diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index ea73cea53fdd1a5444701d5c317ed9cffca88d02..8c39f85dd11aec31ae415ff17d58168ad70964ab 100644 (file)
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -2045,10 +2045,11 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderT
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLink', 'rgba(255, 255, 255, .8)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLinkActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackground', 'rgba(44, 62, 80, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackgroundActive', 'rgba(34, 49, 63, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLinkBackground', 'rgba(39, 54, 68, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLinkBackgroundActive', 'rgb(19, 34, 48, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackground', 'rgba(34, 49, 63, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackground', 'rgb(19, 34, 48, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackgroundActive', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBorder', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLink', 'rgba(255, 255, 255, 1)');