From: Marcel Werk Date: Fri, 13 Apr 2012 20:51:02 +0000 (+0200) Subject: Rearranged values in variables.less X-Git-Tag: 2.0.0_Beta_1~1155 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=09100ebd98315ec68c4dcfabbdb0bc4f9345ffd3;p=GitHub%2FWoltLab%2FWCF.git 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 133f485a3d..d709268078 100644 --- 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(); - $('').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 bffd54e080..6194a8a3fd 100644 --- 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 fcc2b97347..4dc693a601 100644 --- 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 b141e4725f..d475dbd205 100644 --- 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 57df5b2d67..3a614c2e43 100644 --- 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 5195efe200..685446d2aa 100644 --- 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 f5721ae97e..356a24ace0 100644 --- 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 0e5e4648cc..97fd3366be 100644 --- 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 64581e98f4..ad527e349d 100644 --- 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 114a119ffb..4fa1c6e43e 100644 --- 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 0f4ff84dea..d7b06cfd63 100644 --- 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 a287c389f5..f849a93412 100644 --- 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 7834f7318c..0670b3da1b 100644 --- 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 ce9655abe7..65601083eb 100644 --- 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 7f20272d92..0500fb5b0c 100644 --- 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 2deca5152d..15ade9d173 100644 --- 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 9ea461bcb8..4f96bd6e60 100644 --- 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 508c83f8c6..86d30a218a 100644 --- 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 3f745caf34..5745a89668 100644 --- 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 bb5d194ce0..5d5df3a54a 100644 --- 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 df03061952..8bab00022e 100644 --- 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 92e83a7b9d..2cafa0ff68 100644 --- 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 324d0ef033..dccdf545e0 100644 --- 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 {