kaiwa/public/css/pages/chat.styl

@import '../_variables'
@import '../_mixins'

.page.chat
  padding-top: 0px
  borderbox()
  overflow-y: auto
  overflow-x: hidden

.conversation
  padding: 0px
  overflow: hidden
  borderbox()

  header
    padding: 0px
    padding-left: 6px
    border-bottom: 1px solid darken($gray-lighter, 10%)
    position: fixed
    top: 40px
    right: 0px
    left: 201px
    z-index: 10
    borderbox()
    background: lighten($gray-light, 93%)

    &:before
      content: ''
      position: absolute
      left: 5px
      top: 18px
      height: 6px
      width: 6px
      margin-top: -3px
      roundall(10px)

    &.online,
    &.chat
      &:before
        background: $green

    &.dnd:before
      background: $red

    &.away:before,
    &.xa:before
      background: $orange

    &.offline:before
      background: $gray-dark

    &.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,
    &.idle:before
      background: lighten($gray-light, 30%)

    .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

    h1
      font-size: 12px
      margin: 5px
      margin-left: 10px
      padding: 0px
      white-space: nowrap
      max-width: 80%
      display: inline-block
      height: 25px
      line-height: 25px

    .name
      font-size: 12px
      border-width: 0px
      padding: 0px
      display: inline-block

    .status
      font-weight: normal
      font-size: 12px
      border-width: 0px
      padding: 0px
      max-width: 80%
      padding-left: 5px
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      transition: all .25s
      display: inline-block

      &: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: -2px
      text-transform: capitalize
      display: inline-block

    .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
  width: 100%
  top: 0px
  bottom: 55px
  padding-top: 75px
  borderbox()
  -webkit-overflow-scrolling: touch

  li
    position: relative
    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()
  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

    &.typing:focus,
    &.editing:focus
      transition: none
      -webkit-transition: none

    &.editing
      background-color: #fffcea
      border: 1px solid #efe391
      color: #d2bd2d