From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 7 Jan 2016 18:31:22 +0000 (+0100)
Subject: Style overhaul (WIP)
X-Git-Tag: 3.0.0_Beta_1~2030^2~171
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=487db634a17368ab7f3597016d806cf50eb6dd65;p=GitHub%2FWoltLab%2FWCF.git

Style overhaul (WIP)
---

diff --git a/com.woltlab.wcf/templates/cms.tpl b/com.woltlab.wcf/templates/cms.tpl
index d92be9d231..6535d44282 100644
--- a/com.woltlab.wcf/templates/cms.tpl
+++ b/com.woltlab.wcf/templates/cms.tpl
@@ -13,20 +13,22 @@
 {include file='header'}
 
 {if $page->isLandingPage}
-	<header class="boxHeadline">
-		<h1>{PAGE_TITLE|language}</h1>
+	<header class="contentHeader">
+		<h1 class="contentTitle">{PAGE_TITLE|language}</h1>
 		{hascontent}<p>{content}{PAGE_DESCRIPTION|language}{/content}</p>{/hascontent}
 	</header>
 {else}
-	<header class="boxHeadline">
-		<h1>{$content[title]}</h1>
-	</header>
+	{if $content[title]}
+		<header class="contentHeader">
+			<h1 class="contentTitle">{$content[title]}</h1>
+		</header>
+	{/if}	
 {/if}
 
 {include file='userNotice'}
 
-<div class="contentNavigation">
-	{hascontent}
+{hascontent}
+	<div class="contentNavigation">
 		<nav>
 			<ul>
 				{content}
@@ -34,15 +36,17 @@
 				{/content}
 			</ul>
 		</nav>
-	{/hascontent}
-</div>
+	</div>
+{/hascontent}
 
-<section class="cmsContent htmlContent">
-	{@$content[content]}
-</section>
+{if $content[content]}
+	<section class="section cmsContent htmlContent">
+		{@$content[content]}
+	</section>
+{/if}
 
-<div class="contentNavigation">
-	{hascontent}
+{hascontent}
+	<div class="contentNavigation">
 		<nav>
 			<ul>
 				{content}
@@ -50,8 +54,8 @@
 				{/content}
 			</ul>
 		</nav>
-	{/hascontent}
-</div>
+	</div>
+{/hascontent}
 
 {include file='footer'}
 
diff --git a/com.woltlab.wcf/templates/messageSidebar.tpl b/com.woltlab.wcf/templates/messageSidebar.tpl
index f459fedb17..dabd84ca40 100644
--- a/com.woltlab.wcf/templates/messageSidebar.tpl
+++ b/com.woltlab.wcf/templates/messageSidebar.tpl
@@ -13,8 +13,7 @@
 						{capture assign='__userAvatar'}{@$userProfile->getAvatar()->getImageTag(128)}{/capture}
 						<a href="{link controller='User' object=$userProfile->getDecoratedObject()}{/link}" class="framed">{@'<img'|str_replace:'<img itemprop="photo"':$__userAvatar}</a>
 						
-						{* @TODO *}
-						{*if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()}<span class="badge green badgeOnline" title="{lang}wcf.user.online.title{/lang}">{lang}wcf.user.online{/lang}</span>{/if*}
+						{if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()}<span class="badge green badgeOnline" title="{lang}wcf.user.online.title{/lang}">{lang}wcf.user.online{/lang}</span>{/if}
 					</div>
 				{/if}
 			{/if}
diff --git a/com.woltlab.wcf/templates/pageFooterCopyright.tpl b/com.woltlab.wcf/templates/pageFooterCopyright.tpl
index b79336e5c9..2ab68fa1db 100644
--- a/com.woltlab.wcf/templates/pageFooterCopyright.tpl
+++ b/com.woltlab.wcf/templates/pageFooterCopyright.tpl
@@ -1 +1,3 @@
 {event name='copyright'}
+
+{if $__wcf->isActiveApplication()}<address class="copyright">{lang}wcf.index.copyright{/lang}</address>{/if}
diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
index 2fc10fb1ce..d9d212502e 100644
--- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -5,21 +5,27 @@
 
 {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>
+<div id="pageHeaderSearch" class="pageHeaderSearch" data-disable-auto-focus="true">
+	<form method="post" action="{@$__searchFormLink}">
+		<div class="pageHeaderSearchInputContainer dropdown">
+			<input type="search" name="q" id="pageHeaderSearchInput" class="pageHeaderSearchInput dropdownToggle" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" 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>
+			
+			<button class="pageHeaderSearchInputButton" type="submit">
+				<span class="icon icon16 pointer fa-search" title="{lang}wcf.global.search{/lang}"></span>
+			</button>
+		</div>
 		
 		{@$__searchHiddenInputFields}
 		{@SECURITY_TOKEN_INPUT_TAG}
@@ -30,7 +36,7 @@
 	<script data-relocate="true">
 		//<![CDATA[
 		$(function() {
-			new WCF.Search.Message.SearchArea($('#search'));
+			new WCF.Search.Message.SearchArea($('#pageHeaderSearch'));
 		});
 		//]]>
 	</script>
diff --git a/wcfsetup/install/files/acp/templates/boxAdd.tpl b/wcfsetup/install/files/acp/templates/boxAdd.tpl
index 8d1bbbb239..ea649aa33d 100644
--- a/wcfsetup/install/files/acp/templates/boxAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/boxAdd.tpl
@@ -15,8 +15,8 @@
 	</script>
 {/if}
 
-<header class="boxHeadline">
-	<h1>{if $action == 'add'}{if $isMultilingual}{lang}wcf.acp.box.addMultilingual{/lang}{else}{lang}wcf.acp.box.add{/lang}{/if}{else}{lang}wcf.acp.box.edit{/lang}{/if}</h1>
+<header class="contentHeader">
+	<h1 class="contentTitle">{if $action == 'add'}{if $isMultilingual}{lang}wcf.acp.box.addMultilingual{/lang}{else}{lang}wcf.acp.box.add{/lang}{/if}{else}{lang}wcf.acp.box.edit{/lang}{/if}</h1>
 </header>
 
 {include file='formError'}
@@ -36,8 +36,8 @@
 </div>
 
 <form method="post" action="{if $action == 'add'}{link controller='BoxAdd'}{/link}{else}{link controller='BoxEdit' id=$boxID}{/link}{/if}">
-	<section class="marginTop">
-		<h1>{lang}wcf.global.form.data{/lang}</h1>
+	<section class="section">
+		<h2 class="sectionTitle">{lang}wcf.global.form.data{/lang}</h2>
 		
 		<dl{if $errorField == 'name'} class="formError"{/if}>
 			<dt><label for="name">{lang}wcf.global.name{/lang}</label></dt>
@@ -154,8 +154,8 @@
 	</section>
 	
 	{if !$isMultilingual}
-		<fieldset>
-			<legend>content</legend>
+		<section class="section">
+			<h2 class="sectionTitle">content</h2>
 			
 			{if $__wcf->session->getPermission('admin.content.cms.canUseMedia')}
 				<dl{if $errorField == 'image'} class="formError"{/if}>
@@ -213,7 +213,7 @@
 					{/if}
 				</dd>
 			</dl>
-		</fieldset>
+		</section>
 	{else}
 		<div class="tabMenuContainer">
 			<nav class="tabMenu">
diff --git a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
index 2061b515ea..d7ad15758f 100644
--- a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
@@ -5,21 +5,27 @@
 
 {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>
+<div id="pageHeaderSearch" class="pageHeaderSearch" data-disable-auto-focus="true">
+	<form method="post" action="{@$__searchFormLink}">
+		<div class="pageHeaderSearchInputContainer dropdown">
+			<input type="search" name="q" id="pageHeaderSearchInput" class="pageHeaderSearchInput dropdownToggle" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" 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>
+			
+			<button class="pageHeaderSearchInputButton" type="submit">
+				<span class="icon icon16 pointer fa-search" title="{lang}wcf.global.search{/lang}"></span>
+			</button>
+		</div>
 		
 		{@$__searchHiddenInputFields}
 		{@SECURITY_TOKEN_INPUT_TAG}
diff --git a/wcfsetup/install/files/lib/data/box/Box.class.php b/wcfsetup/install/files/lib/data/box/Box.class.php
index 6c591bc5a4..99135ba89a 100644
--- a/wcfsetup/install/files/lib/data/box/Box.class.php
+++ b/wcfsetup/install/files/lib/data/box/Box.class.php
@@ -45,7 +45,7 @@ class Box extends DatabaseObject {
 	 * available box types
 	 * @var	string[]
 	 */
-	public static $availableBoxTypes = ['text', 'html', 'system', 'menu'];
+	public static $availableBoxTypes = ['text', 'html', 'system'];
 	
 	/**
 	 * available box positions
diff --git a/wcfsetup/install/files/lib/system/WCF.class.php b/wcfsetup/install/files/lib/system/WCF.class.php
index d535b959a8..561bb03310 100644
--- a/wcfsetup/install/files/lib/system/WCF.class.php
+++ b/wcfsetup/install/files/lib/system/WCF.class.php
@@ -607,6 +607,15 @@ class WCF {
 		throw new SystemException("method '".$method."' does not exist in class WCF");
 	}
 	
+	/**
+	 * Returns true if current application (WCF) is treated as active and was invoked directly.
+	 *
+	 * @return	boolean
+	 */
+	public function isActiveApplication() {
+		return (ApplicationHandler::getInstance()->getActiveApplication()->packageID == 1);
+	}
+	
 	/**
 	 * Changes the active language.
 	 * 
diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index 829d596d51..05efd4a181 100644
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -180,6 +180,31 @@
 		&:not(:first-child) {
 			margin-top: 20px;
 		}
+		
+		&.boxAlternative {
+			background-color: transparent;
+			border: 1px solid $wcfContentBorderInner;
+		}
+		
+		&.boxError {
+			background-color: $wcfStatusErrorBackground;
+			color: $wcfStatusErrorText;
+		}
+		
+		&.boxInfo {
+			background-color: $wcfStatusInfoBackground;
+			color: $wcfStatusInfoText;
+		}
+		
+		&.boxSuccess {
+			background-color: $wcfStatusSuccessBackground;
+			color: $wcfStatusSuccessText;
+		}
+		
+		&.boxWarning {
+			background-color: $wcfStatusWarningBackground;
+			color: $wcfStatusWarningText;
+		}
 	}
 	
 	.boxWithImage {
diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index de7b46e279..0daefbd204 100644
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -1,65 +1,96 @@
+/* style for content area */
 .content {
-	fieldset > legend {
-		float: left;
-		width: 100%;
+	/* content header */
+	.contentHeader,
+	.boxHeadline { // deprecated
+		border-bottom: 1px solid $wcfContentBorderInner;
+		color: $wcfContentHeadlineText; // todo: rename variable
+		margin-bottom: 30px;
+		padding-bottom: 10px;
 		
-		&+ * {
-			clear: left;
+		.contentTitle,
+		> h1 { // deprecated
+			@extend .wcfFontTitle;
 		}
-	}
-	
-	fieldset > legend,
-	section > h1.subHeadline {
-		@extend .wcfFontHeadline;
-		
-		border-left: 5px solid $wcfContentBorderInner;
-		color: $wcfContentHeadlineText;
-		font-weight: 400;
-		margin-bottom: 20px;
-		padding-left: 10px;
 		
 		a {
-			color: $wcfContentHeadlineLink;
+			color: $wcfContentHeadlineLink; // todo: rename variable
 			
 			&:hover {
-				color: $wcfContentHeadlineLinkActive;
+				color: $wcfContentHeadlineLinkActive; // todo: rename variable
 			}
 		}
 	}
 	
-	.container {
-		fieldset {
-			&:not(:first-child) {
-				margin-top: 20px;
+	/* todo
+	.boxHeadline {
+		&.labeledHeadline {
+			font-size: 0;
+			
+			> h1,
+			> h2 {
+				display: inline-block;
+				margin-right: 10px;
 			}
 			
-			> legend {
-				// TODO: border-bottom: 1px solid $wcfContentBorder;
-				padding-bottom: 5px;
+			> ul {
+				display: inline-block;
+				font-size: 1rem;
+				
+				&:not(:empty) {
+					margin-right: 10px;
+				}
 			}
 		}
+	}*/
+	
+	/* content sections */
+	.section {
+		margin-top: 30px;
 		
-		section {
-			&:not(:first-child) {
-				margin-top: 20px;
-			}
+		> .sectionTitle {
+			border-bottom: 1px solid $wcfContentBorderInner;
+			color: $wcfContentHeadlineText; // todo: rename variable
+			margin-bottom: 20px;
+			padding-bottom: 10px;
+			
+			@extend .wcfFontHeadline;
 			
-			> h1 {
-				// TODO: border-bottom: 1px solid $wcfContentBorder;
-				padding-bottom: 5px;
+			a {
+				color: $wcfContentHeadlineLink; // todo: rename variable
+				
+				&:hover {
+					color: $wcfContentHeadlineLinkActive; // todo: rename variable
+				}
 			}
 		}
 	}
 	
-	label {
-		display: block;
+	/* fieldset styling (old sections / deprecated) */
+	fieldset {
+		margin-top: 30px;
 		
-		&.selectDropdown {
-			display: inline;
-		}
-		
-		&:not(:first-child) {
-			margin-top: 5px;
+		> legend {
+			border-bottom: 1px solid $wcfContentBorderInner;
+			color: $wcfContentHeadlineText; // todo: rename variable
+			float: left;
+			margin-bottom: 20px;
+			padding-bottom: 10px;
+			width: 100%;
+			
+			@extend .wcfFontHeadline;
+			
+			a {
+				color: $wcfContentHeadlineLink; // todo: rename variable
+				
+				&:hover {
+					color: $wcfContentHeadlineLinkActive; // todo: rename variable
+				}
+			}
+			
+			&+ * {
+				clear: left;
+			}
 		}
 	}
 }
diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index 2ab9a86f55..195e417695 100644
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -10,11 +10,14 @@ select,
 textarea {
 	background-color: $wcfInputBackground;
 	border: 1px solid $wcfInputBorder;
-	border-radius: 0;
-	border-width: 0 0 1px 0;
 	color: $wcfInputText;
 	outline: none;
-	padding: 4px;
+	padding: 4px 8px;
+	
+	// input elements do not inherit font family, size and line-height from body
+	font-family: $wcfFontFamily;
+	@extend .wcfFontDefault;
+	@extend .wcfLineHeight;
 	
 	&:focus,
 	&:hover {
@@ -223,7 +226,7 @@ dl {
 	text-align: center;
 	
 	&:not(:first-child) {
-		margin-top: 20px;
+		margin-top: 30px;
 	}
 	
 	> :not(:first-child) {
diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss
index 0634df45ee..ae4a90f6af 100644
--- a/wcfsetup/install/files/style/layout/global.scss
+++ b/wcfsetup/install/files/style/layout/global.scss
@@ -84,6 +84,10 @@
 	font-weight: 300;
 }
 
+.wcfLineHeight {
+	line-height: 1.61803399;
+}
+
 small {
 	@extend .wcfFontSmall;
 }
@@ -92,6 +96,10 @@ strong {
 	@extend .wcfFontBold;
 }
 
+img {
+	vertical-align: middle;
+}
+
 .elementPointer {
 	pointer-events: none;
 	position: absolute;
@@ -146,7 +154,7 @@ ol.nativeList {
 /* simulate native HTML styles for certain elements */
 .htmlContent {
 	p {
-		margin: 1em 0;
+		margin: 1.5em 0;
 	}
 	
 	h1 {
@@ -158,8 +166,7 @@ ol.nativeList {
 	}
 	
 	h1, h2, h3, h4, h5, h6 {
-		font-weight: bold;
-		margin: 0.5em 0;
+		margin: 1em 0;
 	}
 	
 	ul, ol {
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index a5e44e85fb..97e84ffb6e 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -4,8 +4,8 @@
 
 html, body {
 	height: 100%;
-	line-height: 1.61803399;
 	
+	@extend .wcfLineHeight;
 	@extend .wcfFontDefault;
 }
 
@@ -17,8 +17,9 @@ body {
 
 a {
 	cursor: pointer;
+	text-decoration: none;
 	
-	&:not(:hover) {
+	&:hover {
 		text-decoration: none;
 	}
 }
@@ -48,7 +49,6 @@ a {
 	
 	a {
 		color: $wcfContentLink;
-		text-decoration: none;
 		
 		&:hover {
 			color: $wcfContentLinkActive;
@@ -73,43 +73,7 @@ a {
 }
 
 /* CONTENT AREA */
-.boxHeadline {
-	border-bottom: 1px solid $wcfContentBorderInner;
-	color: $wcfContentHeadlineText;
-	margin-bottom: 30px;
-	padding-bottom: 10px;
-	
-	> h1 {
-		@extend .wcfFontTitle;
-	}
-	
-	a {
-		color: $wcfContentHeadlineLink;
-		
-		&:hover {
-			color: $wcfContentHeadlineLinkActive;
-		}
-	}
-	
-	&.labeledHeadline {
-		font-size: 0;
-		
-		> h1,
-		> h2 {
-			display: inline-block;
-			margin-right: 10px;
-		}
-		
-		> ul {
-			display: inline-block;
-			font-size: 1rem;
-			
-			&:not(:empty) {
-				margin-right: 10px;
-			}
-		}
-	}
-}
+
 
 .containerHeadline {
 	> h3 {
diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 68f0d69b27..cd0aadf34b 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -190,24 +190,73 @@
 }
 
 /* SEARCH AREA */
-#search {
+.pageHeaderSearch {
 	flex: 0 50%;
 	text-align: right;
-	
-	> form {
-		display: inline-block;
-	}
 }
 
-#pageHeaderSearch {
-	background-color: $wcfHeaderSearchBoxBackground;
-	border-width: 0;
-	color: $wcfHeaderSearchBoxText;
-	padding: 5px 10px;
+.pageHeaderSearchInputContainer {
+	display: inline-block;
+	position: relative;
 	
-	&:focus,
 	&:hover {
-		background-color: $wcfHeaderSearchBoxBackgroundActive;
-		color: $wcfHeaderSearchBoxTextActive;
+		.pageHeaderSearchInput {
+			background-color: $wcfHeaderSearchBoxBackgroundActive;
+			border-color: $wcfHeaderSearchBoxBorderActive;
+			color: $wcfHeaderSearchBoxTextActive;
+		}
+		
+		.pageHeaderSearchInputButton > .icon {
+			color: $wcfHeaderSearchBoxTextActive;
+		}
+	}
+	
+	.pageHeaderSearchInput {
+		background-color: $wcfHeaderSearchBoxBackground;
+		border-color: $wcfHeaderSearchBoxBorder;
+		color: $wcfHeaderSearchBoxText;
+		padding-right: 30px;
+		
+		&:focus {
+			background-color: $wcfHeaderSearchBoxBackgroundActive;
+			border-color: $wcfHeaderSearchBoxBorderActive;
+			color: $wcfHeaderSearchBoxTextActive;
+			
+			~ .pageHeaderSearchInputButton > .icon {
+				color: $wcfHeaderSearchBoxTextActive;
+			}
+		}
+		
+		/* set placeholder color */
+		&::-webkit-input-placeholder { /* WebKit browsers */
+			color: $wcfHeaderSearchBoxPlaceholderText;
+		}
+		&::-moz-placeholder { /* Mozilla Firefox 19+ */
+			color: $wcfHeaderSearchBoxPlaceholderText;
+		}
+		&:-ms-input-placeholder { /* Internet Explorer 10+ */
+			color: $wcfHeaderSearchBoxPlaceholderText;
+		}
+				
+		/* remove broken cancel-button (webkit) */
+		&::-webkit-search-cancel-button {
+			display:none;
+		}
+	}
+	
+	.pageHeaderSearchInputButton {
+		background: none;
+		border: 0 none;
+		height: 20px;
+		margin: -10px 5px 0 0;
+		padding: 0;
+		position: absolute;
+		right: 0;
+		top: 50%;
+		width: 20px;
+		
+		> .icon {
+			color: $wcfHeaderSearchBoxText;
+		}
 	}
 }
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 22dd406599..c5b30e204f 100644
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -36,7 +36,7 @@
 		}
 	}
 	
-	#mainMenu {
+	.mainMenu {
 		flex: 1 auto;
 		order: 2;
 		margin: 0 20px;
@@ -48,7 +48,7 @@
 		margin-right: 10px;
 	}
 	
-	#search {
+	#pageHeaderSearch {
 		flex: 0 auto;
 		order: 4;
 	}
diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss
index 56ed239776..8dc0eb90fb 100644
--- a/wcfsetup/install/files/style/ui/button.scss
+++ b/wcfsetup/install/files/style/ui/button.scss
@@ -3,14 +3,19 @@ input[type="button"],
 input[type="reset"],
 input[type="submit"],
 .button,
-a.button {
+a.button { // a.button is required to override link formatting, such as drop-down buttons
 	background-color: $wcfButtonBackground;
 	border: 1px solid $wcfButtonBorder;
-	border-radius: 3px;
 	color: $wcfButtonText;
 	cursor: pointer;
 	display: inline-block;
-	padding: 5px 10px;
+	outline: none;
+	padding: 4px 12px;
+	
+	// input elements do not inherit font family, size and line-height from body
+	font-family: $wcfFontFamily;
+	@extend .wcfFontDefault;
+	@extend .wcfLineHeight;
 	
 	.icon {
 		color: $wcfButtonText;
@@ -38,7 +43,7 @@ button.buttonPrimary,
 input[type="button"].buttonPrimary,
 input[type="submit"],
 .button.buttonPrimary,
-a.button.buttonPrimary {
+a.button.buttonPrimary { // a.button is required to override link formatting, such as drop-down buttons
 	background-color: $wcfButtonPrimaryBackground;
 	border-color: $wcfButtonPrimaryBorder;
 	color: $wcfButtonPrimaryText;
diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index e43fd3bd62..77f55adb37 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -44,7 +44,7 @@
 }
 
 .dialogContainer {
-	border: 1px solid rgb(52, 152, 219);
+	border: 1px solid $wcfContentBorder;
 	box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
 	max-height: 80%;
 	max-width: 80%;
diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss
index 84df785513..7f13c7d6c1 100644
--- a/wcfsetup/install/files/style/ui/dropdown.scss
+++ b/wcfsetup/install/files/style/ui/dropdown.scss
@@ -120,26 +120,26 @@
 	@include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
 	
 	&::after {
-		border: 7px solid transparent;
+		border: 10px solid transparent;
 		border-bottom-color: $wcfDropdownBorder;
 		border-top-width: 0;
 		content: "";
 		display: inline-block;
 		left: 9px;
 		position: absolute;
-		top: -7px;
+		top: -10px;
 		z-index: 100;
 	}
 	
 	&::before {
-		border: 6px solid transparent;
+		border: 9px solid transparent;
 		border-bottom-color: $wcfDropdownBackground;
 		border-top-width: 0;
 		content: "";
 		display: inline-block;
 		left: 10px;
 		position: absolute;
-		top: -6px;
+		top: -9px;
 		z-index: 101;
 	}
 	
@@ -157,18 +157,18 @@
 	
 	&.dropdownArrowBottom {
 		&::after {
-			border: 7px transparent solid;
+			border: 10px transparent solid;
 			border-top-color: $wcfDropdownBorder;
 			border-bottom-width: 0;
-			bottom: -7px;
+			bottom: -10px;
 			top: auto;
 		}
 		
 		&::before {
-			border: 6px transparent solid;
+			border: 9px transparent solid;
 			border-top-color: $wcfDropdownBackground;
 			border-bottom-width: 0;
-			bottom: -6px;
+			bottom: -9px;
 			top: auto;
 		}
 	}
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 8cbd350e19..cd3483d0f9 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -39,6 +39,22 @@
 	.dataList {
 		@extend .wcfFontSmall;
 	}
+	
+	.userAvatar {
+		display: inline-block;
+		position: relative;
+		
+		> a {
+			display: inline-block;
+		}
+	}
+	
+	.badgeOnline {
+		left: 0;
+		pointer-events: none;
+		position: absolute;
+		bottom: 0;
+	}
 }
 
 .messageAuthor + * {
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index 5c2286ce66..63d5e2148b 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -1964,25 +1964,25 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('useGoogleF
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfBaseLineHeight', '1.28');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBackground', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBackgroundActive', 'rgba(52, 73, 94, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorder', 'rgba(127, 140, 141, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorder', 'rgba(176, 200, 224, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorderActive', 'rgba(52, 73, 94, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonDisabledBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonDisabledBorder', 'rgba(204, 204, 204, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonDisabledText', 'rgba(153, 153, 153, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonDisabledBorder', 'rgba(173, 176, 179, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonDisabledText', 'rgba(173, 176, 179, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBackgroundActive', 'rgba(79, 129, 189, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorder', 'rgba(79, 129, 189, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorderActive', 'rgba(79, 129, 189, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryText', 'rgba(79, 129, 189, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBackgroundActive', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorder', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorderActive', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryText', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryTextActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonText', 'rgba(127, 140, 141, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonText', 'rgba(52, 73, 94, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonTextActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorder', 'rgba(66, 129, 244, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorder', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorderInner', 'rgba(238, 238, 238, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedLink', 'rgba(52, 73, 94, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedLinkActive', 'rgba(52, 73, 94, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedText', 'rgba(127, 140, 141, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedText', 'rgba(125, 130, 135, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentHeadlineBorder', 'rgba(238, 238, 238, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentHeadlineLink', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentHeadlineLinkActive', 'rgba(44, 62, 80, 1)');
@@ -1991,18 +1991,18 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContent
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentLinkActive', 'rgba(192, 57, 43, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentText', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackgroundActive', 'rgba(66, 129, 244, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorder', 'rgba(66, 129, 244, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackgroundActive', 'rgba(55, 73, 95, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorder', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorderInner', 'rgba(238, 238, 238, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLink', 'rgba(54, 54, 54, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLink', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownText', 'rgba(54, 54, 54, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownText', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyFallback', '"Segoe UI", "Lucida Grande", "Helveltica", sans-serif');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyGoogle', 'Open Sans');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeDefault', '14px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeHeadline', '18px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeSmall', '12px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeTitle', '23px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeTitle', '28px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBackground', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxBackground', 'rgba(52, 73, 94, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxHeadlineLink', 'rgba(255, 255, 255, 1)');
@@ -2023,23 +2023,26 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderT
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLinkActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackgroundActive', 'rgba(66, 129, 244, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBorder', 'rgba(66, 129, 244, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLink', 'rgba(54, 54, 54, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackgroundActive', 'rgba(55, 73, 95, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBorder', 'rgba(55, 73, 95, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLink', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLinkActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(52, 73, 94, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(52, 73, 94, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackground', 'rgba(245, 248, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackgroundActive', 'rgba(240, 248, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorder', 'rgba(52, 152, 219, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBorder', 'rgba(128, 139, 150, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBorderActive', 'rgba(128, 139, 150, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholderText', 'rgba(169, 169, 169, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackground', 'rgba(241, 246, 251, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackgroundActive', 'rgba(241, 246, 251, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorder', 'rgba(176, 200, 224, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorderActive', 'rgba(41, 128, 185, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledBackground', 'rgba(248, 248, 248, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledBorder', 'rgba(204, 204, 204, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledText', 'rgba(153, 153, 153, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputText', 'rgba(54, 54, 54, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputTextActive', 'rgba(54, 54, 54, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledBackground', 'rgba(245, 245, 245, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledBorder', 'rgba(174, 176, 179, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledText', 'rgba(125, 130, 100, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputText', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputTextActive', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutFixedWidth', '1200px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutMaxWidth', '1400px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutMinWidth', '980px');
@@ -2047,16 +2050,16 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigat
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationLinkActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationText', 'rgba(170, 170, 170, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarBackground', 'rgba(217, 237, 247, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarBackground', 'rgba(247, 248, 250, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarDimmedLink', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarDimmedLinkActive', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarDimmedText', 'rgba(127, 140, 141, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineLink', 'rgba(52, 73, 94, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineLinkActive', 'rgba(52, 73, 94, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineText', 'rgba(52, 73, 94, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarLink', 'rgba(192, 57, 43, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarLinkActive', 'rgba(169, 68, 66, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarText', 'rgba(52, 73, 94, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineLink', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineLinkActive', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineText', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarLink', 'rgba(231, 76, 60, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarLinkActive', 'rgba(192, 57, 43, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarText', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusErrorBackground', 'rgba(242, 222, 222, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusErrorBorder', 'rgba(235, 204, 204, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusErrorLink', 'rgba(169, 68, 66, 1)');