Chat view panel

dabblet.css

/**
 * Chat view panel
 */
 
 body {
 	font: 13px/1 Arial,Helvetica,sans-serif;
 }
.view {
	position: fixed;
	bottom: 0px;
	right: 50px;
	min-width: 200px;
}
.chat-panel {
	position: relative;
	top: 200px;
	background: rgba(38, 53, 59, 0.9);
	color: #FFF;
	border-radius: 6px 6px 0 0;
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
	padding: 10px;
	font-size: 11px;
	-webkit-transition: top 1s ease-in-out;
}

.chat-container {
	padding: 10px 0;
	height: 130px;
}
.is-active .chat-panel {
	top: 0px;
}
.is-incoming .chat-panel {
	top: 150px;
	-webkit-animation: bounce 1.5s infinite;
}
@-webkit-keyframes bounce {
	 0% { -webkit-transform: translate3d(0, 0, 0); }
	 5% { -webkit-transform: translate3d(3px, 2px, 0); }
	10% { -webkit-transform: translate3d(-3px, 0, 0); }
	15% { -webkit-transform: translate3d(3px, 2px, 0); }
	20% { -webkit-transform: translate3d(-3px, 0, 0); }
	25% { -webkit-transform: translate3d(3px, 2px, 0); }
	100%{ -webkit-transform: translate3d(0, 0, 0); }
}

dabblet.html

<div class="view is-incoming xis-active">
	<div class="chat-panel">
		<div class="chat-control">
			<span>Incoming call...</span>
			<button>answer</button>
			<button>ignore</button>
		</div>
		<div class="chat-container">
			video here
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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