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

201 lines
3.4 KiB
Stylus
Raw Normal View History

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