Style (editor) overhaul

* Added support for new style variables
* New menu design with support for larger widths
* Updated certain colors to better match overall style

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index c985412b0aa695bf04980866a25596c0aa40e8fc..ce56a86cb025989b7795df6d97818730ac00b0e0 100644 (file)
--- a/wcfsetup/install/files/acp/style/acpStyleEditor.css
+++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css
@@ -9,7 +9,7 @@
 #spLogo { flex: 0 0 50%; }
 #spLogo > img { height: 40px; }
 #spSearch { flex: 0 0 50%; }
-#spSearchBox { border-width: 0; }
+#spSearchBox { border: 1px solid #fff; }
 #spMenu { flex: 0 0 50%; }
 #spUser { flex: 0 0 50%; }
 #spLogo, #spSearch, #spMenu, #spUser { align-items: center; display: flex; }
@@ -17,11 +17,11 @@
 
 /* ### menu ### */
 #spMenu > ol > li:not(:last-child) { margin-right: 10px; }
-#spMenu > ol > li > a { font-size: 16px; font-weight: 300; }
+#spMenu > ol > li > a { font-size: 14px; font-weight: 400; padding: 2px 7px; }
 #spMenu > ol > li.active > a { font-weight: 600; }
 #spMenu > ol > li.active > a::after { content: "\f0d7"; display: inline-block; font-family: FontAwesome; margin-left: 5px; }
 #spMenu > ol > li.active { position: relative; }
-#spSubMenu { border: 1px solid #fff; padding: 3px 0; position: absolute; }
+#spSubMenu { border-bottom: 1px solid #fff; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2); margin-top: 3px; padding: 3px 0; position: absolute; }
 #spSubMenu > li > a { display: block; padding: 5px 20px; white-space: nowrap; width: 120px; }
 
 /* ### navigation ### */

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index c08350b98c26dfff3473e05fe5662b68d68501cf..4ca46ad947eca1e21c033401ed8848eda5555d06 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -134,7 +134,7 @@
                        WCF.System.PageNavigation.init('.pageNavigation');
                        
                        {if $__wcf->user->userID}
-                               new WCF.ACP.Search();
+                               //new WCF.ACP.Search();
                        {/if}
                        
                        {event name='javascriptInit'}

diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index dc65484925265a28ab4f1666844aa1af9754be35..efea2ee23a8af125d2c2a0552fbd443d699326f8 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -416,6 +416,19 @@
                                                </label>
                                        </dd>
                                </dl>
+                               <dl>
+                                       <dt><label for="wcfFontSizeSection">{lang}wcf.acp.style.globals.fontSizeSection{/lang}</label></dt>
+                                       <dd>
+                                               <input type="number" id="wcfFontSizeSection" name="wcfFontSizeSection" value="{@$variables[wcfFontSizeSection]}" class="tiny" />
+                                               <label class="selectDropdown">
+                                                       <select name="wcfFontSizeSection_unit" class="jsUnitSelect">
+                                                               {foreach from=$availableUnits item=unit}
+                                                                       <option value="{@$unit}"{if $variables[wcfFontSizeSection_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
+                                       </dd>
+                               </dl>
                                <dl>
                                        <dt><label for="wcfFontSizeTitle">{lang}wcf.acp.style.globals.fontSizeTitle{/lang}</label></dt>
                                        <dd>
@@ -471,12 +484,12 @@
                                                        <div id="spLogo"><img src="{@$__wcf->getPath()}acp/images/wcfLogo.png"></div>
                                                        <div id="spSearch"><input type="search" id="spSearchBox" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" autocomplete="off" data-region="wcfHeaderSearchBox"></div>
                                                        <div id="spMenu">
-                                                               <ol class="inlineList">
+                                                               <ol class="inlineList" data-region="wcfHeaderMenu">
                                                                        <li><a>Lorem</a></li>
                                                                        <li><a>Ipsum Dolor</a></li>
                                                                        <li class="active">
                                                                                <a>Sit Amet</a>
-                                                                               <ol id="spSubMenu" data-region="wcfHeaderMenu">
+                                                                               <ol id="spSubMenu" data-region="wcfHeaderMenuDropdown">
                                                                                        <li><a>Lorem</a></li>
                                                                                        <li><a>Ipsum</a></li>
                                                                                        <li class="active"><a>Dolor Sit</a></li>
@@ -548,7 +561,7 @@
                                                                </dl>
                                                                <dl data-region="wcfInputDisabled">
                                                                        <dt><label for="spInputDisabled">Dolor Sit Amet</label></dt>
-                                                                       <dd><input type="text" id="spInputDisabled" class="long" value="Disabled" disabled></dd>
+                                                                       <dd><input type="text" id="spInputDisabled" class="long" placeholder="Disabled" disabled></dd>
                                                                </dl>
                                                                
                                                                <div class="spHeadline">Button</div>
@@ -701,14 +714,21 @@
                                'wcfHeaderLink': '#spHeader a { color: VALUE; }',
                                'wcfHeaderLinkActive': '#spHeader a:hover { color: VALUE; }',
                                'wcfHeaderSearchBoxBackground': '#spSearchBox { background-color: VALUE; }',
+                               'wcfHeaderSearchBoxBorder': '#spSearchBox { border-color: VALUE; }',
                                'wcfHeaderSearchBoxText': '#spSearchBox { color: VALUE; }',
+                               'wcfHeaderSearchBoxPlaceholder': '#spSearchBox::-webkit-input-placeholder { color: VALUE; } __COMBO_RULE__ #spSearchBox::-moz-placeholder { color: VALUE; } __COMBO_RULE__ #spSearchBox:-ms-input-placeholder { color: VALUE; }',
                                'wcfHeaderSearchBoxBackgroundActive': '#spSearchBox:focus, #spSearchBox:hover { background-color: VALUE; }',
+                               'wcfHeaderSearchBoxBorderActive': '#spSearchBox:focus, #spSearchBox:hover { border-color: VALUE; }',
                                'wcfHeaderSearchBoxTextActive': '#spSearchBox:focus, #spSearchBox:hover { color: VALUE; }',
-                               'wcfHeaderMenuBackground': '#spSubMenu { background-color: VALUE; }',
-                               'wcfHeaderMenuBorder': '#spSubMenu { border-color: VALUE; }',
-                               'wcfHeaderMenuLink': '#spSubMenu li > a { color: VALUE; }',
-                               'wcfHeaderMenuBackgroundActive': '#spSubMenu li.active > a, #spSubMenu li > a:hover { background-color: VALUE; }',
-                               'wcfHeaderMenuLinkActive': '#spSubMenu li.active > a, #spSubMenu li > a:hover { color: VALUE; }',
+                               'wcfHeaderMenuBackground': '#spMenu > ol > li > a { background-color: VALUE; }',
+                               'wcfHeaderMenuLink': '#spMenu > ol > li > a { color: VALUE; }',
+                               'wcfHeaderMenuBackgroundActive': '#spMenu > ol > li.active > a, #spMenu > ol > li > a:hover { background-color: VALUE; }',
+                               'wcfHeaderMenuLinkActive': '#spMenu > ol > li.active > a, #spMenu > ol > li > a:hover { color: VALUE; }',
+                               'wcfHeaderMenuDropdownBackground': '#spSubMenu { background-color: VALUE; }',
+                               'wcfHeaderMenuDropdownBorder': '#spSubMenu { border-color: VALUE; }',
+                               'wcfHeaderMenuDropdownLink': '#spSubMenu li > a { color: VALUE; }',
+                               'wcfHeaderMenuDropdownBackgroundActive': '#spSubMenu li.active > a, #spSubMenu li > a:hover { background-color: VALUE; }',
+                               'wcfHeaderMenuDropdownLinkActive': '#spSubMenu li.active > a, #spSubMenu li > a:hover { color: VALUE; }',
                                'wcfNavigationBackground': '#spNavigation { background-color: VALUE; }',
                                'wcfNavigationText': '#spNavigation { color: VALUE; }',
                                'wcfNavigationLink': '#spNavigation a { color: VALUE; }',
@@ -733,6 +753,7 @@
                                'wcfInputBackground': '#spInput { background-color: VALUE; }',
                                'wcfInputBorder': '#spInput { border-color: VALUE; }',
                                'wcfInputText': '#spInput { color: VALUE; }',
+                               'wcfInputPlaceholder': '#spInput::-webkit-input-placeholder { color: VALUE; } __COMBO_RULE__ #spInput::-moz-placeholder { color: VALUE; } __COMBO_RULE__ #spInput:-ms-input-placeholder { color: VALUE; } __COMBO_RULE__ #spInputDisabled::-webkit-input-placeholder { color: VALUE; } __COMBO_RULE__ #spInputDisabled::-moz-placeholder { color: VALUE; } __COMBO_RULE__ #spInputDisabled:-ms-input-placeholder { color: VALUE; }',
                                'wcfInputBackgroundActive': '#spInput:focus, #spInput:hover { background-color: VALUE; }',
                                'wcfInputBorderActive': '#spInput:focus, #spInput:hover { border-color: VALUE; }',
                                'wcfInputTextActive': '#spInput:focus, #spInput:hover { color: VALUE; }',

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js
index 2b444b3f14d6f87ca397a49f0e74bfdac894b235..c12349efdecb09b880df9d77b9fcfdb9d0209e9f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js
@@ -149,14 +149,12 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio
                        function updateWrapperPosition(region) {
                                var fromTop = 0;
                                if (region !== null) {
-                                       console.debug(region.offsetTop + " | " + variablesWrapper.offsetTop);
                                        fromTop = (region.offsetTop - variablesWrapper.offsetTop) - 10;
-                                       window.dtdesign = region;
+                                       
                                        var styles = window.getComputedStyle(region);
                                        if (styles.getPropertyValue('position') === 'absolute' || styles.getPropertyValue('position') === 'relative') {
                                                fromTop += region.offsetParent.offsetTop;
                                        }
-                                       console.debug(fromTop);
                                }
                                
                                if (fromTop <= 0) {
@@ -169,7 +167,7 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio
                                        if (wrapperHeight + fromTop > maxHeight) {
                                                fromTop = maxHeight - wrapperHeight;
                                        }
-                                       console.debug(fromTop);
+                                       
                                        variablesWrapper.style.setProperty('transform', 'translateY(' + fromTop + 'px)');
                                }
                        }
@@ -215,13 +213,13 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio
                        
                        function updateCSSRule(identifier, value, isInit) {
                                if (styleRuleMap[identifier] === undefined) {
-                                       console.debug(identifier);
+                                       console.debug("Unknown style identifier: " + identifier);
                                        return;
                                }
                                
                                var rule = styleRuleMap[identifier].replace(/VALUE/g, value + ' !important');
                                if (!rule) {
-                                       console.debug(identifier);
+                                       console.debug("Invalid style rule for " + identifier);
                                        return;
                                }
                                
@@ -234,7 +232,15 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio
                                }
                                
                                for (var i = 0, length = rules.length; i < length; i++) {
-                                       style.sheet.insertRule(rules[i], style.sheet.cssRules.length);
+                                       try {
+                                               style.sheet.insertRule(rules[i], style.sheet.cssRules.length);
+                                       }
+                                       catch (e) {
+                                               // ignore errors for unknown placeholder selectors
+                                               if (!/[a-z]+\-placeholder/.test(rules[i])) {
+                                                       console.debug(e.message);
+                                               }
+                                       }
                                }
                        }
                        
@@ -246,7 +252,6 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio
                                        mutations.forEach(function(mutation) {
                                                if (mutation.attributeName === 'style') {
                                                        updateCSSRule(variableName, colorField.style.getPropertyValue('background-color'));
-                                                       console.debug(mutation);
                                                }
                                        });
                                });

diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
index d1e370fd4bc8e0dce3fbf189a275c57e581b03aa..d7c5e510616a87058189261a9ec2ee85efbfc7f5 100644 (file)
--- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
@@ -424,7 +424,7 @@ class StyleAddForm extends AbstractForm {
         */
        protected function setVariables() {
                $this->colorCategories = [
-                       'wcfHeader' => ['wcfHeader', 'wcfHeaderSearchBox', 'wcfHeaderMenu'],
+                       'wcfHeader' => ['wcfHeader', 'wcfHeaderSearchBox', 'wcfHeaderMenu', 'wcfHeaderMenuDropdown'],
                        'wcfNavigation' => 'wcfNavigation',
                        'wcfSidebar' => ['wcfSidebar', 'wcfSidebarDimmed', 'wcfSidebarHeadline'],
                        'wcfContent' => ['wcfContent', 'wcfContentDimmed', 'wcfContentHeadline'],
@@ -439,8 +439,9 @@ class StyleAddForm extends AbstractForm {
                
                $this->colors = [
                        'wcfHeader' => ['background', 'text', 'link', 'linkActive'],
-                       'wcfHeaderSearchBox' => ['background', 'text', 'backgroundActive', 'textActive'],
-                       'wcfHeaderMenu' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
+                       'wcfHeaderSearchBox' => ['background', 'border', 'text', 'placeholder', 'backgroundActive', 'borderActive', 'textActive'],
+                       'wcfHeaderMenu' => ['background', 'link', 'backgroundActive', 'linkActive'],
+                       'wcfHeaderMenuDropdown' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
                        'wcfNavigation' => ['background', 'text', 'link', 'linkActive'],
                        'wcfSidebar' => ['background', 'text', 'link', 'linkActive'],
                        'wcfSidebarDimmed' => ['text', 'link', 'linkActive'],
@@ -449,7 +450,7 @@ class StyleAddForm extends AbstractForm {
                        'wcfContentDimmed' => ['text', 'link', 'linkActive'],
                        'wcfContentHeadline' => ['border', 'text', 'link', 'linkActive'],
                        'wcfTabularBox' => ['borderInner', 'headline', 'backgroundActive', 'headlineActive'],
-                       'wcfInput' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
+                       'wcfInput' => ['background', 'border', 'text', 'placeholder', 'backgroundActive', 'borderActive', 'textActive'],
                        'wcfInputDisabled' => ['background', 'border', 'text'],
                        'wcfButton' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
                        'wcfButtonPrimary' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
@@ -469,6 +470,7 @@ class StyleAddForm extends AbstractForm {
                        'wcfFontSizeSmall',
                        'wcfFontSizeDefault',
                        'wcfFontSizeHeadline',
+                       'wcfFontSizeSection',
                        'wcfFontSizeTitle',
                        
                        'wcfLayoutFixedWidth',

diff --git a/wcfsetup/install/files/style/layout/pageFooter.scss b/wcfsetup/install/files/style/layout/pageFooter.scss
index 77432d393c8a3bd329461f231687388b009b17df..155939cc7bc3bbf091e4fbeb5355d0a7ace6a115 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageFooter.scss
+++ b/wcfsetup/install/files/style/layout/pageFooter.scss
@@ -16,5 +16,10 @@
        // copyright link styling
        .copyright {
                text-align: center;
+               
+               a {
+                       // use text color instead
+                       color: $wcfFooterText;
+               }
        }
 }

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index cd0aadf34bfd34e3cab3f6335c957d45b16c0d07..0f79c1337e492ab6bea2ab77c76265ccc119632e 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -1,11 +1,4 @@
 /* @TODO */
-#logo {
-       //width: 75px;
-       overflow: hidden;
-       > a > img {
-               //height: 60px;
-       }
-}
 .interactiveDropdown { display: none; }
 /* @TODO END */
 
@@ -22,19 +15,21 @@
        }
 }
 
-.pageHeader {
-       > div > div {
-               align-items: center;
-               display: flex;
-               flex-wrap: wrap;
-               padding: 20px 0;
-       }
+.pageHeader > div > div {
+       align-items: center;
+       display: flex;
+       flex-wrap: wrap;
+       padding: 20px 0;
 }
 
 /* LOGO */
 #logo {
+       // use a fixed width of 50% together with the search bar to force a wrap
        flex: 0 0 50%;
        
+       // gap between the two rows formed by the wrapping flex box
+       margin-bottom: 15px;
+       
        > a > img.small {
                display: none;
        }
@@ -42,7 +37,7 @@
 
 /* MAIN MENU */
 .mainMenu {
-       flex: 0 50%;
+       flex: 1 1 auto;
        
        .boxMenu {
                display: flex;
@@ -50,22 +45,25 @@
                > li {
                        @extend .wcfFontHeadline;
                        
-                       flex: 0 auto;
+                       flex: 0 0 auto;
                        
                        &:not(:last-child) {
-                               margin-right: $wcfGapMedium;
+                               margin-right: 12px;
                        }
                        
                        > a {
-                               transition: color .2s linear;
-                               text-decoration: none;
-                               text-transform: uppercase;
+                               background-color: $wcfHeaderMenuBackground;
+                               color: $wcfHeaderMenuLink;
+                               display: block;
+                               font-size: 16px;
+                               font-weight: 400;
+                               padding: 4px 12px;
                        }
                        
-                       &.active > a {
-                               @extend .wcfFontBold;
-                               
-                               color: $wcfHeaderLinkActive;
+                       &.active > a,
+                       &:hover > a {
+                               background-color: $wcfHeaderMenuBackgroundActive;
+                               color: $wcfHeaderMenuLinkActive;
                        }
                }
                
@@ -78,41 +76,44 @@
                                }
                                
                                .boxMenuDepth1 {
-                                       opacity: 1;
-                                       transition-delay: 0s;
                                        visibility: visible;
                                }
                        }
                        
                        > a {
-                               padding-right: 15px;
+                               padding-right: 21px;
                                
                                &::after {
                                        content: $fa-var-caret-down;
                                        display: block;
                                        font-family: FontAwesome;
                                        position: absolute;
-                                       right: 0;
-                                       top: 1px;
+                                       right: 6px;
+                                       top: 3px;
                                        transition: transform .12s ease-out;
                                }
                        }
                }
                
                .boxMenuDepth1 {
-                       background-color: $wcfHeaderMenuBackground;
-                       border: 1px solid $wcfHeaderMenuBorder;
-                       opacity: 0;
+                       background-color: $wcfHeaderMenuDropdownBackground;
+                       border-bottom: 1px solid $wcfHeaderMenuDropdownBorder;
                        padding: 3px 0;
                        position: absolute;
-                       transition: visibility .2s linear .2s, opacity .2s linear;
                        visibility: hidden;
                        
+                       // offset the menu to prevent the staircase effect when two elements with dark and light
+                       // colors are right below each other; uses a transparent border rather than a margin to
+                       // prevent losing the hover on the <li> causing the menu to collapse when the cursor is
+                       // right between the menu item and the menu itself
+                       background-clip: padding-box;
+                       border-top: 3px solid transparent;
+                       
                        @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
                        
                        > li {
                                > a {
-                                       color: $wcfHeaderMenuLink;
+                                       color: $wcfHeaderMenuDropdownLink;
                                        display: block;
                                        padding: 5px 20px;
                                        white-space: nowrap;
@@ -122,8 +123,8 @@
                                
                                &.active > a,
                                > a:hover {
-                                       background-color: $wcfHeaderMenuBackgroundActive;
-                                       color: $wcfHeaderMenuLinkActive;
+                                       background-color: $wcfHeaderMenuDropdownBackgroundActive;
+                                       color: $wcfHeaderMenuDropdownLinkActive;
                                        text-decoration: none;
                                }
                                
@@ -137,7 +138,7 @@
 
 /* USER PANEL */
 #topMenu {
-       flex: 0 50%;
+       flex: 0 0 auto;
        
        > ul {
                display: flex;
@@ -191,6 +192,7 @@
 
 /* SEARCH AREA */
 .pageHeaderSearch {
+       // use a fixed width of 50% together with the logo to force a wrap
        flex: 0 50%;
        text-align: right;
 }

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index c5b30e204f3e5c3b3429f9a6f40fb6544cdda2be..a3cd7f36c4f6e57039f273d8e1f898be1cda7398 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -25,6 +25,7 @@
        
        #logo {
                flex: 0 auto;
+               margin-bottom: 0;
                order: 1;
                
                > a > .large {

diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index 024e7ac4e07f379833be373606fc391b1c5b6b23..0b56e3e2d41f9ef0e658a9f4001102ad80fac2ac 100644 (file)
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -1967,18 +1967,18 @@ 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(176, 200, 224, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorder', 'rgba(127, 140, 141, 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(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(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 ('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 ('wcfButtonPrimaryTextActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonText', 'rgba(52, 73, 94, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonText', 'rgba(127, 140, 141, 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(44, 62, 80, 1)');
@@ -2004,19 +2004,23 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFam
 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 ('wcfFontSizeSection', '23px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeSmall', '12px');
 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)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxHeadlineLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxHeadlineText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxHeadlineText', 'rgba(189, 195, 199, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxText', 'rgba(189, 195, 199, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterHeadlineLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterHeadlineLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterHeadlineText', 'rgba(189, 195, 199, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterText', 'rgba(189, 195, 199, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapLarge', '21px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapMedium', '14px');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapSmall', '7px');
@@ -2025,11 +2029,15 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderB
 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)');
-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 ('wcfHeaderMenuBackground', 'rgba(52, 73, 94, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackgroundActive', 'rgba(41, 128, 185, 1)');
+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(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackgroundActive', 'rgba(55, 73, 95, 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(55, 73, 95, 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(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)');