Style overhaul (WIP)

diff --git a/com.woltlab.wcf/templates/cms.tpl b/com.woltlab.wcf/templates/cms.tpl
index d92be9d231a1cbdc167ad2d70c13a1fa14253352..6535d44282ece5909951827cea0079c22afeabc8 100644 (file)
--- 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 f459fedb172ac53b68c168bbadb83ecdb8627d50..dabd84ca40d341ae0a750f52836c0041fc9f9477 100644 (file)
--- 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 b79336e5c9ea141f0ece22f4aeb0590075da5705..2ab68fa1dbfff31bc2a7826173cd65280203428b 100644 (file)
--- 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 2fc10fb1cec7413d9ea70ce8ae4dd3035d9e4a25..d9d212502ee1efc23c609ee8543a4abb74fbb36d 100644 (file)
--- 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 8d1bbbb239803e73af11701bc0001f2fa82aaa78..ea649aa33d38a72cf1d83245dc6ad6dc6a14cca2 100644 (file)
--- 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 2061b515eabc04231f38ce052220bcb3b53220ed..d7ad15758f35f2bb6df87253569b3a2bc7ff3b53 100644 (file)
--- 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 6c591bc5a479d7d5275aab1c49ae74f9215678a2..99135ba89a28a2e570ed754a46dc75af7aa58c98 100644 (file)
--- 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 d535b959a87fa201c20484e88cc7cc9c09b06573..561bb03310ba0c9bd2368b318f19ce197e281221 100644 (file)
--- 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 829d596d51808e8e69c614b950b8a2bdf5ca9165..05efd4a18153242a30cfb361873de4664b0b92ce 100644 (file)
--- 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 de7b46e2794a454f975b031852adcdf139678a34..0daefbd2043bad20ff0da10a7dfde4f924f2101d 100644 (file)
--- 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 2ab9a86f554dcd59e8bd971923e18422391f71a7..195e417695ef620d406b293cd13ccfd45ac8de3a 100644 (file)
--- 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 0634df45eea7e848c8a418078151731cbff9ce78..ae4a90f6aff0b6cc957667613271bb904949633a 100644 (file)
--- 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 a5e44e85fbc2cd1efca210ab7c9da3631b485efd..97e84ffb6e66e1daa65c8ccae0f0cf3cbe097a4e 100644 (file)
--- 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 68f0d69b27fc8412637a3569cc8785d9f89982ef..cd0aadf34bfd34e3cab3f6335c957d45b16c0d07 100644 (file)
--- 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 22dd406599107c710c47ee4f49c1a61814aed347..c5b30e204f3e5c3b3429f9a6f40fb6544cdda2be 100644 (file)
--- 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 56ed239776a9a3df70654910091cceb829666231..8dc0eb90fb7ed0659b278912bfe897fddd887b4b 100644 (file)
--- 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 e43fd3bd627179c64a326bc5eb756209869defb2..77f55adb3724c63daadd33ddcf1322dcf4ef254a 100644 (file)
--- 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 84df7855139bae195aad7a0198f4f705908256d5..7f13c7d6c143a2d716e0a2890af8e2c9c828bf62 100644 (file)
--- 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 8cbd350e19604586d0a129b240486af95f574709..cd3483d0f98a8352ef8a03bdc3d9d41ee8d966ba 100644 (file)
--- 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 5c2286ce66290ec5e63a3ea0044b4851d798510d..63d5e2148b360335fa568d942033020a24711a28 100644 (file)
--- 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)');