@import '../_variables' @import '../_mixins' #menu position: fixed top: 0px bottom: 0px left: 0px width: 200px background-color: $sidebarBg z-index: 300 overflow-y: auto; overflow-x: hidden; webkit-transition-fix() noselect() .main margin-bottom: 10px li list-style-type: none margin: 10px 0 5px 0 text-align: center &:last-child margin: 0 svg position: absolute top: 50% left: 10px margin-top: -13px fill: white a position: relative width: 150px .button background: $sidebarActive &:hover background: lighten($sidebarActive, 10%) h1 font-size: 10px margin: 0 padding: 20px 10px color: white text-transform: uppercase #roster, #bookmarks li display: table list-style-type: none padding: 7px 35px 7px 10px margin: 0px position: relative min-height: 40px font-size: $fontSmall 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 display: table-cell vertical-align: middle .unread:not(:empty) display: block &:hover background: $sidebarActive &.online:not(.idle), &.chat, &.dnd, &.away, &.xa &:after content: '' position: absolute top: 50% right: 15px height: 8px width: 8px margin-top: -4px roundall(10px) &.online, &.chat &:after background: #427a00 &.dnd &:after background: #c50041 &.away, &.xa &:after background: #f57900 &.offline:not(:hover) .name color: darken($textSecondary, 40%) .status color: darken($textSecondary, 65%) img opacity: .25 &.activeContact, &.offline.activeContact background: white font-weight: bold .name color: $baseText &.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: $textSecondary &.idle padding-right: 15px .name color: $textSecondary max-width: 60% .user width: 95% img opacity: 1 .avatar vertical-align: top margin-right: 5px margin-top: -15px position: absolute left: 10px top: 50% avatar() noselect() .user margin-left: 40px color: white width: 70% .name display: inline-block text-overflow: ellipsis overflow: hidden .status color: $textSecondary font-size: 10px font-weight: 400 line-height: 12px margin: 0 margin-left: 40px .unread display: none color: white height: 22px width: 30px padding-top: 8px roundall(30px) position: absolute top: 7px left: 10px font-size: 10px font-weight: bold text-align: center background: rgba(0, 174, 239, .8) .idleTime display: inline-block margin-left: 5px font-size: 10px color: darken($textSecondary, 50%) #bookmarks .name padding: 10px 15px 10px 40px @keyframes pulsate 0% opacity: 1.0 50% opacity: 0.5 100% opacity: 1.0