Skip to content

Instantly share code, notes, and snippets.

@HenrikJoreteg

HenrikJoreteg/frontdeskbar.sass

Created March 18, 2011 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HenrikJoreteg/876128 to your computer and use it in GitHub Desktop.
Save HenrikJoreteg/876128 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
frontdeskbar.sass
=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