mirror of
https://github.com/wbbaddons/Tims-Chat.git
synced 2024-10-31 14:10:08 +00:00
Merge branch 'master' of github.com:wbbaddons/Tims-Chat
This commit is contained in:
Tim Düsterhus
commit
0af43da9e6
@ -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('<link id="jCounterCSS" rel="stylesheet" type="text/css" href="' + options.cssFile + '" >')
|
||||
|
||||
if !container
|
||||
if !this.hasClass('jCounterInput')
|
||||
this.addClass('jCounterInput')
|
||||
this.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)
|
||||
if !@.hasClass('jCounterInput')
|
||||
@.addClass('jCounterInput')
|
||||
@.wrap('<div class="jCounterContainer" style="width: ' + options.width + '"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
|
||||
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)
|
||||
@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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
77
file/style/jCounter.less
Normal 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%));
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,6 @@
|
||||
|
||||
{include file='headInclude' sandbox=false}
|
||||
<style type="text/css">
|
||||
@import url("{@$__wcf->getPath('wcf')}style/be.bastelstu.wcf.chat.css");
|
||||
#timsChatCopyrightDialog {
|
||||
background-image: url("{link controller='Chat' action='Copyright' sheep=1}{/link}");
|
||||
background-position: right 45px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user