converse.js/sass/_chatrooms.scss

#conversejs.converse-embedded,
#conversejs {
    .badge--muc {
        background-color: var(--groupchats-header-color);
    }

    .add-chatroom {
        input[type="submit"],
        input[type="button"] {
            margin: 0.3em 0;
        }
    }

    #muc-details-modal {
        .features-list {
            margin-left: 1em;
        }
    }

    .chatroom-features {
        width: 100%;
        .features-list {
            padding-top: 0;
            .feature {
                width: 100%;
                margin-right: 0.5em;
                padding-right: 0;
                font-size: 1em;
                cursor: help;
                .fa {
                    margin-right: 0.5em;
                    color: var(--text-color);
                }
            }
        }
    }


    .chat-head-chatroom {
        color: var(--chatroom-head-color);
        background-color: var(--chatroom-head-bg-color);
        border-bottom: var(--chatroom-head-border-bottom);

        .chat-head__desc {
            color: var(--chatroom-head-color);
            display: var(--chatroom-head-description-display);
            a {
                color: var(--chatroom-head-description-link-color);
            }
            &:hover {
                button {
                    display: inline-block;
                }
            }
        }

        .chatbox-title {
            .btn--transparent {
                i {
                    color: var(--chatroom-head-color);
                }
            }
            .chatbox-title__text--bookmarked {
                margin-left: 0.5em;
                color: var(--chatroom-head-color);
            }
        }

        .chatbox-title__buttons {
            background-color: var(--chatroom-head-bg-color);
        }

        a, a:visited, a:hover, a:not([href]):not([tabindex]) {
            &.chatbox-btn {
                &.fa {
                    color: var(--chat-head-text-color);
                    &.button-on:before {
                        color: var(--chatroom-head-button-color);
                    }
                }
            }
        }

        .chatbox-btn {
            &.button-on:before {
                color: var(--chatroom-head-button-color);
            }
        }
        .chatbox-title__text {
            display: var(--heading-display);
            font-weight: var(--chatroom-head-title-font-weight);
            margin: auto 0;
            padding-right: var(--chatroom-head-title-padding-right);
            white-space: nowrap;
            .chatroom-jid {
                font-size: var(--font-size-small);
            }
        }
    }

    .empty-history-feedback {
        position: relative;
        span {
            width: 100%;
            text-align: center;
            position: absolute;
            margin-top: 50%;
        }
    }

    .chatroom {
        width: var(--chatroom-width);
        @media screen and (max-height: $mobile-landscape-height){
            width: var(--mobile-chat-width);
        }
        @media screen and (max-width: $mobile-portrait-length) {
            width: var(--mobile-chat-width);
        }

        .box-flyout {
            overflow-y: hidden;
            background-color: var(--chatroom-head-bg-color);

            width: 100%;
            @media screen and (max-height: $mobile-landscape-height) {
                height: var(--mobile-chat-height);
                width: var(--mobile-chat-width);
                height: var(--fullpage-chat-height);
            }
            @media screen and (max-width: $mobile-portrait-length) {
                height: var(--mobile-chat-height);
                width: var(--mobile-chat-width);
                height: var(--fullpage-chat-height);
            }
            .chatroom-body {
                flex-direction: row;
                flex-flow: nowrap;
                background-color: white;
                border-top: 0;
                width: 100%;
                overflow: hidden;

                .row {
                    flex-direction: row;
                }
                .chat-topic {
                    font-weight: bold;
                    color: var(--chatroom-head-bg-color);
                }
                .chat-info {
                    color: var(--chat-info-color);
                    line-height: normal;
                    &.badge {
                        color: var(--chat-head-text-color);
                    }
                    &.chat-msg--retracted {
                        color: var(--subdued-color);
                    }
                }
                .disconnect-container {
                    margin: 1em;
                    width: 100%;
                    h3.disconnect-msg {
                        padding-bottom: 1em;
                    }
                }
                .chat-area {
                    display: flex;
                    flex-direction: column;
                    flex: 0 1 100%;
                    justify-content: flex-end;
                    min-width: 25%;
                    word-wrap: break-word;
                    .new-msgs-indicator {
                        background-color: var(--chatroom-head-bg-color);
                    }
                    .chat-content {
                        height: 100%;
                    }
                    .chat-content__help {
                        converse-chat-help {
                            border-top: 1px solid var(--chatroom-color);
                        }
                        .close-chat-help {
                            svg {
                                fill: var(--chatroom-color);
                            }
                        }
                    }
                }
                .occupants {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    overflow-x: hidden;
                    overflow-y: hidden;
                    vertical-align: top;
                    background-color: var(--occupants-background-color);
                    border-left: var(--occupants-border-left);
                    padding: 0.5em;
                    max-width: 75%;
                    min-width: 20%;
                    flex: 0 0 25%;

                    .occupants-header {
                        display: flex;
                        flex-direction: column;
                        .hide-occupants {
                            align-self: flex-end;
                            cursor: pointer;
                            font-size: var(--font-size-small);
                        }
                    }

                    .occupants-header--title {
                        margin-top: 0.5em;
                        margin-bottom: 0.5em;
                        display: flex;
                        flex-direction: row;
                    }

                    .fa-user-plus {
                        margin-right: 0.25em;
                    }

                    .occupants-heading {
                        font-family: var(--heading-font);
                        color: var(--groupchats-header-color-dark);
                        padding-left: 0;
                        margin-right: 1em;
                    }
                    .suggestion-box{
                        ul {
                            padding: 0;
                            li {
                                padding: 0.5em;
                            }
                        }
                    }
                    ul {
                        padding: 0;
                        margin-bottom: 0.5em;
                        overflow-x: hidden;
                        overflow-y: auto;
                        list-style: none;

                        &.occupant-list {
                            overflow-y: auto;
                            flex-basis: 0;
                            flex-grow: 1;
                        }
                        li {
                            cursor: default;
                            display: block;
                            font-size: var(--font-size-small);
                            overflow: hidden;
                            padding: 0.25em 0.25em 0.25em 0;
                            text-overflow: ellipsis;
                            .fa {
                                margin-right: 0.5em;
                            }
                            &.feature {
                                font-size: var(--font-size-tiny);
                            }
                            &.occupant {
                                cursor: pointer;

                                .occupant-nick-badge {
                                    display: flex;
                                    justify-content: space-between;
                                    flex-wrap: wrap;

                                    .occupant-badges {
                                        display: flex;
                                        justify-content: flex-end;
                                        flex-wrap: wrap;
                                        flex-direction: row;

                                        span {
                                            margin-right: 0.25rem;
                                        }
                                    }
                                }

                                div.row.no-gutters {
                                    flex-wrap: nowrap;
                                    min-height: 1.5em;
                                }
                                .badge {
                                    margin-bottom: 0.125rem;
                                }

                                .occupant-status {
                                    display: inline-block;
                                    margin: 0 0.5em 0.125em 0;
                                    width: 0.5em;
                                    height: 0.5em;

                                    &.occupant-online,
                                    &.occupant-chat {
                                        background-color: #1A9707;
                                    }
                                    &.occupant-dnd {
                                        background-color: red;
                                    }
                                    &.occupant-away {
                                        background-color: darkorange;
                                    }
                                    &.occupant-xa {
                                        background-color: orange;
                                    }
                                    &.occupant-offline {
                                        background-color: darkgrey;
                                    }
                                }
                            }
                        }
                    }
                }
                .chatroom-form-container {
                    background-color: white;
                    border: 0;
                    color: var(--text-color);
                    font-size: var(--font-size);
                    height: 100%;
                    width: 100%;
                    overflow-y: auto;

                    .validation-message {
                        font-size: 90%;
                        color: var(--error-color);
                    }
                    input[type=button],
                    input[type=submit] {
                        margin: 0 0.5em;
                    }
                    .button-primary {
                        background-color: var(--chatroom-head-button-color);
                    }
                }

                .chatroom-form {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 2em;
                }
            }
        }

        converse-muc-bottom-panel {
            display: contents;
        }

        .muc-bottom-panel {
            height: 3em;
            padding: 0.5em;
            text-align: center;
            font-size: var(--font-size-small);
            background-color: var(--chatroom-head-bg-color);
            color: white;

            &.muc-bottom-panel--muted {
                height: 4em;
                width: 100%;
            }

            &.muc-bottom-panel--nickname {
                padding: 0;
                height: 16em;

                .chatroom-form-container {
                    .chatroom-form {
                        padding-top: 2em;
                        padding-bottom: 0;
                    }
                }
            }
        }

        .sendXMPPMessage {
            .suggestion-box__results--above {
                bottom: 4.5em;
            }
            .chat-textarea, input {
                &:active, &:focus{
                    outline-color: var(--chatroom-head-bg-color);
                }
                &.correcting {
                    background-color: var(--chatroom-correcting-color);
                }
            }
            .chat-textarea {
                border-bottom-right-radius: 0;
            }
        }

        .room-invite {
            .invited-contact {
                margin: -1px 0 0 -1px;
                width: 100%;
                border: 1px solid #999;
            }
        }
    }
}

/* ******************* Overlay  styles *************************** */

#conversejs {
    converse-chats {
        &.converse-overlayed {
            .chatbox {
                &.chatroom {
                    min-width: var(--chatroom-width) !important;
                    width: var(--chatroom-width);
                    .box-flyout {
                        min-width: var(--chatroom-width) !important;
                        width: var(--chatroom-width);
                    }
                    .chatbox-title__text {
                        @include make-col(7);
                    }
                    .chatbox-title__buttons {
                        @include make-col(5);
                    }

                    .chat-head__desc {
                        font-size: 80%;
                        margin-bottom: 1em;
                    }
                    .chatroom-body {
                        .occupants {
                            .occupants-heading {
                                padding: 0;
                            }
                            .occupant-list {
                                border-bottom: none;
                            }
                            ul {
                                .occupant {
                                    .occupant-nick-badge {
                                        .occupant-badges {
                                            display: none;
                                        }
                                    }
                                    .occupant-status {
                                        margin-top: 6px;
                                    }
                                }
                            }
                        }
                        .chat-area {
                            min-width: var(--overlayed-chat-width);
                        }
                    }
                }
            }
        }

        &.converse-embedded,
        &.converse-fullscreen,
        &.converse-mobile {

            .chatroom {
                .box-flyout {
                    width: 100%;

                    .chatroom-body {
                        .chat-area {
                            &.full {
                                .new-msgs-indicator {
                                    max-width: 100%;
                                }
                            }
                        }
                        .occupants {
                            padding: var(--occupants-padding);
                            .occupants-heading {
                                font-size: var(--font-size-large);
                            }
                            ul {
                                &.occupant-list {
                                    li {
                                        font-size: var(--font-size-small);
                                    }
                                }
                            }
                        }
                    }
                }
                .room-invite {
                    span {
                        .invited-contact {
                            margin: 0 0 0.5em -1px;
                        }
                    }
                }
            }
        }

        &.converse-embedded {
            .chatroom {
                margin: 0;
                width: 100%;
                .box-flyout {
                    .occupants-heading {
                        font-size: 120%;
                    }
                    .chat-content {
                        .chat-message {
                            margin: 0.5em;
                            font-size: 120%;
                        }
                    }
                    .sendXMPPMessage {
                        .chat-textarea {
                            padding: 0.5em;
                            font-size: 110%;
                        }
                    }
                    .chatroom-body {
                        height: 100%;
                        .chatroom-form-container {
                            height: 100%;
                            position: relative;
                        }
                    }
                    .occupants {
                        .occupant-list {
                            padding-left: 0.3em;
                        }
                    }
                }
            }
        }
    }
}


@include media-breakpoint-down(sm) {
    #conversejs {
        converse-chats.converse-mobile,
        converse-chats.converse-overlayed,
        converse-chats.converse-fullscreen {
            .chatbox {
                .box-flyout {
                    .chat-head-chatroom {
                        .chatbox-navback {
                            margin-right: 0 !important;
                            .fa-arrow-left {
                                &:before {
                                    color: var(--chatroom-head-color);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}