From 7031866517e034148998c237965b4b0fef850490 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 10 Sep 2016 17:12:03 +0200
Subject: [PATCH] Updated layout

---
 com.woltlab.wcf/templates/pageHeader.tpl      |  14 +-
 .../templates/pageHeaderSearch.tpl            |   2 -
 com.woltlab.wcf/templates/pageHeaderUser.tpl  |   5 +
 wcfsetup/install/files/acp/style/layout.scss  |  27 +-
 .../files/acp/templates/pageHeader.tpl        |   2 +-
 wcfsetup/install/files/js/WCF.js              |  15 +-
 .../WoltLabSuite/Core/Ui/Page/Header/Fixed.js | 143 ++++------
 wcfsetup/install/files/js/require.config.js   |   1 +
 .../files/style/layout/pageHeader.scss        | 264 ++++++++++++------
 .../files/style/layout/pageHeaderSticky.scss  | 216 --------------
 .../files/style/ui/dropdownInteractive.scss   |   5 +-
 wcfsetup/install/files/style/ui/message.scss  |  27 +-
 wcfsetup/setup/db/install.sql                 |  10 +-
 13 files changed, 273 insertions(+), 458 deletions(-)
 delete mode 100644 wcfsetup/install/files/style/layout/pageHeaderSticky.scss

diff --git a/com.woltlab.wcf/templates/pageHeader.tpl b/com.woltlab.wcf/templates/pageHeader.tpl
index 5c3deff7c3..b6be88d034 100644
--- a/com.woltlab.wcf/templates/pageHeader.tpl
+++ b/com.woltlab.wcf/templates/pageHeader.tpl
@@ -1,17 +1,21 @@
 <div id="pageHeaderContainer" class="pageHeaderContainer">
 	<header id="pageHeader" class="pageHeader">
-		<div>
+		<div id="pageHeaderPanel" class="pageHeaderPanel">
 			<div class="layoutBoundary">
-				{include file='pageHeaderLogo'}
-				
-				{include file='pageHeaderSearch'}
-				
 				{include file='pageHeaderMenu'}
 				
 				{include file='pageHeaderUser'}
 			</div>
 		</div>
 		
+		<div id="pageHeaderFacade" class="pageHeaderFacade">
+			<div class="layoutBoundary">
+				{include file='pageHeaderLogo'}
+				
+				{include file='pageHeaderSearch'}
+			</div>
+		</div>
+		
 		{* TODO: this should be moved somewhere else and turned into an option *}
 		<script data-relocate="true">
 			require(['WoltLabSuite/Core/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
index 739d783b18..32f3909c33 100644
--- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -64,8 +64,6 @@
 			
 			{@SECURITY_TOKEN_INPUT_TAG}
 		</div>
-		
-		<label for="pageHeaderSearchInput" class="pageHeaderSearchLabel"></label>
 	</form>
 </div>
 
diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index 12dc3ef131..1fdec3449e 100644
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -1,5 +1,10 @@
 <nav id="topMenu" class="userPanel">
 	<ul class="userPanelItems">
+		<!-- page search -->
+		<li class="jsOnly">
+			<a href="#" id="userPanelSearchButton" class="jsTooltip" title="{lang}wcf.global.search{/lang}"><span class="icon icon32 fa-search"></span> <span>{lang}wcf.global.search{/lang}</span></a>
+		</li>
+		
 		{if $__wcf->user->userID}
 			<!-- user menu -->
 			<li id="userMenu">
diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index b22129013e..f5c3672bdf 100644
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -7,9 +7,6 @@ $wcfAcpMenuWidth: 150px;
 }
 
 .pageContainer {
-	/* required for sticky page header */
-	padding-top: 50px;
-	
 	@include screen-lg {
 		min-width: 1240px;
 	}
@@ -17,17 +14,6 @@ $wcfAcpMenuWidth: 150px;
 
 /* page header */
 .pageHeaderContainer {
-	box-shadow: 0 0 10px rgba(0, 0, 0, .6);
-	left: 0;
-	position: fixed;
-	right: 0;
-	top: 0;
-	z-index: 300;
-	
-	.pageHeader {
-		min-height: 0;
-	}
-	
 	@include screen-lg {
 		.pageHeader .layoutBoundary {
 			background-color: rgb(44, 62, 80);
@@ -49,6 +35,7 @@ $wcfAcpMenuWidth: 150px;
 			
 			.pageHeaderLogoSmall {
 				display: inline;
+				max-height: 30px;
 			}
 			
 			> a {
@@ -255,6 +242,18 @@ $wcfAcpMenuWidth: 150px;
 }
 
 @include screen-md-down {
+	.mainMenu {
+		order: 1;
+	}
+	
+	.pageHeaderLogo {
+		order: 2;
+	}
+	
+	.userPanel {
+		order: 3;
+	}
+	
 	.acpPageMenu,
 	.acpPageSubMenu {
 		display: none;
diff --git a/wcfsetup/install/files/acp/templates/pageHeader.tpl b/wcfsetup/install/files/acp/templates/pageHeader.tpl
index 6ded76cc79..37f2c202f5 100644
--- a/wcfsetup/install/files/acp/templates/pageHeader.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeader.tpl
@@ -1,6 +1,6 @@
 <div class="pageHeaderContainer">
 	<header id="pageHeader" class="pageHeader">
-		<div>
+		<div id="pageHeaderPanel" class="pageHeaderPanel">
 			<div class="layoutBoundary">
 				{include file='pageHeaderLogo'}
 				
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index e19b619bef..2460648d9d 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -1150,12 +1150,8 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
 		
 		this._pointer = $('<span class="elementPointer"><span /></span>').appendTo(this._container);
 		
-		require(['Environment', 'EventHandler'], (function(Environment, EventHandler) {
+		require(['Environment'], (function(Environment) {
 			if (Environment.platform() === 'desktop') {
-				EventHandler.add('com.woltlab.wcf.pageHeaderFixed', 'change', (function (data) {
-					this.render();
-				}).bind(this));
-				
 				if ($itemContainer !== null) {
 					// use jQuery scrollbar on desktop, mobile browsers have a similar display built-in
 					$itemContainer.perfectScrollbar({
@@ -1262,19 +1258,12 @@ WCF.Dropdown.Interactive.Instance = Class.extend({
 	 * Renders the dropdown.
 	 */
 	render: function() {
-		require(['Dom/Util', 'Ui/Alignment', 'Ui/Screen'], (function (DomUtil, UiAlignment, UiScreen) {
+		require(['Ui/Alignment', 'Ui/Screen'], (function (UiAlignment, UiScreen) {
 			if (UiScreen.is('screen-lg')) {
-				this._container[0].classList.remove('interactiveDropdownFixed');
-				
 				UiAlignment.set(this._container[0], this._triggerElement[0], {
 					horizontal: 'right',
 					pointer: true
 				});
-				
-				if (DomUtil.getFixedParent(this._triggerElement[0]) !== null) {
-					this._container[0].classList.add('interactiveDropdownFixed');
-					this._container[0].style.setProperty('top', this._triggerElement[0].clientHeight + 'px', '');
-				}
 			}
 			else {
 				this._container.css({
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
index 90c9a085cc..85b9ff34a1 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
@@ -6,11 +6,12 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLabSuite/Core/Ui/Page/Header/Fixed
  */
-define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiScreen, UiSimpleDropdown) {
+define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/Scroll', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiScreen, UiScroll, UiSimpleDropdown) {
 	"use strict";
 	
-	var _pageHeader, _pageHeaderContainer, _searchInputContainer, _triggerHeight;
-	var _isFixed = false, _isMobile = false;
+	var _callbackScroll = null;
+	var _pageHeader, _pageHeaderContainer, _searchInput, _searchInputContainer;
+	var _isMobile = false;
 	
 	/**
 	 * @exports     WoltLabSuite/Core/Ui/Page/Header/Fixed
@@ -23,61 +24,15 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
 			_pageHeader = elById('pageHeader');
 			_pageHeaderContainer = elById('pageHeaderContainer');
 			
-			this._initStickyPageHeader();
 			this._initSearchBar();
 			
 			UiScreen.on('screen-md-down', {
-				match: this._toggleMobile.bind(this, true),
-				unmatch: this._toggleMobile.bind(this, false),
-				setup: this._toggleMobile.bind(this, true)
+				match: function () { _isMobile = true; },
+				unmatch: function () { _isMobile = false; },
+				setup: function () { _isMobile = true; }
 			});
 		},
 		
-		/**
-		 * Toggles mobile flag.
-		 * 
-		 * @param       {boolean}       isMobile        true if this viewport equals at least a tablet
-		 * @protected
-		 */
-		_toggleMobile: function (isMobile) {
-			_isMobile = isMobile;
-			
-			this._rebuildPageHeader(false);
-		},
-		
-		/**
-		 * Rebuilds the page header min-height property on viewport change.
-		 * 
-		 * @protected
-		 */
-		_rebuildPageHeader: function () {
-			var clientHeight = _pageHeader.clientHeight;
-			
-			if (!clientHeight) {
-				_pageHeader.style.removeProperty('min-height');
-				clientHeight = _pageHeader.clientHeight;
-			}
-			
-			if (clientHeight) {
-				_pageHeader.style.setProperty('min-height', clientHeight + 'px');
-			}
-		},
-		
-		/**
-		 * Enforces a min-height for the original header's location to prevent collapsing
-		 * when setting the header to `position: fixed`.
-		 * 
-		 * @protected
-		 */
-		_initStickyPageHeader: function() {
-			this._rebuildPageHeader(true);
-			
-			_triggerHeight = _pageHeader.clientHeight - elBySel('.mainMenu', _pageHeader).clientHeight;
-			
-			this._scroll();
-			window.addEventListener('scroll', this._scroll.bind(this));
-		},
-		
 		/**
 		 * Provides the collapsible search bar.
 		 * 
@@ -89,29 +44,63 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
 				event.stopPropagation();
 			});
 			
-			var searchInput = elById('pageHeaderSearchInput');
+			_searchInput = elById('pageHeaderSearchInput');
+			
+			var userPanelSearchButton = elById('userPanelSearchButton');
+			var pageHeaderFacade = elById('pageHeaderFacade');
 			
-			var searchLabel = elBySel('.pageHeaderSearchLabel');
 			_searchInputContainer = elById('pageHeaderSearchInputContainer');
 			
 			var menu = elById('topMenu');
-			searchLabel.addEventListener(WCF_CLICK_EVENT, function() {
-				if ((_isFixed || _isMobile) && !_pageHeader.classList.contains('searchBarOpen')) {
+			userPanelSearchButton.addEventListener(WCF_CLICK_EVENT, (function(event) {
+				event.preventDefault();
+				event.stopPropagation();
+				
+				var facadeHeight = pageHeaderFacade.clientHeight;
+				var scrollTop = window.pageYOffset;
+				var skipScrollHandler = false;
+				var isVisible = !_isMobile && (facadeHeight > scrollTop);
+				
+				if (!isVisible && !_pageHeader.classList.contains('searchBarOpen')) {
 					UiAlignment.set(_searchInputContainer, menu, {
 						horizontal: 'right'
 					});
 					
 					_pageHeader.classList.add('searchBarOpen');
-					WCF.Dropdown.Interactive.Handler.closeAll();
-					searchInput.focus();
+					_searchInput.focus();
 				}
-			});
+				else if (!_isMobile) {
+					if (scrollTop) {
+						// setting focus could lead to the search bar to be
+						// hidden behind the fixed panel
+						UiScroll.element(elById('top'), function () {
+							_searchInput.focus();
+						});
+					}
+					else {
+						_searchInput.focus();
+					}
+					
+					skipScrollHandler = true;
+				}
+				
+				WCF.Dropdown.Interactive.Handler.closeAll();
+				
+				if (!skipScrollHandler && !_isMobile && _callbackScroll === null) {
+					_callbackScroll = (function () {
+						if (pageHeaderFacade.clientHeight > window.pageYOffset) {
+							this._closeSearchBar();
+						}
+					}).bind(this);
+					window.addEventListener('scroll', _callbackScroll);
+				}
+			}).bind(this));
 			
-			UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', function() {
+			UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', (function() {
 				if (_pageHeader.classList.contains('searchBarForceOpen')) return;
 				
-				_pageHeader.classList.remove('searchBarOpen');
-			});
+				this._closeSearchBar();
+			}).bind(this));
 			
 			EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', (function(data) {
 				if (data.identifier === 'com.woltlab.wcf.search') {
@@ -122,30 +111,18 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
 			}).bind(this));
 		},
 		
-		/**
-		 * Updates the page header state after scrolling.
-		 * 
-		 * @protected
-		 */
-		_scroll: function() {
-			if (_isMobile) return;
+		_closeSearchBar: function () {
+			_pageHeader.classList.remove('searchBarOpen');
 			
-			var wasFixed = _isFixed;
+			['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
+				_searchInputContainer.style.removeProperty(propertyName);
+			});
 			
-			_isFixed = (window.pageYOffset > _triggerHeight);
+			_searchInput.blur();
 			
-			if (_isFixed !== wasFixed) {
-				_pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky');
-				_pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader');
-				
-				EventHandler.fire('com.woltlab.wcf.pageHeaderFixed', 'change', { isFixed: _isFixed });
-				
-				if (!_isFixed && wasFixed) {
-					_pageHeader.classList.remove('searchBarOpen');
-					['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
-						_searchInputContainer.style.removeProperty(propertyName);
-					});
-				}
+			if (_callbackScroll !== null) {
+				window.removeEventListener('scroll', _callbackScroll);
+				_callbackScroll = null;
 			}
 		}
 	};
diff --git a/wcfsetup/install/files/js/require.config.js b/wcfsetup/install/files/js/require.config.js
index ed1e519a89..e0c2be8ad6 100644
--- a/wcfsetup/install/files/js/require.config.js
+++ b/wcfsetup/install/files/js/require.config.js
@@ -36,6 +36,7 @@ requirejs.config({
 			'Ui/Notification': 'WoltLabSuite/Core/Ui/Notification',
 			'Ui/ReusableDropdown': 'WoltLabSuite/Core/Ui/Dropdown/Reusable',
 			'Ui/Screen': 'WoltLabSuite/Core/Ui/Screen',
+			'Ui/Scroll': 'WoltLabSuite/Core/Ui/Scroll',
 			'Ui/SimpleDropdown': 'WoltLabSuite/Core/Ui/Dropdown/Simple',
 			'Ui/TabMenu': 'WoltLabSuite/Core/Ui/TabMenu',
 			'Upload': 'WoltLabSuite/Core/Upload',
diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 4e0ef2c203..8527b9d2ba 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -14,44 +14,69 @@
 	.icon {
 		color: $wcfHeaderText;
 	}
+	
+	/* reserved space for `.pageHeaderPanel` */
+	padding-top: 50px;
 }
 
-.pageHeader {
-	min-height: 52px;
-}
-
-.pageHeader .layoutBoundary {
-	display: flex;
+.pageHeaderPanel {
+	box-shadow: 0 0 10px rgba(0, 0, 0, .6);
+	left: 0;
+	position: fixed;
+	right: 0;
+	top: 0;
+	z-index: 300;
+	
+	&::after {
+		border-bottom: 1px solid $wcfHeaderMenuLinkBackgroundActive;
+		bottom: 0;
+		content: "";
+		display: block;
+		left: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+	}
+	
+	> .layoutBoundary {
+		display: flex;
+	}
 	
 	@include screen-md-down {
-		padding: 10px;
+		background-color: $wcfHeaderBackground;
+		
+		> .layoutBoundary {
+			padding: 9px 10px;
+		}
 	}
 	
 	@include screen-lg {
-		align-items: center;
-		flex-wrap: wrap;
-		padding-top: 30px;
-		padding-bottom: 0;
+		background-color: $wcfHeaderMenuBackground;
 	}
 }
 
-/* LOGO */
-.pageHeaderLogo {
-	@include screen-lg {
-		flex: 0 0 50%;
-		margin-bottom: 30px;
+.pageHeaderFacade {
+	> .layoutBoundary {
+		align-items: center;
+		display: flex;
 		
-		.pageHeaderLogoSmall {
-			display: none;
+		@include screen-lg {
+			align-items: center;
+			padding-bottom: 40px;
+			padding-top: 40px;
+		}
+		
+		@include screen-md-down {
+			height: 50px;
+			justify-content: center;
+			left: 60px;
+			padding: 9px 0;
+			position: fixed;
+			right: 60px;
+			top: 0;
+			width: auto;
+			z-index: 301;
 		}
-	}
-	
-	.pageHeaderLogoLarge {
-		max-width: 100%;
-	}
-	
-	.pageHeaderLogoSmall {
-		max-height: 30px;
 	}
 }
 
@@ -167,39 +192,6 @@
 	}
 }
 
-@include screen-lg {
-	.pageHeader:not(.sticky) {
-		.mainMenu {
-			background-color: $wcfHeaderMenuBackground;
-			position: relative;
-			
-			/* The `box-shadow` and the `::before` are used to create a full-width
-			   color stripe that matches the height of the main menu. This trick is
-			   used to allows us to have all elements in the header share a common
-			   ancestor in order to easily move elements with flexbox' `order` property.
-			   
-			   The `box-shadow` is a neat hack because an `::after` element would
-			   increase the page width unless we set `overflow: hidden` to the entire
-			   page header which is bad for multiple reasons. */
-			box-shadow: 900px 0 0 0 $wcfHeaderMenuBackground;
-			
-			&::before {
-				background-color: $wcfHeaderMenuBackground;
-				bottom: 0;
-				content: "";
-				left: -100%;
-				position: absolute;
-				top: 0;
-				width: 100%;
-			}
-		}
-	}
-	
-	.pageHeaderSearchInputContainer .pageHeaderSearchInput {
-		width: 250px;
-	}
-}
-
 /* user panel */
 .userPanel {
 	background-color: $wcfHeaderMenuBackground;
@@ -258,11 +250,35 @@
 	}
 }
 
+/* LOGO */
+.pageHeaderLogo {
+	@include screen-lg {
+		flex: 0 0 50%;
+		
+		.pageHeaderLogoLarge {
+			max-width: 100%;
+		}
+		
+		.pageHeaderLogoSmall {
+			display: none;
+		}
+	}
+	
+	@include screen-md-down {
+		.pageHeaderLogoLarge {
+			display: none;
+		}
+		
+		.pageHeaderLogoSmall {
+			max-height: 30px;
+		}
+	}
+}
+
 /* SEARCH AREA */
 .pageHeaderSearch {
 	@include screen-lg {
 		flex: 0 0 50%;
-		margin-bottom: 30px;
 		text-align: right;
 		
 		.pageHeaderSearchLabel {
@@ -272,18 +288,18 @@
 }
 
 .pageHeaderSearchInputContainer {
-	background-color: $wcfHeaderSearchBoxBackground;
-	border-radius: 2px;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 	display: inline-flex;
-	padding: 3px;
 	position: relative;
 	
 	.pageHeaderSearchType {
 		display: flex;
 		
 		> .button {
+			align-items: center;
+			background-color: $wcfHeaderMenuLinkBackground;
 			border-radius: 2px 0 0 2px;
+			color: $wcfHeaderMenuLink;
+			display: flex;
 			max-width: 200px;
 			min-width: 140px;
 			overflow: hidden;
@@ -302,24 +318,30 @@
 				right: 8px;
 			}
 		}
-	}
-	
-	.pageHeaderSearchInputButton {
-		border-radius: 0 2px 2px 0;
-		padding: 4px 7px;
+		
+		> .button:hover,
+		&.dropdownOpen > .button {
+			background: $wcfHeaderMenuLinkBackgroundActive;
+			color: $wcfHeaderMenuLinkActive;
+		}
 	}
 	
 	.pageHeaderSearchInput {
-		background-color: transparent;
+		background-color: $wcfHeaderSearchBoxBackground;
 		border-width: 0;
 		color: $wcfHeaderSearchBoxText;
+		padding-bottom: 8px;
+		padding-top: 8px;
+		width: 250px;
 		
 		&:focus,
 		&:hover {
-			background-color: transparent;
+			background-color: $wcfHeaderSearchBoxBackgroundActive;
 			color: $wcfHeaderSearchBoxTextActive;
 			
-			/* set placeholder color */
+			/* set placeholder color, do not chain these with a comma
+			   as an unrecognized value causes the instruction to be
+			   discarded in entirety */
 			&::-webkit-input-placeholder { /* WebKit browsers */
 				color: $wcfHeaderSearchBoxPlaceholderActive;
 			}
@@ -331,7 +353,9 @@
 			}
 		}
 		
-		/* set placeholder color */
+		/* set placeholder color, do not chain these with a comma
+		   as an unrecognized value causes the instruction to be
+		   discarded in entirety */
 		&::-webkit-input-placeholder { /* WebKit browsers */
 			color: $wcfHeaderSearchBoxPlaceholder;
 		}
@@ -347,32 +371,43 @@
 			display: none;
 		}
 	}
+	
+	.pageHeaderSearchInputButton {
+		background-color: $wcfHeaderMenuLinkBackground;
+		border-radius: 0 2px 2px 0;
+		color: $wcfHeaderMenuLink;
+		padding: 4px 9px;
+		
+		&:hover {
+			background: $wcfHeaderMenuLinkBackgroundActive;
+			color: $wcfHeaderMenuLinkActive;
+		}
+	}
 }
 
-@include screen-md-down {
-	.pageHeader > div > div {
-		padding-bottom: 10px;
-		padding-top: 10px;
-	}
-	
-	.pageHeaderLogo {
-		flex: 1 1 auto;
-		margin: 0 10px;
-		order: 2;
-		text-align: center;
+@include screen-lg {
+	.searchBarOpen .pageHeaderSearchInputContainer {
+		position: fixed;
+		top: 50px !important;
 		
-		.pageHeaderLogoLarge {
-			display: none;
+		.pageHeaderSearchType > .button {
+			border-top-left-radius: 0;
 		}
 		
-		.pageHeaderLogoSmall {
-			display: inline;
+		.pageHeaderSearchInputButton {
+			border-top-right-radius: 0;
 		}
 	}
+}
+
+@include screen-md-down {
+	.pageHeaderPanel > .layoutBoundary {
+		/* pushes buttons to the left / right corner */
+		justify-content: space-between;
+	}
 	
 	.userPanel {
 		flex: 0 0 auto;
-		order: 3;
 		
 		&::before {
 			content: $fa-var-user;
@@ -385,7 +420,6 @@
 	
 	.mainMenu {
 		flex: 0 0 auto;
-		order: 1;
 		
 		&::before {
 			content: $fa-var-bars;
@@ -428,7 +462,53 @@
 		}
 	}
 	
-	.pageHeaderSearch:not(.open) {
-		display: none;
+	.pageHeaderSearch {
+		left: 0;
+		position: fixed;
+		right: 0;
+		top: 50px !important;
+		
+		.pageHeaderSearchInputContainer {
+			border-radius: 0;
+			display: flex;
+			flex-wrap: wrap;
+			
+			.pageHeaderSearchType {
+				flex: 0 0 100%;
+				
+				> .button {
+					border-radius: 0;
+					max-width: unset;
+					min-width: unset;
+					padding-bottom: 8px;
+					padding-top: 8px;
+					width: 100%;
+				}
+			}
+			
+			.pageHeaderSearchInput {
+				flex: 1 1 auto;
+			}
+			
+			.pageHeaderSearchInputButton {
+				border-radius: 0;
+			}
+		}
+		
+		&:not(.open) {
+			display: none;
+		}
+	}
+}
+
+@include screen-xs {
+	.pageHeaderPanel,
+	.pageHeaderFacade {
+		transition: transform .12s linear;
+	}
+	
+	.redactorActive .pageHeaderPanel,
+	.redactorActive .pageHeaderFacade {
+		transform: translateY(-120%);
 	}
 }
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
deleted file mode 100644
index 2671fb6c39..0000000000
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ /dev/null
@@ -1,216 +0,0 @@
-.pageHeader > div {
-	/* huge performance increase when scrolling */
-	will-change: transform;
-}
-
-@include screen-lg {
-	.pageHeaderContainer.stickyPageHeader {
-		z-index: 300;
-	}
-	
-	.pageHeader.sticky {
-		> div {
-			background-color: $wcfHeaderMenuBackground;
-			box-shadow: 0 0 10px rgba(0, 0, 0, .6);
-			left: 0;
-			position: fixed;
-			top: 0;
-			right: 0;
-			z-index: 301;
-		}
-		
-		
-		.layoutBoundary {
-			flex-wrap: nowrap;
-			min-height: 50px;
-			
-			// remove padding, the vertical alignment is done using `align-items`
-			padding-bottom: 0;
-			padding-top: 0;
-		}
-		
-		.pageHeaderContainerLeft,
-		.pageHeaderContainerRight {
-			align-items: center;
-			flex-direction: row;
-			justify-content: flex-start;
-		}
-		
-		.pageHeaderContainerRight {
-			min-width: 200px;
-			position: relative;
-		}
-		
-		.pageHeaderLogo {
-			display: none;
-			flex: 0 0 auto;
-			margin-bottom: 0;
-			order: 1;
-			
-			> a > .pageHeaderLogoLarge {
-				display: none;
-			}
-			
-			> a > .pageHeaderLogoSmall {
-				display: block;
-			}
-		}
-		
-		.mainMenu {
-			flex: 1 1 auto;
-			margin-right: 20px;
-			order: 2;
-			
-			.boxMenu {
-				> li > a {
-					align-items: center;
-					display: flex;
-					
-					> span {
-						flex: 0 0 auto;
-					}
-					
-					> .boxMenuLinkOutstandingItems {
-						margin-left: 5px;
-					}
-				}
-			}
-		}
-		
-		.userPanel {
-			flex: 0 0 auto;
-			order: 4;
-		}
-		
-		.pageHeaderSearch {
-			flex: 0 0 62px;
-			margin-bottom: 0;
-			margin-left: 10px;
-			order: 3;
-			
-			.pageHeaderSearchLabel {
-				background: $wcfHeaderMenuLinkBackground;
-				color: $wcfHeaderMenuLink;
-				cursor: pointer;
-				display: block;
-				height: 50px;
-				position: relative;
-				width: 62px;
-				
-				&:hover {
-					background: $wcfHeaderMenuLinkBackgroundActive;
-					color: $wcfHeaderMenuLinkActive;
-				}
-				
-				&::before {
-					color: inherit;
-					content: $fa-var-search;
-					display: block;
-					font-family: FontAwesome;
-					font-size: 28px;
-					line-height: 32px;
-					position: absolute;
-					right: 18px;
-					top: 50%;
-					transform: translateY(-50%);
-				}
-			}
-		}
-		
-		&:not(.searchBarOpen) .pageHeaderSearchInputContainer {
-			display: none;
-		}
-		
-		&.searchBarOpen .pageHeaderSearchInputContainer {
-			position: absolute;
-			
-			// Regular top calculation does not work because one of the parents
-			// is set to `position: fixed`, screwing up the entire calculation.
-			// We can work around this by using a relative top value of 100%
-			// which equals the total height of the parent container.
-			top: 100% !important;
-		}
-		
-		
-	}
-}
-
-// force sticky header on mobile, there is no difference when scrolled
-// all the way up and it might flicker when scrolling due to the inconsistent
-// scroll event being fired
-@include screen-md-down {
-	.pageHeaderContainer {
-		z-index: 300;
-		
-		// touch browser allow to scroll past the page top before they bounce back,
-		// but in that case the original background color is visible
-		background-color: transparent;
-	}
-	
-	.pageHeader {
-		flex-wrap: nowrap;
-		
-		> div {
-			background-color: $wcfHeaderBackground;
-			box-shadow: 0 0 10px rgba(0, 0, 0, .6);
-			left: 0;
-			max-width: 100vw;
-			position: fixed;
-			top: 0;
-			right: 0;
-			z-index: 301;
-		}
-	}
-	
-	.boxesHero {
-		background-color: $wcfHeaderBackground;
-	}
-}
-
-@include screen-xs {
-	.pageHeader > div {
-		transition: transform .12s ease-in-out;
-	}
-	
-	.redactorActive .pageHeader > div {
-		transform: translateY(-120%);
-	}
-}
-
-@include screen-md-down {
-	.pageHeaderSearch.open {
-		left: 0;
-		position: absolute;
-		right: 0;
-		
-		.pageHeaderSearchInputContainer {
-			border-radius: 0;
-			display: flex;
-			flex-wrap: wrap;
-			
-			.pageHeaderSearchType {
-				flex: 0 0 100%;
-				margin-bottom: 3px;
-				
-				> .button {
-					border-radius: 0;
-					max-width: unset;
-					min-width: unset;
-					width: 100%;
-					
-					// input field is larger on iOS
-					align-items: center;
-					display: flex;
-				}
-			}
-			
-			.pageHeaderSearchInput {
-				flex: 1 1 auto;
-			}
-			
-			.pageHeaderSearchInputButton {
-				border-radius: 0;
-			}
-		}
-	}
-}
diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 425519fd2d..8af1626154 100644
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -52,9 +52,8 @@
 	}
 	
 	@include screen-lg {
-		&.interactiveDropdownFixed {
-			position: fixed;
-		}
+		position: fixed;
+		top: 50px !important;
 	}
 }
 
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index f52b324778..9edbb8c90b 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -34,6 +34,7 @@
 	}
 	
 	> .anchorFixedHeader:target {
+		margin-top: -50px;
 		pointer-events: none;
 		position: relative;
 		z-index: 10;
@@ -41,34 +42,12 @@
 		&::after {
 			content: "";
 			display: block;
+			height: 50px;
 		}
 		
 		> .message {
 			pointer-events: all;
-		}
-		
-		@include screen-md-down {
-			margin-top: -52px;
-			
-			&::after {
-				height: 52px;
-			}
-			
-			> .message {
-				transform: translateY(52px);
-			}
-		}
-		
-		@include screen-lg {
-			margin-top: -50px;
-			
-			&::after {
-				height: 50px;
-			}
-			
-			> .message {
-				transform: translateY(50px);
-			}
+			transform: translateY(50px);
 		}
 	}
 	
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index 6ba2f05043..c1504defb5 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -2080,14 +2080,14 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderM
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLinkActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackground', 'rgba(19, 34, 48, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackgroundActive', 'rgba(55, 73, 95, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackgroundActive', 'rgba(44, 62, 80, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBorder', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(255, 255, 255, 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(66, 66, 66, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(66, 66, 66, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(44, 62, 80, 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(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholder', 'rgba(169, 169, 169, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholderActive', 'rgba(169, 169, 169, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackground', 'rgba(241, 246, 251, 1)');
-- 
2.20.1