1 files changed, 153 insertions, 0 deletions
diff --git a/view/poc/css/chat.css b/view/poc/css/chat.css
new file mode 100644
index 0000000..e0903fe
--- /dev/null
+++ b/view/poc/css/chat.css
@@ -0,0 +1,153 @@
+html,body{
+    padding:0;
+    margin:0;
+    height:100%;
+}
+
+body{
+    font-family:helvetica, arial, verdana;
+    font-size:16px;
+    background:rgb(231,249,255);
+    color:rgb(167,185,191);
+    overflow:auto;
+}
+
+body *{
+    position:relative;
+}
+
+header{
+    background:rgb(69,142,166);
+    box-shadow:0 4px 5px rgba(167,185,191,.5);
+    padding:20px;
+    position:fixed;
+    top:0;
+    left:0;
+    width:calc(100% - 40px);
+    color:rgb(231,249,255);
+    z-index:1000;
+}
+
+header h1 {
+    margin:0;
+}
+
+main{
+    height:calc(100% - 120px);
+    top:80px;
+}
+
+footer{
+    background:rgb(69,142,166);
+    box-shadow:0 -3px 4px rgba(167,185,191,.5);
+    padding:10px;
+    position:fixed;
+    bottom:0;
+    left:0;
+    width:calc(100% - 20px);
+    height:20px;
+    color:rgb(231,249,255);
+}
+
+.chat-primary{
+    width:calc(75% - 20px);
+    padding:10px;
+    height:300px;
+    opacity:0;
+    position:absolute;
+    left:0;
+    top:0;
+    transition:opacity 500ms;
+}
+        
+.chat-window{
+    list-style:none;
+    height:250px;
+    box-shadow:inset 0 0 30px rgb(212,244,255),
+        0 0 4px rgb(167,185,191);
+    margin:0;
+    padding:2px 9px;
+    z-index:100;
+    margin-bottom:5px;
+    overflow-y:auto;
+    resize:both;
+}
+
+.chat-window img,
+.chat-window video,
+.chat-window audio,
+.chat-window iFrame{
+    max-width:100%;
+}
+
+.chat-window video,
+.chat-window iFrame{
+    width:100;
+    resize:both;
+}
+
+.chat-input{
+    width:100%;
+    height:50px;
+    border:none;
+}
+
+textarea,
+input{
+    height:50px;
+    border:none;
+    box-shadow:inset 0 26px 30px rgb(212, 244, 255),
+    0 0 4px rgba(167,185,191,.75);
+    border-radius:5px;
+}
+
+input{
+    line-height:50px;
+    font-size:20px;
+}
+
+.playlist{
+    width:calc(25% - 10px);
+    padding:5px;
+    height:300px;
+    opacity:0;
+    position:absolute;
+    right:0;
+    top:0;
+    transition:opacity 500ms;
+}
+
+.playlist ul{
+    list-style:none;
+    padding:0;
+    margin:0;
+    overflow:auto;
+    height:83%;
+}
+
+.playlist li{
+    padding:10px 0;
+    background:rgba(167,185,191,.7);
+    margin:2px 0;
+}
+
+.modal{
+    position:absolute;
+    top:200px;
+    left:50%;
+    padding:50px;
+    margin:0 0 0 -150px;
+    background:rgb(212,244,255);
+    border-radius:8px;
+    box-shadow:0 0 8px rgba(167,185,191,.7),
+        inset 0 5px 20px rgb(231,249,255);
+    transition:opacity 500ms;
+}
+
+.modal h2{
+    margin-top:0;
+}
+
+.modal-join{
+    opacity:0;
+}