@import '../_variables' @import '../_mixins' .page.chat padding-top: 0px borderbox() overflow-y: auto overflow-x: hidden .conversation bottom: 0px left: 0px right: 0px padding: 0px width: 100% borderbox() header padding: 0px padding-left: 6px border-bottom: 2px solid $gray-lighter position: fixed right: 0px left: 201px z-index: 10 borderbox() background: lighten($gray-light, 93%) &.online:not(.idle), &.chat, &.dnd, &.away, &.xa &:before content: '' position: absolute top: 50% height: 6px width: 6px margin-top: -3px roundall(10px) &.online, &.chat &:before background: $green &.dnd &:before background: $red &.away, &.xa &:before background: $orange &.offline:not(:hover) .name color: darken($gray-light, 40%) .status color: darken($gray-light, 65%) .avatar opacity: .25 &.composing &:before animation: pulsate 1.5s infinite ease-in -webkit-animation: pulsate 1.5s infinite ease-in -moz-animation: pulsate 1.5s infinite ease-in &.paused &:before background: $gray-light &.idle padding-right: 15px .name color: $gray-light max-width: 60% .controls float: right .leaveRoom display: none .joinRoom display: block button margin-top: 5px &.joined .joinRoom display: none .leaveRoom display: block .avatar margin-right: 5px avatar() position: absolute top: 11px left: 11px vertical-align: top .name, .call float: left .name margin: 10px margin-left: 10px margin-right: 5px padding: 0px font-size: $font-size-base max-width: 50% .status margin: 10px margin-left: 0px padding: 0px font-size: $font-size-small max-width: 75% float: left overflow: hidden text-overflow: ellipsis white-space: nowrap &:not(:empty):before content: '- ' .tzo:not(:empty) position: absolute right: 15px top: 18px height: 20px margin-top: -10px padding: 0 5px roundall(3px) font-size: $font-size-small font-weight: $font-weight-bold line-height: 20px color: lighten($gray, 30%) background: $gray-lighter border: 1px solid darken($gray-lighter, 10%) &:before content: 'Current Time: ' font-weight: bold .call margin-top: 5px text-transform: capitalize .activeCall transition(height 250ms) height: 0px position: relative top: 0px .remote position: absolute top: 60px left: 10px height: 50% .local position: absolute bottom: 10px right: 10px height: 20% border: 2px solid $gray-lighter transform(scaleX(-1)) .button-wrap position: absolute left: 10px bottom: 10px .button-group margin-left: 5px // while on video call the parent has // this class so we animate the height &.onCall .activeCall height: 400px .messages margin: 0px padding: 0px overflow-y: auto overflow-x: hidden position: absolute top: 0px bottom: 0px padding-top: 35px padding-bottom: 55px width: 100% borderbox() -webkit-overflow-scrolling: touch li position: relative z-index: 1 list-style: none padding: 10px 0 width: 100% min-height: 50px display: table borderbox() border-bottom: 1px solid $gray-lighter display: table-row &:last-of-type border: none .messageAvatar display: inline-block img avatar() .name text-indent: -9999em position: absolute width: 1px .sender display: table-cell font-size: 12px font-weight: bold color: $gray padding: 5px text-align: right border-top: 1px solid #eee white-space: nowrap vertical-align: middle .name padding-left: 10px vertical-align: middle .messageWrapper display: table-cell padding: 5px border-top: 1px solid #eee width: 99% vertical-align: middle .message font-size: $font-size-small margin: 2px display: inline-block padding-right: 11px min-width: 20px width: 100% borderbox() &:not(.mine) color: $gray-dark &.mine background: white .timestamp color: darken($gray-lighter, 20%) &.delayed .timestamp:before content: '@ ' &.edited .timestamp:before content: 'edited ' &.pending color: lighten($gray, 50%) &.meAction font-style: italic color: $blue background-color: $blue-lighter padding: 2px padding-left: 8px border-radius: 2px &:before content: '\2022 ' font-style: normal .timestamp position: relative left: -10px font-style: normal color: $blue-light .body display: inline word-break: break-word .mention color: $pink background-color: $pink-lighter padding: 1px font-weight: bold border-radius: 4px border: 1px solid darken($pink-lighter, 25%) .timestamp font-size: $font-size-smaller color: lighten($blue, 50%) float: right display: block .sender display: block .chatBox borderbox() border-top: 1px solid $gray-lighter bottom: 0px position: fixed right: 0px left: 201px z-index: 200 form background: lighten($gray-light, 93%) padding: 11px .formwrap borderbox() width: 100% padding-right: 80px position: relative textarea height: 30px padding: 6px 10px &:focus transition: none -webkit-transition: none &.editing background-color: #fffcea border: 1px solid #efe391 color: #d2bd2d