1
0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-12-22 21:40:08 +00:00

Merge branch 'master' of github.com:wbbaddons/Tims-Chat

This commit is contained in:
Tim Düsterhus 2012-10-11 11:23:18 +02:00
commit 0af43da9e6
5 changed files with 139 additions and 104 deletions

View File

@ -12,33 +12,29 @@
max: 0 max: 0
counterClass: 'jCounter' counterClass: 'jCounter'
countUp: false countUp: false
cssFile: 'wcf/style/jCounter.css'
width: '100%' width: '100%'
, options , options
if this.attr('maxlength') if @.attr('maxlength')
max = this.attr('maxlength') max = @.attr('maxlength')
else max = options.max else max = options.max
if $('#jCounterCSS').length == 0
$('head').append('<link id="jCounterCSS" rel="stylesheet" type="text/css" href="' + options.cssFile + '" >')
if !container if !container
if !this.hasClass('jCounterInput') if !@.hasClass('jCounterInput')
this.addClass('jCounterInput') @.addClass('jCounterInput')
this.wrap('<div class="jCounterContainer" style="width: ' + options.width + '"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>'); @.wrap('<div class="jCounterContainer" style="width: ' + options.width + '"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
jCounterContainer = $(this).parent().children('.' + options.counterClass) jCounterContainer = $(@).parent().children('.' + options.counterClass)
else else
if typeof container is 'object' if typeof container is 'object'
jCounterContainer = container jCounterContainer = container
else else
jCounterContainer = $ container jCounterContainer = $ container
this.on 'keypress keyup', $.proxy () -> @.on 'keypress keyup', $.proxy () ->
if options.countUp if options.countUp
length = this.val().length length = @.val().length
else else
length = max - this.val().length length = max - @.val().length
if options.countUp && max > 0 if options.countUp && max > 0
if length < max / 2 if length < max / 2
@ -58,5 +54,5 @@
color = 3 color = 3
jCounterContainer.text(length).attr('class', '').addClass(options.counterClass + ' color-'+color) jCounterContainer.text(length).attr('class', '').addClass(options.counterClass + ' color-'+color)
, this , @
)(jQuery) )(jQuery)

View File

@ -27,10 +27,9 @@ .sidebar {
ul { ul {
li { li {
a { a {
color: #6699CC; color: @wcfLinkColor;
display: block; display: block;
padding: 5px 25px 7px 35px; padding: 5px 25px 7px 35px;
text-shadow: 0 1px 0 #FFFFFF;
} }
} }
} }
@ -57,8 +56,7 @@ #smilies {
margin: 5px 5px 0 0; margin: 5px 5px 0 0;
.icon24 { .icon24 {
//width: 16px; //.square(16px);
//height: 16px;
} }
} }
} }
@ -78,7 +76,7 @@ #timsChatInput {
#timsChatControls { #timsChatControls {
position: relative; position: relative;
border-radius: 5px 5px 0 5px; .borderRadius(5px, 5px, 0, 5px);
} }
#timsChatOptions { #timsChatOptions {
@ -95,7 +93,7 @@ #timsChatOptions {
> li { > li {
> a { > a {
&.button { &.button {
border-radius: 0 0 0 0; .borderRadius(0);
margin: 0; margin: 0;
padding-right: 7px; padding-right: 7px;
} }
@ -125,18 +123,18 @@ #timsChatUserList {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
margin-bottom: -5px; margin-bottom: -5px;
padding: 1px 0 6px; padding: 1px 0 6px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset; .boxShadowNative(0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset);
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid @wcfContentBackgroundColor;
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
text-shadow: none;
> li { > li {
a { a {
background-color: rgba(255, 255, 255, 0.22); 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; margin-left: 35px;
padding: 1px 0 1px 15px; padding: 1px 0 1px 15px;
color: #555; color: @wcfColor;
} }
} }
} }
@ -169,18 +167,16 @@ .timsChatMessage {
} }
.ajaxLoad { .ajaxLoad {
background: { background-position: right center;
position: right center; background-repeat: no-repeat;
repeat: no-repeat; background-size: auto 100%;
size: auto 100%;
}
} }
.timsChatSidebarTabs { .timsChatSidebarTabs {
height: 34px; height: 34px;
z-index: 131; z-index: 131;
position: relative; 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 & { .left & {
margin-right: 1px; margin-right: 1px;
@ -200,13 +196,12 @@ .timsChatSidebarTabs {
text-align: center; text-align: center;
a { a {
color: rgba(0, 0, 0, 0.4); color: fade(@wcfColor, 80%);
text-shadow: none; .textShadow(@wcfContentBackgroundColor);
height: 22px; height: 22px;
padding: 9px 0 0; padding: 9px 0 0;
-moz-transition-property: border-radius, background-color, font-size; -moz-transition-duration: .2s; .transition(~"border-radius .2s linear 0s, background-color .2s linear 0s, font-size", .2s);
-webkit-transition-property: border-radius, background-color, font-size; -webkit-transition-duration: .2s;
.collapsed & { .collapsed & {
border: none !important; border: none !important;
@ -214,10 +209,10 @@ .timsChatSidebarTabs {
} }
&.active a { &.active a {
background-color: #FFFFFF; background-color: @wcfContentBackgroundColor;
border-bottom: 1px solid #BBCCDD; border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
border-radius: 0 0 7px 7px; .borderRadius(0, 7px);
color: #000000; color: @wcfColor;
font-size: 130%; font-size: 130%;
font-weight: bold; font-weight: bold;
@ -226,8 +221,8 @@ .timsChatSidebarTabs {
} }
&:first-child.active a { &:first-child.active a {
border-radius: 0 0 7px 0; .borderRadius(0, 0, 7px, 0);
border-right: 1px solid #BBCCDD; border-right: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
.right & { .right & {
margin-left: -1px; margin-left: -1px;
@ -235,8 +230,8 @@ .timsChatSidebarTabs {
} }
&:last-child.active a { &:last-child.active a {
border-radius: 0 0 0 7px; .borderRadius(0, 0, 0, 7px);
border-left: 1px solid #BBCCDD; border-left: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
.left & { .left & {
margin-right: -1px; margin-right: -1px;
@ -244,20 +239,17 @@ .timsChatSidebarTabs {
} }
& .badge { & .badge {
.badgeBG(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
.badgeShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
position: relative; position: relative;
top: -1px; top: -1px;
color: #fff;
} }
&.active .badge { &.active .badge {
font-size: 65% !important; font-size: 65% !important;
color: #fff; .badgeBG(@wcfContentBackgroundColor);
background-color: #369; .badgeShadow(@wcfContentBackgroundColor);
-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);
} }
} }
} }
@ -275,7 +267,7 @@ #sidebarContainer {
overflow-y: auto; overflow-y: auto;
height: 420px; height: 420px;
width: 100%; width: 100%;
border-top: 1px solid #B8D3ED; border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
z-index: 131; z-index: 131;
position: relative; position: relative;
} }
@ -288,6 +280,7 @@ #sidebarContainer a {
#timsChatCopyright { #timsChatCopyright {
bottom: 5px; bottom: 5px;
position: absolute; position: absolute;
.textShadow(@wcfContentBackgroundColor);
} }
.sidebarContent { .sidebarContent {
@ -300,20 +293,20 @@ .sidebarContent {
box-shadow: none !important; box-shadow: none !important;
> a { > a {
background-color: rgba(255, 255, 255, 0.3); background-color: fade(@wcfContentBackgroundColor, 33.33%);
-moz-transition-property: background-color; -moz-transition-duration: .2s; .textShadow(fade(@wcfContentBackgroundColor, 33.33%));
-webkit-transition-property: background-color; -webkit-transition-duration: .2s; .transition(background-color, .2s);
&:hover { &:hover {
background-color: rgb(255, 255, 255); background-color: @wcfContentBackgroundColor;
} }
} }
} }
> li.activeMenuItem { > li.activeMenuItem {
> a { > a {
background-color: #FFFFFF !important; background-color: @wcfContentBackgroundColor !important;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); .boxShadowNative(0 0 5px rgba(0, 0, 0, 0.1));
} }
} }
} }
@ -342,4 +335,16 @@ html.fullscreen {
} }
} }
} }
} }
.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);
}

77
file/style/jCounter.less Normal file
View File

@ -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%));
}
}

View File

@ -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;
}
}

View File

@ -5,7 +5,6 @@
{include file='headInclude' sandbox=false} {include file='headInclude' sandbox=false}
<style type="text/css"> <style type="text/css">
@import url("{@$__wcf->getPath('wcf')}style/be.bastelstu.wcf.chat.css");
#timsChatCopyrightDialog { #timsChatCopyrightDialog {
background-image: url("{link controller='Chat' action='Copyright' sheep=1}{/link}"); background-image: url("{link controller='Chat' action='Copyright' sheep=1}{/link}");
background-position: right 45px; background-position: right 45px;