From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 20 Oct 2015 08:40:31 +0000 (+0200)
Subject: Updated styles and templates
X-Git-Tag: 3.0.0_Beta_1~2030^2~276
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=1223c43c536bf2fd2a6386308f913bf0bed9dce3;p=GitHub%2FWoltLab%2FWCF.git

Updated styles and templates
---

diff --git a/com.woltlab.wcf/templates/pageHeader.tpl b/com.woltlab.wcf/templates/pageHeader.tpl
index c9a466141f..7286a33fc6 100644
--- a/com.woltlab.wcf/templates/pageHeader.tpl
+++ b/com.woltlab.wcf/templates/pageHeader.tpl
@@ -1,29 +1,16 @@
-<header id="pageHeader" class="header">
+<header id="pageHeader" class="pageHeader">
 	<div>
 		<div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
-			{include file='pageLogo'}
+			{include file='pageHeaderLogo'}
 			
-			{include file='searchArea'}
+			{include file='pageHeaderSearch'}
 			
-			{include file='mainMenu'}
+			{include file='pageHeaderMenu'}
 			
-			{include file='userPanel'}
+			{include file='pageHeaderUser'}
 		</div>
 	</div>
-	{*
-	<div>
-		<nav class="navigation navigationHeader">
-			{include file='mainMenuSubMenu'}
-			
-			<ul class="navigationIcons">
-				<li id="toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-down"></span> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
-				<li id="sitemap" class="jsOnly"><a href="#" title="{lang}wcf.page.sitemap{/lang}" class="jsTooltip"><span class="icon icon16 icon-sitemap"></span> <span class="invisible">{lang}wcf.page.sitemap{/lang}</span></a></li>
-				{if $headerNavigation|isset}{@$headerNavigation}{/if}
-				{event name='navigationIcons'}
-			</ul>
-		</nav>
-	</div>
-	*}
+	
 	<script data-relocate="true">
 		var header = elById('pageHeader');
 		header.style.setProperty('min-height', header.clientHeight + 'px');
diff --git a/com.woltlab.wcf/templates/pageHeaderLogo.tpl b/com.woltlab.wcf/templates/pageHeaderLogo.tpl
new file mode 100644
index 0000000000..da06290ab1
--- /dev/null
+++ b/com.woltlab.wcf/templates/pageHeaderLogo.tpl
@@ -0,0 +1,13 @@
+<div id="logo" class="logo">
+	{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.logo')}{/if}
+	
+	<a href="{link}{/link}">
+		{* @TODO *}
+		<img src="http://192.168.0.102/w/275/wcf/images/wbb.png" alt="" class="large">
+		<img src="http://192.168.0.102/w/275/wcf/images/wbb-small.png" alt="" class="small">
+		{if $__wcf->getStyleHandler()->getStyle()->getPageLogo()}
+			<img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}" alt="">
+		{/if}
+		{event name='headerLogo'}
+	</a>
+</div>
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/pageHeaderMenu.tpl b/com.woltlab.wcf/templates/pageHeaderMenu.tpl
new file mode 100644
index 0000000000..15b97c03c9
--- /dev/null
+++ b/com.woltlab.wcf/templates/pageHeaderMenu.tpl
@@ -0,0 +1,16 @@
+{if $__wcf->getPageMenu()->getMenuItems('header')|count > 0}
+	<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
+		<ul>
+			{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
+				<li class="{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}active {/if}{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0}subMenuItems{/if}" data-menu-item="{$menuItem->menuItem}">
+					<a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a>
+					{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0}
+						<ul class="subMenu">
+							{include file='mainMenuSubMenu'}
+						</ul>
+					{/if}
+				</li>
+			{/foreach}
+		</ul>
+	</nav>
+{/if}
diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
new file mode 100644
index 0000000000..2fc10fb1ce
--- /dev/null
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -0,0 +1,37 @@
+{capture assign='__searchFormLink'}{link controller='Search'}{/link}{/capture}
+{capture assign='__searchInputPlaceholder'}{lang}wcf.global.search.enterSearchTerm{/lang}{/capture}
+{capture assign='__searchDropdownOptions'}<label><input type="checkbox" name="subjectOnly" value="1" /> {lang}wcf.search.subjectOnly{/lang}</label>{/capture}
+{assign var='__searchHiddenInputFields' value=''}
+
+{event name='settings'}
+
+<div id="search" class="searchBar" data-disable-auto-focus="true">
+	<form method="post" action="{@$__searchFormLink}" class="dropdown">
+		<input type="search" name="q" id="pageHeaderSearch" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
+		
+		<ul class="dropdownMenu">
+			{hascontent}
+				<li class="dropdownText">
+					{content}
+						{@$__searchDropdownOptions}
+					{/content}
+				</li>
+				<li class="dropdownDivider"></li>
+			{/hascontent}
+			<li><a href="{@$__searchFormLink}">{lang}wcf.search.extended{/lang}</a></li>
+		</ul>
+		
+		{@$__searchHiddenInputFields}
+		{@SECURITY_TOKEN_INPUT_TAG}
+	</form>
+</div>
+
+{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+	<script data-relocate="true">
+		//<![CDATA[
+		$(function() {
+			new WCF.Search.Message.SearchArea($('#search'));
+		});
+		//]]>
+	</script>
+{/if}
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
new file mode 100644
index 0000000000..0c4a0f4393
--- /dev/null
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -0,0 +1,268 @@
+<nav id="topMenu" class="userPanel">
+	<ul class="userPanelItems">
+		{if $__wcf->user->userID}
+			<!-- user menu -->
+			<li id="userMenu">
+				<a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span></a>
+				<div class="interactiveDropdown interactiveDropdownStatic interactiveDropdownUserMenu">
+					<div class="interactiveDropdownHeader">
+						<span class="interactiveDropdownTitle">{lang}wcf.user.controlPanel{/lang}</span>
+						
+						{hascontent}
+							<ul class="interactiveDropdownLinks">
+								{content}
+									{event name='userMenuLinks'}
+								{/content}
+							</ul>
+						{/hascontent}
+					</div>
+					<div class="interactiveDropdownItemsContainer">
+						<ul class="interactiveDropdownItems interactiveDropdownItemsUserMenu">
+							<li>
+								<div class="box64">
+									<a href="{link controller='User' object=$__wcf->user}{/link}" class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(64)}</a>
+									
+									<div class="containerHeadline">
+										<h3><a href="{link controller='User' object=$__wcf->user}{/link}">{$__wcf->user->username}</a></h3>
+										{if MODULE_USER_RANK}
+											<p>
+												{if $__wcf->getUserProfileHandler()->getUserTitle()}
+													<span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
+												{/if}
+												{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
+													<span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
+												{/if}
+											</p>
+										{/if}
+										
+										<ul class="interactiveDropdownUserMenuLinkList">
+											<li><a href="{link controller='User' object=$__wcf->user}{/link}">{lang}wcf.user.myProfile{/lang}</a></li>
+											{if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
+											{if $__wcf->session->getPermission('admin.general.canUseAcp')}<li><a href="{link isACP=true}{/link}">{lang}wcf.global.acp.short{/lang}</a></li>{/if}
+										</ul>
+									</div>
+								</div>
+							</li>
+							
+							{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>
+										
+										<div class="containerHeadline">
+											<h3>{lang}{$menuCategory->menuItem}{/lang}</h3>
+											
+											<ul class="interactiveDropdownUserMenuLinkList">
+												{foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
+													<li><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
+												{/foreach}
+											</ul>
+										</div>
+									</div>
+								</li>
+							{/foreach}
+							
+							{event name='userMenuItemsAfter'}
+						</ul>
+					</div>
+					<a class="interactiveDropdownShowAll" href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="WCF.Dropdown.Interactive.Handler.close('userMenu'); WCF.System.Confirmation.show('{lang}wcf.user.logout.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;">{lang}wcf.user.logout{/lang}</a>
+				</div>
+				<script data-relocate="true">
+					$(function() {
+						new WCF.User.Panel.UserMenu();
+					});
+				</script>
+			</li>
+			
+			<li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
+			
+			<!-- user notifications -->
+			{if !$__hideUserMenu|isset}
+				<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
+					<a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeInverse">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
+					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+						<script data-relocate="true">
+							//<![CDATA[
+							$(function() {
+								new WCF.User.Panel.Notification({
+									markAllAsReadConfirmMessage: '{lang}wcf.user.notification.markAllAsConfirmed.confirmMessage{/lang}',
+									noItems: '{lang}wcf.user.notification.noMoreNotifications{/lang}',
+									settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
+									showAllLink: '{link controller='NotificationList' encode=false}{/link}',
+									title: '{lang}wcf.user.notification.notifications{/lang}'
+								});
+							});
+							//]]>
+						</script>
+					{/if}
+				</li>
+			{/if}
+		{else}
+			{if !$__disableLoginLink|isset}
+				<!-- login box -->
+				<li id="userLogin">
+					<a class="loginLink" href="{link controller='Login'}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
+					<div id="loginForm" style="display: none;">
+						{capture assign='__3rdPartyButtons'}
+							{if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
+								<li id="githubAuth" class="3rdPartyAuth">
+									<a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 fagithub"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
+								</li>
+							{/if}
+							
+							{if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
+								<li id="twitterAuth" class="3rdPartyAuth">
+									<a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 fa-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
+								</li>
+							{/if}
+							
+							{if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
+								<li id="facebookAuth" class="3rdPartyAuth">
+									<a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 fa-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
+								</li>
+							{/if}
+							
+							{if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
+								<li id="googleAuth" class="3rdPartyAuth">
+									<a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 fa-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
+								</li>
+							{/if}
+							
+							{event name='3rdpartyButtons'}
+						{/capture}
+						
+						<form method="post" action="{link controller='Login'}{/link}">
+							<fieldset>
+								{if $__3rdPartyButtons|trim}<legend>{lang}wcf.user.login{/lang}</legend>{/if}
+								
+								<dl>
+									<dt><label for="username">{lang}wcf.user.usernameOrEmail{/lang}</label></dt>
+									<dd>
+										<input type="text" id="username" name="username" value="" required="required" class="long" />
+									</dd>
+								</dl>
+								
+								{if !REGISTER_DISABLED}
+									<dl>
+										<dt>{lang}wcf.user.login.action{/lang}</dt>
+										<dd>
+											<label><input type="radio" name="action" value="register" /> {lang}wcf.user.login.action.register{/lang}</label>
+											<label><input type="radio" name="action" value="login" checked="checked" /> {lang}wcf.user.login.action.login{/lang}</label>
+										</dd>
+									</dl>
+								{/if}
+								
+								<dl>
+									<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
+									<dd>
+										<input type="password" id="password" name="password" value="" class="long" />
+									</dd>
+								</dl>
+								
+								{if $__wcf->getUserAuthenticationFactory()->getUserAuthentication()->supportsPersistentLogins()}
+									<dl>
+										<dt></dt>
+										<dd><label><input type="checkbox" id="useCookies" name="useCookies" value="1" checked="checked" /> {lang}wcf.user.useCookies{/lang}</label></dd>
+									</dl>
+								{/if}
+								
+								{event name='loginFields'}
+								
+								<div class="formSubmit">
+									<input type="submit" id="loginSubmitButton" name="submitButton" value="{lang}wcf.user.button.login{/lang}" accesskey="s" />
+									<a class="button" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a>
+									<input type="hidden" name="url" value="{$__wcf->session->requestURI}" />
+									{@SECURITY_TOKEN_INPUT_TAG}
+								</div>
+							</fieldset>
+							
+							{if $__3rdPartyButtons|trim}
+								<fieldset>
+									<legend>{lang}wcf.user.login.3rdParty{/lang}</legend>
+									<ul class="buttonList smallButtons thirdPartyLogin">
+										{@$__3rdPartyButtons}	
+									</ul>
+								</fieldset>
+							{/if}
+						</form>
+					</div>
+					
+					<script data-relocate="true">
+						//<![CDATA[
+						$(function() {
+							WCF.Language.addObject({
+								'wcf.user.button.login': '{lang}wcf.user.button.login{/lang}',
+								'wcf.user.button.register': '{lang}wcf.user.button.register{/lang}',
+								'wcf.user.login': '{lang}wcf.user.login{/lang}'
+							});
+							new WCF.User.Login(true);
+						});
+						//]]>
+					</script>
+				</li>
+			{/if}
+			{if $__wcf->getLanguage()->getLanguages()|count > 1}
+				<li id="pageLanguageContainer">
+					<script data-relocate="true">
+						//<![CDATA[
+						$(function() {
+							var $languages = {
+								{implode from=$__wcf->getLanguage()->getLanguages() item=language}
+									'{@$language->languageID}': {
+										iconPath: '{@$language->getIconPath()}',
+										languageName: '{$language}'
+									}
+								{/implode}
+							};
+							
+							new WCF.Language.Chooser('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, $languages, function(item) {
+								var $location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
+								var $delimiter = ($location.indexOf('?') == -1) ? '?' : '&';
+								
+								window.location = $location + $delimiter + 'l=' + item.data('languageID') + window.location.hash;
+							});
+						});
+						//]]>
+					</script>
+				</li>
+			{/if}
+		{/if}
+		
+		{if !$__hideUserMenu|isset}
+			{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
+				<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}">
+					<a href="{link controller='ModerationList'}{/link}">
+						<span class="icon icon16 fa-exclamation-triangle"></span>
+						<span>{lang}wcf.moderation.moderation{/lang}</span>
+						{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
+					</a>
+					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+						<script data-relocate="true">
+							//<![CDATA[
+							$(function() {
+								new WCF.User.Panel.Moderation({
+									deletedContent: '{lang}wcf.moderation.showDeletedContent{/lang}',
+									deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
+									markAllAsReadConfirmMessage: '{lang}wcf.moderation.markAllAsRead.confirmMessage{/lang}',
+									noItems: '{lang}wcf.moderation.noMoreItems{/lang}',
+									showAllLink: '{link controller='ModerationList' encode=false}{/link}',
+									title: '{lang}wcf.moderation.moderation{/lang}'
+								});
+							});
+							//]]>
+						</script>
+					{/if}
+				</li>
+			{/if}
+			
+			{event name='menuItems'}
+		{/if}
+		
+		{if $__wcf->user->userID}
+			<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
+		{/if}
+	</ul>
+</nav>
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/userPanel.tpl b/com.woltlab.wcf/templates/userPanel.tpl
deleted file mode 100644
index 0c4a0f4393..0000000000
--- a/com.woltlab.wcf/templates/userPanel.tpl
+++ /dev/null
@@ -1,268 +0,0 @@
-<nav id="topMenu" class="userPanel">
-	<ul class="userPanelItems">
-		{if $__wcf->user->userID}
-			<!-- user menu -->
-			<li id="userMenu">
-				<a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span></a>
-				<div class="interactiveDropdown interactiveDropdownStatic interactiveDropdownUserMenu">
-					<div class="interactiveDropdownHeader">
-						<span class="interactiveDropdownTitle">{lang}wcf.user.controlPanel{/lang}</span>
-						
-						{hascontent}
-							<ul class="interactiveDropdownLinks">
-								{content}
-									{event name='userMenuLinks'}
-								{/content}
-							</ul>
-						{/hascontent}
-					</div>
-					<div class="interactiveDropdownItemsContainer">
-						<ul class="interactiveDropdownItems interactiveDropdownItemsUserMenu">
-							<li>
-								<div class="box64">
-									<a href="{link controller='User' object=$__wcf->user}{/link}" class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(64)}</a>
-									
-									<div class="containerHeadline">
-										<h3><a href="{link controller='User' object=$__wcf->user}{/link}">{$__wcf->user->username}</a></h3>
-										{if MODULE_USER_RANK}
-											<p>
-												{if $__wcf->getUserProfileHandler()->getUserTitle()}
-													<span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
-												{/if}
-												{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
-													<span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
-												{/if}
-											</p>
-										{/if}
-										
-										<ul class="interactiveDropdownUserMenuLinkList">
-											<li><a href="{link controller='User' object=$__wcf->user}{/link}">{lang}wcf.user.myProfile{/lang}</a></li>
-											{if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
-											{if $__wcf->session->getPermission('admin.general.canUseAcp')}<li><a href="{link isACP=true}{/link}">{lang}wcf.global.acp.short{/lang}</a></li>{/if}
-										</ul>
-									</div>
-								</div>
-							</li>
-							
-							{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>
-										
-										<div class="containerHeadline">
-											<h3>{lang}{$menuCategory->menuItem}{/lang}</h3>
-											
-											<ul class="interactiveDropdownUserMenuLinkList">
-												{foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
-													<li><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
-												{/foreach}
-											</ul>
-										</div>
-									</div>
-								</li>
-							{/foreach}
-							
-							{event name='userMenuItemsAfter'}
-						</ul>
-					</div>
-					<a class="interactiveDropdownShowAll" href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="WCF.Dropdown.Interactive.Handler.close('userMenu'); WCF.System.Confirmation.show('{lang}wcf.user.logout.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;">{lang}wcf.user.logout{/lang}</a>
-				</div>
-				<script data-relocate="true">
-					$(function() {
-						new WCF.User.Panel.UserMenu();
-					});
-				</script>
-			</li>
-			
-			<li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
-			
-			<!-- user notifications -->
-			{if !$__hideUserMenu|isset}
-				<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
-					<a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeInverse">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
-					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
-						<script data-relocate="true">
-							//<![CDATA[
-							$(function() {
-								new WCF.User.Panel.Notification({
-									markAllAsReadConfirmMessage: '{lang}wcf.user.notification.markAllAsConfirmed.confirmMessage{/lang}',
-									noItems: '{lang}wcf.user.notification.noMoreNotifications{/lang}',
-									settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
-									showAllLink: '{link controller='NotificationList' encode=false}{/link}',
-									title: '{lang}wcf.user.notification.notifications{/lang}'
-								});
-							});
-							//]]>
-						</script>
-					{/if}
-				</li>
-			{/if}
-		{else}
-			{if !$__disableLoginLink|isset}
-				<!-- login box -->
-				<li id="userLogin">
-					<a class="loginLink" href="{link controller='Login'}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
-					<div id="loginForm" style="display: none;">
-						{capture assign='__3rdPartyButtons'}
-							{if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
-								<li id="githubAuth" class="3rdPartyAuth">
-									<a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 fagithub"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
-								</li>
-							{/if}
-							
-							{if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
-								<li id="twitterAuth" class="3rdPartyAuth">
-									<a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 fa-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
-								</li>
-							{/if}
-							
-							{if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
-								<li id="facebookAuth" class="3rdPartyAuth">
-									<a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 fa-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
-								</li>
-							{/if}
-							
-							{if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
-								<li id="googleAuth" class="3rdPartyAuth">
-									<a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 fa-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
-								</li>
-							{/if}
-							
-							{event name='3rdpartyButtons'}
-						{/capture}
-						
-						<form method="post" action="{link controller='Login'}{/link}">
-							<fieldset>
-								{if $__3rdPartyButtons|trim}<legend>{lang}wcf.user.login{/lang}</legend>{/if}
-								
-								<dl>
-									<dt><label for="username">{lang}wcf.user.usernameOrEmail{/lang}</label></dt>
-									<dd>
-										<input type="text" id="username" name="username" value="" required="required" class="long" />
-									</dd>
-								</dl>
-								
-								{if !REGISTER_DISABLED}
-									<dl>
-										<dt>{lang}wcf.user.login.action{/lang}</dt>
-										<dd>
-											<label><input type="radio" name="action" value="register" /> {lang}wcf.user.login.action.register{/lang}</label>
-											<label><input type="radio" name="action" value="login" checked="checked" /> {lang}wcf.user.login.action.login{/lang}</label>
-										</dd>
-									</dl>
-								{/if}
-								
-								<dl>
-									<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
-									<dd>
-										<input type="password" id="password" name="password" value="" class="long" />
-									</dd>
-								</dl>
-								
-								{if $__wcf->getUserAuthenticationFactory()->getUserAuthentication()->supportsPersistentLogins()}
-									<dl>
-										<dt></dt>
-										<dd><label><input type="checkbox" id="useCookies" name="useCookies" value="1" checked="checked" /> {lang}wcf.user.useCookies{/lang}</label></dd>
-									</dl>
-								{/if}
-								
-								{event name='loginFields'}
-								
-								<div class="formSubmit">
-									<input type="submit" id="loginSubmitButton" name="submitButton" value="{lang}wcf.user.button.login{/lang}" accesskey="s" />
-									<a class="button" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a>
-									<input type="hidden" name="url" value="{$__wcf->session->requestURI}" />
-									{@SECURITY_TOKEN_INPUT_TAG}
-								</div>
-							</fieldset>
-							
-							{if $__3rdPartyButtons|trim}
-								<fieldset>
-									<legend>{lang}wcf.user.login.3rdParty{/lang}</legend>
-									<ul class="buttonList smallButtons thirdPartyLogin">
-										{@$__3rdPartyButtons}	
-									</ul>
-								</fieldset>
-							{/if}
-						</form>
-					</div>
-					
-					<script data-relocate="true">
-						//<![CDATA[
-						$(function() {
-							WCF.Language.addObject({
-								'wcf.user.button.login': '{lang}wcf.user.button.login{/lang}',
-								'wcf.user.button.register': '{lang}wcf.user.button.register{/lang}',
-								'wcf.user.login': '{lang}wcf.user.login{/lang}'
-							});
-							new WCF.User.Login(true);
-						});
-						//]]>
-					</script>
-				</li>
-			{/if}
-			{if $__wcf->getLanguage()->getLanguages()|count > 1}
-				<li id="pageLanguageContainer">
-					<script data-relocate="true">
-						//<![CDATA[
-						$(function() {
-							var $languages = {
-								{implode from=$__wcf->getLanguage()->getLanguages() item=language}
-									'{@$language->languageID}': {
-										iconPath: '{@$language->getIconPath()}',
-										languageName: '{$language}'
-									}
-								{/implode}
-							};
-							
-							new WCF.Language.Chooser('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, $languages, function(item) {
-								var $location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
-								var $delimiter = ($location.indexOf('?') == -1) ? '?' : '&';
-								
-								window.location = $location + $delimiter + 'l=' + item.data('languageID') + window.location.hash;
-							});
-						});
-						//]]>
-					</script>
-				</li>
-			{/if}
-		{/if}
-		
-		{if !$__hideUserMenu|isset}
-			{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
-				<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}">
-					<a href="{link controller='ModerationList'}{/link}">
-						<span class="icon icon16 fa-exclamation-triangle"></span>
-						<span>{lang}wcf.moderation.moderation{/lang}</span>
-						{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
-					</a>
-					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
-						<script data-relocate="true">
-							//<![CDATA[
-							$(function() {
-								new WCF.User.Panel.Moderation({
-									deletedContent: '{lang}wcf.moderation.showDeletedContent{/lang}',
-									deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
-									markAllAsReadConfirmMessage: '{lang}wcf.moderation.markAllAsRead.confirmMessage{/lang}',
-									noItems: '{lang}wcf.moderation.noMoreItems{/lang}',
-									showAllLink: '{link controller='ModerationList' encode=false}{/link}',
-									title: '{lang}wcf.moderation.moderation{/lang}'
-								});
-							});
-							//]]>
-						</script>
-					{/if}
-				</li>
-			{/if}
-			
-			{event name='menuItems'}
-		{/if}
-		
-		{if $__wcf->user->userID}
-			<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
-		{/if}
-	</ul>
-</nav>
\ No newline at end of file
diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 35b3b42717..c985412b0a 100644
--- a/wcfsetup/install/files/acp/style/acpStyleEditor.css
+++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css
@@ -33,10 +33,12 @@
 #spContent { padding: 20px 0; }
 .spHeadline { border-bottom: 1px solid #000; font-size: 1.2rem; font-weight: 300; margin: 20px 0; padding-bottom: 5px; }
 .spHeadline:first-child { margin-top: 10px; }
+#spContentBorder { border-bottom: 1px solid #000; margin: 10px 0; }
+#spContentBorderInner { border-bottom: 1px solid #000; margin: 10px 0; }
 
 /* ### tabular box ### */
 #spTable { border-bottom: 1px solid #000; border-spacing: 0; width: 100%; }
-#spTable th { border-bottom: 2px solid currentColor; font-size: 16px; font-weight: 300; text-align: left; }
+#spTable th { border-bottom: 2px solid currentColor; font-size: 1.2rem; font-weight: 300; text-align: left; }
 #spTable th, #spTable td { padding: 10px; }
 #spTable tr:not(:last-child) > td { border-bottom: 1px solid #000; }
 
@@ -62,6 +64,12 @@
 #spContentSidebar .spContentSidebarBox:not(:last-child) { margin-bottom: 20px; }
 #spContentSidebar .spContentSidebarHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
 
+/* ### status messages ### */
+#spStatus { display: flex; flex-wrap: wrap; justify-content: space-between; }
+#spStatus > li { flex: 0 0 auto; width: calc(50% - 10px); /* work-around for IE which does not support calc() for flex-basis */ }
+#spStatus > li:first-child { margin-bottom: 10px; }
+#spStatus > li > div { border-left: 5px solid #000; padding: 5px 10px; }
+
 /* ### wrapper sidebar ### */
 .spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
 .spSidebarBox.pointer { position: relative; }
diff --git a/wcfsetup/install/files/acp/templates/pageSearchArea.tpl b/wcfsetup/install/files/acp/templates/pageSearchArea.tpl
index d379bb31e0..06f7a6dcc5 100644
--- a/wcfsetup/install/files/acp/templates/pageSearchArea.tpl
+++ b/wcfsetup/install/files/acp/templates/pageSearchArea.tpl
@@ -13,7 +13,7 @@
 			{hascontent}
 				<li class="dropdownText">
 					{content}
-					{@$__searchDropdownOptions}
+						{@$__searchDropdownOptions}
 					{/content}
 				</li>
 				<li class="dropdownDivider"></li>
diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index 9efa8d63d0..e66878db7c 100644
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -502,9 +502,17 @@
 								<div class="spHeadline" data-region="wcfContentHeadline">Lorem Ipsum</div>
 								
 								<p data-region="wcfContent">
-									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a>At vero eos</a> et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
-									<br>
+									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a>At vero eos</a> et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+								
+									<div id="spContentBorderInner"></div>
+									
 									Stet clita kasd gubergren, no sea <a>takimata</a> sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <a>invidunt</a> ut labore et dolore magna aliquyam erat, sed diam voluptua.
+									
+									<div id="spContentBorder"></div>
+									
+									<div id="spContentDimmed" data-region="wcfContentDimmed">
+										Stet clita kasd gubergren, <a>no sea takimata</a> sanctus est Lorem ipsum dolor sit amet.
+									</div>
 								</p>
 								
 								<div class="spHeadline">Tabular Box</div>
@@ -567,6 +575,23 @@
 										<li><a>Sed diam nonumy</a></li>
 									</ul>
 								</div>
+								
+								<div class="spHeadline">Status</div>
+								
+								<ol id="spStatus">
+									<li>
+										<div id="spStatusInfo" data-region="wcfStatusInfo">Lorem ipsum dolor <a>sit amet</a>.</div>
+									</li>
+									<li>
+										<div id="spStatusSuccess" data-region="wcfStatusSuccess"><a>Sed diam nonumy</a> eirmod tempor.</div>
+									</li>
+									<li>
+										<div id="spStatusWarning" data-region="wcfStatusWarning">At vero eos <a>et accusam et justo duo</a>.</div>
+									</li>
+									<li>
+										<div id="spStatusError" data-region="wcfStatusError">Stet clita <a>kasd gubergren</a>, no sea.</div>
+									</li>
+								</ol>
 							</div>
 							
 							<div id="spContentSidebar">
@@ -584,6 +609,10 @@
 									<p>
 										<a>Stet clita kasd gubergren</a>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a>labore et dolore magna</a> aliquyam erat, sed diam voluptua.
 									</p>
+									
+									<div id="spContentSidebarBoxDimmed" style="margin-top: 10px;" data-region="wcfSidebarDimmed">
+										Stet clita kasd gubergren, <a>no sea takimata</a> sanctus est Lorem ipsum dolor sit amet.
+									</div>
 								</div>
 							</div>
 						</div>
@@ -683,9 +712,14 @@
 				'wcfNavigationLink': '#spNavigation a { color: VALUE; }',
 				'wcfNavigationLinkActive': '#spNavigation a:hover { color: VALUE; }',
 				'wcfContentBackground': '#spContent { background-color: VALUE; }',
+				'wcfContentBorder': '#spContentBorder { border-color: VALUE; }',
+				'wcfContentBorderInner': '#spContentBorderInner { border-color: VALUE; }',
 				'wcfContentText': '#spContent { color: VALUE; }',
 				'wcfContentLink': '#spContent a { color: VALUE; }',
 				'wcfContentLinkActive': '#spContent a:hover { color: VALUE; }',
+				'wcfContentDimmedText': '#spContentDimmed { color: VALUE; }',
+				'wcfContentDimmedLink': '#spContentDimmed a { color: VALUE; }',
+				'wcfContentDimmedLinkActive': '#spContentDimmed a:hover { color: VALUE; }',
 				'wcfContentHeadlineBorder': '.spHeadline { border-color: VALUE; }',
 				'wcfContentHeadlineText': '.spHeadline { color: VALUE; }',
 				'wcfContentHeadlineLink': '.spHeadline a { color: VALUE; }',
@@ -740,9 +774,32 @@
 				'wcfSidebarText': '#spContentSidebar .spContentSidebarBox { color: VALUE; }',
 				'wcfSidebarLink': '#spContentSidebar .spContentSidebarBox a { color: VALUE; }',
 				'wcfSidebarLinkActive': '#spContentSidebar .spContentSidebarBox a:hover { color: VALUE; }',
+				'wcfSidebarDimmedText': '#spContentSidebar .spContentSidebarBox #spContentSidebarBoxDimmed { color: VALUE; }',
+				'wcfSidebarDimmedLink': '#spContentSidebar .spContentSidebarBox #spContentSidebarBoxDimmed a { color: VALUE; }',
+				'wcfSidebarDimmedLinkActive': '#spContentSidebar .spContentSidebarBox #spContentSidebarBoxDimmed a:hover { color: VALUE; }',
 				'wcfSidebarHeadlineText': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline { color: VALUE; }',
 				'wcfSidebarHeadlineLink': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline a { color: VALUE; }',
 				'wcfSidebarHeadlineLinkActive': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline a:hover { color: VALUE; }',
+				'wcfStatusInfoBackground': '#spStatusInfo { background-color: VALUE; }',
+				'wcfStatusInfoBorder': '#spStatusInfo { border-color: VALUE; }',
+				'wcfStatusInfoText': '#spStatusInfo { color: VALUE; }',
+				'wcfStatusInfoLink': '#spStatusInfo a { color: VALUE; }',
+				'wcfStatusInfoLinkActive': '#spStatusInfo a:hover { color: VALUE; }',
+				'wcfStatusSuccessBackground': '#spStatusSuccess { background-color: VALUE; }',
+				'wcfStatusSuccessBorder': '#spStatusSuccess { border-color: VALUE; }',
+				'wcfStatusSuccessText': '#spStatusSuccess { color: VALUE; }',
+				'wcfStatusSuccessLink': '#spStatusSuccess a { color: VALUE; }',
+				'wcfStatusSuccessLinkActive': '#spStatusSuccess a:hover { color: VALUE; }',
+				'wcfStatusWarningBackground': '#spStatusWarning { background-color: VALUE; }',
+				'wcfStatusWarningBorder': '#spStatusWarning { border-color: VALUE; }',
+				'wcfStatusWarningText': '#spStatusWarning { color: VALUE; }',
+				'wcfStatusWarningLink': '#spStatusWarning a { color: VALUE; }',
+				'wcfStatusWarningLinkActive': '#spStatusWarning a:hover { color: VALUE; }',
+				'wcfStatusErrorBackground': '#spStatusError { background-color: VALUE; }',
+				'wcfStatusErrorBorder': '#spStatusError { border-color: VALUE; }',
+				'wcfStatusErrorText': '#spStatusError { color: VALUE; }',
+				'wcfStatusErrorLink': '#spStatusError a { color: VALUE; }',
+				'wcfStatusErrorLinkActive': '#spStatusError a:hover { color: VALUE; }'
 			};
 		</script>
 		
diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
index 8960e08d71..efefde96e8 100644
--- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
@@ -431,12 +431,13 @@ class StyleAddForm extends AbstractForm {
 		$this->colorCategories = [
 			'wcfHeader' => ['wcfHeader', 'wcfHeaderSearchBox', 'wcfHeaderMenu'],
 			'wcfNavigation' => 'wcfNavigation',
-			'wcfSidebar' => ['wcfSidebar', 'wcfSidebarHeadline'],
-			'wcfContent' => ['wcfContent', 'wcfContentHeadline'],
+			'wcfSidebar' => ['wcfSidebar', 'wcfSidebarDimmed', 'wcfSidebarHeadline'],
+			'wcfContent' => ['wcfContent', 'wcfContentDimmed', 'wcfContentHeadline'],
 			'wcfTabularBox' => 'wcfTabularBox',
 			'wcfInput' => ['wcfInput', 'wcfInputDisabled'],
 			'wcfButton' => ['wcfButton', 'wcfButtonPrimary', 'wcfButtonDisabled'],
 			'wcfDropdown' => 'wcfDropdown',
+			'wcfStatus' => ['wcfStatusInfo', 'wcfStatusSuccess', 'wcfStatusWarning', 'wcfStatusError'],
 			'wcfFooterBox' => ['wcfFooterBox', 'wcfFooterBoxHeadline'],
 			'wcfFooter' => 'wcfFooter'
 		];
@@ -447,8 +448,10 @@ class StyleAddForm extends AbstractForm {
 			'wcfHeaderMenu' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
 			'wcfNavigation' => ['background', 'text', 'link', 'linkActive'],
 			'wcfSidebar' => ['background', 'text', 'link', 'linkActive'],
+			'wcfSidebarDimmed' => ['text', 'link', 'linkActive'],
 			'wcfSidebarHeadline' => ['text', 'link', 'linkActive'],
-			'wcfContent' => ['background', 'text', 'link', 'linkActive'],
+			'wcfContent' => ['background', 'border', 'borderInner', 'text', 'link', 'linkActive'],
+			'wcfContentDimmed' => ['text', 'link', 'linkActive'],
 			'wcfContentHeadline' => ['border', 'text', 'link', 'linkActive'],
 			'wcfTabularBox' => ['borderInner', 'headline', 'backgroundActive', 'headlineActive'],
 			'wcfInput' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
@@ -457,6 +460,10 @@ class StyleAddForm extends AbstractForm {
 			'wcfButtonPrimary' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
 			'wcfButtonDisabled' => ['background', 'border', 'text'],
 			'wcfDropdown' => ['background', 'border', 'borderInner', 'text', 'link', 'backgroundActive', 'linkActive'],
+			'wcfStatusInfo' => ['background', 'border', 'text', 'link', 'linkActive'],
+			'wcfStatusSuccess' => ['background', 'border', 'text', 'link', 'linkActive'],
+			'wcfStatusWarning' => ['background', 'border', 'text', 'link', 'linkActive'],
+			'wcfStatusError' => ['background', 'border', 'text', 'link', 'linkActive'],
 			'wcfFooterBox' => ['background', 'text', 'link', 'linkActive'],
 			'wcfFooterBoxHeadline' => ['text', 'link', 'linkActive'],
 			'wcfFooter' => ['background', 'text', 'link', 'linkActive']
diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
index 9301f27222..8c9289e857 100644
--- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
@@ -279,6 +279,11 @@ class StyleCompiler extends SingletonFactory {
 		}
 		unset($value);
 		
+		$variables['wcfFontFamily'] = $variables['wcfFontFamilyFallback'];
+		if (!empty($variables['wcfFontFamilyGoogle'])) {
+			$variables['wcfFontFamily'] = '"' . $variables['wcfFontFamilyGoogle'] . '", ' . $variables['wcfFontFamily'];
+		}
+		
 		// add options as SCSS variables
 		if (PACKAGE_ID) {
 			foreach (Option::getOptions() as $constantName => $option) {
diff --git a/wcfsetup/install/files/style/bootstrap/mixin.scss b/wcfsetup/install/files/style/bootstrap/mixin.scss
index d2c0b67f3d..89419bdd53 100644
--- a/wcfsetup/install/files/style/bootstrap/mixin.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin.scss
@@ -29,10 +29,10 @@
 // sets default text shadows depending on background color
 @mixin textShadow($backgroundColor) {
 	@if (lightness($backgroundColor) >= 40) {
-		text-shadow: 0 1px 0 $wcfTextShadowDarkColor;
+		text-shadow: 0 1px 0 $wcfTextShadowDark;
 	}
 	@else {
-		text-shadow: 0 -1px 0 $wcfTextShadowLightColor;
+		text-shadow: 0 -1px 0 $wcfTextShadowLight;
 	}
 }
 
diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index 6e3482df9e..dbc8ae62d1 100644
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -2,7 +2,7 @@
 	padding: 20px 0;
 	
 	&:not(:last-child) {
-		border-bottom: 1px solid $wcfContentBorder;
+		// TODO: border-bottom: 1px solid $wcfContentBorder;
 	}
 	
 	&.showMore {
diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index 689878392a..5a92a2236f 100644
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -31,7 +31,7 @@
 			}
 			
 			> legend {
-				border-bottom: 1px solid $wcfContentBorder;
+				// TODO: border-bottom: 1px solid $wcfContentBorder;
 				padding-bottom: 5px;
 			}
 		}
@@ -42,7 +42,7 @@
 			}
 			
 			> h1 {
-				border-bottom: 1px solid $wcfContentBorder;
+				// TODO: border-bottom: 1px solid $wcfContentBorder;
 				padding-bottom: 5px;
 			}
 		}
diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index fe4062a3ea..0101f3cd6b 100644
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -24,9 +24,9 @@ textarea {
 	}
 	
 	&[disabled] {
-		background-color: $wcfInputBackgroundInactive !important;
-		border-color: $wcfInputBorderInactive !important;
-		color: $wcfInputTextInactive !important;
+		background-color: $wcfInputDisabledBackground !important;
+		border-color: $wcfInputDisabledBorder !important;
+		color: $wcfInputDisabledText !important;
 	}
 }
 
@@ -170,7 +170,7 @@ dl {
 		flex-wrap: wrap;
 		
 		> dt {
-			color: $wcfDimmedColor;
+			color: $wcfContentDimmedText;
 			flex: 0 0 60%;
 			margin-left: 5px;
 			overflow: hidden;
@@ -181,7 +181,9 @@ dl {
 		}
 		
 		> dd {
-			flex: 0 0 35%;
+			flex: 0 0 auto;
+			width: calc(40% - 5px); /* IE work-around */
+			
 			overflow: hidden;
 			text-align: right;
 			text-overflow: ellipsis;
@@ -191,7 +193,7 @@ dl {
 	
 	&:not(.plain) > dd {
 		> small:not(.innerError) {
-			color: $wcfDimmedColor;
+			color: $wcfContentDimmedText;
 			display: block;
 			margin-top: 5px;
 		}
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index 57c2a052fa..3cb6d0fbbe 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -78,7 +78,7 @@ a {
 
 /* CONTENT AREA */
 .boxHeadline {
-	border-bottom: 1px solid $wcfContentBorder;
+	// TODO: border-bottom: 1px solid $wcfContentBorder;
 	color: $wcfContentHeadlineText;
 	margin-bottom: 30px;
 	padding-bottom: 10px;
diff --git a/wcfsetup/install/files/style/layout/navigation.scss b/wcfsetup/install/files/style/layout/navigation.scss
index 2049373f46..8d584a95df 100644
--- a/wcfsetup/install/files/style/layout/navigation.scss
+++ b/wcfsetup/install/files/style/layout/navigation.scss
@@ -1,6 +1,6 @@
 .navigation {
-	background-color: $wcfHeaderNavigationBackground;
-	color: $wcfHeaderNavigationText;
+	background-color: $wcfNavigationBackground;
+	color: $wcfNavigationText;
 	flex: 0 auto;
 	padding: 5px 0;
 	z-index: 25;
@@ -13,14 +13,14 @@
 	}
 	
 	.icon {
-		color: $wcfHeaderNavigationText;
+		color: $wcfNavigationText;
 	}
 	
 	a {
-		color: $wcfHeaderNavigationLink;
+		color: $wcfNavigationLink;
 		
 		&:hover {
-			color: $wcfHeaderNavigationLinkActive;
+			color: $wcfNavigationLinkActive;
 		}
 	}
 }
diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index a1b02437ed..cc2e2c3ce7 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -53,18 +53,6 @@
 				margin-right: $wcfGapMedium;
 			}
 			
-			&::before {
-				border-top: 1px solid $wcfMenuBorder;
-				content: "";
-				display: block;
-				transition: width .12s ease-out;
-				width: 0;
-			}
-			
-			&:hover::before {
-				width: 100%;
-			}
-			
 			> a {
 				transition: color .2s linear;
 				text-decoration: none;
@@ -133,8 +121,8 @@
 		
 		&.active > a,
 		> a:hover {
-			background-color: $wcfMenuContentBackgroundActive;
-			color: $wcfMenuContentLinkActive;
+			background-color: $wcfHeaderMenuBackgroundActive;
+			color: $wcfHeaderMenuLinkActive;
 			text-decoration: none;
 		}
 		
@@ -218,7 +206,7 @@
 	
 	&:focus,
 	&:hover {
-		background-color: $wcfHeaderSearchBoxBackgroundAccent;
+		background-color: $wcfHeaderSearchBoxBackgroundActive;
 		color: $wcfHeaderSearchBoxTextActive;
 	}
 }
diff --git a/wcfsetup/install/files/style/layout/sidebar.scss b/wcfsetup/install/files/style/layout/sidebar.scss
index 441644128e..2a8a5a1a21 100644
--- a/wcfsetup/install/files/style/layout/sidebar.scss
+++ b/wcfsetup/install/files/style/layout/sidebar.scss
@@ -1,24 +1,20 @@
 .sidebar {
 	background-color: $wcfSidebarBackground;
-	color: $wcfSidebarBoxText;
+	color: $wcfSidebarText;
 	
 	> div,
 	> fieldset,
 	> section {
-		background-color: $wcfSidebarBoxBackground;
+		background-color: $wcfSidebarBackground;
 		border-radius: 3px;
 		padding: 20px;
 		
-		&:after {
+		&::after {
 			clear: both;
 			content: "";
 			display: block;
 			height: 0;
 		}
-		
-		& + * {
-			margin-top: 30px;
-		}
 	}
 	
 	> div {
@@ -39,40 +35,40 @@
 	
 	section > h1,
 	fieldset > legend {
-		@extend .wcfFontLarge;
-		
-		color: $wcfSidebarBoxHeadlineText;
+		color: $wcfSidebarHeadlineText;
 		margin-bottom: 10px;
 		
+		@extend .wcfFontHeadline;
+		
 		> a {
-			color: $wcfSidebarBoxHeadlineLink;
+			color: $wcfSidebarHeadlineLink;
 			
 			> .icon {
-				color: $wcfSidebarBoxHeadlineLink;
+				color: $wcfSidebarHeadlineLink;
 			}
 			
 			&:hover {
-				color: $wcfSidebarBoxHeadlineLinkActive;
+				color: $wcfSidebarHeadlineLinkActive;
 				
 				> .icon {
-					color: $wcfSidebarBoxHeadlineLinkActive;
+					color: $wcfSidebarHeadlineLinkActive;
 				}
 			}
 		}
 	}
 	
 	a {
-		color: $wcfSidebarBoxLink;
+		color: $wcfSidebarLink;
 		
 		> .icon {
-			color: $wcfSidebarBoxLink;
+			color: $wcfSidebarLink;
 		}
 		
 		&:hover {
-			color: $wcfSidebarBoxLinkActive;
+			color: $wcfSidebarLinkActive;
 			
 			> .icon {
-				color: $wcfSidebarBoxLinkActive;
+				color: $wcfSidebarLinkActive;
 			}
 		}
 	}
diff --git a/wcfsetup/install/files/style/ui/breadcrumb.scss b/wcfsetup/install/files/style/ui/breadcrumb.scss
index 673ff2a3a2..77af270a68 100644
--- a/wcfsetup/install/files/style/ui/breadcrumb.scss
+++ b/wcfsetup/install/files/style/ui/breadcrumb.scss
@@ -13,7 +13,7 @@
 				margin-right: 10px;
 				
 				&:after {
-					color: $wcfHeaderText;
+					color: $wcfNavigationText;
 					content: "/";
 				}
 				
@@ -23,13 +23,13 @@
 			}
 			
 			> a {
-				color: $wcfHeaderLink;
+				color: $wcfNavigationLink;
 				opacity: .8;
 				text-decoration: none;
 				transition: opacity .2s linear;
 				
 				&:hover {
-					color: $wcfHeaderLinkActive;
+					color: $wcfNavigationLinkActive;
 					opacity: 1;
 				}
 			}
diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss
index 94fadf771e..0a55836834 100644
--- a/wcfsetup/install/files/style/ui/button.scss
+++ b/wcfsetup/install/files/style/ui/button.scss
@@ -121,7 +121,7 @@ input[type="submit"],
 	
 	> li {
 		&:not(:last-child) {
-			border-right: 1px solid $wcfContentBorder;
+			// TODO: border-right: 1px solid $wcfContentBorder;
 			margin-right: 0;
 		}
 		
diff --git a/wcfsetup/install/files/style/ui/comment.scss b/wcfsetup/install/files/style/ui/comment.scss
index 5b3c61031d..33feac3919 100644
--- a/wcfsetup/install/files/style/ui/comment.scss
+++ b/wcfsetup/install/files/style/ui/comment.scss
@@ -27,11 +27,11 @@
 }
 
 .commentResponse {
-	border-top: 1px solid $wcfContentBorder;
+	// TODO: border-top: 1px solid $wcfContentBorder;
 	padding: 10px 0;
 }
 
 .commentOptionContainer {
-	border-top: 1px solid $wcfContentBorder;
+	// TODO: border-top: 1px solid $wcfContentBorder;
 	padding-top: 10px;
 }
diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index d01c32fdde..1af136cb9e 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -1,7 +1,11 @@
 .dialogOverlay {
+	align-items: flex-start;
 	background-color: transparent;
 	bottom: 0;
+	display: flex;
+	justify-content: center;
 	left: 0;
+	padding: 100px 0;
 	position: fixed;
 	right: 0;
 	top: 0;
@@ -42,13 +46,9 @@
 .dialogContainer {
 	border: 1px solid rgb(52, 152, 219);
 	box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
-	left: 50%;
 	max-height: 80%;
 	max-width: 80%;
 	min-width: 400px;
-	position: absolute;
-	top: 10%;
-	transform: translateX(-50%);
 	will-change: opacity, transform;
 	z-index: 200;
 	
@@ -66,7 +66,7 @@
 	
 	> header {
 		background-color: $wcfContentBackground;
-		border-bottom: 1px solid $wcfContentBorder;
+		// TODO: border-bottom: 1px solid $wcfContentBorder;
 		color: $wcfContentHeadlineText;
 		display: flex;
 		padding: 10px 20px;
@@ -137,7 +137,7 @@
 		
 		.dialogFormSubmit {
 			background-color: $wcfContentBackground;
-			border-top: 1px solid $wcfContentBorder;
+			// TODO: border-top: 1px solid $wcfContentBorder;
 			bottom: 0;
 			left: 0;
 			padding: 10px;
diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss
index 76e47fbe1e..c6da90a5e0 100644
--- a/wcfsetup/install/files/style/ui/dropdown.scss
+++ b/wcfsetup/install/files/style/ui/dropdown.scss
@@ -44,7 +44,7 @@
 			
 			&.button {
 				border-right-width: 0;
-				border-radius: $wcfInputBorderRadius 0 0 $wcfInputBorderRadius;
+				border-radius: 3px 0 0 3px;
 			}
 			
 			span {
@@ -187,13 +187,13 @@
 		&.dropdownNavigationItem,
 		&.active {
 			background-color: $wcfDropdownBackgroundActive;
-			color: $wcfDropdownTextActive;
+			color: $wcfDropdownLinkActive;
 			
-			@include textShadow($wcfDropdownTextActive);
+			@include textShadow($wcfDropdownLinkActive);
 		}
 		
 		&.dropdownDivider {
-			border-top: 1px solid $wcfDropdownBorderAccent;
+			border-top: 1px solid $wcfDropdownBorderInner;
 			margin: 3px 0;
 		}
 		
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 67bf07676c..311ea7da7c 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -1,5 +1,5 @@
 .messageList {
-	border: 1px solid $wcfContentBackgroundAccent;
+	border: 1px solid $wcfSidebarBackground;
 	border-width: 1px 0;
 	margin: 30px 0;
 	
@@ -8,7 +8,7 @@
 		padding: 40px 0;
 		
 		&:not(:first-child) {
-			border-top: 1px solid $wcfContentBackgroundAccent;
+			border-top: 1px solid $wcfSidebarBackground;
 		}
 	}
 }
@@ -20,19 +20,19 @@
 /* sidebar */
 .messageSidebar {
 	align-self: flex-start;
-	background-color: $wcfContentBackgroundAccent;
+	background-color: $wcfSidebarBackground;
 	border-radius: 3px;
-	color: $wcfContentTextAccent;
+	color: $wcfSidebarText;
 	flex: 0 0 170px;
 	padding: 20px;
 	position: relative;
 	text-align: center;
 	
 	a {
-		color: $wcfContentLinkAccent;
+		color: $wcfSidebarLink;
 		
 		&:hover {
-			color: $wcfContentLinkAccentActive;
+			color: $wcfSidebarLinkActive;
 		}
 	}
 	
@@ -45,7 +45,7 @@
 	margin-top: 25px;
 	
 	&:before {
-		border-top: 2px solid $wcfContentBorderAccent;
+		// TODO: border-top: 2px solid $wcfContentBorderAccent;
 		content: "";
 		left: 0;
 		margin-top: -10px;
@@ -220,6 +220,8 @@
 			opacity: 1;
 		}
 		
+		/*
+		TODO
 		&.messageDisabled {
 			color: $wcfDisabledColor;
 			
@@ -231,7 +233,10 @@
 				color: $wcfDisabledColor;
 			}
 		}
+		*/
 		
+		/*
+		TODO
 		&.messageDeleted {
 			color: $wcfDeletedColor;
 			
@@ -243,6 +248,7 @@
 				color: $wcfDeletedColor;
 			}
 		}
+		*/
 		
 		.columnSubject .statusDisplay .pageNavigation {
 			opacity: 0;
@@ -255,7 +261,7 @@
 		
 		&.new .columnAvatar > div {
 			&::after {
-				color: $wcfLinkColor;
+				color: $wcfContentLink;
 				content: "\f069";
 				font-family: FontAwesome;
 				font-weight: normal !important;
@@ -266,7 +272,7 @@
 				top: -4px;
 				right: -2px;
 				
-				@include textShadow($wcfContainerBackgroundColor);
+				@include textShadow($wcfContentLink);
 			}
 		}
 	}
@@ -302,7 +308,7 @@
 		word-wrap: normal;
 		
 		> div > div > small {
-			color: $wcfDimmedColor;
+			// TODO: color: $wcfDimmedColor;
 		}
 	}
 	
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 34f0e9bbd4..9edcf15774 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -47,7 +47,7 @@
 .re-gallery:before { content: "\e61f"; }
 
 .redactor-box {
-	border: 1px solid $wcfContentBorder;
+	// TODO: border: 1px solid $wcfContentBorder;
 	border-radius: 3px 3px 0 0;
 	font-size: 0;
 	line-height: $wcfBaseLineHeight;
@@ -71,7 +71,7 @@
 	
 	> .redactorAutosaveNotice {
 		background-color: $wcfContentBackground;
-		border: 1px solid $wcfContentBorder;
+		// TODO: border: 1px solid $wcfContentBorder;
 		border-width: 1px 0 0 1px;
 		bottom: 0;
 		font-size: 1rem;
@@ -225,7 +225,7 @@
 }
 
 .redactor-toolbar {
-	background: repeating-linear-gradient(0deg, $wcfContentBorder 0px, $wcfContentBorder 3%, $wcfContentBackground 3%, $wcfContentBackground 100%);
+	// TODO: background: repeating-linear-gradient(0deg, $wcfContentBorder 0px, $wcfContentBorder 3%, $wcfContentBackground 3%, $wcfContentBackground 100%);
 	background-size: 100% 31px;
 	
 	> li {
@@ -235,12 +235,12 @@
 		
 		&:last-of-type,
 		&.separator {
-			border-right: 1px solid $wcfContentBorder;
+			// TODO: border-right: 1px solid $wcfContentBorder;
 		}
 		
 		> a {
 			box-sizing: border-box;
-			color: $wcfButtonColor;
+			color: $wcfButtonText;
 			display: block;
 			font-size: 14px;
 			height: 30px;
@@ -253,7 +253,7 @@
 			&.redactor-button-disabled,
 			&.redactor-button-disabled:before,
 			&.redactor-button-disabled > i:before {
-				color: $wcfButtonTextInactive;
+				color: $wcfButtonDisabledText;
 			}
 			
 			&:before {
@@ -305,7 +305,7 @@
 	visibility: visible;
 	
 	&:before {
-		border-color: $wcfTooltipBackgroundColor transparent;
+		// TODO: border-color: $wcfTooltipBackgroundColor transparent;
 		border-style: solid;
 		border-width: 0 5px 5px;
 		content: "";
@@ -335,7 +335,7 @@
 	
 	cursor: pointer;
 	left: 50%;
-	line-height: $wcfSmallFontSize;
+	// TODO: line-height: $wcfSmallFontSize;
 	margin-top: -13px;
 	opacity: 1;
 	top: 50%;
@@ -403,10 +403,10 @@
 }
 
 .redactor-link-tooltip {
-	background-color: $wcfTooltipBackgroundColor;
+	// TODO: background-color: $wcfTooltipBackgroundColor;
 	border-radius: 6px;
-	color: $wcfTooltipColor;
-	font-size: $wcfSmallFontSize;
+	// TODO: color: $wcfTooltipColor;
+	// TODO: font-size: $wcfSmallFontSize;
 	padding: 5px 10px 7px;
 	position: absolute;
 	z-index: 800;
@@ -414,6 +414,6 @@
 	@include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 	
 	> a {
-		color: $wcfTooltipColor;
+		// TODO: color: $wcfTooltipColor;
 	}
 }
diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.scss b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
index 3312e2e9ea..f5f030d15a 100644
--- a/wcfsetup/install/files/style/ui/tabMenuMessage.scss
+++ b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
@@ -1,5 +1,5 @@
 .messageTabMenu {
-	border: 1px solid $wcfContentBorder;
+	// TODO: border: 1px solid $wcfContentBorder;
 	border-top-width: 0;
 	border-radius: 0 0 3px 3px;
 	line-height: $wcfBaseLineHeight;
@@ -9,7 +9,7 @@
 		background-color: $wcfContentBackground;
 		border-width: 0;
 		border-radius: 0;
-		border-top: 1px solid $wcfContentBorder;
+		// TODO: border-top: 1px solid $wcfContentBorder;
 		display: none;
 		padding: 15px 10px;
 		position: static;
@@ -22,7 +22,7 @@
 	> div {
 		> nav {
 			background-color: $wcfContentBackground;
-			border-bottom: 1px solid $wcfContentBorder;
+			// TODO: border-bottom: 1px solid $wcfContentBorder;
 			margin: -14px -21px 14px -21px;
 			padding: $wcfGapTiny $wcfGapSmall;
 			
@@ -38,7 +38,7 @@
 					
 					&.active a,
 					&.active a:hover {
-						color: $wcfButtonTextAccent;
+						color: $wcfButtonTextActive;
 						cursor: default;
 					}
 					
@@ -91,7 +91,7 @@
 		display: inline-block;
 		
 		> a {
-			border-right: 1px solid $wcfContentBorder;
+			// TODO: border-right: 1px solid $wcfContentBorder;
 			border-bottom: 1px solid transparent;
 			color: $wcfButtonText;
 			display: block;
@@ -101,12 +101,7 @@
 			padding: 7px 14px 8px 14px;
 			text-decoration: none;
 			
-			-webkit-touch-callout: none;
-			-webkit-user-select: none;
-			-khtml-user-select: none;
-			-moz-user-select: none;
-			-ms-user-select: none;
-			user-select: none;
+			@extend .userSelectNone;
 			
 			&:hover {
 				color: $wcfContentLink;
diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss
index 59f7087338..e23f6dd528 100644
--- a/wcfsetup/install/files/style/ui/tabularBox.scss
+++ b/wcfsetup/install/files/style/ui/tabularBox.scss
@@ -1,83 +1,79 @@
-.tabularBox {
-	> .content {
-		border-width: 0;
+.tabularBox > .content {
+	border-width: 0;
+}
+
+.tabularList {
+	display: flex;
+	flex-direction: column;
+}
+
+.tabularListRow {
+	flex: 0 0 auto;
+	padding: 5px 0;
+	
+	&.divider + li:not(.divider) {
+		border-top-color: $wcfContentBorderInner;
+	}
+}
+
+.tabularListRowHead {
+	border-bottom: 2px solid currentColor;
+	color: $wcfTabularBoxHeadline;
+	
+	& + li {
+		border-top-width: 0;
 	}
+}
+
+.tabularListRow:not(.tabularListRowHead) {
+	border-top: 1px solid $wcfContentBorderInner;
+}
+
+.tabularListColumns {
+	align-items: center;
+	display: flex;
 	
-	.tabularList {
-		background-color: $wcfContentTabularBackground;
-		display: flex;
-		flex-direction: column;
+	> li {
+		flex: 0 0 auto;
+		padding: 5px 10px;
+	}
+}
+
+.tabularListRowHead > .tabularListColumns > li {
+	> a {
+		color: $wcfTabularBoxHeadline;
+		display: block;
 		
-		> li {
-			flex: 0 0 auto;
-			padding: 5px 0;
-			
-			&.head {
-				border-bottom: 2px solid $wcfContentTabularBorder;
-				
-				> ol > li {
-					color: $wcfContentTabularLink;
-					
-					> a {
-						color: $wcfContentTabularLink;
-						display: block;
-						
-						@extend .wcfFontHeadline;
-					}
-					
-					&.ASC > a,
-					&.DESC > a {
-						padding-right: 14px;
-						position: relative;
-						
-						&:after {
-							display: inline-block;
-							font-family: FontAwesome;
-							margin-left: 7px;
-							position: absolute;
-						}
-					}
-					
-					&.ASC > a:after {
-						content: $fa-var-caret-up;
-						top: 1px;
-					}
-					
-					&.DESC > a:after {
-						content: $fa-var-caret-down;
-						top: 2px;
-					}
-					
-					&.active > a,
-					> a:hover {
-						color: $wcfContentTabularLinkActive;
-					}
-				}
-				
-				& + li {
-					border-top-width: 0;
-				}
-			}
-			
-			&:not(.head) {
-				border-top: 1px solid $wcfContentTabularBorderAccent;
-			}
-			
-			&.divider + li:not(.divider) {
-				border-top-color: $wcfContentTabularBorder;
-			}
-			
-			> ol {
-				align-items: center;
-				display: flex;
-				
-				> li {
-					flex: 0 0 auto;
-					padding: 5px 10px;
-				}
-			}
+		@extend .wcfFontHeadline;
+	}
+	
+	&.ASC > a,
+	&.DESC > a {
+		padding-right: 14px;
+		position: relative;
+		
+		&:after {
+			display: inline-block;
+			font-family: FontAwesome;
+			margin-left: 7px;
+			position: absolute;
 		}
 	}
+	
+	&.ASC > a:after {
+		content: $fa-var-caret-up;
+		top: 1px;
+	}
+	
+	&.DESC > a:after {
+		content: $fa-var-caret-down;
+		top: 2px;
+	}
+	
+	&.active > a,
+	> a:hover {
+		color: $wcfTabularBoxHeadlineActive;
+	}
 }
 
 .tabularBoxTitle {
@@ -238,7 +234,7 @@ div.tabularBoxTitle > header {
 		}
 		
 		&:not(:last-child) > td {
-			border-bottom: 1px solid $wcfTabularBoxBorderInner;
+			// TODO: border-bottom: 1px solid $wcfTabularBoxBorderInner;
 		}
 	}
 	
diff --git a/wcfsetup/install/files/style/ui/tooltip.scss b/wcfsetup/install/files/style/ui/tooltip.scss
index f284e1b5e6..ca5605a15a 100644
--- a/wcfsetup/install/files/style/ui/tooltip.scss
+++ b/wcfsetup/install/files/style/ui/tooltip.scss
@@ -1,7 +1,7 @@
 .balloonTooltip {
-	background-color: $wcfTooltipBackgroundColor;
+	// TODO: background-color: $wcfTooltipBackgroundColor;
 	border-radius: 6px;
-	color: $wcfTooltipColor;
+	// TODO: color: $wcfTooltipColor;
 	max-width: 300px;
 	opacity: 0;
 	padding: 5px 10px 7px;
@@ -15,7 +15,7 @@
 	@extend .wcfFontSmall;
 	
 	> .elementPointer {
-		border-color: $wcfTooltipBackgroundColor transparent;
+		// TODO: border-color: $wcfTooltipBackgroundColor transparent;
 		border-style: solid;
 		border-width: 0 5px 5px;
 		
diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index d2c0f54ac6..2f86945675 100644
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -2,14 +2,14 @@
 	position: relative;
 	
 	> section {
-		background-color: $wcfContentBackgroundAccent;
+		// TODO: background-color: $wcfContentBackgroundAccent;
 		border-radius: 0;
-		color: $wcfContentTextAccent;
+		// TODO: color: $wcfContentTextAccent;
 		
 		a,
 		dd,
 		h1 {
-			color: $wcfContentTextAccent;
+			// TODO: color: $wcfContentTextAccent;
 		}
 		
 		&:first-child {
@@ -26,7 +26,7 @@
 			margin-top: 0;
 			
 			&:before {
-				border-top: 2px solid $wcfContentBorderAccent;
+				// TODO: border-top: 2px solid $wcfContentBorderAccent;
 				content: "";
 				left: 0;
 				margin-top: -15px;
@@ -55,7 +55,7 @@
 			margin-top: 25px;
 			
 			&:before {
-				border-top: 2px solid $wcfContentBorderAccent;
+				// TODO: border-top: 2px solid $wcfContentBorderAccent;
 				content: "";
 				left: 0;
 				margin-top: -10px;
@@ -102,11 +102,11 @@
 	> a {
 		background-color: transparent;
 		border-width: 0;
-		color: $wcfContentTextAccent !important;
+		// TODO: color: $wcfContentTextAccent !important;
 		padding: 5px;
 		
 		> .icon {
-			color: $wcfContentTextAccent;
+			// TODO: color: $wcfContentTextAccent;
 		}
 	}
 }