apex.chat.css

/**
 *
 * Plugin : Apex chat
 * Version: 1.0.0
 *
 * Author : isabolic99
 * Mail   : sabolic.ivan@gmail.com
 * Twitter: @isabolic99
 */

.apx-chat-reg .ch-input{
    width: 100%;
    outline: none;
    border: initial;
    line-height: 1.5;
    resize: none;
    padding: 5px;
}

.apx-chat-reg{
    background-color: rgb(255, 255, 255);
}

.apx-chat-reg .ch-input-cont{
    border-top: 1px solid #ddd;
    width: 100%;
}

.apx-chat-reg .ch.ch-login{
    text-align: center;
    background-color: rgb(0, 151, 198);
    padding: 50px 10px;
}

.apx-chat-reg h3.title{
    color: white;
    font-weight: bold;
}
.invite-dialog input{
    line-height: 1.5;
    padding: 5px;
    width: 100%;
    height: 100%;
}

.apx-chat-reg .username{
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #fff;
    outline: none;
    padding-bottom: 15px;
    text-align: center;
    width: 400px;
    color: #fff;
    font-weight: bold;
}

.apx-chat-reg .ch-row,
.apx-chat-reg .ch-ty-row,
.apx-chat-reg .ch-user-left-row,
.apx-chat-reg .ch-user-join-row{
    padding: 5px;
    overflow: hidden;
}

.apx-chat-reg .ch-user-join-row .ch-join{
    background: rgba(122, 232, 253, 0.35);
    float: right;
}

.apx-chat-reg .ch-user-left-row .ch-left{
    background: rgba(130, 124, 212, 0.35);
    float: left;
}

.apx-chat-reg .ch-user-left-row .ch-left,
.apx-chat-reg .ch-user-join-row .ch-join{
    padding: 5px 10px;
    border-radius: 32px;
    overflow: hidden;
}

.apx-chat-reg .ch-avatar{
    width: 32px;
    height: 32px;
    border-radius: 30px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(227, 227, 227);
    text-align: center;
    line-height: 32px;
    font-weight: 700;
    font-size: 14px;
    display: block;
    float: left;
    margin-right: 10px;
}

.apx-chat-reg .ch-msg{
    line-height: 15px;
    word-break: break-word;
    margin-left: 40px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
    background: rgba(230, 230, 230, 0.85);
    padding: 5px;
    border-bottom-left-radius: 6px;
}

.apx-chat-reg .ch-msg.current-usr{
    background: rgba(41, 161, 212, 0.32);
}

.right-col,
.right-col .t-Region-bodyWrap,
.right-col .t-Region-body,
.right-col .apx-chat-reg,
.right-col .ch-login {
    height: 100%;
}

.ch-thread-cont{
    overflow: auto;
}

.right-col .apx-chat-reg .username{
    width: auto;
}

.right-col .apx-chat-reg .ch-input-cont{
    display: block;
}

.right-col .t-Button-label{
  display: none;
}

.right-col span.t-Icon{
    margin: 0px;
}

.right-col .apx-chat-reg{
    border-left: 1px solid #ddd;
}

.right-col.t-Region.is-maximized>.t-Region-bodyWrap>.t-Region-body{
    height: 100% !important;
}

body.t-PageBody.js-rightCollapsed .t-Body-actions {
    -webkit-transform: translate3d(300px, 0, 0);
    -ms-transform: translate(300px);
    transform: translate3d(300px, 0, 0);
}

.t-Body .t-Body-actions {
    width: 300px;
}

@media only screen and (min-width: 641px){
    body.t-PageBody.js-rightExpanded.t-PageBody--hideLeft .t-Body-title {
        right: 300px;
    }
}

.apx-chat-reg .ch-username{
    font-weight: bold;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apx-chat-reg .ch-type{
    padding: 5px 10px;
    border-radius: 32px;
    overflow: hidden;
    background: rgba(76, 217, 100, 0.43);
    float: left;
}

.apx-chat-reg .ch-type:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;
  }
}