Updated visuals for interactive dropdowns

diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index d483d7b512316130d58751a2698eb8fd72de1010..3a284b95e2ad8ca7f5bdd765e0b772fc4b54f177 100644 (file)
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -47,7 +47,6 @@
                                                        {event name='userMenuItemsBefore'}
                                                        
                                                        {foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
-                                                               <li class="dropdownDivider"></li>
                                                                <li class="interactiveDropdownUserMenuItem">
                                                                        <div class="box32">
                                                                                <div><span class="icon icon32 {@$menuCategory->getIconClassName()}"></span></div>

diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 80c2e87c50b5784170111270475359e628d66f38..0ea41bb1098daf099ccc1ecbafcb6dcd78ce92da 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -1,13 +1,13 @@
 .interactiveDropdown {
        background-color: $wcfDropdownBackground;
        border: 1px solid $wcfDropdownBorder;
+       border-width: 1px 0;
+       box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
        color: $wcfDropdownLink;
        display: block;
        position: absolute;
        z-index: 450;
        
-       @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
-       
        &:not(.open) {
                display: none !important;
        }
@@ -55,6 +55,7 @@
 
 .interactiveDropdownHeader {
        align-items: center;
+       background-color: rgb(247, 248, 250);
        display: flex;
        padding: 5px 10px;
 }
@@ -74,7 +75,6 @@
        border: 1px solid $wcfDropdownBorderInner;
        border-width: 1px 0;
        max-height: 300px;
-       padding: 3px 0;
        
        &.ps-container {
                > .interactiveDropdownItems {
@@ -91,6 +91,32 @@
 .interactiveDropdownItems {
        background-color: $wcfDropdownBackground;
        
+       > li {
+               color: $wcfContentText;
+               padding: 8px 10px;
+               position: relative;
+               
+               &:not(:last-child) {
+                       border-bottom: 1px solid $wcfDropdownBorderInner;
+               }
+               
+               &:hover {
+                       background-color: rgb(242, 242, 242);
+               }
+               
+               > .box32 {
+                       margin-bottom: 0;
+               }
+               
+               a {
+                       color: $wcfContentLink;
+                       
+                       &:hover {
+                               color: $wcfContentLinkActive;
+                       }
+               }
+       }
+       
        .loading,
        .noItems {
                padding: 20px 10px;
@@ -134,21 +160,15 @@
 }
 
 .interactiveDropdownItemOutstanding {
-       /*//background-color: @wcfDropdownHoverBackgroundColor;
-       background-repeat: no-repeat;
-       background-size: 200%;
-       
-       //.linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%");
-       
-       &:hover {
-               background-position: 100%;
-       }*/
-       
        display: flex;
        
        > .box32 {
                flex: 1 1 auto;
        }
+       
+       h3 {
+               font-weight: bold;
+       }
 }
 
 .interactiveDropdownItemMarkAsRead {
@@ -157,10 +177,6 @@
        margin-left: 5px;
 }
 
-.interactiveDropdownItemOutstandingIcon > div.box32 {
-       //padding-right: 16px + (@wcfGapSmall + @wcfGapTiny);
-}
-
 &.interactiveDropdownItemShadow {
        > .box32 {
                position: relative;
@@ -187,15 +203,6 @@
 }
        
 .interactiveDropdownItemsUserMenu > li {
-       &.dropdownDivider {
-               border-bottom: 1px solid $wcfDropdownBorderInner;
-               padding: 0 !important;
-       }
-       
-       &:not(.dropdownDivider) {
-               padding: 5px;
-       }
-       
        h3 {
                @extend .wcfFontHeadline
        }
@@ -203,28 +210,35 @@
        .box64 {
                position: relative;
                
+               .containerHeadline {
+                       padding-bottom: 10px;
+               }
+               
                .interactiveDropdownUserMenuLinkList {
                        bottom: 0;
                        position: absolute;
                }
        }
        
+       .icon {
+               position: relative;
+               top: 5px;
+       }
+       
        .interactiveDropdownUserMenuLinkList > li {
                display: inline-block;
                
                @extend .wcfFontSmall;
                
-               &:after {
-                       content: " \2013 ";
-               }
-               
-               &:last-child:after {
-                       content: "";
+               &:not(:last-child)::after {
+                       content: "\00b7";
+                       margin-left: 5px;
                }
        }
 }
 
 .interactiveDropdownShowAll {
+       background-color: rgb(247, 248, 250);
        color: $wcfDropdownLink;
        display: block;
        padding: 5px 10px;
@@ -249,15 +263,6 @@
        .interactiveDropdownItems .notificationItem {
                max-width: 400px;
        }
-       
-       .interactiveDropdownItemMarkAsRead {
-               opacity: .6;
-               transition: opacity .2s linear;
-       }
-       
-       .interactiveDropdownItemOutstandingIcon:hover .interactiveDropdownItemMarkAsRead {
-               opacity: 1;
-       }
 }
 
 @media only screen and (max-width: 800px) {