From 97fed0964998d96e2a16da5ce0c9387a9aa03944 Mon Sep 17 00:00:00 2001 From: max-m Date: Sun, 23 Sep 2012 17:37:18 +0200 Subject: [PATCH] LESS, FUCK YEAH! - Converted sass to less files - Adapted LESS files to use WCF style variables and less functions - Adapted chat.tpl and jCounter.jQuery.coffee to not include their css files (they are compiled by lessphp as of now) --- file/js/jCounter.jQuery.coffee | 26 +++-- ...f.chat.scss => be.bastelstu.wcf.chat.less} | 97 ++++++++++--------- file/style/jCounter.less | 77 +++++++++++++++ file/style/jCounter.scss | 42 -------- template/chat.tpl | 1 - 5 files changed, 139 insertions(+), 104 deletions(-) rename file/style/{be.bastelstu.wcf.chat.scss => be.bastelstu.wcf.chat.less} (64%) create mode 100644 file/style/jCounter.less delete mode 100644 file/style/jCounter.scss diff --git a/file/js/jCounter.jQuery.coffee b/file/js/jCounter.jQuery.coffee index 5eee1cf..6927f83 100644 --- a/file/js/jCounter.jQuery.coffee +++ b/file/js/jCounter.jQuery.coffee @@ -12,33 +12,29 @@ max: 0 counterClass: 'jCounter' countUp: false - cssFile: 'wcf/style/jCounter.css' width: '100%' , options - if this.attr('maxlength') - max = this.attr('maxlength') + if @.attr('maxlength') + max = @.attr('maxlength') else max = options.max - - if $('#jCounterCSS').length == 0 - $('head').append('') if !container - if !this.hasClass('jCounterInput') - this.addClass('jCounterInput') - this.wrap('
').parent().append('
' + max + '
'); - jCounterContainer = $(this).parent().children('.' + options.counterClass) + if !@.hasClass('jCounterInput') + @.addClass('jCounterInput') + @.wrap('
').parent().append('
' + max + '
'); + jCounterContainer = $(@).parent().children('.' + options.counterClass) else if typeof container is 'object' jCounterContainer = container else jCounterContainer = $ container - - this.on 'keypress keyup', $.proxy () -> + + @.on 'keypress keyup', $.proxy () -> if options.countUp - length = this.val().length + length = @.val().length else - length = max - this.val().length + length = max - @.val().length if options.countUp && max > 0 if length < max / 2 @@ -58,5 +54,5 @@ color = 3 jCounterContainer.text(length).attr('class', '').addClass(options.counterClass + ' color-'+color) - , this + , @ )(jQuery) \ No newline at end of file diff --git a/file/style/be.bastelstu.wcf.chat.scss b/file/style/be.bastelstu.wcf.chat.less similarity index 64% rename from file/style/be.bastelstu.wcf.chat.scss rename to file/style/be.bastelstu.wcf.chat.less index a1a0d2e..8af6f8b 100644 --- a/file/style/be.bastelstu.wcf.chat.scss +++ b/file/style/be.bastelstu.wcf.chat.less @@ -27,10 +27,9 @@ .sidebar { ul { li { a { - color: #6699CC; + color: @wcfLinkColor; display: block; padding: 5px 25px 7px 35px; - text-shadow: 0 1px 0 #FFFFFF; } } } @@ -57,8 +56,7 @@ #smilies { margin: 5px 5px 0 0; .icon24 { - //width: 16px; - //height: 16px; + //.square(16px); } } } @@ -78,7 +76,7 @@ #timsChatInput { #timsChatControls { position: relative; - border-radius: 5px 5px 0 5px; + .borderRadius(5px, 5px, 0, 5px); } #timsChatOptions { @@ -95,7 +93,7 @@ #timsChatOptions { > li { > a { &.button { - border-radius: 0 0 0 0; + .borderRadius(0); margin: 0; padding-right: 7px; } @@ -125,18 +123,18 @@ #timsChatUserList { background-color: rgba(0, 0, 0, 0.1); margin-bottom: -5px; padding: 1px 0 6px; - box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset; - border-bottom: 1px solid #FFFFFF; + .boxShadowNative(0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset); + border-bottom: 1px solid @wcfContentBackgroundColor; color: rgba(0, 0, 0, 0.4); - text-shadow: none; - + > li { a { background-color: rgba(255, 255, 255, 0.22); - border-radius: 5px 0 0 5px; + .textShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.1) + rgba(255, 255, 255, 0.22)) !important; + .borderRadius(5px, 0, 0, 5px); margin-left: 35px; padding: 1px 0 1px 15px; - color: #555; + color: @wcfColor; } } } @@ -169,18 +167,16 @@ .timsChatMessage { } .ajaxLoad { - background: { - position: right center; - repeat: no-repeat; - size: auto 100%; - } + background-position: right center; + background-repeat: no-repeat; + background-size: auto 100%; } .timsChatSidebarTabs { height: 34px; z-index: 131; position: relative; - box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); + .boxShadowNative(0 0 5px 0 rgba(0, 0, 0, 0.1)); .left & { margin-right: 1px; @@ -200,13 +196,12 @@ .timsChatSidebarTabs { text-align: center; a { - color: rgba(0, 0, 0, 0.4); - text-shadow: none; + color: fade(@wcfColor, 80%); + .textShadow(@wcfContentBackgroundColor); height: 22px; padding: 9px 0 0; - -moz-transition-property: border-radius, background-color, font-size; -moz-transition-duration: .2s; - -webkit-transition-property: border-radius, background-color, font-size; -webkit-transition-duration: .2s; + .transition(~"border-radius .2s linear 0s, background-color .2s linear 0s, font-size", .2s); .collapsed & { border: none !important; @@ -214,10 +209,10 @@ .timsChatSidebarTabs { } &.active a { - background-color: #FFFFFF; - border-bottom: 1px solid #BBCCDD; - border-radius: 0 0 7px 7px; - color: #000000; + background-color: @wcfContentBackgroundColor; + border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 6%); + .borderRadius(0, 7px); + color: @wcfColor; font-size: 130%; font-weight: bold; @@ -226,8 +221,8 @@ .timsChatSidebarTabs { } &:first-child.active a { - border-radius: 0 0 7px 0; - border-right: 1px solid #BBCCDD; + .borderRadius(0, 0, 7px, 0); + border-right: 1px solid darken(@wcfSidebarBackgroundColor, 6%); .right & { margin-left: -1px; @@ -235,8 +230,8 @@ .timsChatSidebarTabs { } &:last-child.active a { - border-radius: 0 0 0 7px; - border-left: 1px solid #BBCCDD; + .borderRadius(0, 0, 0, 7px); + border-left: 1px solid darken(@wcfSidebarBackgroundColor, 6%); .left & { margin-right: -1px; @@ -244,20 +239,17 @@ .timsChatSidebarTabs { } & .badge { + .badgeBG(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2)); + .badgeShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2)); position: relative; top: -1px; + color: #fff; } &.active .badge { font-size: 65% !important; - color: #fff; - background-color: #369; - - -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1); - -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1); - -ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1); - -o-box-shadow: 0 0 1px rgba(255, 255, 255, 1); - box-shadow: 0 0 1px rgba(255, 255, 255, 1); + .badgeBG(@wcfContentBackgroundColor); + .badgeShadow(@wcfContentBackgroundColor); } } } @@ -275,7 +267,7 @@ #sidebarContainer { overflow-y: auto; height: 420px; width: 100%; - border-top: 1px solid #B8D3ED; + border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%); z-index: 131; position: relative; } @@ -288,6 +280,7 @@ #sidebarContainer a { #timsChatCopyright { bottom: 5px; position: absolute; + .textShadow(@wcfContentBackgroundColor); } .sidebarContent { @@ -300,20 +293,20 @@ .sidebarContent { box-shadow: none !important; > a { - background-color: rgba(255, 255, 255, 0.3); - -moz-transition-property: background-color; -moz-transition-duration: .2s; - -webkit-transition-property: background-color; -webkit-transition-duration: .2s; + background-color: fade(@wcfContentBackgroundColor, 33.33%); + .textShadow(fade(@wcfContentBackgroundColor, 33.33%)); + .transition(background-color, .2s); &:hover { - background-color: rgb(255, 255, 255); + background-color: @wcfContentBackgroundColor; } } } > li.activeMenuItem { > a { - background-color: #FFFFFF !important; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + background-color: @wcfContentBackgroundColor !important; + .boxShadowNative(0 0 5px rgba(0, 0, 0, 0.1)); } } } @@ -342,4 +335,16 @@ html.fullscreen { } } } -} \ No newline at end of file +} + +.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 50%) { + background-color: lighten(@backgroundColor, lightness(@backgroundColor) / 2); +} + +.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 20%) { + background-color: lighten(@backgroundColor, 20%); +} + +.badgeBG(@backgroundColor) when (lightness(@backgroundColor) >= 50%) { + background-color: darken(@backgroundColor, lightness(@backgroundColor) / 2); +} diff --git a/file/style/jCounter.less b/file/style/jCounter.less new file mode 100644 index 0000000..542a886 --- /dev/null +++ b/file/style/jCounter.less @@ -0,0 +1,77 @@ +.jCounterContainer { + display: table; + + > div { + display: table-row; + } +} + +.jCounterInput { + height: 16px; + width: 100%; + position: relative; + z-index: 9999; + box-sizing: content-box !important; + .boxShadowInset(0, 1px, rgba(0, 0, 0, .1)); + .transition(~"border .2s linear 0, box-shadow", .2s); + + &:hover + .jCounter, &:focus + .jCounter { + border-color: @wcfInputHoverBorderColor; + } + + &:focus + .jCounter { + .boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)"); + } + + .formError & + .jCounter { + border-color: @wcfErrorBackgroundColor; + .boxShadowNative(~"0 0 5px" fade(@wcfErrorBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)"); + } + + .formSuccess & + .jCounter { + border-color: @wcfSuccessBackgroundColor; + .boxShadowNative(~"0 0 5px" fade(@wcfSuccessBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)"); + } +} + +.jCounterInput, .jCounter { + display: table-cell; +} + +.jCounter { + @backgroundColor: darken(@wcfInputBackgroundColor, 15%); + .textShadow(darken(@wcfInputBackgroundColor, 15%)); + text-align: center; + vertical-align: middle; + background-color: @backgroundColor; + padding: 0 5px 0 10px; + position: relative; + z-index: 0 !important; + .borderRadius(0px, 5px, 5px, 0px); + border-color: darken(@wcfInputBorderColor, 20%) @wcfInputBorderColor lighten(@wcfInputBorderColor, 10%); + border-style: solid; + border-width: 1px; + width: 30px; + + .adapt(@backgroundColor, @color) when (lightness(@backgroundColor) - lightness(@color) >= 40%) { + color: darken(@color, 8%); + content: "darken"; + } + + .adapt(@backgroundColor, @color) when (lightness(@backgroundColor) - lightness(@color) < 40%) { + color: lighten(@color, 8%); + content: "lighten"; + } + + &.color-1 { + .adapt(@backgroundColor, mix(@wcfInputColor, #666, 50%)); + } + + &.color-2 { + .adapt(@backgroundColor, mix(@wcfInputColor, #EECC22, 70%)); + } + + &.color-3 { + .adapt(@backgroundColor, mix(@wcfInputColor, #D40D12, 30%)); + } +} diff --git a/file/style/jCounter.scss b/file/style/jCounter.scss deleted file mode 100644 index f685e53..0000000 --- a/file/style/jCounter.scss +++ /dev/null @@ -1,42 +0,0 @@ -.jCounterContainer { - display: table; - - > div { - display: table-row; - } -} - -.jCounterInput { - height: 16px; - width: 100%; - position: relative; - z-index: 9999; - box-sizing: content-box !important; -} - -.jCounterInput, .jCounter { - display: table-cell; -} - -.jCounter { - text-align: center; - background-color: rgba(0, 0, 0, 0.7); - padding: 0 5px 0 10px; - position: relative; - z-index: 0 !important; - border-radius: 0px 5px 5px 0px; - border: 1px solid rgba(255, 255, 255, 0.3); - width: 30px; - - &.color-1 { - color: #FFFFFF; - } - - &.color-2 { - color: rgba(255,255,255,0.5); - } - - &.color-3 { - color: #D40D12; - } -} diff --git a/template/chat.tpl b/template/chat.tpl index 736fe1d..bad0d87 100644 --- a/template/chat.tpl +++ b/template/chat.tpl @@ -5,7 +5,6 @@ {include file='headInclude' sandbox=false}