Improved layout for interactive drop-down menus

Updated visuals for unread items that no longer relys on bold text. The paddings have been toned down to be more in line with other UI elements.

Closes #3329

diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index a538d280d9836d7dcb2fed1d339a76d969157145..8db530799795fb88755281889a20fed59768ce9e 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -63,7 +63,7 @@
        background-color: $wcfSidebarBackground;
        color: $wcfSidebarHeadlineText;
        display: flex;
-       padding: 10px 20px;
+       padding: 10px;
        
        a {
                color: $wcfSidebarHeadlineLink;
@@ -111,7 +111,7 @@
 /* dropdown item list */
 .interactiveDropdownItems {
        > li {
-               padding: 15px 20px;
+               padding: 10px;
                position: relative;
                
                &:not(:last-child) {
@@ -135,6 +135,13 @@
                        overflow: hidden;
                }
                
+               small {
+                       align-items: center;
+                       color: $wcfContentDimmedText;
+                       display: flex;
+                       margin-top: 3px;
+               }
+               
                @include screen-sm-down {
                        padding: 10px;
                }
@@ -163,8 +170,13 @@
                flex: 1 1 auto;
        }
        
-       h3 {
-               font-weight: bold;
+       small::after {
+               background-color: rgb(49, 138, 220);
+               border-radius: 50%;
+               content: "";
+               height: 8px;
+               margin-left: 5px;
+               width: 8px;
        }
 }
 
@@ -208,7 +220,7 @@
        background-color: $wcfSidebarBackground;
        color: $wcfSidebarHeadlineText;
        display: block;
-       padding: 10px 20px;
+       padding: 10px;
        text-align: center;
        
        &:hover {