From 31e2e12f3925fbed9623977fa0db40e4304c5fd6 Mon Sep 17 00:00:00 2001
From: danbulant <danbulant@gmail.com>
Date: Tue, 24 Dec 2019 12:35:25 +0100
Subject: [PATCH] chat styles

---
 view/index.html |  8 ++++++--
 view/main.css   | 49 +++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/view/index.html b/view/index.html
index e645449..c92c47a 100644
--- a/view/index.html
+++ b/view/index.html
@@ -33,10 +33,14 @@
                     Dnes
                 </div>
                 <div class="chat--sent">
-                    Ahoj!
+                    <div class="chat--sent-content">
+                        Ahoj!
+                    </div>
                 </div>
                 <div class="chat--response">
-                    Ahoj
+                    <div class="chat--response-content">
+                        Ahoj!
+                    </div>
                 </div>
             </div>
             <div class="chat--form">
diff --git a/view/main.css b/view/main.css
index 4e7cf19..1bfbe7e 100644
--- a/view/main.css
+++ b/view/main.css
@@ -47,22 +47,50 @@ body {
 
 .chat--content {
     height: calc(100% - 20px);
+    backdrop-filter: blur(5px);
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 .chat--divider {
-    color: grey;
+    color: white;
     text-align: center;
+    margin-top: 15px;
+    margin-bottom: 5px;
+}
+.chat--sent::after, .chat--response::after { 
+   content: " ";
+   display: block; 
+   height: 0; 
+   clear: both;
+}
+.chat--sent-content {
+    color: black;
+    position: relative;
+    right: 0;
+    margin-left: auto;
+    display: inline-block;
+    width: auto;
+    float: right;
+    padding: 10px;
+    background: rgb(255, 255, 255);
+    border-radius: 15px 15px 0 15px;
 }
 
-.chat--sent {
-    color: white;
-}
-
-.chat--response {
+.chat--response-content {
     color: white;
+    position: relative;
+    left: 0;
+    display: inline-block;
+    width: auto;
+    float: left;
+    padding: 10px;
+    background: rgb(0, 204, 255);
+    border-radius: 15px 15px 15px 0;
 }
 
 
 .chat--input {
+    backdrop-filter: blur(5px);
     width: 100%;
     height: 20px;
     color: white;
@@ -85,4 +113,13 @@ body {
 
 h1, h2, h3 {
     font-family: Tuffy;
+}
+
+::-webkit-scrollbar {
+  width: 0.7em;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgb(80, 80, 80);
+  border-radius: 15px;
+  outline: none;
 }
\ No newline at end of file