Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Chat view panel
/**
* 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); }
}
<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>
// alert('Hello world!');
{"view":"split","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