chat/www/css/theme.css

/* Theme */

#chat-host {
    background-color: #e2e2e2;
    font-family: "Ubuntu", sans-serif;
    font-size: 13px;
}

#chat-host .main .messages {
    border: none;
    margin-right: 1em;
    background-color: #f8f8f8;
}

#chat-host .main .messages li.systemMsg {
    margin: 0.5em;
}

#chat-host .main .messages li.userMsg {
    background-color: #ededed;
    border-radius: 1em;
    padding: 0.5em 0.8em 0.5em 4em;
    margin: 0.5em 1em;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-left-width: 1em;
    box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
}

#chat-host .main .messages li.userMsg.self {
    padding: 0.5em 4em 0.5em 0.8em;
    border-left-width: 1px;
    border-right-width: 1em;
}

#chat-host .main .messages li.userMsg .user,
#chat-host .main .userlistWrapper .userlist li span {
    filter: brightness(0.7) saturate(1.2);
}

#chat-host .main .messages li.userMsg .avatar {
    position: absolute;
    border-radius: 50%;
    width: 2.75em;
    height: 2.75em;
    left: 0.75em;
    background-color: silver;
    object-fit: cover;
}

#chat-host .main .messages li.userMsg.self .avatar {
    left: unset;
    right: 0.75em;
}

#chat-host .main .messages li.userMsg .message {
    margin-top: 0.2em;
}


#chat-host .main .userlistWrapper {
    border-left: 1px solid #e2e2e2;
    padding-left: 1em;
}

#chat-host button {
    background-color: #751b09;
    color: #ffffff;
    padding: 1em;
}

#chat-host h2 {
    font-size: inherit;
    text-transform: uppercase;
    color: #4d4d4d;
}