1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-14 21:45:08 -05:00
kaiwa/public/css/app/roster.styl

177 lines
3.0 KiB
Stylus

@import '../_variables'
@import '../_mixins'
#menu
position: fixed
top: 0px
bottom: 0px
left: 0px
width: 180px
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: 130px
.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
list-style-type: none
padding: 7px 35px 7px 10px
margin: 0px
position: relative
min-height: 30px
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
&:hover
background: $sidebarActive
&.hasUnread .unread
display: block
&.online, &.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
img
opacity: 1
.avatar
vertical-align: top
margin-right: 5px
margin-top: -15px
position: absolute
left: 10px
top: 50%
avatar()
noselect()
.name
margin-left: 40px
line-height: 30px
color: white
text-overflow: ellipsis
overflow: hidden
width: 70%
.status
color: $textSecondary
font-size: 10px
line-height: 12px
margin: 0
margin-left: 30px
&:not(:empty)
margin-top: -2px
.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)
@keyframes pulsate
0%
opacity: 1.0
50%
opacity: 0.5
100%
opacity: 1.0