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: 4px
      width: 4px
      margin-top: -3px
      border: 1px solid transparent
      roundall(10px)

    &.online,
    &.chat
      &:before
        background: $green
        border-color: $green

    &.dnd:before
      background: $red
      border-color: $red

    &.away:before,
    &.xa:before
      background: $orange
      border-color: $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
      background: lighten($gray-light, 30%)
      border-color: lighten($gray-light, 30%)

    &.idle:before
      background: transparent

    .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
      overflow: hidden

    .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
      text-transform: capitalize
      display: inline-block
      margin-left: 10px
      float: right

    .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
  .activeCall
    display: none
  &.onCall
    .activeCall
      display: block
      height: 400px

.messages
  margin: 0px
  padding: 0px
  overflow-y: auto
  overflow-x: hidden
  position: absolute
  top: 0px
  right: 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

    p a
      display: inline
      word-wrap: break-word
      word-break: break-all

    p img
      margin: 5px 0
      border-radius: 5px
      box-shadow: rgba(0, 0, 0, .25) 0 2px 3px

  .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: 3px
    min-width: 20px
    width: 100%
    borderbox()

    &:not(.mine)
      color: $gray-dark

    &.mine
      .timestamp
        color: darken($gray-lighter, 20%)

    &.mine.pendingReceipt:not(.delayed)
      .timestamp:after
        content: '\26A0'
        color: $orange

    &.delayed
      .timestamp:before
        content: '@ '

    &.edited
      .timestamp:before
        content: 'edited '

    &.mine.delivered
      .timestamp:after
        content: '\2713' !important
        color: $green !important

    &.pending
      color: lighten($gray, 50%)

    &.meAction
      font-style: italic
      color: $blue
      background-color: $blue-lighter
      padding: 2px
      padding-left: 8px
      padding-right: 3px
      border-radius: 2px

      &:before
        content: '\2022  '
        font-style: normal

      .timestamp
        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

      &:after
        width: 12px
        content: ''
        display: inline-block
        text-align: center

    .sender
      display: block

.chatBox
  borderbox()
  bottom: 0px
  position: fixed
  right: 0px
  left: 201px
  z-index: 200
  transition: none
  -webkit-transition: none

  form
    border-top: 1px solid #eee
    background: lighten($gray-light, 93%)
    padding: 11px
    transition: none
    -webkit-transition: none

  .formwrap
    borderbox()
    width: 100%
    padding-right: 80px
    position: relative

  textarea
    height: 30px
    padding: 6px 10px
    transition: none
    -webkit-transition: none

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


.group.conversation

  .messages
    right: 150px

  .groupRoster
    width: 150px
    margin: 0px
    padding: 0px
    overflow-y: auto
    overflow-x: hidden
    position: absolute
    top: 0px
    right: 0px
    bottom: 50px
    padding-top: 80px
    padding-bottom: 10px
    borderbox()
    -webkit-overflow-scrolling: touch
    background: lighten($gray, 95%)
    border-left: 1px solid #eee

    li
      padding: 3px
      margin: 0px
      font-size: 12px
      position: relative

      .name
        padding-left: 10px

      &:before
        content: ''
        position: absolute
        left: 4px
        top: 11px
        height: 4px
        width: 4px
        margin-top: -3px
        border: 1px solid transparent
        roundall(10px)

      &.online,
      &.chat
        &:before
          background: $green
          border-color: $green

      &.dnd:before
        background: $red
        border-color: $red

      &.away:before,
      &.xa:before
        background: $orange
        border-color: $orange

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

      &.idle:before
        background: transparent

.embeds
  margin: 0px
  padding: 0px

.embed
  max-width: 500px

  a, a:hover
    color: #34465a

  &.active
    display: inline-block
    margin: 5px
    padding: 10px
    border: 1px solid #eee
    background-color: lighten($gray-lighter, 50%)
    text-align: center

    img
      margin-bottom: 5px

    .description
      border: 1px solid #eee
      background-color: #fff
      margin: 0px
      padding: 10px
      text-align: left
      font-size: 11px
      font-weight: normal

      h3
        font-size: 12px
        margin: 0px
        padding: 2px
        border-bottom: 1px solid #eee

      p
        margin: 3px
        padding: 2px

    a.link, a.twitter
      img
        float: left
      img + .description
        margin-left: 110px
        font-size: 12px
      h4
        font-size: 14px
        margin: 0px
        padding: 2px

  &.collapsed
    img
      display: none
  &.hidden
    display: none