Chat

dabblet.css

/* 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, .typing {
	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;
	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);
	min-width: 1.6em;
	color: transparent;
	-webkit-mask-image: url(http://f.cl.ly/items/0n2S3V3x3v3q2Q1q0Q0i/ellipsis.svg);
	-webkit-mask-size: 90%;
	-webkit-mask-position: 2px -1px;
}

dabblet.html

<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>&hellip;</div></li>
		</ol>
	</li>
</ol>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}