From 1223c43c536bf2fd2a6386308f913bf0bed9dce3 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 20 Oct 2015 10:40:31 +0200
Subject: [PATCH] Updated styles and templates

---
 com.woltlab.wcf/templates/pageHeader.tpl      |  25 +--
 com.woltlab.wcf/templates/pageHeaderLogo.tpl  |  13 ++
 com.woltlab.wcf/templates/pageHeaderMenu.tpl  |  16 ++
 .../templates/pageHeaderSearch.tpl            |  37 +++++
 .../{userPanel.tpl => pageHeaderUser.tpl}     |   0
 .../files/acp/style/acpStyleEditor.css        |  10 +-
 .../files/acp/templates/pageSearchArea.tpl    |   2 +-
 .../install/files/acp/templates/styleAdd.tpl  |  61 +++++++-
 .../files/lib/acp/form/StyleAddForm.class.php |  13 +-
 .../lib/system/style/StyleCompiler.class.php  |   5 +
 .../install/files/style/bootstrap/mixin.scss  |   4 +-
 .../files/style/layout/containerList.scss     |   2 +-
 .../install/files/style/layout/content.scss   |   4 +-
 wcfsetup/install/files/style/layout/form.scss |  14 +-
 .../install/files/style/layout/layout.scss    |   2 +-
 .../files/style/layout/navigation.scss        |  10 +-
 .../files/style/layout/pageHeader.scss        |  18 +--
 .../install/files/style/layout/sidebar.scss   |  32 ++--
 .../install/files/style/ui/breadcrumb.scss    |   6 +-
 wcfsetup/install/files/style/ui/button.scss   |   2 +-
 wcfsetup/install/files/style/ui/comment.scss  |   4 +-
 wcfsetup/install/files/style/ui/dialog.scss   |  12 +-
 wcfsetup/install/files/style/ui/dropdown.scss |   8 +-
 wcfsetup/install/files/style/ui/message.scss  |  26 +--
 wcfsetup/install/files/style/ui/redactor.scss |  24 +--
 .../files/style/ui/tabMenuMessage.scss        |  17 +-
 .../install/files/style/ui/tabularBox.scss    | 148 +++++++++---------
 wcfsetup/install/files/style/ui/tooltip.scss  |   6 +-
 .../install/files/style/ui/userProfile.scss   |  14 +-
 29 files changed, 324 insertions(+), 211 deletions(-)
 create mode 100644 com.woltlab.wcf/templates/pageHeaderLogo.tpl
 create mode 100644 com.woltlab.wcf/templates/pageHeaderMenu.tpl
 create mode 100644 com.woltlab.wcf/templates/pageHeaderSearch.tpl
 rename com.woltlab.wcf/templates/{userPanel.tpl => pageHeaderUser.tpl} (100%)

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/userPanel.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
similarity index 100%
rename from com.woltlab.wcf/templates/userPanel.tpl
rename to com.woltlab.wcf/templates/pageHeaderUser.tpl
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;
 		}
 	}
 }
-- 
2.20.1