Created
March 18, 2011 14:10
-
-
Save HenrikJoreteg/876128 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
=text_shadow($color, $x, $y, $blur) | |
:text-shadow = $color $x $y #{$blur}px | |
=box_shadow($color, $x, $y, $blur) | |
:-webkit-box-shadow = $color $x $y #{$blur}px | |
:-moz-box-shadow = $color $x $y #{$blur}px | |
:box-shadow = $color $x $y #{$blur}px | |
=inner_shadow($color, $x, $y, $blur) | |
:box-shadow = inset $color $x $y #{$blur}px | |
:-moz-box-shadow = inset $color $x $y #{$blur}px | |
:-webkit-box-shadow = inset $color $x $y #{$blur}px | |
=box_gradient($top, $bottom) | |
:background-image = "-moz-linear-gradient(top, #{$top}, #{$bottom})" | |
:background-image = "-webkit-gradient(linear,left top,left bottom,color-stop(0, #{$top}),color-stop(1, #{$bottom}))" | |
:-ms-filter = "progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$top}', EndColorStr='#{$bottom}')" | |
=roundall($round) | |
:-moz-border-radius = $round | |
:-webkit-border-radius = $round | |
:-khtml-border-radius = $round | |
:-o-border-radius = $round | |
:-border-radius = $round | |
:border-radius = $round | |
=round($roundtl, $roundtr, $roundbr, $roundbl) | |
:-webkit-border-top-left-radius = $roundtl | |
:-webkit-border-top-right-radius = $roundtr | |
:-webkit-border-bottom-left-radius = $roundbl | |
:-webkit-border-bottom-right-radius = $roundbr | |
:-moz-border-radius-topleft = $roundtl | |
:-moz-border-radius-topright = $roundtr | |
:-moz-border-radius-bottomleft = $roundbl | |
:-moz-border-radius-bottomright = $roundbr | |
:-border-top-left-radius = $roundtl | |
:-border-top-right-radius = $roundtr | |
:-border-bottom-left-radius = $roundbl | |
:-border-bottom-right-radius = $roundbr | |
:border-top-left-radius = $roundtl | |
:border-top-right-radius = $roundtr | |
:border-bottom-left-radius = $roundbl | |
:border-bottom-right-radius = $roundbr | |
=color_dot($color) | |
display: block | |
height: 14px | |
width: 14px | |
background-color: $color | |
box-shadow: inset 0 1px 1px #498B01, 0 1px 1px white | |
-o-box-shadow: inset 0 1px 1px #498B01, 0 1px 1px white | |
-webkit-box-shadow: inset 0 1px 1px #498B01, 0 1px 1px white | |
-moz-box-shadow: inset 0 1px 1px #498B01, 0 1px 1px white | |
-webkit-border-radius: 20px | |
-moz-border-radius: 20px | |
border-radius: 20px | |
&:hover | |
background-color: $color + #222 | |
// icon pulse animation | |
@-webkit-keyframes pulse | |
0% | |
padding: 0 | |
opacity: .4 | |
-webkit-box-shadow: #5AAE01 -40px -40px 1px | |
50% | |
-webkit-box-shadow: #5AAE01 -60px -60px 3px | |
padding: 20px | |
opacity: 0 | |
100% | |
-webkit-box-shadow: #5AAE01 0 0 0 | |
padding: 20px | |
opacity: 0 | |
#fd_chatbar | |
position: fixed | |
display: block !important | |
bottom: 0 | |
left: 0 | |
padding: 0 | |
margin: 0 | |
text-transform: none | |
vertical-align: baseline | |
line-height: 16px | |
width: 100% | |
height: 25px | |
border-top: 1px solid #fcfcfc | |
background: #eee | |
color: #130A00 | |
+box_gradient(#efefef, #eee) | |
font-family: Arial, sans-serif | |
font-size: 16px | |
border-bottom-width: 0 | |
border-left-width: 0 | |
border-right-width: 0 | |
font-weight: normal | |
outline: none | |
z-index: 2147483600 | |
+box_shadow(#aaa, 0, -1px, 1) | |
a | |
color: #2a2a2a | |
#fd_chatbubble | |
background: url(../images/frontdesk_client/chatbubble.png) 0 0 no-repeat | |
width: 170px | |
height: 107px | |
text-indent: -9999px | |
overflow: hidden | |
position: absolute | |
bottom: 25px | |
right: 300px | |
display: none | |
.fd_info | |
position: absolute | |
top: 5px | |
left: 100px | |
font-size: 13px | |
color: #3d3d3d | |
width: 250px | |
a | |
&:link, &:visited | |
color: #286e96 | |
font-weight: bold | |
text-decoration: none | |
&:active | |
text-decoration: underline | |
&:hover | |
text-decoration: underline | |
cursor: pointer | |
#fd_chatstatus | |
position: absolute | |
top: -1px | |
bottom: 0 | |
right: 20px | |
width: 305px | |
height: 26px | |
display: inline | |
margin: 0 | |
// background: #e5e5e5 | |
background: #eee | |
border-right: 1px solid #bebebe | |
border-left: 1px solid #bebebe | |
border-top: 1px solid #fcfcfc | |
cursor: pointer !important | |
&:hover | |
background: #ddd | |
border-left: 1px solid #999 | |
border-right: 1px solid #999 | |
border-top: 1px solid #fff | |
#fd_status_text | |
position: absolute | |
left: 30px | |
top: 5px | |
font-weight: bold | |
font-size: 13px | |
font-family: Arial, sans-serif | |
color: #444 | |
+text_shadow(#fff,0,1px,0) | |
cursor: pointer !important | |
&.fd_connected | |
#fd_gem_wrapper | |
display: block | |
width: 20px | |
height: 20px | |
top: 42px | |
left: 46px | |
position: absolute | |
cursor: auto | |
-webkit-border-radius: 40px | |
-webkit-animation-name: pulse | |
-webkit-animation-duration: 2s | |
-webkit-animation-iteration-count: infinite | |
.fd_status_gem | |
z-index: 2147483670 | |
position: absolute | |
top: 5px | |
left: 9px | |
width: 16px | |
height: 16px | |
&.fd_connected, &.fd_chatting | |
.fd_status_gem | |
//background-image: url(../images/frontdesk_client/status_available.png) | |
+color_dot(#61ba02) | |
&.fd_waiting | |
.fd_status_gem | |
background-image: url(../images/frontdesk_client/status_waiting.png) | |
+color_dot(#f0cc05) | |
&.fd_unavailable | |
.fd_status_gem | |
background-image: url(../images/frontdesk_client/status_unavailable.png) | |
+color_dot(#888) | |
&.fd_ended | |
.fd_status_gem | |
background-image: url(../images/frontdesk_client/status_ended.png) | |
+color_dot(#ea3535) | |
&.fd_error | |
.fd_status_gem | |
background-image: url(../images/frontdesk_client/status_error.png) | |
+color_dot(#ea3535) | |
&.fd_connecting, &.fd_authenticating | |
.fd_status_gem | |
background-image: url(../images/frontdesk_client/load.gif) | |
width: 16px | |
height: 16px | |
top: 4px | |
left: 8px | |
#fd_popup | |
background: #eee | |
+box_gradient(#efefef, #eee) | |
//+box_shadow(rgba(0,0,0,0.3),0,0px,5) | |
width: 275px | |
height: 295px | |
font-size: .8em | |
color: #3d3d3d | |
position: absolute | |
right: 20px | |
bottom: -350px | |
padding: 30px 15px 15px 15px | |
z-index: 2147483647 | |
border-right: 1px solid #bebebe | |
border-left: 1px solid #bebebe | |
border-bottom: 1px solid #eee | |
-webkit-transition: all .2s ease-in-out | |
&.fd_active | |
bottom: 0 | |
#fd_titlebar | |
position: absolute | |
top: 0 | |
left: -1px | |
bottom: auto | |
color: #fff | |
height: 20px | |
background: #a8a7a7 | |
display: block | |
+box_gradient(#a8a7a7,#929191) | |
margin: 0 | |
padding: 0 | |
width: 305px | |
font-size: 13px | |
border-top: 1px solid #bbb | |
border-right: 1px solid #999 | |
border-left: 1px solid #999 | |
border-bottom: 1px solid #777 | |
#fd_title | |
width: 305px | |
line-height: 20px | |
padding: 0 5px | |
text-align: center | |
display: block | |
position: absolute | |
font-size: 13px | |
font-weight: bold | |
+text_shadow(#999,0,-1px,0) | |
top: 0 | |
left: 0 | |
#fd_titlebar | |
&.fd_connecting, &.fd_ready, &.fd_thanks | |
background-position: 0 0 | |
&.fd_waiting | |
background-position: 0 -29px | |
&.fd_chatting | |
background-position: 0 -58px | |
#fd_chatboxcontrols | |
position: relative | |
width: 305px | |
height: 25px | |
display: block | |
z-index: 2147483647 | |
#fd_minimizechat | |
padding: 10px | |
background: url(../images/frontdesk_client/title_btn_minimize.png) no-repeat | |
background-position: center | |
cursor: pointer | |
width: 20px | |
height: 20px | |
position: absolute | |
top: -10px !important | |
right: 0px !important | |
#fd_closechat | |
padding: 10px | |
background: url(../images/frontdesk_client/title_btn_close.png) no-repeat | |
background-position: center | |
cursor: pointer | |
width: 20px | |
height: 20px | |
position: absolute | |
top: -10px !important | |
left: 0px !important | |
#fd_chatrequest | |
display: none | |
p:first-child | |
font-size: 13px | |
line-height: 16px | |
margin: 0 0 20px 0 | |
width: 275px | |
padding: 0 15px 8px 15px | |
position: relative | |
left: -15px | |
border-bottom: 2px groove #fff | |
#fd_how, #fd_nick | |
border: 1px solid #aaa | |
outline: 0px none | |
padding: 10px | |
font-size: 12px | |
color: #444 | |
width: 253px | |
+roundall(3px) | |
+inner_shadow(rgba(0,0,0,0.1),0,0,5) | |
font-family: Arial, sans-serif | |
&:focus | |
+inner_shadow(rgba(43,153,255,0.5),0,0,5) | |
label#fd_how_label, label#fd_nick_label | |
display: block | |
width: 275px | |
font-weight: bold | |
color: #444 | |
+text_shadow(#fff,0,1px,0) | |
margin-bottom: 5px | |
input, textarea | |
&.fd_error | |
border: 1px solid red | |
#fd_waiting | |
display: none | |
.muc | |
height: 275px | |
margin: 0 | |
padding: 0 | |
position: relative | |
&.blur | |
opacity: .4 | |
.name, button | |
color: #000 | |
.unreadCount | |
background-color: #ED5522 | |
border-radius: 20px | |
color: #FFF | |
display: none | |
height: 25px | |
left: -11px | |
line-height: 25px | |
position: absolute | |
text-align: center | |
top: -11px | |
vertical-align: middle | |
width: 25px | |
.close | |
display: block | |
height: 20px | |
position: absolute | |
right: 0 | |
top: 5px | |
width: 20px | |
.name | |
color: #61ba02 | |
font-size: 16px | |
padding: 10px 0 0 10px | |
text-shadow: 1px 1px #EEE | |
.status | |
display: block | |
font-size: 11px | |
font-style: italic | |
padding: 5px 0 0 10px | |
.chatting_with | |
display: none | |
.chat_list | |
position: absolute | |
top: 0 | |
left: 0 | |
overflow-x: hidden | |
overflow-y: auto | |
height: 200px | |
width: 253px | |
z-index: 0 | |
background-color: #F7F7F7 | |
list-style: none | |
margin: 0 !important | |
padding: 10px | |
border: 1px solid #aaa | |
outline: 0px none | |
+round(3px,3px,0,0) | |
+inner_shadow(rgba(0,0,0,0.2),0,0,5) | |
.fd_chat_message | |
position: relative | |
margin: 0px 1px 0 0px | |
&.me | |
text-align: right | |
.fd_chat_name | |
color: #777777 | |
right: 0 | |
.fd_chat_time | |
left: 0 | |
text-align: left | |
.fd_chat_text | |
color: #777777 | |
.fd_chat_header | |
position: relative | |
margin: 15px 0 0 0 | |
width: 100% | |
height: 16px | |
+ .fd_chat_text | |
border-top: 1px solid #f0f0f0 | |
.fd_chat_time | |
padding-top: 3px | |
position: absolute | |
right: 0 | |
top: 0 | |
font-size: 9px | |
color: #999999 | |
text-align: right | |
.fd_chat_name | |
position: absolute | |
left: 0 | |
top: 0 | |
font-size: 13px | |
font-weight: bold | |
color: #4f829d | |
.fd_chat_text | |
display: block | |
clear: both | |
font-size: 12px | |
border-bottom: 1px solid #f0f0f0 | |
padding: 1px 0px | |
line-height: 1.4 | |
color: #111 | |
word-wrap: break-word | |
input | |
+round(0px,0px,0px,3px) | |
bottom: 20px | |
height: 25px | |
line-height: 25px | |
left: 0 | |
margin: 0 | |
padding: 0 4px | |
position: absolute | |
width: 210px | |
border: 1px solid #aaa | |
outline: 0px none | |
font-size: 12px | |
color: #444 | |
vertical-align: middle | |
&:focus | |
+inner_shadow(rgba(43,153,255,0.5),0,0,5) | |
button | |
border: 1px solid #555 | |
+round(0px,0px,3px,0px) | |
position: absolute | |
right: 0px | |
bottom: 20px | |
height: 27px | |
width: 52px | |
padding: 0 | |
font-size: 12.8px | |
font-weight: bold | |
font-style: normal | |
background-color: #999 | |
color: #FFFFFF |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment