kaiwa/public/css/pages/roster.styl

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

#menu
  position: fixed
  top: 0px
  bottom: 0px
  left: 0px
  width: 200px
  background-color: $blue-saturated-darker
  border-right: 1px solid $gray-lighter
  z-index: 300
  overflow-y: auto;
  overflow-x: hidden;
  webkit-transition-fix()
  noselect()

  .main
    margin: 10px 0 0 0
    text-align: center
    li
      display: inline-block

      &:last-of-type
        a
          margin-left: 5px
          padding-left: 30px

      svg
        position: absolute
        top: 50%
        left: 5px
        margin-top: -13px
        fill: white

      a
        position: relative

  h1
    font-size: $font-size-small
    margin: 0
    padding: 20px 10px
    color: white
    text-transform: uppercase

#roster,
#bookmarks

  li
    list-style-type: none
    padding: 7px 35px 7px 10px
    margin: 0px
    position: relative
    min-height: 40px
    font-size: $font-size-small
    color: #fff
    cursor: pointer
    transition: all .3s ease-in 0
    -webkit-transition: all .3s ease-in 0
    -moz-transition: all .3s ease-in 0
    width: 100%
    borderbox()

    .wrap
      vertical-align: middle
      padding-left: 40px

    .unread:not(:empty)
      display: block

    &:hover
      background: $blue-saturated

    &.online, &.chat, &.dnd, &.away, &.xa
      &:after
        content: ''
        position: absolute
        top: 50%
        right: 15px
        height: 6px
        width: 6px
        margin-top: -4px
        border: 1px solid transparent
        roundall(10px)

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

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

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

    &.offline:not(:hover)
      .name
        color: darken($gray-light, 40%)

      .status
        color: darken($gray-light, 65%)

      img
        opacity: .25

    &.activeContact, &.offline.activeContact
      background: white
      font-weight: $font-weight-bold

      .name
        color: $gray

    &.composing
      &:after
        animation: pulsate 1.5s infinite ease-in
        -webkit-animation: pulsate 1.5s infinite ease-in
        -moz-animation: pulsate 1.5s infinite ease-in

    &.paused
      &:after
        background: lighten($gray-light, 30%)
        border-color: lighten($gray-light, 30%)

    &.idle
      padding-right: 15px

      &:after
        background: transparent

      .name
        color: $gray-light
        max-width: 60%

      .user
        width: 95%

    img
      opacity: 1

    .avatar
      vertical-align: top
      margin-right: 5px
      margin-top: -15px
      position: absolute
      left: 10px
      top: 20px
      avatar()
      noselect()

    .user
      color: white
      width: 100%
      line-height: 100%
      overflow: hidden
      text-overflow: ellipsis

    .name
      display: inline-block
      text-overflow: ellipsis
      overflow: hidden

    .status
      color: $gray-light
      font-size: $font-size-small
      font-weight: 400
      line-height: 12px
      margin: 0

    .unread
      display: none
      color: white
      height: 22px
      width: 30px
      padding-top: 8px
      roundall(30px)
      position: absolute
      top: 5px
      left: 10px
      font-size: $font-size-small
      font-weight: $font-weight-bold
      text-align: center
      background: rgba(0, 174, 239, .8)

    .idleTime
      display: inline-block
      margin-left: 5px
      font-size: $font-size-small
      color: darken($gray-light, 50%)

#bookmarks

  .name
    padding: 5px 10px 5px 40px

@keyframes pulsate
  0%
    opacity: 1.0
  50%
    opacity: 0.5
  100%
    opacity: 1.0