From c4dc4aaabe15ebfb5edefaf0a3d9b4449bfbaa76 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Fri, 17 Jun 2016 16:43:50 +0200 Subject: [PATCH] slightly overhauled main menu / user panel --- .../files/style/layout/pageHeader.scss | 37 +++++++++++-------- .../files/style/layout/pageHeaderSticky.scss | 18 ++++----- .../files/style/layout/pageNavigation.scss | 5 --- wcfsetup/install/files/style/ui/redactor.scss | 2 +- .../install/files/style/ui/userProfile.scss | 2 +- wcfsetup/setup/db/install.sql | 5 ++- 6 files changed, 35 insertions(+), 34 deletions(-) diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index 348566994b..dfebe73ca0 100644 --- 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 7020703ccb..a9bff6662b 100644 --- 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 0b06410fb2..a2f55c460c 100644 --- 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 ba88eb5706..15b9fc38d4 100644 --- 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 f793b92e18..dfc4b4e86f 100644 --- 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 ea73cea53f..8c39f85dd1 100644 --- 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)'); -- 2.20.1