Created
June 9, 2014 22:25
-
-
Save bsara/1ad99855fecc29084fd3 to your computer and use it in GitHub Desktop.
Firehose Chat "Google" Theme
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
/* TINY RESET */ | |
#fchat > * { | |
border: 0; | |
font-family: sans-serif; | |
font-size: 100%; | |
margin: 0; | |
padding: 0; | |
vertical-align: baseline; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
/* END TINY RESET */ | |
#fchat { | |
bottom: 0; | |
overflow: hidden; | |
position: fixed; | |
right: 20px; | |
width: 270px; | |
max-width: 270px; | |
max-height: 292px; | |
z-index: 1000; | |
} | |
#fchat-header { | |
min-height: 36px; | |
font-size: 18px; | |
padding: 7px 30px 7px 10px; | |
border-top-left-radius: 6px; | |
border-top-right-radius: 6px; | |
position: relative; | |
cursor: pointer; | |
background: #E4746B; | |
color: #fff; | |
} | |
.fchat-expanded:after { | |
content: '×'; | |
display: block; | |
font-family: "Helvetica Neue","Helvetica"; | |
font-size: 28px; | |
font-weight: 500; | |
line-height: 0; | |
position: absolute; | |
right: 10px; | |
top: 15px; | |
} | |
.fchat-collapsed:after { | |
content: '▴'; | |
display: block; | |
font-family: "Helvetica Neue","Helvetica"; | |
font-size: 36px; | |
font-weight: 200; | |
line-height: 0; | |
position: absolute; | |
right: 10px; | |
top: 15px; | |
} | |
#fchat-feed { | |
padding: 14px; | |
font-size: 16px; | |
height: 200px; | |
overflow-y: auto; | |
line-height: 20px; | |
background: #E7E7E7; | |
} | |
.fchat-response, | |
.fchat-question { | |
position: relative; | |
background: #ffffff; | |
box-shadow: 2px 2px 2px rgba(0,0,0,0.1); | |
border-radius: 4px; | |
padding: 12px; | |
margin-bottom: 14px; | |
} | |
#fchat-feed div:last-child { | |
margin-bottom: 0 !important; | |
} | |
.fchat-question { | |
margin-left: 24px; | |
margin-right: 2px; | |
text-align: right; | |
} | |
.fchat-response { | |
margin-right: 24px; | |
margin-left: 2px; | |
} | |
.fchat-response:after, | |
.fchat-question:after { | |
right: 100%; | |
bottom: 12px; | |
border: solid transparent; | |
content: " "; | |
height: 0; | |
width: 0; | |
position: absolute; | |
pointer-events: none; | |
border-color: rgba(255, 255, 255, 0); | |
border-right-color: #ffffff; | |
border-width: 8px; | |
margin-top: -10px; | |
} | |
.fchat-question:after { | |
left: 100%; | |
bottom: 12px; | |
border: solid transparent; | |
content: " "; | |
height: 0; | |
width: 0; | |
position: absolute; | |
pointer-events: none; | |
border-color: rgba(255, 255, 255, 0); | |
border-left-color: #fff; | |
border-width: 8px; | |
margin-top: -8px; | |
} | |
#fchat-footer { | |
padding: 10px; | |
background-color: #CCCCCD; | |
padding: 10px !important; | |
} | |
#fchat-message { | |
background: #FFFFFF; | |
border: 0; | |
border-radius: 2px; | |
color: #333333; | |
font: sans-serif; | |
font-size: 100%; | |
height: 36px; | |
line-height: 20px; | |
margin: 0; | |
padding: 8px 10px; | |
vertical-align: baseline; | |
width: 250px; | |
-mox-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
box-shadow: 2px 2px 2px rgba(0,0,0,0.05); | |
} | |
#fchat-type-status { | |
color: #333; | |
padding: 0 0 0 5px; | |
line-height: 60px; | |
} | |
#fchat-type-status.hidden { | |
display: none; | |
} | |
.fchat-message-not-confirmed { | |
opacity: .4; | |
} | |
.fh-animation-closed-minimized { | |
position: relative; | |
-webkit-animation: slide-fh-chat .5s ease-out; | |
-moz-animation: slide-fh-chat .5s ease-out; | |
-o-animation: slide-fh-chat .5s ease-out; | |
animation: slide-fh-chat .5s ease-out; | |
} | |
.fh-animation-minimized-closed { | |
position: relative; | |
-webkit-animation: slide-fh-chat .5s ease-in; | |
-moz-animation: slide-fh-chat .5s ease-in; | |
-o-animation: slide-fh-chat .5s ease-in; | |
animation: slide-fh-chat .5s ease-in; | |
-webkit-animation-direction: reverse; | |
-moz-animation-direction: reverse; | |
-o-animation-direction: reverse; | |
animation-direction: reverse; | |
} | |
.fh-animation-closed-maximized { | |
position: relative; | |
-webkit-animation: fh-closed-maximized .5s ease-out; | |
-moz-animation: fh-closed-maximized .5s ease-out; | |
-o-animation: fh-closed-maximized .5s ease-out; | |
animation: fh-closed-maximized .5s ease-out; | |
} | |
@keyframes fchat-animation { | |
0% { | |
opacity:0; | |
} | |
50% { | |
opacity:1; | |
} | |
100% { | |
opacity:0; | |
} | |
} | |
@-webkit-keyframes fchat-animation { | |
0% { | |
opacity:0; | |
} | |
50% { | |
opacity:1; | |
} | |
100% { | |
opacity:0; | |
} | |
} | |
#fchat-notifier { | |
-webkit-animation: fchat-animation 1s infinite ease-in-out; | |
animation: fchat-animation 1s infinite ease-in-out; | |
font-weight: bolder; | |
} | |
#fchat-notifier.hidden { | |
display: none !important; | |
} | |
.fchat-typing1, .fchat-typing2, .fchat-typing3 { | |
-webkit-animation: fchat-animation 1s infinite ease-in-out; | |
animation: fchat-animation 1s infinite ease-in-out; | |
font-weight: bolder; | |
} | |
.fchat-typing1 { | |
-webkit-animation-delay: .2s; | |
animation-delay: .2s; | |
} | |
.fchat-typing2 { | |
-webkit-animation-delay: .4s; | |
animation-delay: .4s; | |
} | |
.fchat-typing3 { | |
-webkit-animation-delay: .6s; | |
animation-delay: .6s; | |
} | |
.fh-show-chat-popup { | |
width: 270px !important; | |
height: 292px !important; | |
margin: 0; | |
-webkit-transition: width .5s, height .5s, margin .5s; | |
-moz-transition: width .5s, height .5s, margin .5s; | |
-o-transition: width .5s, height .5s, margin .5s; | |
transition: width .5s, height .5s, margin .5s; | |
} | |
.fh-hide-chat-popup { | |
width: 0 !important; | |
height: 0 !important; | |
margin: 146px 135px; | |
-webkit-transition: width .5s, height .5s, margin .5s; | |
-moz-transition: width .5s, height .5s, margin .5s; | |
-o-transition: width .5s, height .5s, margin .5s; | |
transition: width .5s, height .5s, margin .5s; | |
} | |
@-webkit-keyframes slide-fh-chat { | |
from { | |
bottom: -292px; | |
} | |
to { | |
bottom: -256px; | |
} | |
} | |
@-moz-keyframes slide-fh-chat { | |
from { | |
bottom: -292px; | |
} | |
to { | |
bottom: -256px; | |
} | |
} | |
@-o-keyframes slide-fh-chat { | |
from { | |
bottom: -292px; | |
} | |
to { | |
bottom: -256px; | |
} | |
} | |
@keyframes slide-fh-chat { | |
from { | |
bottom: -292px; | |
} | |
to { | |
bottom: -256px; | |
} | |
} | |
@-webkit-keyframes fh-closed-maximized { | |
from { | |
bottom: -292px; | |
} | |
to { | |
bottom: 0; | |
} | |
} | |
@-moz-keyframes fh-closed-maximized { | |
from { | |
bottom: -292px; | |
} | |
to { | |
bottom: 0; | |
} | |
} | |
@-o-keyframes fh-closed-maximized { | |
from { | |
bottom: -292px; | |
} | |
to { | |
bottom: 0; | |
} | |
} | |
@keyframes fh-closed-maximized { | |
from { | |
bottom: -292px; | |
} | |
to { | |
bottom: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment