Improved search input design

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index ac7576f45264f67a6079f6e5c69feb72098658b7..f81ef3089fdefc584015689d3c58fee5a2b27d4f 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -26,7 +26,7 @@
        @include screen-lg {
                align-items: center;
                flex-wrap: wrap;
-               padding-top: 20px;
+               padding-top: 30px;
                padding-bottom: 0;
        }
 }
@@ -35,7 +35,7 @@
 .pageHeaderLogo {
        @include screen-lg {
                flex: 0 0 50%;
-               margin-bottom: 20px;
+               margin-bottom: 30px;
                
                .pageHeaderLogoSmall {
                        display: none;
@@ -171,10 +171,10 @@
                                width: 100%;
                        }
                }
-               
-               .pageHeaderSearchInputContainer .pageHeaderSearchInput {
-                       width: 200px;
-               }
+       }
+       
+       .pageHeaderSearchInputContainer .pageHeaderSearchInput {
+               width: 250px;
        }
 }
 
@@ -245,9 +245,8 @@
 /* SEARCH AREA */
 .pageHeaderSearch {
        @include screen-lg {
-               align-self: flex-start;
                flex: 0 0 50%;
-               margin-bottom: 20px;
+               margin-bottom: 30px;
                text-align: right;
                
                .pageHeaderSearchLabel {
@@ -259,13 +258,26 @@
 .pageHeaderSearchInputContainer {
        background-color: $wcfHeaderSearchBoxBackground;
        border-radius: 2px;
+       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        display: inline-flex;
-       padding: 2px;
+       padding: 3px;
        position: relative;
        
        .pageHeaderSearchType > .button {
                border-radius: 2px 0 0 2px;
-               padding: 4px 7px;
+               min-width: 100px;
+               padding: 4px 22px 4px 7px;
+               position: relative;
+               text-align: left;
+               white-space: nowrap;
+               
+               &::after {
+                       color: inherit;
+                       content: $fa-var-caret-down;
+                       font-family: FontAwesome;
+                       position: absolute;
+                       right: 7px;
+               }
        }
        
        .pageHeaderSearchInputButton {
@@ -308,7 +320,7 @@
                
                /* remove broken cancel-button (webkit) */
                &::-webkit-search-cancel-button {
-                       display:none;
+                       display: none;
                }
        }
 }

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 6f0454e24d3a9962c46b6e050bd462e58cc7be7f..7020703ccb9d138b5b15c70afc263b0ccc78f960 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -89,15 +89,10 @@
                        margin-left: 10px;
                        order: 3;
                        
-                       .pageHeaderSearchInput {
-                               border-radius: 0 0 2px 2px;
-                               height: 100%;
-                               width: 100%;
-                       }
-                       
                        .pageHeaderSearchLabel {
-                               background-color: $wcfHeaderSearchBoxBackground;
+                               background-color: $wcfHeaderMenuBackground;
                                bottom: 0;
+                               color: $wcfHeaderMenuLink;
                                cursor: pointer;
                                display: block;
                                position: absolute;
@@ -105,10 +100,12 @@
                                width: 50px;
                                
                                &:hover {
-                                       background-color: $wcfHeaderSearchBoxBackgroundActive;
+                                       background: $wcfHeaderMenuBackgroundActive;
+                                       color: $wcfHeaderMenuLinkActive;
                                }
                                
                                &::before {
+                                       color: inherit;
                                        content: $fa-var-search;
                                        display: block;
                                        font-family: FontAwesome;
@@ -138,8 +135,8 @@
                        }
                        
                        .pageHeaderSearchLabel {
-                               background-color: $wcfHeaderSearchBoxBackgroundActive;
-                               width: 50px;
+                               background: $wcfHeaderMenuBackgroundActive;
+                               color: $wcfHeaderMenuLinkActive;
                        }
                }
        }

diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index de18136d67757a22474a2a187a812a43b1de0527..f255dfe437d254d6a3a70d5339da384dfa87e70a 100644 (file)
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -2015,14 +2015,14 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderM
 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)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(44, 62, 80, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(34, 49, 63, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(66, 66, 66, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(66, 66, 66, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBorder', 'rgba(128, 139, 150, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBorderActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholder', 'rgba(169, 169, 169, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholderActive', 'rgba(204, 204, 204, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholderActive', 'rgba(169, 169, 169, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackground', 'rgba(241, 246, 251, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackgroundActive', 'rgba(241, 246, 251, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorder', 'rgba(176, 200, 224, 1)');