From 26248b9eb8ad82d3c7adf9e9786163c7b7c14bce Mon Sep 17 00:00:00 2001
From: Luong Doan <doannguyenthanhluong@gmail.com>
Date: Sun, 25 Jul 2021 03:07:26 +0000
Subject: [PATCH] Update CSS

---
 resources/chatbox.scss       | 104 ++++++++++++++++++++++++++++++
 templates/chat/chat_css.html | 120 +----------------------------------
 2 files changed, 106 insertions(+), 118 deletions(-)

diff --git a/resources/chatbox.scss b/resources/chatbox.scss
index e69de29..68e6697 100644
--- a/resources/chatbox.scss
+++ b/resources/chatbox.scss
@@ -0,0 +1,104 @@
+#chat-log p {
+    margin: 0;
+    padding-top: 0.1em;
+    padding-bottom: 0.1em;
+}
+.chatbtn_remove_mess {
+    float: right;
+    margin-right: 1em;
+}
+#emoji-button {
+    position: absolute;
+    right: 1em;
+    font-size: 2em;
+    color: lightgray;
+}
+#emoji-button:hover {
+    color: gray;
+}
+#chat-log {
+    padding: 0;
+    padding-top: 2em;
+    width: 100%;
+    font-size: 14px;
+}
+#chat-log li {
+    list-style-type: none;
+    margin: 0.5em;
+}
+#chat-submit {
+    margin-top: 1em;
+}
+.big-emoji {
+    font-size: 16px;
+}
+#chat-input, #chat-log .content-message {
+    font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Twemoji Mozilla","Noto Color Emoji", "EmojiOne Color","Android Emoji", "Segoe UI", "Lucida Grande", Arial, sans-serif;
+}
+
+#chat-online {
+    border-right: 1px solid #ccc;
+    padding-bottom: 0 !important;
+    min-width: 25%;
+    border-bottom: 0;
+}
+#chat-online-content {
+    margin-top: 0.5em;
+    margin-bottom: 0;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    overflow-y: auto;
+    max-height: 77vh;
+}
+#chat-box {
+    /*border: 1px solid #ccc;*/
+    /*border-top-right-radius: 4px;*/
+    width: 100%;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    overflow-y: scroll;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    max-height: 85%;
+    height: auto;
+}
+
+#chat-input {
+    width: 100%;
+    padding: 0.4em;
+    padding-bottom: 0.6em;
+    border: 0;
+    color: black;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    height: 100%;
+    font-size: 14px;
+}
+#chat-online-content {
+    padding: 0;
+    width: 100%;
+}
+@media (min-width: 800px) {
+    #chat-container {
+        display: flex;
+        width: 100%;
+        height: 90vh;
+        border: 1px solid #ccc;
+        /*border-radius: 0 4px 0 0;*/
+        border-bottom: 0;
+    }
+    #chat-online {
+        margin: 0;
+    }
+    .chat-left-panel, .chat-right-panel {
+        display: block !important;
+    }
+}
+@media (max-width: 799px) {
+    #chat-area {
+        height: 500px;
+    }
+    #emoji-button {
+        display: none;
+    }
+}
diff --git a/templates/chat/chat_css.html b/templates/chat/chat_css.html
index e553772..8b0abac 100644
--- a/templates/chat/chat_css.html
+++ b/templates/chat/chat_css.html
@@ -2,15 +2,6 @@
     #content {
         margin: -1em 1em 0 0;
     }
-    #chat-log p {
-        margin: 0;
-        padding-top: 0.1em;
-        padding-bottom: 0.1em;
-    }
-    .chatbtn_remove_mess {
-        float: right;
-        margin-right: 1em;
-    }
     #refresh-button {
         padding: 0;
         margin-left: auto;
@@ -88,7 +79,7 @@
     .tooltip:not(.shown) {
         display: none;
     }
-
+    
     textarea {
         resize: none;
     }
@@ -99,40 +90,12 @@
         position: absolute;
     }
 
-    #emoji-button {
-        position: absolute;
-        right: 1em;
-        font-size: 2em;
-        color: lightgray;
-    }
-
-    #emoji-button:hover {
-        color: gray;
-    }
-
     #loader {
         display: block;
         margin-left: auto;
         margin-right: auto;
         width: 4%;
     }
-
-    #chat-log {
-        padding: 0;
-        padding-top: 2em;
-        width: 100%;
-        font-size: 14px;
-    }
-
-    #chat-log li {
-        list-style-type: none;
-        margin: 0.5em;
-    }
-
-    #chat-submit {
-        margin-top: 1em;
-    }
-
     .profile-pic {
         height: 2.6em;
         width: 2.6em;
@@ -140,81 +103,26 @@
         margin-top: 0.1em;
         float: left;
     }
-
     .body-message {
         padding-left: 3em;
         padding-bottom: 0.5em;
         border-bottom: 1px dotted lightgray;
     }
-
     .user-time {
         margin-bottom: 0.3em;
     }
-
     .time {
         margin-left: 0.5em;
     }
-
-    .big-emoji {
-        font-size: 16px;
-    }
-
     .clear {
         clear: both;
     }
-
     .content-message {
         word-wrap: break-word;
     }
-
     .content-message p {
         margin: 0;
     }
-
-    #chat-online {
-        border-right: 1px solid #ccc;
-        padding-bottom: 0 !important;
-        min-width: 25%;
-        border-bottom: 0;
-    }
-    #chat-online-content {
-        margin-top: 0.5em;
-        margin-bottom: 0;
-        overflow: hidden;
-        overflow-wrap: break-word;
-        overflow-y: auto;
-        max-height: 77vh;
-    }
-    #chat-box {
-        /*border: 1px solid #ccc;*/
-        /*border-top-right-radius: 4px;*/
-        width: 100%;
-        overflow: hidden;
-        overflow-wrap: break-word;
-        overflow-y: scroll;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        max-height: 85%;
-        height: auto;
-    }
-
-    #chat-input {
-        width: 100%;
-        padding: 0.4em;
-        padding-bottom: 0.6em;
-        border: 0;
-        color: black;
-        font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        height: 100%;
-        font-size: 14px;
-    }
-
-    #chat-online-content {
-        padding: 0;
-        width: 100%;
-    }
     #content {
         width: 100%;
     }
@@ -240,32 +148,8 @@
             position:fixed;
             overflow:hidden;
         }
-
-        #chat-container {
-            display: flex;
-            width: 100%;
-            height: 90vh;
-            border: 1px solid #ccc;
-            /*border-radius: 0 4px 0 0;*/
-            border-bottom: 0;
-        }
-        #chat-box {
-
-        }
-        #chat-online {
-            margin: 0;
-        }
-        .chat-left-panel, .chat-right-panel {
-            display: block !important;
-        }
     }
     @media (max-width: 799px) {
-        #chat-area {
-            height: 500px;
-        }
-        #emoji-button {
-            display: none;
-        }
         html, body {
             max-width: 100%;
             overflow-x: hidden;
@@ -274,4 +158,4 @@
             width: 100%;
         }
     }
-</style>
\ No newline at end of file
+</style>