[mirotalk] - add chat ghost theme + improve css

www/client.js

@@ -13,6 +13,7 @@ const loaderGif = "/images/loader.gif";
 const myChatAvatar = "/images/programmer.png";
 const friendChatAvatar = "/images/friend.png";
 const notifyBySound = true; // turn on-off sound notifications
+
 var myChatName = null;
 var signalingServerPort = 80;
 var signalingServer = getserverURL();
@@ -547,9 +548,9 @@ function setSendMsgBtn() {
 // chat room button click event
 // =====================================================
 function setChatRoomBtn() {
-  // Make chat room draggable
+  // make chat room draggable
   dragElement(get("msgerDraggable"));
-
+  // open-hide chat room
   get("chatRoomBtn").addEventListener("click", (e) => {
     if (noPeers()) {
       userLog("info", "Can't Open Chat Room, no peer connection detected");
@@ -563,7 +564,23 @@ function setChatRoomBtn() {
       isChatBoxVisible = false;
     }
   });
-
+  // ghost theme + undo
+  get("msgerTheme").addEventListener("click", (e) => {
+    if (e.target.className == "fas fa-ghost") {
+      e.target.className = "fas fa-undo";
+      document.documentElement.style.setProperty('--msger-bg', 'transparent');
+    } else {
+      e.target.className = "fas fa-ghost";
+      document.documentElement.style.setProperty('--msger-bg', 'black');
+    }
+  });
+  // close chat room
+  get("msgerClose").addEventListener("click", (e) => {
+    get("msgerDraggable").style.display = "none";
+    get("chatRoomBtn").className = "fas fa-comment";
+    isChatBoxVisible = false;
+  });
+  // chat send msg
   get("msgerSendBtn").addEventListener("click", (e) => {
     e.preventDefault(); // prevent refresh page
     const msg = get("msgerInput").value;
@@ -574,12 +591,6 @@ function setChatRoomBtn() {
 
     get("msgerInput").value = "";
   });
-
-  get("msgerHeaderHide").addEventListener("click", (e) => {
-    get("msgerDraggable").style.display = "none";
-    get("chatRoomBtn").className = "fas fa-comment";
-    isChatBoxVisible = false;
-  });
 }
 
 // =====================================================
@@ -1099,4 +1110,3 @@ function formatDate(date) {
   const m = "0" + date.getMinutes();
   return `${h.slice(-2)}:${m.slice(-2)}`;
 }
-

www/index.html

@@ -105,8 +105,9 @@
           <div class="msger-header-title">
             <i class="fas fa-comment-alt"></i> mirotalkChat
           </div>
-          <div id="msgerHeaderHide" class="msger-header-hide">
-            <span><i class="fas fa-times"></i></span>
+          <div>
+            <button id="msgerTheme" class="fas fa-ghost"></button>
+            <button id="msgerClose" class="fas fa-times"></button>
           </div>
         </header>
 
@@ -151,9 +152,11 @@
             type="text"
             placeholder="Enter your message..."
           />
-          <button id="msgerSendBtn" type="submit" class="msger-send-btn">
-            Send
-          </button>
+          <button
+            title="send"
+            id="msgerSendBtn"
+            class="fas fa-paper-plane"
+          ></button>
         </form>
       </section>
     </section>

www/style.css

@@ -29,16 +29,15 @@
 }
 
 :root {
-  --msger-bg: rgb(0, 0, 0);
-  /* --msger-bg: transparent; */
-  --border: 0px solid #ddd;
+  --msger-bg: black; /* transparent; */
   --left-msg-bg: #da05f3;
   --right-msg-bg: #579ffb;
 }
 
 * {
   outline: none;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 body {
@@ -69,8 +68,8 @@ body {
   display: none;
   position: absolute;
   z-index: 9;
-  background-color: #000000;
-  /* background: var(--msger-bg); */
+  /* background-color: #000000; */
+  background: var(--msger-bg);
   text-align: center;
   -webkit-animation: fadeIn ease-in 1;
   -moz-animation: fadeIn ease-in 1;
@@ -93,7 +92,6 @@ body {
   justify-content: space-between;
   width: 412px;
   height: 732px;
-  border: var(--border);
   background: var(--msger-bg);
 }
 
@@ -101,12 +99,15 @@ body {
   display: flex;
   justify-content: space-between;
   padding: 10px;
-  border-bottom: var(--border);
   background: rgb(0, 0, 0);
   color: #666;
   cursor: move;
 }
 
+.msger-header-options:hover {
+  cursor: pointer;
+}
+
 .msger-chat {
   flex: 1;
   overflow-y: auto;
@@ -178,9 +179,8 @@ body {
 .msger-inputarea {
   display: flex;
   padding: 10px;
-  border-top: var(--border);
-  background: rgb(2, 2, 2);
-  /* background: var(--msger-bg); */
+  /* background: rgb(2, 2, 2); */
+  background: var(--msger-bg);
 }
 
 .msger-inputarea * {
@@ -196,28 +196,21 @@ body {
   background: rgb(0, 0, 0);
 }
 
-.msger-send-btn {
+#msgerSendBtn {
   margin-left: 10px;
   background: rgb(0, 0, 0);
   color: #fff;
-  font-weight: bold;
   cursor: pointer;
   transition: background 0.23s;
 }
 
-.msger-send-btn:hover {
+#msgerSendBtn:hover {
   background: rgb(0, 180, 50);
-  color: white;
 }
 
 .msger-chat {
-  background-color: black;
-  /* background: var(--msger-bg); */
-}
-
-.msger-header-hide:hover {
-  color: rgb(8, 189, 89);
-  cursor: pointer;
+  /* background-color: black; */
+  background: var(--msger-bg);
 }
 
 video {