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

@import "bourbon";
@import "converse/variables";
#conversejs.converse-embedded {

    @include box-sizing(border-box);
    *, *:before, *:after {
        @include box-sizing(border-box);
    }

    bottom: auto;
    right: auto;
    position: relative;
    width: 100%;

    form {
        &.pure-form.converse-centered-form {
            position: absolute;
            top: 30%;
            transform: translateY(-50%);
        }
    }

    .chatroom {
        width: auto;
    }
    .flyout {
        bottom: auto;
        display: block;
        position: relative;
    }
    .chatbox {
        float: none;

        .box-flyout {
            box-shadow: none;
        }
        .chat-title {
            padding: 0.3em;
            font-size: 120%;
        }
    }
    .chatbox-btn {
        display: none;
    }
    .chatroom {
        .box-flyout {
            min-width: auto;
            width: 100%;
            height: 55vh;
            .chat-body {
                @include calc(height, '100% - #{$chat-head-height}');
            }
            .occupants-heading {
                font-size: 120%;
            }
            .chat-content {
                height: calc(100% - #{$toolbar-height + $chat-textarea-height +2px});
                .chat-message {
                    margin: 0.5em;
                    font-size: 120%;
                }
            }
            .sendXMPPMessage {
                .chat-textarea {
                    padding: 0.5em;
                    font-size: 110%;
                }
            }
            .chatroom-body {
                .chatroom-form-container {
                    font-size: 180%;
                    float: left;
                    height: 100%;
                    position: relative;
                    input {
                        font-size: 60%;
                    }
                }
            }
            .occupants {
                .occupant-list {
                    padding-left: 0.3em;
                    li.occupant {
                        font-size: 120%;
                    }
                }
            }
        }
    }
}