From acc808f09c2b241c25c93eaa2d153746471c2c87 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Tue, 14 Jan 2025 16:51:27 +0100
Subject: [PATCH] Unify layout / appearance of sidebar item lists

Closes #6160
---
 com.woltlab.wcf/templates/boxArticleList.tpl  | 42 +++++++----
 .../templates/boxFollowingsOnline.tpl         | 25 ++++---
 .../templates/boxPaidSubscriptionsSidebar.tpl | 37 ++++++----
 .../templates/boxRecentActivitySidebar.tpl    | 30 +++++---
 .../templates/boxSidebarCommentList.tpl       | 33 ++++++---
 com.woltlab.wcf/templates/boxStaffOnline.tpl  | 39 ++++++-----
 .../templates/boxTodaysBirthdays.tpl          | 25 ++++---
 .../templates/boxTodaysFollowingBirthdays.tpl | 25 ++++---
 .../templates/boxUserListSidebar.tpl          | 36 +++++++---
 .../templates/boxUserTrophyList.tpl           | 31 +++++---
 com.woltlab.wcf/templates/userSidebar.tpl     | 18 ++---
 .../install/files/style/layout/sidebar.scss   |  1 +
 .../install/files/style/ui/sidebarList.scss   | 70 +++++++++++++++++++
 wcfsetup/install/lang/de.xml                  |  1 -
 wcfsetup/install/lang/en.xml                  |  1 -
 15 files changed, 294 insertions(+), 120 deletions(-)
 create mode 100644 wcfsetup/install/files/style/ui/sidebarList.scss

diff --git a/com.woltlab.wcf/templates/boxArticleList.tpl b/com.woltlab.wcf/templates/boxArticleList.tpl
index e82b06fe6e..dff962a336 100644
--- a/com.woltlab.wcf/templates/boxArticleList.tpl
+++ b/com.woltlab.wcf/templates/boxArticleList.tpl
@@ -1,26 +1,40 @@
 {if $boxPosition == 'sidebarLeft' || $boxPosition == 'sidebarRight'}
-	<ul class="sidebarItemList">
+	<ul class="sidebarList">
 		{foreach from=$boxArticleList item=boxArticle}
-			<li class="box24 sidebarItem">
-				<a href="{$boxArticle->getLink()}" aria-hidden="true" tabindex="-1">{unsafe:$boxArticle->getUserProfile()->getAvatar()->getImageTag(24)}</a>
+			<li class="sidebarListItem">
+				<div class="sidebarListItem__avatar">
+					{user object=$boxArticle->getUserProfile() type='avatar24' ariaHidden='true' tabindex='-1'}
+				</div>
 				
-				<div class="sidebarItemTitle">
-					<h3>{anchor object=$boxArticle class='articleLink' title=$boxArticle->getTitle()}</h3>
-					
-					<small>
-						{if $boxSortField == 'time'}
+				<div class="sidebarListItem__content">
+					<h3 class="sidebarListItem__title">
+						{anchor object=$boxArticle class='articleLink sidebarListItem__link' title=$boxArticle->getTitle()}
+					</h3>
+				</div>
+
+				<div class="sidebarListItem__meta">
+					{if $boxSortField == 'time'}
+						<div class="sidebarListItem__meta__author">
 							{user object=$boxArticle->getUserProfile() tabindex='-1'}
-							<span class="separatorLeft">{time time=$boxArticle->time}</span>
-						{elseif $boxSortField == 'views'}
+						</div>
+						<div class="sidebarListItem__meta__time">
+							{time time=$boxArticle->time}
+						</div>
+					{elseif $boxSortField == 'views'}
+						<div class="sidebarListItem__meta__views">
 							{lang article=$boxArticle}wcf.article.articleViews{/lang}
-						{elseif $boxSortField == 'comments'}
+						</div>
+					{elseif $boxSortField == 'comments'}
+						<div class="sidebarListItem__meta__comments">
 							{$boxArticle->getDiscussionProvider()->getDiscussionCountPhrase()}
-						{elseif $boxSortField == 'cumulativeLikes'}
+						</div>
+					{elseif $boxSortField == 'cumulativeLikes'}
+						<div class="sidebarListItem__meta__reactions">
 							{if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike') && $boxArticle->cachedReactions}
 								{include file='shared_topReaction' cachedReactions=$boxArticle->cachedReactions render='full'}
 							{/if}
-						{/if}
-					</small>
+						</div>
+					{/if}
 				</div>
 			</li>
 		{/foreach}
diff --git a/com.woltlab.wcf/templates/boxFollowingsOnline.tpl b/com.woltlab.wcf/templates/boxFollowingsOnline.tpl
index d8c748b2f4..a3c294ef2c 100644
--- a/com.woltlab.wcf/templates/boxFollowingsOnline.tpl
+++ b/com.woltlab.wcf/templates/boxFollowingsOnline.tpl
@@ -1,12 +1,21 @@
-<ul class="sidebarItemList">
+<ol class="sidebarList">
 	{foreach from=$usersOnlineList item=userOnline}
-		<li class="box32">
-			{user object=$userOnline type='avatar32' ariaHidden='true' tabindex='-1'}
-			
-			<div class="sidebarItemTitle">
-				<h3>{user object=$userOnline}</h3>
-				<small>{@$userOnline->lastActivityTime|time}</small>
+		<li class="sidebarListItem">
+			<div class="sidebarListItem__avatar">
+				{user object=$userOnline type='avatar32' ariaHidden='true' tabindex='-1'}
+			</div>
+
+			<div class="sidebarListItem__content">
+				<h3 class="sidebarListItem__title">
+					{user object=$userOnline class='sidebarListItem__link'}
+				</h3>
+			</div>
+
+			<div class="sidebarListItem__meta">
+				<div class="sidebarListItem__meta__time">
+					{time time=$userOnline->lastActivityTime}
+				</div>
 			</div>
 		</li>
 	{/foreach}
-</ul>
+</ol>
diff --git a/com.woltlab.wcf/templates/boxPaidSubscriptionsSidebar.tpl b/com.woltlab.wcf/templates/boxPaidSubscriptionsSidebar.tpl
index 5fbe460af4..935ce9081e 100644
--- a/com.woltlab.wcf/templates/boxPaidSubscriptionsSidebar.tpl
+++ b/com.woltlab.wcf/templates/boxPaidSubscriptionsSidebar.tpl
@@ -1,21 +1,30 @@
-<ul class="sidebarItemList">
+<ol class="sidebarList">
 	{foreach from=$subscriptions item=subscription}
-		<li>
-			<div class="sidebarItemTitle">
-				<h3>{$subscription->getTitle()}</h3>
-				<small>{lang}wcf.paidSubscription.formattedCost{/lang}</small>
+		<li class="sidebarListItem">
+			<div class="sidebarListItem__content">
+				<h3 class="sidebarListItem__title">
+					{$subscription->getTitle()}
+				</h3>
+				
+				<div class="sidebarListItem__description">
+					{lang}wcf.paidSubscription.formattedCost{/lang}
+				</div>
+			</div>
+
+			<div class="sidebarListItem__meta">
+				<div class="sidebarListItem__meta__buttons">
+					{if !PAID_SUBSCRIPTION_ENABLE_TOS_CONFIRMATION && $__wcf->user->canPurchasePaidSubscriptions()}
+						<ul class="buttonList">
+							{foreach from=$subscription->getPurchaseButtons() item=button}
+								<li>{@$button}</li>
+							{/foreach}
+						</ul>
+					{/if}
+				</div>
 			</div>
-			
-			{if !PAID_SUBSCRIPTION_ENABLE_TOS_CONFIRMATION && $__wcf->user->canPurchasePaidSubscriptions()}
-				<ul class="buttonList">
-					{foreach from=$subscription->getPurchaseButtons() item=button}
-						<li>{@$button}</li>
-					{/foreach}
-				</ul>
-			{/if}
 		</li>
 	{/foreach}
-</ul>
+</ol>
 
 {if PAID_SUBSCRIPTION_ENABLE_TOS_CONFIRMATION && $__wcf->user->canPurchasePaidSubscriptions()}
 	<a class="button small more" href="{link controller='PaidSubscriptionList'}{/link}">{lang}wcf.paidSubscription.button.moreInformation{/lang}</a>
diff --git a/com.woltlab.wcf/templates/boxRecentActivitySidebar.tpl b/com.woltlab.wcf/templates/boxRecentActivitySidebar.tpl
index a40b43cc35..ac6f85466c 100644
--- a/com.woltlab.wcf/templates/boxRecentActivitySidebar.tpl
+++ b/com.woltlab.wcf/templates/boxRecentActivitySidebar.tpl
@@ -1,15 +1,25 @@
-<ul class="sidebarItemList">
+<ol class="sidebarList">
 	{foreach from=$eventList item=event}
-		<li class="box24{if $__wcf->getUserProfileHandler()->isIgnoredUser($event->getUserProfile()->userID, 2)} ignoredUserContent{/if}">
-			{user object=$event->getUserProfile() type='avatar24' ariaHidden='true' tabindex='-1'}
-			
-			<div class="sidebarItemTitle">
-				<h3>
-					{user object=$event->getUserProfile()}
-					<small class="separatorLeft">{@$event->time|time}</small>
+		<li class="sidebarListItem{if $__wcf->getUserProfileHandler()->isIgnoredUser($event->getUserProfile()->userID, 2)} ignoredUserContent{/if}">
+			<div class="sidebarListItem__avatar">
+				{user object=$event->getUserProfile() type='avatar24' ariaHidden='true' tabindex='-1'}
+			</div>
+
+			<div class="sidebarListItem__content">
+				<h3 class="sidebarListItem__title">
+					{if $event->getLink()}
+						<a href="{$event->getLink()}" class="sidebarListItem__link">{unsafe:$event->getTitle()}</a>
+					{else}
+						{unsafe:$event->getTitle()}
+					{/if}
 				</h3>
-				<small>{@$event->getTitle()}</small>
+			</div>
+
+			<div class="sidebarListItem__meta">
+				<div class="sidebarListItem__meta__time">
+					{time time=$event->time}
+				</div>
 			</div>
 		</li>
 	{/foreach}
-</ul>
+</ol>
diff --git a/com.woltlab.wcf/templates/boxSidebarCommentList.tpl b/com.woltlab.wcf/templates/boxSidebarCommentList.tpl
index d098e42984..b3ab7c7daa 100644
--- a/com.woltlab.wcf/templates/boxSidebarCommentList.tpl
+++ b/com.woltlab.wcf/templates/boxSidebarCommentList.tpl
@@ -1,16 +1,29 @@
-<ul class="sidebarItemList">
+<ol class="sidebarList">
 	{foreach from=$boxCommentList item=boxComment}
-		<li>
-			<div class="sidebarItemTitle">
-				<h3><a href="{$boxComment->getLink()}">{$boxComment->title}</a></h3>
+		<li class="sidebarListItem">
+			<div class="sidebarListItem__avatar">
+				{user object=$boxComment->getUserProfile() type='avatar24' ariaHidden='true' tabindex='-1'}
 			</div>
-			
-			<div class="sidebarCommentContent">
-				<small>{@$boxComment->getExcerpt(50)}</small>
+
+			<div class="sidebarListItem__content">
+				<h3 class="sidebarListItem__title">
+					<a href="{$boxComment->getLink()}" class="sidebarListItem__link">{$boxComment->title}</a>
+				</h3>
+				
+				<div class="sidebarListItem__description">
+					{unsafe:$boxComment->getExcerpt(150)}
+				</div>
 			</div>
-			<div>
-				<small>{user object=$boxComment->getUserProfile()} <span class="separatorLeft">{@$boxComment->time|time}</span></small>
+
+			<div class="sidebarListItem__meta">
+				<div class="sidebarListItem__meta__author">
+					{user object=$boxComment->getUserProfile() tabindex='-1'}
+				</div>
+				
+				<div class="sidebarListItem__meta__time">
+					{time time=$boxComment->time}
+				</div>
 			</div>
 		</li>
 	{/foreach}
-</ul>
+</ol>
diff --git a/com.woltlab.wcf/templates/boxStaffOnline.tpl b/com.woltlab.wcf/templates/boxStaffOnline.tpl
index df6debddf5..37fa63459a 100644
--- a/com.woltlab.wcf/templates/boxStaffOnline.tpl
+++ b/com.woltlab.wcf/templates/boxStaffOnline.tpl
@@ -1,22 +1,29 @@
-<ul class="sidebarItemList">
+<ol class="sidebarList">
 	{foreach from=$usersOnlineList item=userOnline}
-		<li class="box32">
-			{user object=$userOnline type='avatar32' ariaHidden='true' tabindex='-1'}
-			
-			<div class="sidebarItemTitle">
-				<h3>
+		<li class="sidebarListItem">
+			<div class="sidebarListItem__avatar">
+				{user object=$userOnline type='avatar32' ariaHidden='true' tabindex='-1'}
+			</div>
+
+			<div class="sidebarListItem__content">
+				<h3 class="sidebarListItem__title">
 					{event name='beforeUsername'}
-					{user object=$userOnline}
+					{user object=$userOnline class='sidebarListItem__link'}
 				</h3>
-				{if MODULE_USER_RANK}
-					{if $userOnline->getUserTitle()}
-						<p><span class="badge userTitleBadge{if $userOnline->getRank() && $userOnline->getRank()->cssClassName} {@$userOnline->getRank()->cssClassName}{/if}">{$userOnline->getUserTitle()}</span></p>
-					{/if}
-					{if $userOnline->getRank() && $userOnline->getRank()->rankImage}
-						<p><span class="userRankImage">{@$userOnline->getRank()->getImage()}</span></p>
-					{/if}
-				{/if}
 			</div>
+
+			{if MODULE_USER_RANK}
+				<div class="sidebarListItem__meta">
+					<div class="sidebarListItem__meta__userRank">
+						{if $userOnline->getUserTitle()}
+							<p><span class="badge userTitleBadge{if $userOnline->getRank() && $userOnline->getRank()->cssClassName} {@$userOnline->getRank()->cssClassName}{/if}">{$userOnline->getUserTitle()}</span></p>
+						{/if}
+						{if $userOnline->getRank() && $userOnline->getRank()->rankImage}
+							<p><span class="userRankImage">{@$userOnline->getRank()->getImage()}</span></p>
+						{/if}
+					</div>
+				</div>
+			{/if}
 		</li>
 	{/foreach}
-</ul>
+</ol>
diff --git a/com.woltlab.wcf/templates/boxTodaysBirthdays.tpl b/com.woltlab.wcf/templates/boxTodaysBirthdays.tpl
index ab8c526b86..6946f39a7a 100644
--- a/com.woltlab.wcf/templates/boxTodaysBirthdays.tpl
+++ b/com.woltlab.wcf/templates/boxTodaysBirthdays.tpl
@@ -1,15 +1,24 @@
-<ul class="sidebarItemList">
+<ol class="sidebarList">
 	{foreach from=$birthdayUserProfiles item=birthdayUserProfile}
-		<li class="box32">
-			{user object=$birthdayUserProfile type='avatar32' ariaHidden='true' tabindex='-1'}
-			
-			<div class="sidebarItemTitle">
-				<h3>{user object=$birthdayUserProfile}</h3>
-				<small>{$birthdayUserProfile->getBirthday()}</small>
+		<li class="sidebarListItem">
+			<div class="sidebarListItem__avatar">
+				{user object=$birthdayUserProfile type='avatar32' ariaHidden='true' tabindex='-1'}
+			</div>
+
+			<div class="sidebarListItem__content">
+				<h3 class="sidebarListItem__title">
+					{user object=$birthdayUserProfile class='sidebarListItem__link'}
+				</h3>
+			</div>
+
+			<div class="sidebarListItem__meta">
+				<div class="sidebarListItem__meta__birthday">
+					{$birthdayUserProfile->getBirthday()}
+				</div>
 			</div>
 		</li>
 	{/foreach}
-</ul>
+</ol>
 
 {if $birthdayUserProfiles|count >= 10}
 	<button type="button" class="jsTodaysBirthdays button small more jsOnly">{lang}wcf.global.button.showAll{/lang}</button>
diff --git a/com.woltlab.wcf/templates/boxTodaysFollowingBirthdays.tpl b/com.woltlab.wcf/templates/boxTodaysFollowingBirthdays.tpl
index c93626adeb..39b48451f4 100644
--- a/com.woltlab.wcf/templates/boxTodaysFollowingBirthdays.tpl
+++ b/com.woltlab.wcf/templates/boxTodaysFollowingBirthdays.tpl
@@ -1,12 +1,21 @@
-<ul class="sidebarItemList">
+<ol class="sidebarList">
 	{foreach from=$birthdayUserProfiles item=birthdayUserProfile}
-		<li class="box32">
-			{user object=$birthdayUserProfile type='avatar32' ariaHidden='true' tabindex='-1'}
-			
-			<div class="sidebarItemTitle">
-				<h3>{user object=$birthdayUserProfile}</h3>
-				<small>{$birthdayUserProfile->getBirthday()}</small>
+		<li class="sidebarListItem">
+			<div class="sidebarListItem__avatar">
+				{user object=$birthdayUserProfile type='avatar32' ariaHidden='true' tabindex='-1'}
+			</div>
+
+			<div class="sidebarListItem__content">
+				<h3 class="sidebarListItem__title">
+					{user object=$birthdayUserProfile class='sidebarListItem__link'}
+				</h3>
+			</div>
+
+			<div class="sidebarListItem__meta">
+				<div class="sidebarListItem__meta__birthday">
+					{$birthdayUserProfile->getBirthday()}
+				</div>
 			</div>
 		</li>
 	{/foreach}
-</ul>
+</ol>
diff --git a/com.woltlab.wcf/templates/boxUserListSidebar.tpl b/com.woltlab.wcf/templates/boxUserListSidebar.tpl
index 4c00b3b586..e0c9270bba 100644
--- a/com.woltlab.wcf/templates/boxUserListSidebar.tpl
+++ b/com.woltlab.wcf/templates/boxUserListSidebar.tpl
@@ -1,15 +1,31 @@
-<ul class="sidebarItemList">
+<ol class="sidebarList">
 	{foreach from=$boxUsers item=boxUser}
-		<li class="box24">
-			{user object=$boxUser type='avatar24' ariaHidden='true' tabindex='-1'}
-			
-			<div class="sidebarItemTitle">
-				<h3>{user object=$boxUser}</h3>
-				{capture assign='__boxUserLanguageItem'}{lang __optional=true}wcf.user.boxList.description.{$boxSortField}{/lang}{/capture}
-				{if $__boxUserLanguageItem}
-					<small>{@$__boxUserLanguageItem}</small>
+		<li class="sidebarListItem">
+			<div class="sidebarListItem__avatar">
+				{user object=$boxUser type='avatar32' ariaHidden='true' tabindex='-1'}
+			</div>
+
+			<div class="sidebarListItem__content">
+				<h3 class="sidebarListItem__title">
+					{user object=$boxUser class='sidebarListItem__link'}
+				</h3>
+			</div>
+
+			<div class="sidebarListItem__meta">
+				{if $boxSortField == 'activityPoints'}
+					<div class="sidebarListItem__meta__points">
+						{lang}wcf.user.boxList.description.activityPoints{/lang}
+					</div>
+				{elseif $boxSortField == 'likesReceived'}
+					<div class="sidebarListItem__meta__likes">
+						{lang}wcf.user.boxList.description.likesReceived{/lang}
+					</div>
+				{elseif $boxSortField == 'registrationDate'}
+					<div class="sidebarListItem__meta__time">
+						{time time=$boxUser->registrationDate}
+					</div>
 				{/if}
 			</div>
 		</li>
 	{/foreach}
-</ul>
+</ol>
diff --git a/com.woltlab.wcf/templates/boxUserTrophyList.tpl b/com.woltlab.wcf/templates/boxUserTrophyList.tpl
index bf16e8657f..ddb1c838ac 100644
--- a/com.woltlab.wcf/templates/boxUserTrophyList.tpl
+++ b/com.woltlab.wcf/templates/boxUserTrophyList.tpl
@@ -1,21 +1,30 @@
 {if $boxPosition == 'sidebarLeft' || $boxPosition == 'sidebarRight'}
-	<ul class="sidebarItemList">
+	<ol class="sidebarList">
 		{foreach from=$boxUserTrophyList item=boxUserTrophy}
-			<li class="box32">
-				<div>{@$boxUserTrophy->getTrophy()->renderTrophy(32)}</div>
+			<li class="sidebarListItem">
+				<div class="sidebarListItem__avatar">
+					{unsafe:$boxUserTrophy->getTrophy()->renderTrophy(32)}
+				</div>
 
-				<div class="sidebarItemTitle">
-					<h3>
-						<a href="{$boxUserTrophy->getTrophy()->getLink()}">{$boxUserTrophy->getTrophy()->getTitle()}</a>
+				<div class="sidebarListItem__content">
+					<h3 class="sidebarListItem__title">
+						<a href="{$boxUserTrophy->getTrophy()->getLink()}" class="sidebarListItem__link">
+							{$boxUserTrophy->getTrophy()->getTitle()}
+						</a>
 					</h3>
-					<small>
-						{user object=$boxUserTrophy->getUserProfile()}
-						<span class="separatorLeft">{@$boxUserTrophy->time|time}</span>
-					</small>
+				</div>
+
+				<div class="sidebarListItem__meta">
+					<div class="sidebarListItem__meta__author">
+						{user object=$boxUserTrophy->getUserProfile() tabindex='-1'}
+					</div>
+					<div class="sidebarListItem__meta__time">
+						{time time=$boxUserTrophy->time}
+					</div>
 				</div>
 			</li>
 		{/foreach}
-	</ul>
+	</ol>
 {else}
 	<ol class="containerBoxList trophyCategoryList tripleColumned">
 		{foreach from=$boxUserTrophyList item=boxUserTrophy}
diff --git a/com.woltlab.wcf/templates/userSidebar.tpl b/com.woltlab.wcf/templates/userSidebar.tpl
index 563c5c8de0..2789c5648f 100644
--- a/com.woltlab.wcf/templates/userSidebar.tpl
+++ b/com.woltlab.wcf/templates/userSidebar.tpl
@@ -4,17 +4,17 @@
 			<h2 class="boxTitle">{lang}wcf.user.trophy.trophyPoints{/lang} <span class="badge">{#$user->trophyPoints}</span></h2>
 			
 			<div class="boxContent">
-				<ol class="sidebarItemList">
+				<ol class="sidebarList">
 					{foreach from=$user->getSpecialTrophies() item=trophy}
-						<li class="sidebarItemListEntry">
-							<span class="sidebarItemListEntryIcon">
-								{unsafe:$trophy->renderTrophy(24)}
-							</span>
+						<li class="sidebarListItem">
+							<div class="sidebarListItem__avatar">
+								{unsafe:$trophy->renderTrophy(32)}
+							</div>
 
-							<div class="sidebarItemListEntryContent">
-								<a href="{unsafe:$trophy->getLink()}" class="sidebarItemListEntryLink">
-									{$trophy}
-								</a>
+							<div class="sidebarListItem__content">
+								<h3 class="sidebarListItem__title">
+									<a href="{$trophy->getLink()}" class="sidebarListItem__link">{$trophy}</a>
+								</h3>
 							</div>
 						</li>
 					{/foreach}
diff --git a/wcfsetup/install/files/style/layout/sidebar.scss b/wcfsetup/install/files/style/layout/sidebar.scss
index 74cee657a5..ed84d18b64 100644
--- a/wcfsetup/install/files/style/layout/sidebar.scss
+++ b/wcfsetup/install/files/style/layout/sidebar.scss
@@ -1,3 +1,4 @@
+/* @deprecated 6.2 Use `sidebarListItem` instead */
 .sidebarItemList {
 	> li {
 		&:not(:last-child) {
diff --git a/wcfsetup/install/files/style/ui/sidebarList.scss b/wcfsetup/install/files/style/ui/sidebarList.scss
new file mode 100644
index 0000000000..85a771a668
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/sidebarList.scss
@@ -0,0 +1,70 @@
+.sidebarList {
+	display: flex;
+	gap: 10px;
+	flex-direction: column;
+}
+
+.sidebarListItem {
+	display: grid;
+	grid-template-areas:
+		"avatar content"
+		"avatar meta";
+	grid-template-columns: min-content 1fr;
+	grid-template-rows: 1fr min-content;
+	column-gap: 10px;
+	row-gap: 5px;
+	position: relative;
+}
+
+.sidebarListItem__avatar {
+	grid-area: avatar;
+}
+
+.sidebarListItem__content {
+	grid-area: content;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+}
+
+.sidebarListItem__meta {
+	grid-area: meta;
+
+	@include wcfFontSmall;
+}
+
+.sidebarListItem__meta__time {
+	color: var(--wcfContentDimmedText);
+}
+
+a.sidebarListItem__link {
+	color: inherit;
+
+	&::before {
+		content: "";
+		inset: 0;
+		position: absolute;
+	}
+
+	&:hover,
+	&:focus {
+		color: inherit;
+		text-decoration: underline;
+		text-underline-offset: 0.2em;
+	}
+}
+
+.sidebarListItem__meta a {
+	color: inherit;
+
+	&:hover,
+	&:focus {
+		color: inherit;
+		text-decoration: underline;
+		text-underline-offset: 0.2em;
+	}
+}
+
+.sidebarListItem__description {
+	@include wcfFontSmall;
+}
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index e57287ce37..39515879a0 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -4847,7 +4847,6 @@ sich{/if} nicht bei uns registriert {if LANGUAGE_USE_INFORMAL_VARIANT}hast{else}
 		<item name="wcf.user.panel.showAll"><![CDATA[Alle anzeigen]]></item>
 		<item name="wcf.user.boxList.description.activityPoints"><![CDATA[{#$boxUser->activityPoints} Punkt{if $boxUser->activityPoints != 1}e{/if}]]></item>
 		<item name="wcf.user.boxList.description.likesReceived"><![CDATA[{#$boxUser->likesReceived} Like{if $boxUser->likesReceived != 1}s{/if}]]></item>
-		<item name="wcf.user.boxList.description.registrationDate"><![CDATA[{@$boxUser->registrationDate|time}]]></item>
 		<item name="wcf.user.mostOnlineUsers"><![CDATA[Meiste Benutzer online]]></item>
 		<item name="wcf.user.sortField.activityPoints"><![CDATA[Punkte]]></item>
 		<item name="wcf.user.sortField.likesReceived"><![CDATA[Erhaltene Reaktionen]]></item>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index a8daa29069..5261b07479 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -4849,7 +4849,6 @@ not register with us.]]></item>
 		<item name="wcf.user.panel.showAll"><![CDATA[Display All]]></item>
 		<item name="wcf.user.boxList.description.activityPoints"><![CDATA[{#$boxUser->activityPoints} Point{if $boxUser->activityPoints != 1}s{/if}]]></item>
 		<item name="wcf.user.boxList.description.likesReceived"><![CDATA[{#$boxUser->likesReceived} Like{if $boxUser->likesReceived != 1}s{/if}]]></item>
-		<item name="wcf.user.boxList.description.registrationDate"><![CDATA[{@$boxUser->registrationDate|time}]]></item>
 		<item name="wcf.user.mostOnlineUsers"><![CDATA[Most Online Users]]></item>
 		<item name="wcf.user.sortField.activityPoints"><![CDATA[Points]]></item>
 		<item name="wcf.user.sortField.likesReceived"><![CDATA[Reactions Received]]></item>
-- 
2.20.1