Overhauled dropdown visuals

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
index 350014721f226c9b06d15daf07ce39894e17157f..734170054863ac4068b519c36f2497d7b25f2454 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
@@ -177,6 +177,7 @@ define(
                        UiAlignment.set(dropdownMenu, alternateElement || dropdown, {
                                pointerClassNames: ['dropdownArrowBottom', 'dropdownArrowRight'],
                                refDimensionsElement: refDimensionsElement || null,
+                               verticalOffset: 0,
                                
                                // alignment
                                horizontal: (elData(dropdownMenu, 'dropdown-alignment-horizontal') === 'right') ? 'right' : 'left',

diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss
index ce7cc6d48020844ca5e8dfc5db7bddc7ea8ead2a..51f7a4bfb9c6da9eb03bf7f50787efbe528a9a92 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdown.scss
+++ b/wcfsetup/install/files/style/ui/dropdown.scss
@@ -117,10 +117,10 @@
 
 .dropdownMenu {
        background-color: $wcfDropdownBackground;
-       border: 1px solid $wcfDropdownBorder;
+       border-radius: 2px;
+       box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        color: $wcfDropdownText;
        display: none;
-       float: left;
        min-width: 160px;
        padding: 3px 0;
        pointer-events: all;
@@ -129,32 +129,6 @@
        visibility: hidden;
        z-index: 450;
        
-       @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
-       
-       &::after {
-               border: 10px solid transparent;
-               border-bottom-color: $wcfDropdownBorder;
-               border-top-width: 0;
-               content: "";
-               display: inline-block;
-               left: 9px;
-               position: absolute;
-               top: -10px;
-               z-index: 100;
-       }
-       
-       &::before {
-               border: 9px solid transparent;
-               border-bottom-color: $wcfDropdownBackground;
-               border-top-width: 0;
-               content: "";
-               display: inline-block;
-               left: 10px;
-               position: absolute;
-               top: -9px;
-               z-index: 101;
-       }
-       
        &.dropdownArrowRight {
                &::after {
                        left: auto;

diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index 4af20dcc656340f07efc3c1549c3830f0240ddec..e3fa182578a40743cd5085ab3a5d7cfb024fa7ad 100644 (file)
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -1973,12 +1973,12 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContent
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentLinkActive', 'rgba(192, 57, 43, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentText', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackgroundActive', 'rgba(55, 73, 95, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorder', 'rgba(55, 73, 95, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackgroundActive', 'rgba(238, 238, 238, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorder', 'rgba(55, 73, 95, 1)'); -- no longer in use (ACP style editor needs to be updated first)
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorderInner', 'rgba(238, 238, 238, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLink', 'rgba(55, 73, 95, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownText', 'rgba(55, 73, 95, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLink', 'rgba(33, 33, 33, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLinkActive', 'rgba(33, 33, 33, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownText', 'rgba(33, 33, 33, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyFallback', '"Segoe UI", "Lucida Grande", "Helveltica", sans-serif');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyGoogle', 'Open Sans');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontLineHeight', '1.48');