From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 14 Jun 2020 17:42:56 +0000 (+0200)
Subject: Improved layout for interactive drop-down menus
X-Git-Tag: 5.3.0_Alpha_1~217
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=7f44e53f6dba002c45db3cd81c2f6abcb82b07f6;p=GitHub%2FWoltLab%2FWCF.git

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 a538d280d9..8db5307997 100644
--- 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 {