From 55b402a0654f889cbf81be64cd3d259f41379722 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Fri, 4 Dec 2015 18:37:17 +0100
Subject: [PATCH] Added box layout / box handler

---
 com.woltlab.wcf/templates/__box.tpl           |   7 ++
 com.woltlab.wcf/templates/footer.tpl          |  93 ++++++++++-----
 com.woltlab.wcf/templates/header.tpl          |  77 +++++++++----
 com.woltlab.wcf/templates/pageHeader.tpl      |  60 ++++++----
 .../install/files/acp/templates/styleAdd.tpl  |   1 +
 .../files/lib/acp/form/StyleAddForm.class.php |   2 +-
 .../install/files/lib/data/box/Box.class.php  | 109 +++++++++++++++++-
 .../install/files/lib/system/WCF.class.php    |  10 ++
 .../files/lib/system/box/BoxHandler.class.php |  50 ++++++++
 .../install/files/style/layout/layout.scss    |   2 +-
 .../files/style/layout/pageHeader.scss        |   7 +-
 .../files/style/layout/pageHeaderSticky.scss  |   7 +-
 wcfsetup/setup/db/install.sql                 |   1 +
 13 files changed, 350 insertions(+), 76 deletions(-)
 create mode 100644 com.woltlab.wcf/templates/__box.tpl
 create mode 100644 wcfsetup/install/files/lib/system/box/BoxHandler.class.php

diff --git a/com.woltlab.wcf/templates/__box.tpl b/com.woltlab.wcf/templates/__box.tpl
new file mode 100644
index 0000000000..d30caf733a
--- /dev/null
+++ b/com.woltlab.wcf/templates/__box.tpl
@@ -0,0 +1,7 @@
+<{if $box->showHeader}section{else}div{/if} class="box">
+	{if $box->showHeader}<h1 class="boxTitle">{$box->getTitle()}</h1>{/if}
+	
+	<div class="boxContent">
+		{@$box->getContent()}
+	</div>
+{if $box->showHeader}</section>{else}</div>{/if}
diff --git a/com.woltlab.wcf/templates/footer.tpl b/com.woltlab.wcf/templates/footer.tpl
index 55d2a2b5ce..af446c05f5 100644
--- a/com.woltlab.wcf/templates/footer.tpl
+++ b/com.woltlab.wcf/templates/footer.tpl
@@ -1,46 +1,87 @@
 				{event name='contents'}
 				
+				{hascontent}
+					<div class="boxesContentBottom">
+						{content}
+							{foreach from=$__wcf->getBoxHandler()->getBoxes('contentBottom') item=box}
+								{@$box}
+							{/foreach}
+						{/content}
+					</div>
+				{/hascontent}
+				
 				{if MODULE_WCF_AD && $__disableAds|empty}
 					{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.content')}
 				{/if}
 			</div>
-			
-			{if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
-				{@$__sidebar}
-			{/if}
+				
+			{hascontent}
+				<aside class="sidebar boxesSidebarRight">
+					{content}
+						{event name='boxesSidebarRightTop'}
+												
+						{* WCF2.1 Fallback *}
+						{if !$sidebar|empty}
+							{if !$sidebarOrientation|isset || $sidebarOrientation == 'right'}
+								{@$sidebar}
+							{/if}
+						{/if}
+						
+						{if !$sidebarRight|empty}
+							{@$sidebarLeft}
+						{/if}
+						
+						{foreach from=$__wcf->getBoxHandler()->getBoxes('sidebarRight') item=box}
+							{@$box}
+						{/foreach}
+					
+						{event name='boxesSidebarRightBottom'}
+					{/content}
+				</aside>
+			{/hascontent}
 		</div>
 	</section>
-	
-	<div id="pageFooterBoxes">
+				
+	{hascontent}
+		<div class="boxesBottom">
+			<div class="layoutBoundary">
+				{content}
+					{foreach from=$__wcf->getBoxHandler()->getBoxes('bottom') item=box}
+						{@$box}
+					{/foreach}
+				{/content}
+			</div>	
+		</div>
+	{/hascontent}
+				
+	<div class="boxesFooterBoxes">			
 		<div class="layoutBoundary">
 			{hascontent}
 				<ul>
-					{content}{if !$footerBoxes|empty}{@$footerBoxes}{/if}{/content}
+					{content}
+						{if !$footerBoxes|empty}{@$footerBoxes}{/if}
+					
+						{foreach from=$__wcf->getBoxHandler()->getBoxes('footerBoxes') item=box}
+							{@$box}
+						{/foreach}
+					{/content}
 				</ul>
 			{/hascontent}
 		</div>
 	</div>
 	
-	{*include file='pageNavbarBottom'*}
-	
-	{*<nav id="footerNavigation" class="navigation navigationFooter">
-		{include file='footerMenu'}
-		
-		<ul class="navigationIcons">
-			<li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-up"></span> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
-			{event name='navigationIcons'}
-		</ul>
-		
-		<ul class="navigationItems">
-			{if SHOW_CLOCK}
-				<li title="{lang}wcf.date.timezone.{@'/'|str_replace:'.':$__wcf->getUser()->getTimeZone()->getName()|strtolower}{/lang}"><p><span class="icon icon16 icon-time"></span> <span>{@TIME_NOW|plainTime}</span></p></li>
-			{/if}
-			{event name='navigationItems'}
-		</ul>
-	</nav>*}
-	
-	<footer id="pageFooter" class="footer{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
+	<footer id="pageFooter" class="footer">
 		<div class="layoutBoundary">
+			{hascontent}
+				<div class="boxesFooter">
+					{content}
+						{foreach from=$__wcf->getBoxHandler()->getBoxes('footer') item=box}
+							{@$box}
+						{/foreach}
+					{/content}
+				</div>
+			{/hascontent}
+			
 			<div class="footerContent">
 				{event name='footerContents'}
 				
diff --git a/com.woltlab.wcf/templates/header.tpl b/com.woltlab.wcf/templates/header.tpl
index 90a5f66136..c43f53daec 100644
--- a/com.woltlab.wcf/templates/header.tpl
+++ b/com.woltlab.wcf/templates/header.tpl
@@ -7,39 +7,74 @@
 	
 	{event name='afterPageHeader'}
 	
+	{hascontent}
+		<div class="boxesHeaderBoxes">
+			<div class="layoutBoundary">
+				{content}
+					{foreach from=$__wcf->getBoxHandler()->getBoxes('headerBoxes') item=box}
+						{@$box}
+					{/foreach}
+				{/content}
+			</div>
+		</div>
+	{/hascontent}
+	
 	{include file='pageNavbarTop'}
 	
+	{hascontent}
+		<div class="boxesTop">
+			<div class="layoutBoundary">
+				{content}
+					{foreach from=$__wcf->getBoxHandler()->getBoxes('top') item=box}
+						{@$box}
+					{/foreach}
+				{/content}
+			</div>
+		</div>
+	{/hascontent}
+	
 	<section id="main" class="main" role="main">
 		<div class="layoutBoundary">
-			{capture assign='__sidebar'}
-				{if $sidebar|isset}
-					<aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}false{else}true{/if}" data-sidebar-name="{$sidebarName}"{/if}>
+			{hascontent}
+				<aside class="sidebar boxesSidebarLeft">
+					{content}
 						{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
 						
-						{event name='sidebarBoxesTop'}
+						{event name='boxesSidebarLeftTop'}
 						
-						{@$sidebar}
+						{* WCF2.1 Fallback *}
+						{if !$sidebar|empty}
+							{if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
+								{@$sidebar}
+							{/if}	
+						{/if}
 						
-						{event name='sidebarBoxesBottom'}
+						{if !$sidebarLeft|empty}
+							{@$sidebarLeft}
+						{/if}
 						
-						{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
-					</aside>
-				
-				{if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
-					<script data-relocate="true">
-						require(['WoltLab/WCF/Ui/Collapsible/Sidebar'], function(UiCollapsibleSidebar) {
-							UiCollapsibleSidebar.setup();
-						});
-					</script>
-				{/if}
-				{/if}
-			{/capture}
+						{foreach from=$__wcf->getBoxHandler()->getBoxes('sidebarLeft') item=box}
+							{@$box}
+						{/foreach}
 			
-			{if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
-				{@$__sidebar}
-			{/if}
+						{event name='boxesSidebarLeftBottom'}
+			
+						{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
+					{/content}
+				</aside>
+			{/hascontent}
 			
 			<div id="content" class="content">
 				{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.header.content')}{/if}
 				
+				{hascontent}
+					<div class="boxesContentTop">
+						{content}
+							{foreach from=$__wcf->getBoxHandler()->getBoxes('contentTop') item=box}
+								{@$box}
+							{/foreach}
+						{/content}
+					</div>
+				{/hascontent}
+				
 				{event name='contents'}
diff --git a/com.woltlab.wcf/templates/pageHeader.tpl b/com.woltlab.wcf/templates/pageHeader.tpl
index 1b8091f325..4b1451e7f3 100644
--- a/com.woltlab.wcf/templates/pageHeader.tpl
+++ b/com.woltlab.wcf/templates/pageHeader.tpl
@@ -1,25 +1,41 @@
-<header id="pageHeader" class="pageHeader">
-	<div>
-		<div class="layoutBoundary">
-			{include file='pageHeaderLogo'}
-			
-			{include file='pageHeaderSearch'}
+<div class="pageHeaderContainer">
+	<header id="pageHeader" class="pageHeader">
+		<div>
+			<div class="layoutBoundary">
+				{include file='pageHeaderLogo'}
+				
+				{include file='pageHeaderSearch'}
+				
+				{include file='pageHeaderMenu'}
+				
+				{include file='pageHeaderUser'}
+			</div>
+		</div>
+		
+		<script data-relocate="true">
+			var header = elById('pageHeader');
+			var pageHeaderContainer = elBySel('.pageHeaderContainer');
+			header.style.setProperty('min-height', header.clientHeight + 'px');
 			
-			{include file='pageHeaderMenu'}
+			function stickyHeader() {
+				header.classList[(document.body.scrollTop > 50) ? 'add' : 'remove']('sticky');
+				pageHeaderContainer.classList[(document.body.scrollTop > 50) ? 'add' : 'remove']('stickyPageHeader');
+			}
 			
-			{include file='pageHeaderUser'}
-		</div>
-	</div>
+			stickyHeader();
+			window.addEventListener('scroll', stickyHeader);
+		</script>
+	</header>
 	
-	<script data-relocate="true">
-		var header = elById('pageHeader');
-		header.style.setProperty('min-height', header.clientHeight + 'px');
-		
-		function stickyHeader() {
-			header.classList[(document.body.scrollTop > 50) ? 'add' : 'remove']('sticky');
-		}
-		
-		stickyHeader();
-		window.addEventListener('scroll', stickyHeader);
-	</script>
-</header>
\ No newline at end of file
+	{hascontent}
+		<div class="boxesHero">
+			<div class="layoutBoundary">
+				{content}
+					{foreach from=$__wcf->getBoxHandler()->getBoxes('hero') item=box}
+						{@$box}
+					{/foreach}
+				{/content}
+			</div>
+		</div>
+	{/hascontent}
+</div>
diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index e66878db7c..831a65ef4a 100644
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -696,6 +696,7 @@
 		<script>
 			var styleRuleMap = {
 				'wcfHeaderBackground': '#spHeader { background-color: VALUE; }',
+				'wcfHeaderText': '#spHeader { color: VALUE; }',
 				'wcfHeaderLink': '#spHeader a { color: VALUE; }',
 				'wcfHeaderLinkActive': '#spHeader a:hover { color: VALUE; }',
 				'wcfHeaderSearchBoxBackground': '#spSearchBox { background-color: VALUE; }',
diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
index 58bcaf376b..481f03e27b 100644
--- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
@@ -443,7 +443,7 @@ class StyleAddForm extends AbstractForm {
 		];
 		
 		$this->colors = [
-			'wcfHeader' => ['background', 'link', 'linkActive'],
+			'wcfHeader' => ['background', 'text', 'link', 'linkActive'],
 			'wcfHeaderSearchBox' => ['background', 'text', 'backgroundActive', 'textActive'],
 			'wcfHeaderMenu' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
 			'wcfNavigation' => ['background', 'text', 'link', 'linkActive'],
diff --git a/wcfsetup/install/files/lib/data/box/Box.class.php b/wcfsetup/install/files/lib/data/box/Box.class.php
index d78173cb02..f1aed8a92c 100644
--- a/wcfsetup/install/files/lib/data/box/Box.class.php
+++ b/wcfsetup/install/files/lib/data/box/Box.class.php
@@ -2,6 +2,7 @@
 namespace wcf\data\box;
 use wcf\data\DatabaseObject;
 use wcf\system\WCF;
+use wcf\util\StringUtil;
 
 /**
  * Represents a box.
@@ -34,7 +35,7 @@ class Box extends DatabaseObject {
 	 * available box positions
 	 * @var string[]
 	 */
-	public static $availablePositions = ['header', 'headerBoxes', 'top', 'sidebarLeft', 'contentTop', 'sidebarRight', 'contentBottom', 'bottom', 'footerBoxes', 'footer'];
+	public static $availablePositions = ['hero', 'headerBoxes', 'top', 'sidebarLeft', 'contentTop', 'sidebarRight', 'contentBottom', 'bottom', 'footerBoxes', 'footer'];
 	
 	/**
 	 * Returns true if the active user can delete this box.
@@ -71,6 +72,112 @@ class Box extends DatabaseObject {
 		return $content;
 	}
 	
+	/**
+	 * Gets the title for the rendered version of this box.
+	 *
+	 * @return      string
+	 */
+	public function getTitle() {
+		if ($this->boxType == 'system') {
+			return $this->getController()->getTitle();
+		}
+		else if ($this->boxType == 'menu') {
+			return $this->getMenu()->getTitle();
+		}
+		else {
+			$boxContent = $this->getBoxContent();
+			if ($this->isMultilingual) {
+				if (isset($boxContent[WCF::getLanguage()->languageID])) return $boxContent[WCF::getLanguage()->languageID]['title'];
+			}
+			else {
+				if (isset($boxContent[0])) return $boxContent[0]['title'];
+			}
+		}
+		
+		return '';
+	}
+	
+	/**
+	 * Gets the content for the rendered version of this box.
+	 * 
+	 * @return      string
+	 */
+	public function getContent() {
+		if ($this->boxType == 'system') {
+			return $this->getController()->getContent();
+		}
+		else if ($this->boxType == 'menu') {
+			return $this->getMenu()->getContent();
+		}
+		else {
+			$boxContent = $this->getBoxContent();
+			$content = '';
+			if ($this->isMultilingual) {
+				if (isset($boxContent[WCF::getLanguage()->languageID])) $content = $boxContent[WCF::getLanguage()->languageID]['content'];
+			}
+			else {
+				if (isset($boxContent[0])) $content = $boxContent[0]['content'];
+			}
+			
+			if ($this->boxType == 'text') {
+				// @todo parse text
+				$content = StringUtil::encodeHTML($content);
+			}
+			
+			return $content;
+		}
+		
+		return '';
+	}
+	
+	/**
+	 * Returns the rendered version of this box.
+	 * 
+	 * @return      string
+	 */
+	public function __toString() {
+		if (!$this->hasContent()) return ''; 
+		
+		WCF::getTPL()->assign([
+			'box' => $this
+		]);
+		return WCF::getTPL()->fetch('__box');
+	}
+	
+	/**
+	 * Returns false if this box has no content.
+	 * 
+	 * @return      boolean
+	 */
+	public function hasContent() {
+		if ($this->boxType == 'system') {
+			return $this->getController()->hasContent();
+		}
+		else if ($this->boxType == 'menu') {
+			return $this->getMenu()->hasContent();
+		}
+		else {
+			$boxContent = $this->getBoxContent();
+			$content = '';
+			if ($this->isMultilingual) {
+				if (isset($boxContent[WCF::getLanguage()->languageID])) $content = $boxContent[WCF::getLanguage()->languageID]['content'];
+			}
+			else {
+				if (isset($boxContent[0])) $content = $boxContent[0]['content'];
+			}
+			
+			return ($content != '');
+		}
+	}
+	
+	public function getController() {
+		// @todo
+	}
+	
+	public function getMenu() {
+		// @todo
+	}
+	
 	/**
 	 * Returns the box with the given name.
 	 *
diff --git a/wcfsetup/install/files/lib/system/WCF.class.php b/wcfsetup/install/files/lib/system/WCF.class.php
index 385c5e4797..49e25b410c 100644
--- a/wcfsetup/install/files/lib/system/WCF.class.php
+++ b/wcfsetup/install/files/lib/system/WCF.class.php
@@ -7,6 +7,7 @@ use wcf\data\package\PackageCache;
 use wcf\data\package\PackageEditor;
 use wcf\system\application\ApplicationHandler;
 use wcf\system\application\IApplication;
+use wcf\system\box\BoxHandler;
 use wcf\system\cache\builder\CoreObjectCacheBuilder;
 use wcf\system\cache\builder\PackageUpdateCacheBuilder;
 use wcf\system\cronjob\CronjobScheduler;
@@ -803,6 +804,15 @@ class WCF {
 		return StyleHandler::getInstance();
 	}
 	
+	/**
+	 * Returns box handler.
+	 *
+	 * @return	BoxHandler
+	 */
+	public function getBoxHandler() {
+		return BoxHandler::getInstance();
+	}
+	
 	/**
 	 * Returns number of available updates.
 	 * 
diff --git a/wcfsetup/install/files/lib/system/box/BoxHandler.class.php b/wcfsetup/install/files/lib/system/box/BoxHandler.class.php
new file mode 100644
index 0000000000..fd4a852c23
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/box/BoxHandler.class.php
@@ -0,0 +1,50 @@
+<?php
+namespace wcf\system\box;
+use wcf\data\box\BoxList;
+use wcf\system\SingletonFactory;
+
+/**
+ * Handles boxes.
+ * 
+ * @author	Marcel Werk
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package	com.woltlab.wcf
+ * @subpackage	system.box
+ * @category	Community Framework
+ */
+class BoxHandler extends SingletonFactory {
+	/**
+	 * boxes grouped by position
+	 * @var array
+	 */
+	protected $boxes = [];
+	
+	/**
+	 * @inheritDoc
+	 */
+	protected function init() {
+		// load box layout for active page
+		$boxList = new BoxList();
+		$boxList->sqlOrderBy = 'showOrder';
+		$boxList->readObjects();
+		foreach ($boxList as $box) {
+			if (!isset($this->boxes[$box->position])) $this->boxes[$box->position] = [];
+			$this->boxes[$box->position][] = $box;
+		}
+	}
+	
+	/**
+	 * Returns boxes for the given position.
+	 * 
+	 * @param       string          $position
+	 * @return      \wcf\data\box\Box[]
+	 */
+	public function getBoxes($position) {
+		if (isset($this->boxes[$position])) {
+			return $this->boxes[$position];
+		}
+		
+		return [];
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index 1a4f27108a..4cabb9d4f3 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -30,7 +30,7 @@ a {
 }
 
 /* COLUMN LAYOUT */
-#pageHeader {
+.pageHeaderContainer {
 	flex: 0 0 auto;
 	z-index: 100;
 }
diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index aa1f4660ba..eec4684905 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -9,8 +9,9 @@
 .interactiveDropdown { display: none; }
 /* @TODO END */
 
-.pageHeader {
+.pageHeaderContainer {
 	background-color: $wcfHeaderBackground;
+	color: $wcfHeaderText;
 	
 	a {
 		color: $wcfHeaderLink;
@@ -19,7 +20,9 @@
 			color: $wcfHeaderLinkActive;
 		}
 	}
-	
+}
+
+.pageHeader {
 	> div > div {
 		align-items: center;
 		display: flex;
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index fc8086c189..6040a46835 100644
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -3,10 +3,13 @@
 	will-change: transform;
 }
 
+.pageHeaderContainer.stickyPageHeader {
+	z-index: 300;
+}
+
 #pageHeader.sticky {
 	flex-wrap: nowrap;
-	z-index: 300;
-	
+		
 	> div {
 		background-color: $wcfHeaderBackground; /* @TODO */
 		left: 0;
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index d7a3ea4e39..b0a070e1e2 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -1958,6 +1958,7 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapMedi
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapSmall', '7px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapTiny', '4px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderBackground', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderText', 'rgba(255, 255, 255, 1)');
 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)');
-- 
2.20.1