[mirotalk] - improve chat emoji-picker UI

public/css/client.css

@@ -777,31 +777,15 @@ button:hover {
 # Emoji picker
 --------------------------------------------------------------*/
 
-#msgerEmojiPicker {
-    z-index: 13;
-    display: none;
-    position: absolute;
-    width: var(--msger-width);
-    height: var(--msger-height);
-    /* fade in */
-    -webkit-animation: fadeIn ease-in 1;
-    -moz-animation: fadeIn ease-in 1;
-    animation: fadeIn ease-in 1;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
-    overflow: hidden;
-}
-
 emoji-picker {
+    z-index: 0;
+    position: absolute;
+    bottom: 55px;
     width: 100%;
-    height: 100%;
-    --num-columns: 9;
+    height: 50%;
+    --background: #16171b;
+    --num-columns: 8;
     --emoji-size: 1.5rem;
-    --background: var(--msger-bg);
 }
 
 /*--------------------------------------------------------------
@@ -1328,21 +1312,9 @@ progress {
 }
 
 /*--------------------------------------------------------------
-# Other
+# Speech bar
 --------------------------------------------------------------*/
 
-#webRTCSeo {
-    /* just for SEO */
-    display: none;
-}
-
-.center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    width: 50%;
-}
-
 .speechbar {
     position: absolute;
     top: 0;
@@ -1365,6 +1337,46 @@ progress {
     /*box-shadow: var(--box-shadow);*/
 }
 
+/*--------------------------------------------------------------
+# Other
+--------------------------------------------------------------*/
+
+#webRTCSeo {
+    /* just for SEO */
+    display: none;
+}
+
+/*--------------------------------------------------------------
+# Common
+--------------------------------------------------------------*/
+
+.hidden {
+    display: none;
+}
+
+.show {
+    display: block;
+}
+
+.center {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.fadein {
+    -webkit-animation: fadeIn ease-in 1;
+    -moz-animation: fadeIn ease-in 1;
+    animation: fadeIn ease-in 1;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+}
+
 /*
 z-index
 7 statusMenu -----

public/js/client.js

@@ -3556,10 +3556,12 @@ function hideShowEmojiPicker() {
     if (!isChatEmojiVisible) {
         playSound('newMessage');
         msgerEmojiPicker.style.display = 'block';
+        msgerEmojiBtn.style.color = '#FFFF00';
         isChatEmojiVisible = true;
         return;
     }
     msgerEmojiPicker.style.display = 'none';
+    msgerEmojiBtn.style.color = '#FFFFFF';
     isChatEmojiVisible = false;
 }
 

public/view/client.html

@@ -122,7 +122,7 @@ access to use this app.
                 https://github.com/nolanlawson/emoji-picker-element ] 
                 -->
 
-                <section id="msgerEmojiPicker">
+                <section id="msgerEmojiPicker" class="hidden fadein">
                     <emoji-picker class="dark"></emoji-picker>
                     <!-- <emoji-picker class="light"></emoji-picker> -->
                 </section>