Styling of emoji picker in the overlay view

css/converse.css

@@ -7040,8 +7040,6 @@ body.reset {
     -ms-transform: rotate(359deg);
     -o-transform: rotate(359deg);
     transform: rotate(359deg); } }
-  #conversejs .emojione {
-    height: 20px; }
   #conversejs .spinner {
     -webkit-animation: spin 2s infinite, linear;
     -moz-animation: spin 2s infinite, linear;
@@ -7570,25 +7568,6 @@ body.reset {
             height: 100px;
             overflow: scroll;
             padding: 0.5em; }
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
-            /* offset-x | offset-y | blur-radius | spread-radius | color */
-            box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
-            overflow: hidden;
-            left: 0; }
-            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
-            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
-              background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
-            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
-              height: 30px;
-              padding: 4px;
-              z-index: 98; }
-              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
-              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
-                font-size: 20px; }
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
             margin-left: 0;
@@ -7597,18 +7576,35 @@ body.reset {
             position: relative; }
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
-              padding: 0.3em; }
+              padding: 0.2em; }
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked {
+                background-color: #DCF9F6; }
               #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
               #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
                 background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a,
-            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a {
+                font-size: 20px; }
+                #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover,
+                #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover {
                   color: #8f2831; }
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar {
+          box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker {
+            padding-top: 0.5em; }
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
               display: flex;
               flex-direction: row;
               justify-content: space-between; }
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li {
+            padding: 0.2em; }
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
@@ -7714,12 +7710,6 @@ body.reset {
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
     #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
       float: left; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
-    #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
-      padding: 2px; }
-#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
-#conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
-  padding: 2px; }
 
 @media (max-width: 767.98px) {
   #conversejs:not(.fullscreen) > .row {

css/inverse.css

@@ -7040,8 +7040,6 @@ body.reset {
     -ms-transform: rotate(359deg);
     -o-transform: rotate(359deg);
     transform: rotate(359deg); } }
-  #conversejs .emojione {
-    height: 22px; }
   #conversejs .spinner {
     -webkit-animation: spin 2s infinite, linear;
     -moz-animation: spin 2s infinite, linear;
@@ -7622,25 +7620,6 @@ body {
             height: 150px;
             overflow: scroll;
             padding: 0.5em; }
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
-            /* offset-x | offset-y | blur-radius | spread-radius | color */
-            box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
-            overflow: hidden;
-            left: 0; }
-            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
-            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
-              background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
-            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
-              height: 32px;
-              padding: 4px;
-              z-index: 98; }
-              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
-              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
-                font-size: 26px; }
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
             margin-left: 0;
@@ -7649,18 +7628,35 @@ body {
             position: relative; }
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
-              padding: 0.3em; }
+              padding: 0.2em; }
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked {
+                background-color: #DCF9F6; }
               #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
               #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
                 background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a,
-            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a {
+                font-size: 26px; }
+                #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover,
+                #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover {
                   color: #8f2831; }
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar {
+          box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker {
+            padding-top: 0.5em; }
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
               display: flex;
               flex-direction: row;
               justify-content: space-between; }
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li {
+            padding: 0.2em; }
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,

sass/_chatbox.scss

@@ -401,47 +401,37 @@
                                 overflow: scroll;
                                 padding: 0.5em;
                             }
-                            &.emoji-toolbar {
-                                /* offset-x | offset-y | blur-radius | spread-radius | color */
-                                box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
-                            }
-                            &.emoji-toolbar {
-                                overflow: hidden;
-                                left: 0;
-                                .picked {
-                                    background-color: $highlight-color;
-                                }
                             li {
-                                    height: $emoji_height + 2*5px;
-                                    padding: 4px;
-                                    z-index: 98;
-                                    &.emoji {
-                                        a {
-                                            font-size: $font-size-huge;
-                                        }
-                                    }
-                                }
-                            }
-                            li {
-                                &.insert-emoji {
-                                    padding: 0.3em;
-                                    &:hover {
-                                        background-color: $highlight-color;
-                                    }
-                                }
                                 margin-left: 0;
                                 cursor: pointer;
                                 list-style: none;
                                 position: relative;
-                                a:hover {
+                                &.emoji-skintone {
+                                }
+                                &.insert-emoji {
+                                    padding: 0.2em;
+                                    &.picked {
+                                        background-color: $highlight-color;
+                                    }
+                                    &:hover {
+                                        background-color: $highlight-color;
+                                    }
+                                    a {
+                                        font-size: $font-size-huge;
+                                        &:hover {
                                             color: #8f2831;
                                         }
                                     }
                                 }
                             }
+                        }
+                    }
                     &.toggle-smiley {
                         .emoji-toolbar {
+                            box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
+
                             .emoji-category-picker {
+                                padding-top: 0.5em;
                                 ul {
                                     display: flex;
                                     flex-direction: row;
@@ -451,12 +441,15 @@
 
                             .emoji-category-picker,
                             .emoji-skintone-picker {
-                                li:hover {
+                                li {
+                                    padding: 0.2em;
+                                    &:hover {
                                         background-color: $highlight-color;
                                     }
                                 }
                             }
                         }
+                    }
                     &.toggle-otr {
                         ul {
                             z-index: 99;

sass/_core.scss

@@ -319,10 +319,6 @@ body.reset {
         }
     }
 
-    .emojione {
-        height: $emoji_height;
-    }
-
     .spinner {
         @include animation(spin 2s infinite, linear);
         display: block;

sass/converse/_chatbox.scss

@@ -50,16 +50,6 @@
                                 .emoji-category {
                                     float: left;
                                 }
-                                li {
-                                    padding: 2px;
-                                }
-                            }
-                        }
-                    }
-                    &.toggle-smiley {
-                        ul {
-                            li {
-                                padding: 2px;
                             }
                         }
                     }

sass/converse/_variables.scss

@@ -54,8 +54,6 @@ $send-button-margin: 3px !default;
 
 $message-them-color: $green !default;
 
-$emoji_height : 20px !default;
-
 $roster-height: 194px !default;
 $roster-item-height: 60px !default;
 

sass/inverse/_variables.scss

@@ -52,7 +52,6 @@ $send-button-margin: 3px !default;
 
 $message-them-color: $green !default;
 
-$emoji_height: 22px !default;
 $emoji-picker-height: 150px !default;
 
 $roster-height: 194px !default;