Rearranged values in variables.less

Renamed some variables, fixed many minor design issues
Work in progress btw ;)

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index 133f485a3d205bdb649697a64483992bb04eed91..d70926807882b19f688e367659b9e1a10e553e14 100644 (file)
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -81,12 +81,7 @@
                new WCF.Date.Time();
                new WCF.Effect.SmoothScroll();
                new WCF.Effect.BalloonTooltip();
-               $('<span class="pointer"><span></span></span>').appendTo('.innerError');
-               
-               //$('#sidebarContent').wcfSidebar();
-               
                WCF.Dropdown.init();
-               WCF.Effect.TopMenu.init();
                
                {event name='javascriptInit'}
        });

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index bffd54e080d5cdf6da70d164084630f0b4e4f023..6194a8a3fd5810874ad7893275eae58a5a9b3599 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3474,49 +3474,6 @@ WCF.Effect.BalloonTooltip.prototype = {
        }
 };
 
-/**
- * Modifies the top menu's opacity depending on scroll offset, might be removed later.
- */
-WCF.Effect.TopMenu = {
-               /**
-                * top menu reference
-                * @var jQuery
-                */
-               _topMenu: null,
-               
-               /**
-                * window reference
-                * @var jQuery
-                */
-               _window: null,
-               
-               /**
-                * Initializes the references and scroll event listener.
-                */
-               init: function() {
-                       this._topMenu = $('#topMenu');
-                       this._window = $(window);
-                       
-                       $(document).scroll($.proxy(this._scroll, this));
-               },
-               
-               /**
-                * Calculates scroll offset and executes dependent actions.
-                */
-               _scroll: function() {
-                       var $topOffset = this._window.scrollTop();
-                       if ($topOffset > 200) {
-                               this._topMenu.removeClass('userPanelReducedOpacity').addClass('userPanelOpaque');
-                       }
-                       else if ($topOffset > 100) {
-                               this._topMenu.removeClass('userPanelOpaque').addClass('userPanelReducedOpacity');
-                       }
-                       else {
-                               this._topMenu.removeClass('userPanelOpaque').removeClass('userPanelReducedOpacity');
-                       }
-               }
-       };
-
 /**
  * Handles clicks outside an overlay, hitting body-tag through bubbling.
  * 

diff --git a/wcfsetup/install/files/style/acl.less b/wcfsetup/install/files/style/acl.less
index fcc2b9734769d0f4653938e7175d2fbf0a91e642..4dc693a601b11a88f4c81fea902a427b5d4312f4 100644 (file)
--- a/wcfsetup/install/files/style/acl.less
+++ b/wcfsetup/install/files/style/acl.less
@@ -31,7 +31,7 @@
 
                &:hover,
                &.active:hover {
-                       background-color: @wcfHoverBackgroundColor;
+                       background-color: @wcfButtonHoverBackgroundColor;
                }
                
                &.active {
@@ -52,11 +52,11 @@
 
        li {
                &:hover {
-                       background-color: @wcfHoverBackgroundColor;
+                       background-color: @wcfButtonHoverBackgroundColor;
                }
                
                &.aclCategory {
-                       background-color: @wcfHighlightBackgroundColor;
+                       background-color: @wcfContainerHoverBackgroundColor;
                        padding: @wcfGapSmall;
                        text-align: left;
                }

diff --git a/wcfsetup/install/files/style/alerts.less b/wcfsetup/install/files/style/alerts.less
index b141e4725fcf254f1eb8b94505f18de8b975353f..d475dbd205550873d6874d35f5239cb157c709c6 100644 (file)
--- a/wcfsetup/install/files/style/alerts.less
+++ b/wcfsetup/install/files/style/alerts.less
@@ -1,96 +1,115 @@
 /* ############## System Notifications (Inline) ############## */
 
-/* Globals */
-
+/* default values */
 .info,
 .error,
 .success,
 .warning {
-       background-position: 13px center, left top;
-       background-repeat: no-repeat, repeat;
-       background-size: 24px, auto;
        border-radius: @wcfContainerBorderRadius;
-       border-width: 1px;
-       border-style: solid;
-       box-sizing: border-box;
+       font-weight: bold;
        line-height: 1.5;
        margin-top: @wcfGapMedium;
        padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall 50px;
+       position: relative;
+       
+       .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
        
-       .textShadow(@errorBackgroundColor);
+       &:after {
+               background-repeat: no-repeat, repeat;
+               background-size: 24px, auto;
+               content: "";
+               display: block;
+               height: 24px;
+               left: 13px;
+               position: absolute;
+               top: 4px;
+               width: 24px;
+       }
 }
 
-/* Types */
-
+/* types */
 .info {
-       background-color: @infoBackgroundColor;
-       background-image: url('../../icon/systemInfo.svg');
-       border-color: @infoBorderColor;
-       color: @infoColor;
+       color: @wcfInfoColor;
+       
+       .linearGradient(@wcfInfoBackgroundColor2, @wcfInfoBackgroundColor, @wcfInfoBackgroundColor2);
+       .textShadow(@wcfInfoBackgroundColor2);
+       
+       &:after {
+               background-image: url('../icon/systemInfo.svg');
+       }
 }
 
 .success {
-       background-color: @successBackgroundColor;
-       background-image: url('../../icon/systemSuccess.svg');
-       border-color: @successBorderColor;
-       color: @successColor;
+       color: @wcfSuccessColor;
+       
+       .linearGradient(@wcfSuccessBackgroundColor2, @wcfSuccessBackgroundColor, @wcfSuccessBackgroundColor2);
+       .textShadow(@wcfSuccessBackgroundColor2);
+       
+       &:after {
+               background-image: url('../icon/systemSuccess.svg');
+       }
 }
 
 .warning {
-       background-color: @warningBackgroundColor;
-       background-image: url('../../icon/systemWarning.svg');
-       border-color: @warningBorderColor;
-       color: @warningColor;
+       color: @wcfWarningColor;
+       
+       .linearGradient(@wcfWarningBackgroundColor2, @wcfWarningBackgroundColor, @wcfWarningBackgroundColor2);
+       .textShadow(@wcfWarningBackgroundColor2);
+       
+       &:after {
+               background-image: url('../icon/systemWarning.svg');
+       }
 }
 
 .error {
-       background-color: @errorBackgroundColor;
-       background-image: url('../../icon/systemError.svg');
-       border-color: @errorBorderColor;
-       color: @errorColor;
+       color: @wcfErrorColor;
+       
+       .linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
+       .textShadow(@wcfErrorBackgroundColor2);
+       
+       &:after {
+               background-image: url('../icon/systemError.svg');
+       }
 }
 
 /* Inline Errors */
 
 .innerError {
-       text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-       line-height: 1.5;
-       color: @errorColor;
-       border: 1px solid @errorBorderColor;
        border-radius: @wcfContainerBorderRadius;
-       background-color: @errorBackgroundColor;
-       background-image: url('../../icon/systemError.svg');
-       background-size: 16px;
-       background-position: 5px center;
-       background-repeat: no-repeat;
-       margin-top: 5px;
-       padding: 2px 10px 2px 25px;
+       clear: both;
+       color: @wcfErrorColor;
        display: table !important;
+       line-height: 1.5;
+       margin-top: 5px;
+       padding: 2px 10px;
        position: relative; /* Firefox support (from version 10 on) is buggy */
-       clear: both;
        
-       .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
-       .textShadow(@errorBackgroundColor);
+       .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
+       .linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
+       .textShadow(@wcfErrorBackgroundColor2);
+       
+       /* pointer */
+       &:after {
+               border: 7px solid transparent;
+               border-bottom-color: @wcfErrorBackgroundColor;
+               border-top-width: 0;
+               content: "";
+               display: inline-block;
+               left: 9px;
+               position: absolute;
+               top: -6px;
+               z-index: 100;
+       }
        
-       .pointer {      
-               border-width: 0 7px 7px;
-               border-style: solid;
-               border-color: @errorBackgroundColor transparent;
-               display: inline-block !important;
-               width: 0;
+       &:before {
+               border: 6px solid transparent;
+               border-bottom-color: @wcfErrorBackgroundColor;
+               border-top-width: 0;
+               content: "";
+               display: inline-block;
+               left: 10px;
                position: absolute;
-               top: -7px !important;
-               left: 10%;
-                       
-                       span {  
-                               border-width: 0 5px 5px;
-                               border-style: solid;
-                               border-color: @errorBackgroundColor transparent;
-                               display: inline-block;
-                               width: 0;
-                               position: absolute;
-                               top: 2px;
-                               left: -5px;
-                       }
+               top: -6px;
+               z-index: 101;
        }
 }

diff --git a/wcfsetup/install/files/style/badge.less b/wcfsetup/install/files/style/badge.less
index 57df5b2d67bb5a9d8660a51454e469405dd37ef2..3a614c2e43b0b5d71beead8a79c8000c8b2a6f62 100644 (file)
--- a/wcfsetup/install/files/style/badge.less
+++ b/wcfsetup/install/files/style/badge.less
@@ -1,6 +1,5 @@
 /* ############## Badges ############## */
 
-/* Globals */
 // sets default badge shadows depending on background color
 .badgeShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
        box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1);
@@ -9,11 +8,11 @@
        box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 1);
 }
 
-
+/* default values */
 .badge {
        background-color: @wcfColor;
        border-radius: 13px;
-       color: @wcfPageLinkHoverColor;
+       color: @wcfContentBackgroundColor;
        display: inline-block;
        font-size: @wcfSmallFontSize;
        padding: 1px 8px 2px;
@@ -23,26 +22,27 @@
        
        .badgeShadow(@wcfContentBackgroundColor);
        
+       /* colors */
        &.badgeUpdate {
-               background-color: #369;
-               color: @wcfPageLinkHoverColor;
+               background-color: @wcfTabularBoxBackgroundColor;
+               color: @wcfTabularBoxColor;
        }
        
        &.badgeGreen {
-               background-color: @successColor;
-               color: #fff;
+               background-color: @wcfSuccessBackgroundColor;
+               color: @wcfSuccessColor;
        }
        
        &.badgeRed {
-               background-color: @errorColor;
-               color: #fff;
+               background-color: @wcfErrorBackgroundColor;
+               color: @wcfErrorColor;
        }
        
        &.badgeInverse {
-               background-color: @wcfPageLinkHoverColor;
-               color: @wcfPageBackgroundColor;
+               background-color: @wcfTabularBoxColor;
+               color: @wcfTabularBoxBackgroundColor;
                
-               .badgeShadow(@wcfPageBackgroundColor);
+               .badgeShadow(@wcfTabularBoxBackgroundColor);
        }
 }
 

diff --git a/wcfsetup/install/files/style/breadcrumbs.less b/wcfsetup/install/files/style/breadcrumbs.less
index 5195efe2000d140ec62d33a1dbc51d2269e256e7..685446d2aa62529a60b0e625846877edc512157f 100644 (file)
--- a/wcfsetup/install/files/style/breadcrumbs.less
+++ b/wcfsetup/install/files/style/breadcrumbs.less
@@ -77,7 +77,7 @@
                        }
                        
                        &:first-child a {
-                               background-image: url('../../icon/home1.svg');
+                               background-image: url('../icon/home1.svg');
                                background-position: 7px center;
                                background-repeat: no-repeat;
                                background-size: 16px;

diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index f5721ae97e784ecd2e3947c84acb05f23e0c022e..356a24ace03360d2548b642eaca1e3cd8ffab7af 100644 (file)
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -1,5 +1,4 @@
-/* Normal State */
-
+/* default values */
 button,
 input[type='reset'],
 input[type='submit'],
@@ -16,39 +15,20 @@ input[type='button'],
        padding: 5px 13px;
 }
 
-/* ToDo: Special */
-
-.sidebar {
-       button,
-       input[type='reset'],
-       input[type='submit'],
-       input[type='button'],
-       .button {
-               font-size: 75% !important;
-               padding: 3px 7px;
-       }
-}
-
-.button img {
-       margin: -5px 1px -5px -5px;
-       vertical-align: middle;
-}
-
-/* Normal State */
-
+/* normal state */
 .button,
 input[type='reset']:not([disabled]),
 input[type='submit']:not([disabled]),
 input[type='button']:not([disabled]),
 button:not([disabled]) {
+       border-color: lighten(@wcfButtonBorderColor, 7%) @wcfButtonBorderColor darken(@wcfButtonBorderColor, 7%);
        color: @wcfButtonColor;
-       border-color: @wcfButtonBorderColor darken(@wcfButtonBorderColor, 7%) darken(@wcfButtonBorderColor, 14%);
        text-decoration: none;
        
        .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
-       .linearGradient(@wcfButtonBackgroundColor, lighten(@wcfButtonBackgroundColor, 5%), @wcfButtonBackgroundColor 2px, darken(@wcfButtonBackgroundColor, 5%));
+       .linearGradient(lighten(@wcfButtonBackgroundColor, 5%), lighten(@wcfButtonBackgroundColor, 10%), lighten(@wcfButtonBackgroundColor, 5%) 2px, @wcfButtonBackgroundColor);
        .textShadow(@wcfButtonBackgroundColor);
-       .transition(~"background-color, background-image, border, box-shadow, color", .1s);
+       .transition(~"background-color, background-image, border, box-shadow, color", .2s);
 }
 
 /* primary */
@@ -56,11 +36,12 @@ button:not([disabled]) {
 input[type='submit']:not([disabled]),
 input[type='button']:not([disabled]).buttonPrimary,
 button:not([disabled]).buttonPrimary {
+       border-color: lighten(@wcfButtonPrimaryBorderColor, 7%) @wcfButtonPrimaryBorderColor darken(@wcfButtonPrimaryBorderColor, 7%);
        color: @wcfButtonPrimaryColor;
-       border-color: @wcfButtonPrimaryBorderColor darken(@wcfButtonPrimaryBorderColor, 7%) darken(@wcfButtonPrimaryBorderColor, 14%);
        
-       .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" darken(@wcfButtonPrimaryBackgroundColor, 20%));
-       .linearGradient(@wcfButtonPrimaryBackgroundColor, lighten(@wcfButtonPrimaryBackgroundColor, 5%), @wcfButtonPrimaryBackgroundColor 2px, darken(@wcfButtonPrimaryBackgroundColor, 5%));
+       .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonPrimaryBorderColor);
+       .linearGradient(lighten(@wcfButtonPrimaryBackgroundColor, 5%), lighten(@wcfButtonPrimaryBackgroundColor, 10%), lighten(@wcfButtonPrimaryBackgroundColor, 5%) 2px, @wcfButtonPrimaryBackgroundColor);
+       .textShadow(@wcfButtonPrimaryBackgroundColor);
 }
 
 /* hover */
@@ -69,12 +50,13 @@ input[type='reset']:not([disabled]):hover,
 input[type='submit']:not([disabled]):hover,
 input[type='button']:not([disabled]):hover,
 button:not([disabled]):hover {
-       border-color: @wcfButtonHoverBorderColor darken(@wcfButtonHoverBorderColor, 7%) darken(@wcfButtonHoverBorderColor, 14%);
+       border-color: lighten(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor darken(@wcfButtonHoverBorderColor, 7%);
        color: @wcfButtonHoverColor;
        text-decoration: none;
        
-       .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);     
-       .linearGradient(@wcfButtonHoverBackgroundColor, lighten(@wcfButtonHoverBackgroundColor, 5%), @wcfButtonHoverBackgroundColor 2px, darken(@wcfButtonHoverBackgroundColor, 5%));
+       .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonHoverBorderColor);
+       .linearGradient(lighten(@wcfButtonHoverBackgroundColor, 5%), lighten(@wcfButtonHoverBackgroundColor, 10%), lighten(@wcfButtonHoverBackgroundColor, 5%) 2px, @wcfButtonHoverBackgroundColor);
+       .textShadow(@wcfButtonHoverBackgroundColor);
 }
 
 /* active */
@@ -84,9 +66,50 @@ input[type='submit']:not([disabled]):active,
 input[type='button']:not([disabled]):active,
 button:not([disabled]):active,
 .dropdownOpen .dropdownToggle.button {
-       color: darken(@wcfButtonHoverColor, 10%);
-       border-color: darken(@wcfButtonHoverBorderColor, 14%) darken(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor;
+       border-color: darken(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor lighten(@wcfButtonHoverBorderColor, 7%);
+       color: @wcfButtonHoverColor;
                
-       .boxShadowInset(0, 1px, rgba(0, 0, 0, .1), 3px);
-       .linearGradient(@wcfButtonHoverBackgroundColor, lighten(@wcfButtonHoverBackgroundColor, 5%), @wcfButtonHoverBackgroundColor 2px, darken(@wcfButtonHoverBackgroundColor, 5%), bottom);
+       .boxShadowNative(~"inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonHoverBorderColor);
+       .linearGradient(lighten(@wcfButtonHoverBackgroundColor, 5%), lighten(@wcfButtonHoverBackgroundColor, 10%), lighten(@wcfButtonHoverBackgroundColor, 5%) 2px, @wcfButtonHoverBackgroundColor, bottom);
+       .textShadow(@wcfButtonHoverBackgroundColor);
+}
+
+/* disabled state */
+input[type='reset']:disabled,
+input[type='submit']:disabled,
+input[type='button']:disabled,
+button:disabled {
+       border-color: darken(@wcfButtonBorderColor, 7%) @wcfButtonBorderColor lighten(@wcfButtonBorderColor, 7%);
+       cursor: not-allowed;
+       color: @wcfButtonColor;
+       
+       .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
+       .linearGradient(lighten(@wcfButtonBackgroundColor, 5%), lighten(@wcfButtonBackgroundColor, 10%), lighten(@wcfButtonBackgroundColor, 5%) 2px, @wcfButtonBackgroundColor, bottom);
+       .textShadow(@wcfButtonBackgroundColor);
+}
+
+
+/* button list */
+.buttonList {
+       > li {
+               display: inline;
+       }
+}
+
+/* sidebar buttons */
+.sidebar {
+       button,
+       input[type='reset'],
+       input[type='submit'],
+       input[type='button'],
+       .button {
+               font-size: 75% !important;
+               padding: 3px 7px;
+       }
+}
+
+/* button icons */
+.button img {
+       margin: -5px 1px -5px -5px;
+       vertical-align: middle;
 }
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/codebox.less b/wcfsetup/install/files/style/codebox.less
index 0e5e4648ccb8ad52e3b5879366f22c5b56096d05..97fd3366be2e3c905dd29dee528e48a6ab945df1 100644 (file)
--- a/wcfsetup/install/files/style/codebox.less
+++ b/wcfsetup/install/files/style/codebox.less
@@ -3,7 +3,7 @@
        padding: 0;
        
        hgroup {
-               background-color: @wcfHighlightBackgroundColor;
+               background-color: @wcfContainerHoverBackgroundColor;
                border-top-left-radius: @wcfContainerBorderRadius;
                border-top-right-radius: @wcfContainerBorderRadius;
                

diff --git a/wcfsetup/install/files/style/comments.less b/wcfsetup/install/files/style/comments.less
index 64581e98f4e3e6ebfb82d059b04a04052c8a68d4..ad527e349d631b1167fa0764fe35938e7dfad3b5 100644 (file)
--- a/wcfsetup/install/files/style/comments.less
+++ b/wcfsetup/install/files/style/comments.less
@@ -68,7 +68,7 @@
 }
 
 .commentResponseList > li:hover {
-       background-color: @wcfHighlightBackgroundColor !important;
+       background-color: @wcfContainerHoverBackgroundColor !important;
 }
 
 .commentList > li:not(.commentAdd):hover {

diff --git a/wcfsetup/install/files/style/content.less b/wcfsetup/install/files/style/content.less
index 114a119ffbbc7218ce668cd1e1af3ce976d6287d..4fa1c6e43e9e840951acaf407e7a14b4ca07bbda 100644 (file)
--- a/wcfsetup/install/files/style/content.less
+++ b/wcfsetup/install/files/style/content.less
@@ -2,7 +2,7 @@
        z-index: 110;
        
        > div {
-               background-color: @wcfHighlightBackgroundColor;
+               background-color: @wcfSidebarBackgroundColor;
                .boxShadowInset(0, 0, rgba(0, 0, 0, .1));
        }
        
@@ -14,7 +14,7 @@
        
        &.sidebarOrientationLeft {
                .content {
-                       border-left: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
+                       border-left: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
                        margin-left: 299px;
                }
                
@@ -25,7 +25,7 @@
        
        &.sidebarOrientationRight {
                .content {
-                       border-right: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
+                       border-right: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
                        margin-right: 299px;
                }
                

diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less
index 0f4ff84deac973bd3f7e371c2b598314e3c465f7..d7b06cfd63ff813ff3df17cae985abcc895c25fd 100644 (file)
--- a/wcfsetup/install/files/style/dialog.less
+++ b/wcfsetup/install/files/style/dialog.less
@@ -1,6 +1,6 @@
 .dialogContainer {
-       background-color: rgba(0, 0, 0, .4);
-       border: 23px solid transparent;
+       background: rgba(0, 0, 0, .4);
+       border: 14px solid transparent;
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
@@ -13,9 +13,9 @@
        .boxHeadline hgroup {
                h1,
                h1 a {
-                       color: @wcfDimmedColor;
+                       //color: @wcfDimmedColor;
                        
-                       .textShadow(@wcfPageBackgroundColor);
+                       //.textShadow(@wcfPageBackgroundColor);
                }
        }
 }
@@ -25,7 +25,7 @@
        background-image: url(../../images/header.png);
        background-position: top left;
        background-repeat: repeat-x;
-       border-bottom: 1px solid rgba(0, 0, 0, .1);
+       border-bottom: 1px solid rgba(0, 0, 0, .1); 
        display: block;
        padding: 10px 20px;
        position: relative;
@@ -33,12 +33,12 @@
        .borderRadius(7px, 0);
 
        .dialogTitle {
-               color: @wcfPageLinkHoverColor;
+               color: @wcfTabularBoxColor;
                display: block;
                font-size: @wcfHeadlineFontSize;
                font-weight: bold;
                
-               .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+               .textShadow(@wcfTabularBoxBackgroundColor);
        }
        
        .dialogCloseButton {
@@ -64,8 +64,8 @@
 }
 
 .dialogContent {
-       background-color: rgba(51, 51, 51, .9);
-       color: @wcfDialogColor;
+       background-color: @wcfContainerBackgroundColor;
+       color: @wcfColor;
        overflow: auto;
        padding: 10px 20px 20px;
 

diff --git a/wcfsetup/install/files/style/dropdown.less b/wcfsetup/install/files/style/dropdown.less
index a287c389f53409de0fcaa3a84ef4c7aea5ba623f..f849a93412ea15b5a4dbcf2b80559a648fc09656 100644 (file)
--- a/wcfsetup/install/files/style/dropdown.less
+++ b/wcfsetup/install/files/style/dropdown.less
@@ -84,7 +84,7 @@
 
        .dropdownMenu {
                background-color: @wcfDropdownBackgroundColor;
-               border: 1px solid @wcfContainerBorderColor;
+               border: 1px solid @wcfDropdownBorderColor;
                color: @wcfDropdownColor;
                display: none;
                float: left;
@@ -95,11 +95,11 @@
                z-index: 350;
                
                .borderRadius();
-               .boxShadow(0, 5px, rgba(0, 0, 0, .2), 10px);
+               .boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
                
                &:after {
                        border: 7px solid transparent;
-                       border-bottom-color: @wcfContainerBorderColor;
+                       border-bottom-color: @wcfDropdownBorderColor;
                        border-top-width: 0;
                        content: "";
                        display: inline-block;
@@ -129,7 +129,7 @@
                        }
                        
                        &.dropdownDivider {
-                               border-top: 1px dotted rgba(0, 0, 0, .2);
+                               border-top: 1px dotted @wcfDropdownBorderColor;
                                margin: @wcfGapTiny;
                        }
                        
@@ -140,6 +140,7 @@
                                cursor: pointer;
                                display: block;
                                padding: @wcfGapTiny @wcfGapMedium;
+                               text-decoration: none;
                                white-space: nowrap;
                                
                                .textShadow(@wcfDropdownBackgroundColor);
@@ -163,7 +164,7 @@
        
        &.dropdownOpen {
                .dropdownToggle {
-                       color: @wcfPageLinkHoverColor;
+                       //color: @wcfPageLinkHoverColor;
                }
                
                .dropdownMenu {

diff --git a/wcfsetup/install/files/style/forms.less b/wcfsetup/install/files/style/forms.less
index 7834f7318c18a671abd2fdd34bf368b08f38f3f9..0670b3da1bceb7f754670a89caebdf0edcc3fb76 100644 (file)
--- a/wcfsetup/install/files/style/forms.less
+++ b/wcfsetup/install/files/style/forms.less
@@ -187,7 +187,7 @@ input[type='radio'] ~ small {
                text-align: right;
 
                &:hover {
-                       background-color: @wcfHoverBackgroundColor;
+                       background-color: @wcfButtonHoverBackgroundColor;
                }
                
                &:first-child {
@@ -202,7 +202,7 @@ input[type='radio'] ~ small {
                        background-color: @wcfNavigationBackgroundColor;
                        
                        &:hover {
-                               background-color: @wcfHoverBackgroundColor;
+                               background-color: @wcfButtonHoverBackgroundColor;
                        }
                }
                

diff --git a/wcfsetup/install/files/style/inputs.less b/wcfsetup/install/files/style/inputs.less
index ce9655abe75e5e27354baba1f7c09187bccddcb0..65601083eb9e17f8009de86d72241ae9ff251e3d 100644 (file)
--- a/wcfsetup/install/files/style/inputs.less
+++ b/wcfsetup/install/files/style/inputs.less
@@ -1,6 +1,6 @@
 /* -- -- -- Form Elements -- -- -- */
-/* Globals */
 
+/* globals */
 button,
 input[type='reset'],
 input[type='submit'],
@@ -27,8 +27,7 @@ select[multiple] {
         font-family: 'Courier New', Courier, monospace;
 }
 
-/* Normal State */
-
+/* normal state */
 input[type='text'],
 input[type='search'],
 input[type='date'],
@@ -38,18 +37,17 @@ input[type='password'],
 textarea,
 select[multiple] {
        background-color: @wcfInputBackgroundColor;
-       border-color: darken(@wcfInputBorderColor, 20%) @wcfInputBorderColor lighten(@wcfInputBorderColor, 13%);
+       border-color: darken(@wcfInputBorderColor, 20%) @wcfInputBorderColor lighten(@wcfInputBorderColor, 10%);
        border-radius: 3px;
        border-style: solid;
        border-width: 1px;
        color: @wcfInputColor;
        
        .boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
-       .transition(~"background-color, border", .2s);
+       .transition(~"background-color, border, box-shadow", .2s);
 }
 
-/* Hover State */
-
+/* hover */
 input[type='text']:hover,
 input[type='search']:hover,
 input[type='date']:hover,
@@ -60,12 +58,9 @@ textarea:hover,
 select[multiple]:hover {
        background-color: @wcfInputHoverBackgroundColor;
        border-color: @wcfInputHoverBorderColor;
-       //border: 1px solid rgba(255, 170, 34, 1);
-       //background-color: rgba(255, 249, 244, 1);
 }
 
-/* Active & Focus State */
-
+/* active / focus */
 input[type='text']:active,
 input[type='search']:active,
 input[type='date']:active,
@@ -87,16 +82,10 @@ select[multiple]:focus {
        border-color: @wcfInputHoverBorderColor;
        outline: none;
        
-       // TODO: use mixin 
-       box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
-               -webkit-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
-               -moz-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
-               -ms-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
-               -o-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+       .boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
 }
 
-/* Read Only State */
-
+/* read only state */
 input[type='text'][readonly],
 input[type='search'][readonly],
 input[type='email'][readonly],
@@ -106,14 +95,12 @@ input[type='password'][readonly],
 textarea[readonly],
 select[multiple][readonly] {
        background-color: transparent;
-       // TODO:
-       border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1);
+       border-color: @wcfInputBorderColor;
        
-       .boxShadowInset(0, 1px, rgba(0, 0, 0, .01));
+       .boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
 }
 
-/* Disabled State */
-
+/* disabled state */
 input[type='text'][disabled],
 input[type='search'][disabled],
 input[type='date'][disabled],
@@ -122,11 +109,26 @@ input[type='url'][disabled],
 input[type='password'][disabled],
 textarea[disabled],
 select[multiple][disabled] {
-       background-color: rgba(255, 255, 255, .5);
-       border-color: rgba(255, 255, 255, .5);
+       background-color: transparent;
+       border-color: @wcfInputBorderColor;
+       color: @wcfDimmedColor;
+       
+       .boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
 }
 
-/* Width */
+/* error state */
+.formError input[type='text'],
+.formError input[type='search'],
+.formError input[type='email'],
+.formError input[type='url'],
+.formError input[type='password'],
+.formError textarea {
+       border-color: @wcfErrorBackgroundColor;
+       
+       .boxShadowNative(~"0 0 5px" fade(@wcfErrorBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
+}
+
+/* width */
 textarea {
        width: 99%;
 }
@@ -150,20 +152,7 @@ textarea {
        width: 100%;
 }
 
-/* Form Errors */
-
-.formError input[type='text'],
-.formError input[type='search'],
-.formError input[type='email'],
-.formError input[type='url'],
-.formError input[type='password'],
-.formError textarea {
-       border-color: @errorBorderColor;
-       background-color: @errorBackgroundColor;
-       color: @errorColor;
-}
-
-/* Upload Button */
+/* upload button */
 .uploadButton {
        overflow: hidden;
        position: relative;

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 7f20272d925dcba4d5847d43306e02f0b3941537..0500fb5b0cd60f8548848a6c7212c6bd7a416b65 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -1,12 +1,17 @@
 /* general definitions */
 body {
-       background-color: @wcfPageBackgroundColor;
-       background-image: url(../../images/header.png);
+       background-color: darken(@wcfPageBackgroundColor, 20%);
        background-repeat: repeat-x;
        color: @wcfPageColor;
        font-family: @wcfBaseFontFamily;
        font-size: @wcfBaseFontSize;
        line-height: @wcfBaseLineHeight;
+       
+       background-image: url(../../images/header.png), -webkit-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
+       background-image: url(../../images/header.png), -moz-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
+       background-image: url(../../images/header.png), -o-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
+       background-image: url(../../images/header.png), -ms-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
+       background-image: url(../../images/header.png), linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px); 
 }
 
 a {

diff --git a/wcfsetup/install/files/style/message.less b/wcfsetup/install/files/style/message.less
index 2deca5152dbd49b8aef4188a124b8c54b5cd9344..15ade9d173cd8d50f3d3ae57c7949fa2681e8afd 100644 (file)
--- a/wcfsetup/install/files/style/message.less
+++ b/wcfsetup/install/files/style/message.less
@@ -1,5 +1,5 @@
 .message {
-       background-color: @wcfHighlightBackgroundColor;
+       background-color: @wcfContainerHoverBackgroundColor;
        border: 1px solid @wcfContainerBorderColor;
        position: relative;
        
@@ -196,7 +196,7 @@
                padding: 1px 3px;
                text-decoration: none;
                
-               .textShadow(@wcfHighlightBackgroundColor);
+               .textShadow(@wcfContainerHoverBackgroundColor);
        }
        
        header .username a img {

diff --git a/wcfsetup/install/files/style/mixins.less b/wcfsetup/install/files/style/mixins.less
index 9ea461bcb8b741e3fad19646763c5fbce3facc14..4f96bd6e60e3d213f16dacf0509ce41f46f9173f 100644 (file)
--- a/wcfsetup/install/files/style/mixins.less
+++ b/wcfsetup/install/files/style/mixins.less
@@ -23,10 +23,10 @@
 
 // sets default text shadows depending on background color
 .textShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
-       text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+       text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
 }
 .textShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
-       text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+       text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
 }
 
 /* CSS 3 */

diff --git a/wcfsetup/install/files/style/navigation.less b/wcfsetup/install/files/style/navigation.less
index 508c83f8c62b5d31b401321a655f821b934083fc..86d30a218a1dd20ef8beb64bc90ff354270bc956 100644 (file)
--- a/wcfsetup/install/files/style/navigation.less
+++ b/wcfsetup/install/files/style/navigation.less
@@ -32,7 +32,7 @@
                                }
                                
                                a:hover {
-                                       background-color: @wcfHighlightBackgroundColor;
+                                       background-color: @wcfSidebarBackgroundColor;
                                }
                        }
                }
@@ -58,12 +58,12 @@
 }
 
 .navigationHeader {
-       border-bottom: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
+       border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
        border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
 }
        
 .navigationFooter {
-       border-top: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
+       border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
        border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
 }
 

diff --git a/wcfsetup/install/files/style/sidebar.less b/wcfsetup/install/files/style/sidebar.less
index 3f745caf34e5ada7070ee2244d8aa2041fa644a2..5745a896686e5d19a3b2edf87ab5ee8d131ffb67 100644 (file)
--- a/wcfsetup/install/files/style/sidebar.less
+++ b/wcfsetup/install/files/style/sidebar.less
@@ -6,7 +6,7 @@
                        margin-bottom: @wcfGapMedium;
                        
                        &:not(:last-child) {
-                               border-bottom: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
+                               border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
                        }
                        
                        &.sidebarContainer {
@@ -31,7 +31,7 @@
                                > h1 {
                                        text-transform: uppercase;
                                        
-                                       .textShadow(@wcfHighlightBackgroundColor);
+                                       .textShadow(@wcfSidebarBackgroundColor);
                                        
                                        .badge {
                                                float: right;
@@ -55,10 +55,10 @@
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        
-                                       .textShadow(@wcfHighlightBackgroundColor);
+                                       .textShadow(@wcfSidebarBackgroundColor);
                                        
                                        a {
-                                               .textShadow(@wcfHighlightBackgroundColor);
+                                               .textShadow(@wcfSidebarBackgroundColor);
                                        }
                                        
                                        small {
@@ -92,7 +92,7 @@
                                        margin: auto;
                                        text-transform: uppercase;
                                                
-                                       .textShadow(@wcfHighlightBackgroundColor);
+                                       .textShadow(@wcfSidebarBackgroundColor);
                                }
                        }
                }
@@ -107,7 +107,7 @@
                        margin-bottom: @wcfGapMedium;
                        padding: 0 @wcfGapMedium;
                        
-                       .textShadow(@wcfHighlightBackgroundColor);
+                       .textShadow(@wcfSidebarBackgroundColor);
                }
                
                .menuGroupItems {
@@ -163,7 +163,7 @@
                                > a,
                                > div {
                                        padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
-                                       .textShadow(@wcfHighlightBackgroundColor);
+                                       .textShadow(@wcfSidebarBackgroundColor);
                                }
                        }
                }

diff --git a/wcfsetup/install/files/style/sortable.less b/wcfsetup/install/files/style/sortable.less
index bb5d194ce055ea16ecd501285e71d3ef0a6f5298..5d5df3a54a1d365537c74f92e14062f93dbfb57f 100644 (file)
--- a/wcfsetup/install/files/style/sortable.less
+++ b/wcfsetup/install/files/style/sortable.less
@@ -1,16 +1,18 @@
 .sortableListContainer .sortablePlaceholder {
-       background-color: @warningBackgroundColor;
-       border: 1px solid @warningBorderColor;
+       /* todo */
+       background-color: @wcfWarningBackgroundColor;
+       border: 1px solid @wcfWarningBackgroundColor2;
        border-radius: 5px;
-       color: @warningColor;
+       color: @wcfWarningColor;
        margin: 3px 0;
        padding: 4px;
 }
 
 .sortablePlaceholder.sortableInvalidTarget {
-       background-color: @errorBackgroundColor;
-       border: 1px solid @errorBorderColor;
-       color: @errorColor;
+       /* todo */
+       background-color: @wcfErrorBackgroundColor;
+       border: 1px solid @wcfErrorBackgroundColor2;
+       color: @wcfErrorColor;
 }
 
 .sortableList {
@@ -24,7 +26,7 @@
 }
 
 .sortableNodeLabel {
-       border-bottom: 1px solid rgba(216, 231, 245, 1);
+       border-bottom: 1px solid rgba(216, 231, 245, 1); /* todo */
        padding: 7px 7px 11px 0;
        display: block;
 }
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/userPanel.less b/wcfsetup/install/files/style/userPanel.less
index df03061952b63390a17828ec840a41822f09d3d3..8bab00022ed09f0ded4c570c966417b3f238a4b7 100644 (file)
--- a/wcfsetup/install/files/style/userPanel.less
+++ b/wcfsetup/install/files/style/userPanel.less
@@ -1,5 +1,5 @@
 .userPanel {
-       background-color: rgba(0, 0, 0, .5);
+       background-color: @wcfUserPanelBackgroundColor;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        height: 30px;
        left: 0;
@@ -10,49 +10,32 @@
        z-index: 200;
        
        .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-       .transition(background-color, .3s);
        
-       &:hover {
-               background-color: rgba(0, 0, 0, .9);
-               
-               .searchBar input[type="search"] {
-                       background-color: darken(@wcfPageBackgroundColor, 5%);
-               }
-       }
-       
-       &.userPanelReducedOpacity {
-               background-color: rgba(0, 0, 0, .75);
-       }
-       
-       &.userPanelOpaque {
-               background-color: rgba(0, 0, 0, .9);
-       }
-       
-       ul {
+       ul.userPanelItems {
                display: block;
                float: left;
-               margin-top: -3px;
+               margin: -7px 0;
                
-               &.userPanelItems > li:not(:first-child) {
+               > li:not(:first-child) {
                        margin-left: @wcfGapSmall;
                }
                
                > li {
                        display: inline-block;
                        
-                       > a,
-                       > span,
-                       > span > a {
-                               color: lighten(@wcfPageLinkColor, 10%);
-                               cursor: pointer;
+                       > a {
+                               color: @wcfUserPanelColor;
                                display: block;
-                               padding: 10px 0;
+                               padding: 14px 7px 10px;
+                               text-shadow: 1px 1px 1px #000;
+                               height: 20px;
                                
-                               .transition(color, .1s);
-                               .textShadow(@wcfPageBackgroundColor);
+                               //.textShadow(@wcfUserPanelBackgroundColor);
+                               .transition(background-color, .2s);
                                
                                &:hover {
-                                       color: @wcfPageLinkHoverColor;
+                                       background-color: rgba(0, 0, 0, .4);
+                                       color: @wcfUserPanelHoverColor;
                                        text-decoration: none;
                                }
                        }
@@ -63,26 +46,22 @@
                float: right;
                
                input[type="search"] {
-                       /*border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
-                       padding: @wcfGapTiny @wcfGapSmall;*/
-                       
                        background-color: rgba(0, 0, 0, .5);
                        background-image: url("../icon/search2.svg");
                        background-repeat: no-repeat;
                        background-position: 7px 5px;
                        border: 1px solid rgba(0, 0, 0, .9);
                        border-radius: 30px;
-                       color: @wcfPageLinkHoverColor;
+                       color: @wcfUserPanelColor;
                        padding: 6px 12px 5px 26px;
                        width: 180px;
                        -webkit-appearance: textfield;
                        
                        .boxShadowNative(~"inset 0px 1px 3px rgba(0, 0, 0, .9), 0px 1px 0px rgba(255, 255, 255, .1)");
                        .transition(width, .25s, ease-out);
-                       .textShadow(@wcfPageBackgroundColor);
+                       .textShadow(@wcfUserPanelBackgroundColor);
        
                        &:focus {
-                               //background-image: none;
                                width: 280px;
                        }
                }
@@ -93,4 +72,12 @@
                margin-top: -3px;
                margin-bottom: -3px;
        }
+       
+       /* dropdown icon */
+       .dropdownToggle {
+               background-image: url('../icon/dropdown2.svg');
+               background-position: 97% center;
+               background-repeat: no-repeat;
+               padding-right: 15px !important;
+       }
 }
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/variables.less b/wcfsetup/install/files/style/variables.less
index 92e83a7b9d84e16b85ea9eef01032f87bb10e9d6..2cafa0ff68aa28c4ab3f0132c6ac5ad3431ab9e0 100644 (file)
--- a/wcfsetup/install/files/style/variables.less
+++ b/wcfsetup/install/files/style/variables.less
@@ -1,98 +1,136 @@
-/* backgrounds */
-@wcfPageBackgroundColor: rgba(41, 55, 74, 1);
-@wcfHighlightBackgroundColor: rgba(216, 231, 245, 1);
-@wcfHoverBackgroundColor: rgba(255, 229, 200, 1);
-@wcfContentBackgroundColor: rgba(255, 255, 255, 1);
-@wcfContainerBackgroundColor: rgba(252, 253, 254, 1);
-@wcfNavigationBackgroundColor: lighten(@wcfHighlightBackgroundColor, 3%);
-
-/* text colors */
-@wcfColor: rgba(102, 102, 102, 1);
-@wcfLinkColor: rgba(51, 102, 153, 1);
-@wcfLinkHoverColor: darken(@wcfLinkColor, 10%);
+/* ###### sxf values ###### */
+/* these values will be defined by the style editor (don't it touch here) */
+
+/* ### general (content) ### */
+@wcfContentBackgroundColor: #fff; // bg color for main content area
+@wcfColor: #666; // default text color
+@wcfLinkColor: #369; // default link color
+@wcfLinkHoverColor: #036; // link hover color
+
+/* ### containers ### */
+/* containers use the default text / link color, so the container bg color should be similar to the content bg color */
+@wcfContainerBackgroundColor: rgba(252, 253, 254, 1); // bg color for containers
+@wcfContainerAccentBackgroundColor: rgba(241, 245, 250, 1); // light variantion of the container bg color
+@wcfContainerHoverBackgroundColor: rgba(216, 231, 245, 1); // bg color for hover effects
+@wcfContainerBorderColor: #bcd; // border color for containers
+@wcfContainerBorderRadius: 5px; // border radius
+
+/* ### box header (table header) ### */
+@wcfTabularBoxBackgroundColor: #369; // bg color
+@wcfTabularBoxColor: #fff; // text / link color
+@wcfTabularBoxHoverColor: #fff; // link hover color
+
+/* ### user panel ### */
+@wcfUserPanelBackgroundColor: rgba(0, 0, 0, .5); // bg color
+@wcfUserPanelColor: #fff; // text / link color
+@wcfUserPanelHoverColor: #fff; // link hover color
+
+/* ### buttons ### */
+/* default */
+@wcfButtonBackgroundColor: #e3e3e3;
+@wcfButtonBorderColor: #bbb;
+@wcfButtonColor: #999;
+
+/* primary */
+@wcfButtonPrimaryBackgroundColor: rgba(216, 231, 245, 1);
+@wcfButtonPrimaryBorderColor: #69C;
+@wcfButtonPrimaryColor: #69C;
+
+/* hover */
+@wcfButtonHoverBackgroundColor: rgba(255, 229, 200, 1);
+@wcfButtonHoverBorderColor: #fa2;
+@wcfButtonHoverColor: #666;
+
+/* ### form elements ### */
+@wcfInputBackgroundColor: #fff;
+@wcfInputColor: #666;
+@wcfInputBorderColor: #ccc;
+@wcfInputHoverBackgroundColor: rgba(255, 249, 244, 1);
+@wcfInputHoverBorderColor: #fa2;
+
+/* ### fonts ### */
+@wcfBaseFontSize: 13px;
+@wcfBaseFontFamily: "Trebuchet MS", Arial, sans-serif;
+
+/* ### layouts ### */
+@wcfLayoutFluidGap: 21px;
+@wcfLayoutFixedWidth: 1200px;
+
+
+/* ###### additional variables ###### */
+/* values are taken from sxf variables; but you can overwrite them by individual less */
+
+/* ### outer page bg ### */
+@wcfPageBackgroundColor: @wcfContentBackgroundColor;
 @wcfPageColor: @wcfColor;
-@wcfPageLinkColor: lighten(@wcfLinkColor, 10%);
-@wcfPageLinkHoverColor: #fff;
-@wcfDimmedColor: lighten(@wcfColor, 15%);
-@wcfLabelColor: @wcfLinkColor;
+@wcfPageLinkColor: @wcfLinkColor;
+@wcfPageLinkHoverColor: @wcfLinkHoverColor;
+
+/* ### sidebar ### */
+@wcfSidebarBackgroundColor: @wcfContentBackgroundColor;
+
+/* ### additional text variables ### */
+@wcfDimmedColor: lighten(@wcfColor, 10%);
+@wcfLabelColor: @wcfColor;
 @wcfHeadlineColor: @wcfColor;
-@wcfDialogColor: lighten(@wcfLinkColor, 20%);
+@wcfHeadlineFontFamily: @wcfBaseFontFamily;
 
-/* font */
-@wcfBaseFontSize: 13px;
-@wcfBaseFontFamily: "Trebuchet MS", Arial, sans-serif;
+/* ### dropdown ### */
+@wcfDropdownBackgroundColor: @wcfContentBackgroundColor;
+@wcfDropdownColor: @wcfColor;
+@wcfDropdownBorderColor: @wcfContainerBorderColor;
+@wcfDropdownHoverBackgroundColor: @wcfContainerHoverBackgroundColor;
+
+
+/* ###### hardcoded values ###### */
+/* values are hardcoded; you can overwrite them by individual less */
+
+/* ### font size ### */
 @wcfBaseLineHeight: 1.27;
 @wcfHeadlineFontSize: 170%;
-@wcfHeadlineFontFamily: @wcfBaseFontFamily;
 @wcfSubHeadlineFontSize: 140%;
 @wcfTitleFontSize: 120%;
 @wcfSmallFontSize: 85%;
 
-/* container */
-@wcfContainerAccentBackgroundColor: darken(@wcfContainerBackgroundColor, 3%);
-@wcfContainerBorderColor: rgba(187, 204, 221, 1); //#CCC;
-@wcfContainerBorderRadius: 5px;
-@wcfContainerHoverBackgroundColor: @wcfHighlightBackgroundColor;
+/* ### form states and alerts ### */
+/* warning (orange) */
+@wcfWarningColor: #fff;
+@wcfWarningBackgroundColor: #ffb800;
+@wcfWarningBackgroundColor2: #a67800;
 
-/* tabular box */
-@wcfTabularBoxBackgroundColor: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
-@wcfTabularBoxColor: @wcfPageLinkHoverColor;
+/* error (red) */
+@wcfErrorColor: #fff;
+@wcfErrorBackgroundColor: #c95145;
+@wcfErrorBackgroundColor2: #913d37;
 
-/* dropdown */
-@wcfDropdownBackgroundColor: @wcfContentBackgroundColor;
-@wcfDropdownColor: @wcfColor;
-@wcfDropdownHoverBackgroundColor: @wcfHighlightBackgroundColor;
+/* success (green) */
+@wcfSuccessColor: #fff;
+@wcfSuccessBackgroundColor: #74a446;
+@wcfSuccessBackgroundColor2: #4d7730;
+
+/* info (blue) */
+@wcfInfoColor: #fff;
+@wcfInfoBackgroundColor: #4674a4;
+@wcfInfoBackgroundColor2: #304d77;
 
-/* gap */
+/* ### tooltip ### */
+@wcfTooltipBackgroundColor: rgba(0, 0, 0, .8);
+@wcfTooltipColor: white;
+
+/* ### gap ### */
 @wcfGapTiny: 4px;
 @wcfGapSmall: 7px;
 @wcfGapMedium: 14px;
 @wcfGapLarge: 21px;
 
-/* buttons */
-// default
-@wcfButtonBackgroundColor: lighten(#CCC, 15%);
-@wcfButtonBorderColor: #CCC;
-@wcfButtonColor: darken(#CCC, 20%);
-
-// hover
-@wcfButtonHoverBackgroundColor: lighten(@wcfHoverBackgroundColor, 5%);
-@wcfButtonHoverBorderColor: darken(@wcfHoverBackgroundColor, 10%);
-@wcfButtonHoverColor: darken(@wcfButtonColor, 10%);
-
-// primary
-@wcfButtonPrimaryBackgroundColor: lighten(@wcfHighlightBackgroundColor, 5%);
-@wcfButtonPrimaryBorderColor: darken(@wcfHighlightBackgroundColor, 10%);
-@wcfButtonPrimaryColor: darken(@wcfHighlightBackgroundColor, 30%);
-
-/* form elements */
-@wcfInputBackgroundColor: @wcfContentBackgroundColor;
-@wcfInputColor: @wcfColor;
-@wcfInputBorderColor: @wcfContainerBorderColor;
-@wcfInputHoverBackgroundColor: lighten(@wcfHoverBackgroundColor, 8%);
-@wcfInputHoverBorderColor: darken(@wcfHoverBackgroundColor, 25%);
-
-/* form states and alerts */
-@warningColor: #990;
-@warningBackgroundColor: #ffd;
-@warningBorderColor: #cc0;
-
-@errorColor: #c00;
-@errorBackgroundColor: #fee;
-@errorBorderColor: #f99;
-
-@successColor: #090;
-@successBackgroundColor: #efe;
-@successBorderColor: #0c0;
-
-@infoColor: #68b;
-@infoBackgroundColor: #def;
-@infoBorderColor: #9be;
-
-/* layouts */
-@wcfLayoutFluidGap: 21px;
-@wcfLayoutFixedWidth: 1000px;
 
-/* tooltip */
-@wcfTooltipBackgroundColor: rgba(0, 0, 0, .8);
-@wcfTooltipColor: white;
\ No newline at end of file
+/* ###### individual less values ###### */
+/* overwrite additional variables for blue sunrise */
+@wcfPageBackgroundColor: @wcfTabularBoxBackgroundColor;
+@wcfSidebarBackgroundColor: @wcfContainerHoverBackgroundColor;
+@wcfPageLinkColor: lighten(@wcfLinkColor, 10%);
+@wcfPageLinkHoverColor: @wcfUserPanelHoverColor;
+@wcfLabelColor: @wcfLinkColor;
+
+/* additional variables for blue sunrise */
+@wcfNavigationBackgroundColor: lighten(@wcfSidebarBackgroundColor, 3%);
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/wbb.less b/wcfsetup/install/files/style/wbb.less
index 324d0ef0338c59648004f5247469f30b33b5db1b..dccdf545e0e1630f8c1342d106641d4eb4c216aa 100644 (file)
--- a/wcfsetup/install/files/style/wbb.less
+++ b/wcfsetup/install/files/style/wbb.less
@@ -273,8 +273,8 @@
                position: absolute;
                text-transform: uppercase;
                
-               .linearGradient(darken(@wcfHighlightBackgroundColor, 10%), @wcfHighlightBackgroundColor, darken(@wcfHighlightBackgroundColor, 10%));
-               .textShadow(darken(@wcfHighlightBackgroundColor, 10%));
+               .linearGradient(darken(@wcfContainerHoverBackgroundColor, 10%), @wcfContainerHoverBackgroundColor, darken(@wcfContainerHoverBackgroundColor, 10%));
+               .textShadow(darken(@wcfContainerHoverBackgroundColor, 10%));
                .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
                
                &:before {