@import '../_variables' @import '../_mixins' .page.chat padding-top: 0px borderbox() .conversation position: relative bottom: 0px left: 0px right: 0px padding: 0px width: 100% borderbox() .remoteVideo display: none &.activeCall .remoteVideo width: 100% display: block header padding: 5px border-bottom: 2px solid $grayOutline position: fixed right: 0px left: 201px z-index: 10 borderbox() background: $grayBackground .avatar margin-right: 5px avatar() position: absolute top: 11px left: 11px vertical-align: top .name, .call float: left .name margin: 15px padding: 0px margin-left: 45px font-size: 14px line-height: 14px max-width: 50% .tzo:not(:empty) position: absolute right: 15px top: 28px height: 20px margin-top: -10px padding: 0 5px roundall(3px) text-transform: uppercase font-size: 9px font-weight: bold line-height: 20px color: lighten($baseText, 30%) background: $grayOutline .call margin-top: 10px height: 25px line-height: 25px min-width: 60px .messages margin: 0px padding: 0px padding-top: 130px overflow-y: auto overflow-x: hidden position: relative bottom: 75px width: 100% borderbox() li position: relative z-index: 1 list-style: none padding: 10px 0 width: 100% min-height: 50px display: block borderbox() border-bottom: 1px solid $grayOutline &:last-of-type border: none .messageAvatar position: absolute top: 50% left: 10px margin-top: -15px img avatar() .name text-indent: -9999em position: absolute width: 1px .messageWrapper margin-left: 50px .message font-size: 12px margin: 0px display: inline-block padding-right: 11px min-width: 20px width: 100% borderbox() &:not(.mine) color: $activeBlue &.mine background: white .timestamp color: darken($grayOutline, 20%) &.delayed .timestamp:before content: '@ ' &.edited .timestamp:before content: 'edited ' &.pending color: lighten($baseText, 50%) .body display: inline word-break: break-word padding: 0px margin: 0px .timestamp font-size: 10px font-weight: bold color: lighten($activeBlue, 50%) float: right display: block .sender display: block .chatBox borderbox() border-top: 1px solid $grayOutline bottom: 0px position: fixed right: 0px left: 201px z-index: 200 form background: $grayBackground padding: 11px .formwrap borderbox() width: 100% padding-right: 80px position: relative textarea width: 100% position: relative height: 30px line-height: 18px padding: 5px background: white &.editing background-color: #fffcea border: 1px solid #efe391 color: #d2bd2d