Improved visuals of interactive dropdowns

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index a1aee5bc2271762bb170ec2234316464091e9d4e..6ec7895a31e918bf8471c25c33edb76698675692 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -187,20 +187,12 @@
                        display: flex;
                        flex: 0 auto;
                        
-                       /* item margins (list item can contain <a> and <div>) */
-                       > a,
-                       > div {
-                               margin-left: 10px;
-                               
-                               &:not(:last-child) {
-                                       margin-right: 10px;
-                               }
-                       }
+                       /* margin between items, do not use the inner elements (such as a contained <a>) for
+                          this as it causes the last item to be of uneven size compared to all other items */
+                       margin-left: 10px;
+                       
                        &:not(:last-child) {
-                               > a,
-                               > div {
-                                       margin-right: 10px;
-                               }
+                               margin-right: 10px;
                        }
                        
                        > a {

diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 435d9a202fd6d17ba248e7d9f9933b8fbf19032f..3d9cbe5852b4d84010bbede41c004455ccf8a221 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -5,6 +5,7 @@
 /* styling for interactive dropdowns (currently only used in the user panel) */
 .interactiveDropdown {
        background-color: $wcfContentBackground;
+       border: 1px solid $wcfDropdownBorder;
        box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
        color: $wcfContentText;
        display: block;
@@ -14,38 +15,38 @@
        z-index: 450;
        
        > .elementPointer {
-               border: 10px solid transparent;
-               //border-bottom-color: $wcfDropdownBorder;
-               border-top-width: 0;
+               border-color: $wcfDropdownBorder transparent;
+               border-style: solid;
+               border-width: 0 10px 10px;
                content: "";
                display: block;
                position: absolute;
                z-index: 100;
                
                > span {
-                       border: 8px solid transparent;
-                       border-bottom-color: $wcfSidebarBackground;
-                       border-top-width: 0;
+                       border-color: $wcfSidebarBackground transparent;
+                       border-style: solid;
+                       border-width: 0 10px 10px;
                        content: "";
                        display: block;
                        position: absolute;
-                       top: 2px;
+                       top: 1px;
                        z-index: 101;
                }
                
                &.left {
-                       left: 16px;
+                       left: 5px;
                        
                        > span {
-                               left: -8px;
+                               left: -10px;
                        }
                }
                
                &.right {
-                       right: 16px;
+                       right: 5px;
                        
                        > span {
-                               right: -7px;
+                               right: -10px;
                        }
                }
        }