xmpp.chapril.org-conversejs/sass/_emoji.scss

#conversejs {
    .chatbox {
        img.emoji {
            height: 1.2em;
            width: 1.2em;
            margin: 0 .05em 0 .1em;
            vertical-align: -0.1em;
        }

        .sendXMPPMessage {
            .toggle-smiley {
                a.toggle-smiley {
                    padding: 0;
                }
            }
        }

        converse-emoji-dropdown {
            display: inline-block;
            .dropdown-menu {
                padding: 0;
            }
        }

        converse-emoji-picker {
            width: 100%;
            padding-top: 0;
            padding-bottom: 0;
            background-color: var(--chat-head-color);
            overflow-y: hidden;
            background: white;
            .emoji-picker__lists {
                height: 8em;
                overflow-y: auto;
                .emoji-category__heading {
                    clear: both;
                    color: var(--subdued-color);
                    cursor: auto;
                    display: block;
                    font-size: var(--font-size);
                    margin: 0;
                    padding: 0.75em 0 0 0.5em;
                }

                .emoji-lists__container {
                    overflow-x: hidden;
                }

                .emoji-picker {
                    li {
                        float: left;
                    }
                }
                display: flex;
                flex-direction: column;
            }
            .emoji-skintone-picker {
                display: flex;
                label {
                    margin: 0;
                    padding: 0 0.5em;
                    white-space: nowrap;
                    font-size: var(--font-size-small);
                    color: var(--heading-color);
                }
                ul {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    li {
                        padding: 0 0.25em;
                    }
                }
                padding: 0.5em 0;
                background-color: var(--chat-head-color);
                width: auto;
                font-size: var(--font-size);
            }
            .emoji-picker {
                background-color: white;
                padding: 0.5em 0 0 0.5em;
                &:last-child {
                    padding-bottom: 0.5em;
                }
                li {
                    display: inline-block;
                    height: calc(var(--font-size-huge) * 1.5);
                    width: calc(var(--font-size-huge) * 1.5);
                    overflow: hidden;
                    margin-left: 0;
                    list-style: none;
                    position: relative;
                    &.insert-emoji {
                        padding: 0 0.2em;
                        height: auto;
                        width: auto;
                        margin: 0;
                        display: block;
                        text-align: center;
                        &.selected a {
                            background-color: var(--highlight-color-darker);
                        }
                        img {
                            margin: 0 auto;
                            height: var(--font-size-huge);
                            width: var(--font-size-huge);
                            display: inline-block;
                            vertical-align: baseline;
                        }
                        a {
                            padding: 3px;
                            display: inline-block;
                            font-size: var(--font-size-huge);
                            line-height: calc(var(--font-size-huge) * 1.5);
                            height: calc(var(--font-size-huge) * 1.5);
                            width: calc(var(--font-size-huge) * 1.5);
                            overflow: hidden;
                            &:hover {
                                background-color: var(--highlight-color-darker);
                            }
                        }
                    }
                }
            }
            .emoji-picker__header {
                display: flex;
                flex-direction: column;
                padding: 0.1em 0;
                background-color: var(--chat-head-color);
                .emoji-search {
                    width: auto;
                    margin: 0.25em;
                    height: 2em;
                    font-size: var(--font-size-small);
                }
                ul {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;

                    .emoji-category {
                        padding: 0.25em 0;
                        font-size: var(--font-size-huge);
                        &.picked {
                            background-color: white;
                            border: 1px var(--chat-head-color) solid;
                            border-bottom: none;
                        }
                        &.selected a, &:hover a {
                            background-color: var(--highlight-color-darker);
                        }
                        a {
                            padding: 0.25em;
                            display: inline-block;
                        }
                        img {
                            height: var(--font-size-huge);
                            width: var(--font-size-huge);
                        }
                    }
                }
            }
        }
    }

    .chatroom {
        converse-emoji-picker {
            background-color: var(--chatroom-head-bg-color);
            background: white;
            .emoji-skintone-picker {
                background-color: var(--chatroom-head-bg-color);
            }
            .emoji-picker__header {
                background-color: var(--chatroom-head-bg-color);
                ul {
                    .emoji-category {
                        &.picked {
                            border: 1px var(--chatroom-head-bg-color) solid;
                            border-bottom: none;
                        }
                    }
                }
            }
        }
    }
}


#conversejs.converse-overlayed  {
    converse-emoji-dropdown {
        .dropdown-menu {
            min-width: 18em;
        }
    }
    .chatbox {
        .emoji-picker__header {
            .emoji-category {
                img {
                    height: var(--font-size) !important;
                    width: var(--font-size) !important;
                }
            }
        }
        converse-emoji-picker {
            .emoji-picker {
                .insert-emoji {
                    a {
                        font-size: var(--font-size);
                        line-height: calc(var(--font-size) * 1.5);
                        padding: 0;
                        height: calc(var(--font-size) * 1.5);
                        width: calc(var(--font-size) * 1.5);
                    }
                    img {
                        height: var(--font-size);
                        width: var(--font-size);
                    }
                }
            }
            .emoji-skintone-picker {
                font-size: var(--font-size-small);
            }
            .emoji-picker__header {
                .emoji-category {
                    font-size: var(--font-size-small);
                }
            }
            .emoji-picker__lists {
                height: 7em;
            }
        }
    }
}

#conversejs.converse-embedded {
    converse-emoji-dropdown {
        .dropdown-menu {
            min-width: 20em;
        }
    }
}

#conversejs.converse-fullscreen {
    converse-emoji-dropdown {
        .dropdown-menu {
            min-width: 22em;
        }
    }
    .chatbox {
        .toggle-smiley {
        }
        converse-emoji-picker {
            .emoji-picker__lists {
                height: 12em;
            }
        }
    }
}

@include media-breakpoint-up(m) {
    #conversejs {
        .chatbox {
            converse-emoji-picker {
                max-width: 40em;
            }
        }
    }
}