Created
July 21, 2012 21:11
-
-
Save anonymous/3157203 to your computer and use it in GitHub Desktop.
Chat
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
/* Chat */ | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
html { | |
background-image: url(data:image/jpeg;base64,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); | |
font: 75%/1.2 Helvetica Neue, Helvetica, Arial, sans-serif; | |
-webkit-font-smoothing: antialiased; | |
min-height: 100%; | |
position: relative; | |
} | |
.transcript { | |
list-style: none; | |
max-width: 330px; | |
margin: 1.2em auto; | |
padding: 5em 2em; | |
} | |
.inbound, .outbound { | |
position: relative; | |
} | |
.outbound { | |
text-align: right; | |
} | |
.outbound .messages { | |
padding-left: 0; | |
padding-right: 2.85em; | |
} | |
.outbound .avatar { | |
left: auto; | |
right: 0; | |
} | |
.outbound .message { | |
text-align: left; | |
} | |
.avatar { | |
position: absolute; | |
top: 0; | |
} | |
.avatar img { | |
display: block; | |
border-radius: .25em; | |
box-shadow: 0 1px rgba(255,255,255,.3); | |
} | |
.avatar:after { | |
position: absolute; | |
content: ''; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
border-radius: .25em; | |
box-shadow: inset 0 0 4px rgba(0,0,0,.5) | |
} | |
.messages { | |
list-style: none; | |
padding-left: 2.85em; | |
} | |
.message { | |
background-color: #58b4ef; | |
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0) 1em), linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.6) .5em); | |
background-position: top, bottom; | |
background-size: 100%, 100% .5em; | |
background-repeat: repeat-x; | |
padding: .3em .75em; | |
border-radius: .9em; | |
box-shadow: inset 0 1px rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.2); | |
border: 1px solid rgba(0,0,0,.2); | |
position: relative; | |
text-shadow: 0 1px rgba(255,255,255,.2); | |
display:inline-block; | |
margin: .3em 0; | |
max-width: 50em; | |
} | |
.message:after { | |
position: absolute; | |
content:''; | |
height: .8em; | |
top: 1px; | |
left: .5em; | |
right:.5em; | |
border-radius: 1em; | |
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.1)); | |
} | |
.inbound .message { | |
background-color: #ddd; | |
} | |
.typing { | |
background-color: transparent; | |
display:inline-block; | |
position: relative; | |
color: transparent; | |
} | |
.typing:before { | |
display:inline-block; | |
margin: .3em 0; | |
max-width: 50em; | |
min-width: 1.6em; | |
padding: .3em .75em; | |
border-radius: .9em; | |
content: "..."; | |
background-color: transparent; | |
background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1)); | |
box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 1px rgba(255,255,255,.3); | |
border: 1px solid rgba(0,0,0,.2); | |
color: transparent; | |
-webkit-mask-image: url(http://f.cl.ly/items/0n2S3V3x3v3q2Q1q0Q0i/ellipsis.svg); | |
-webkit-mask-size: 90%; | |
-webkit-mask-position: 2px -1px; | |
display: block; | |
} | |
.typing:after { | |
content: ""; | |
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiA8ZGVmcz4NCiAgPGZpbHRlciBoZWlnaHQ9IjIwMCUiIHdpZHRoPSIyMDAlIiB5PSItNTAlIiB4PSItNTAlIiBpZD0ic3ZnXzhfYmx1ciI+DQogICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjEiIGluPSJTb3VyY2VHcmFwaGljIi8+DQogIDwvZmlsdGVyPg0KICA8ZmlsdGVyIGlkPSJzdmdfOV9ibHVyIiBoZWlnaHQ9IjIwMCUiIHdpZHRoPSIyMDAlIiB5PSItNTAlIiB4PSItNTAlIj4NCiAgIDxmZUdhdXNzaWFuQmx1ciBpZD0ic3ZnXzEzIiBzdGREZXZpYXRpb249IjQuMSIgaW49IlNvdXJjZUdyYXBoaWMiLz4NCiAgPC9maWx0ZXI+DQogIDxmaWx0ZXIgaWQ9InN2Z18xMF9ibHVyIiBoZWlnaHQ9IjIwMCUiIHdpZHRoPSIyMDAlIiB5PSItNTAlIiB4PSItNTAlIj4NCiAgIDxmZUdhdXNzaWFuQmx1ciBpZD0ic3ZnXzE1IiBzdGREZXZpYXRpb249IjQuMSIgaW49IlNvdXJjZUdyYXBoaWMiLz4NCiAgPC9maWx0ZXI+DQogIDxsaW5lYXJHcmFkaWVudCB5Mj0iMSIgeDI9IjAiIHkxPSIwIiB4MT0iMCIgaWQ9InN2Z18xOCI+DQogICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBvZmZzZXQ9IjAiLz4NCiAgIDxzdG9wIHN0b3Atb3BhY2l0eT0iMCIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgb2Zmc2V0PSIxIi8+DQogIDwvbGluZWFyR3JhZGllbnQ+DQogPC9kZWZzPg0KIDxnPg0KICA8ZyBpZD0ic3ZnXzE2Ij4NCiAgIDxwYXRoIGZpbHRlcj0idXJsKCNzdmdfOF9ibHVyKSIgaWQ9InN2Z184IiBkPSJtMjQwLA0KICAgMjU4YzAsLTMzLjE0OTE3IDI2Ljg1MDgzLC01MCA1MCwtNTBjMzMuMTQ5MTcsMCA1MCwyNi44NTA4MyA1MCwNCiAgIDUwYzAsMzMuMTQ5MTcgLTI2Ljg1MDgzLDUwIC01MCw1MGMtMzMuMTQ5MTcsMCAtNTAsLTI2Ljg1MDgzIC01MCwtNTBtLTE1MCwNCiAgIDBjMCwtMzMuMTQ5MTcgMjYuODUwODMsLTUwIDUwLC01MGMzMy4xNDkxNywwIDUwLDI2Ljg1MDgzIDUwLDUwYzAsMzMuMTQ5MTcgLTI2Ljg1MDgzLDUwIC01MCwNCiAgIDUwYy0zMy4xNDkxNywwIC01MCwtMjYuODUwODMgLTUwLC01MG0zMDAsMGMwLC0zMy4xNDkxNyAyNi44NTA4MywtNTAgNTAsDQogICAtNTBjMzMuMTQ5MTcsMCA1MCwyNi44NTA4MyA1MCw1MGMwLDMzLjE0OTE3IC0yNi44NTA4Myw1MCAtNTAsNTBjLTMzLjE0OTE3LDAgLTUwLC0yNi44NTA4MyAtNTAsLTQweiIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTAiLz4NCiAgIDxlbGxpcHNlIGZpbHRlcj0idXJsKCNzdmdfOV9ibHVyKSIgaWQ9InN2Z185IiBjeT0iMjk1IiBjeD0iLTEyMCIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgc3Ryb2tlLWRhc2hhcnJheT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIi8+DQogICA8ZWxsaXBzZSBmaWx0ZXI9InVybCgjc3ZnXzEwX2JsdXIpIiBpZD0ic3ZnXzEwIiByeT0iMSIgY3k9IjI2MSIgY3g9IjE3MSIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgc3Ryb2tlLWRhc2hhcnJheT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIi8+DQogIDwvZz4NCiAgPGc+DQogICA8Zz4NCiAgICA8cGF0aCBkPSJtMjQwLA0KICAgIDI1MGMwLC0zMy4xNDkxNyAyNi44NTA4MywtNTAgNTAsLTUwYzMzLjE0OTE3LDAgNTAsMjYuODUwODMgNTAsNTBjMCwzMy4xNDkxNyAtMjYuODUwODMsNTAgLTUwLDUwYy0zMy4xNDkxNywwIC01MCwtMjYuODUwODMgLTUwLC01MG0tMTUwLA0KICAgIDBjMCwtMzMuMTQ5MTcgMjYuODUwODMsLTUwIDUwLC01MGMzMy4xNDkxNywwIDUwLDI2Ljg1MDgzIDUwLDUwYzAsMzMuMTQ5MTcgLTI2Ljg1MDgzLDUwIC01MCw1MGMtMzMuMTQ5MTcsMCAtNTAsLTI2Ljg1MDgzIC01MCwtNTBtMzAwLA0KICAgIDBjMCwtMzMuMTQ5MTcgMjYuODUwODMsLTUwIDUwLC01MGMzMy4xNDkxNywwIDUwLDI2Ljg1MDgzIDUwLDUwYzAsMzMuMTQ5MTcgLTI2Ljg1MDgzLDUwIC01MCw1MGMtMzMuMTQ5MTcsMCAtNTAsLTI2Ljg1MDgzIC01MCwtNDB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InVybCgjc3ZnXzE4KSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIwIi8+DQogICAgPGVsbGlwc2UgaWQ9InN2Z18yIiBjeT0iMjg3IiBjeD0iLTEyMCIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgc3Ryb2tlLWRhc2hhcnJheT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIyMCIgZmlsbD0idXJsKCNzdmdfMTgpIiBzdHJva2U9IiNmZmZmZmYiLz4NCiAgICA8ZWxsaXBzZSByeT0iMSIgaWQ9InN2Z18zIiBjeT0iMjUzIiBjeD0iMTcxIiBzdHJva2UtbGluZWNhcD0ibnVsbCIgc3Ryb2tlLWxpbmVqb2luPSJudWxsIiBzdHJva2UtZGFzaGFycmF5PSJudWxsIiBzdHJva2Utd2lkdGg9IjIwIiBmaWxsPSJ1cmwoI3N2Z18xOCkiIHN0cm9rZT0iI2ZmZmZmZiIvPg0KICAgPC9nPg0KICA8L2c+DQogPC9nPg0KPC9zdmc+); | |
background-position: -4px 1px; | |
position: absolute; | |
display: block; | |
height: 1.8em; | |
width: 3.3em; | |
top: 0; | |
left: 0; | |
-webkit-background-size: 133%; | |
opacity: .8; | |
} |
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
<ol class=transcript> | |
<li class=outbound> | |
<figure class=avatar> | |
<img src="http://gravatar.com/avatar/ce22c94e6c291345223e0118bfdd8714?s=28"> | |
</figure> | |
<ol class=messages> | |
<li><div class=message>Hey man!</div></li> | |
<li><div class=message>How's it going?</div></li> | |
</ol> | |
</li> | |
<li class=inbound> | |
<figure class=avatar> | |
<img src="http://gravatar.com/avatar/b9f6d00bc870d14a990d40731a255bbf?s=28"> | |
</figure> | |
<ol class=messages> | |
<li><div class=message>Hey! Not bad dude. How're you?</div></li> | |
</ol> | |
</li> | |
<li class=outbound> | |
<figure class=avatar> | |
<img src="http://gravatar.com/avatar/ce22c94e6c291345223e0118bfdd8714?s=28"> | |
</figure> | |
<ol class=messages> | |
<li><div class=typing>…</div></li> | |
</ol> | |
</li> | |
</ol> |
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
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment