TeaWeb/shared/css/static/ts/chat.scss

.container-frame-chat {
    font-family: Arial, serif;
    font-size: 12px;
    /*white-space: pre;*/
    line-height: 1;
    padding: 2px;
    height: 100%;
    display: flex;
    flex-direction: column;

	flex-grow: 1;

    div, a {
        vertical-align: middle;
    }

    .messages {
        border-color: #6f6f6f;
        border-radius: 2px 2px 2px 0;
        border-style: solid;
        overflow-y: auto;
        flex-grow: 1;

        .message_box {
            flex-wrap: wrap;
            display: flex;
            align-items: flex-start;
            height: auto;

            .message {
                width: 100%;
                display: inline-block;

                * {
                    display: inline-block;
                    vertical-align: top;
                }

                .event-message { /* special formated messages */
                    &.event-partner-disconnect {
                        color: red;
                    }

                    &.event-partner-connect {
                        color: green;
                    }

                    &.event-partner-closed {
                        color: orange;
                    }
                }
            }
        }
    }


    .chats {
        max-width: 100%;
        flex-shrink: 0;
        flex-grow: 0;
        overflow: auto;
        overflow-y: hidden;
        white-space: nowrap;
        margin-top: -1px;
        display: flex;
        user-select: none;

        .chat {
            background: #5f5f5f5f;
            display: inline-block;
            border: 1px solid #6f6f6f;
            border-radius: 0 0 2px 2px;
            vertical-align: middle;
            padding-right: 5px;
            padding-left: 2px;
            cursor: pointer;
            height: 18px;

            .btn_close {
                display: none;

                float: none;
                margin-right: -5px;
                margin-left: 8px;

                &:hover, &:focus {
                    color: black;
                    text-decoration: none;
                    cursor: pointer;
                }
            }

            .name, .chat-type {
                display: inline-block;
            }

            .name {
                color: black;
            }

            &.closeable {
                .btn_close {
                    display: inline-block;
                }
            }

            &.active {
                background: #11111111;
            }

            &.offline {
                .name {
                    color: gray;
                }
            }
            &.unread {
                .name {
                    color: blue;
                }
            }
        }
    }

    .input {
        display: flex;
        flex-direction: row;
        justify-content: stretch;

        height: auto;
        width: 100%;
        margin-top: 2px;
        position: relative;
        flex-shrink: 0;

        .bmd-form-group {
            flex-grow: 1;
            flex-shrink: 1;

            margin-right: 5px;
            padding-top: 0;
        }


        .form-group {
            flex-grow: 1;
            flex-shrink: 1;
            margin: 0 5px 0 0;

            textarea {
                height: 30px;
                min-height: 30px;
                max-height: 80px;

                resize: vertical;
                overflow-y: auto;
            }
        }

        button {
            padding-top: 1px;
            padding-bottom: 1px;
        }
    }
}