1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-30 05:02:16 -05:00
kaiwa/public/css/pages/roster.styl

198 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
2013-10-23 13:57:46 -04:00
background-color: $blue-saturated-darker
2013-09-16 05:19:07 -04:00
z-index: 300
overflow-y: auto;
overflow-x: hidden;
webkit-transition-fix()
noselect()
.main
2013-10-25 12:01:16 -04:00
margin: 10px 0 0 0
text-align: center
2013-09-16 05:19:07 -04:00
li
2013-10-25 12:01:16 -04:00
display: inline-block
2013-09-23 04:37:02 -04:00
2013-10-25 12:01:16 -04:00
&:last-of-type
a
margin-left: 5px
padding-left: 30px
2013-09-16 05:19:07 -04:00
svg
position: absolute
top: 50%
2013-10-25 12:01:16 -04:00
left: 5px
margin-top: -13px
fill: white
2013-09-16 05:19:07 -04:00
a
position: relative
2013-09-23 04:37:02 -04:00
2013-09-16 05:19:07 -04:00
h1
2013-10-23 13:15:38 -04:00
font-size: $font-size-small
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
list-style-type: none
padding: 7px 35px 7px 10px
2013-09-16 05:19:07 -04:00
margin: 0px
position: relative
min-height: 40px
font-size: $font-size-small
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
vertical-align: middle
2013-10-23 09:02:08 -04:00
padding-left: 40px
2013-09-16 05:19:07 -04:00
.unread:not(:empty)
display: block
2013-09-16 05:19:07 -04:00
&:hover
2013-10-24 18:16:34 -04:00
background: $blue-saturated
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
2013-10-25 11:44:58 -04:00
background: $green
2013-09-16 05:19:07 -04:00
&.dnd
2013-09-25 02:57:46 -04:00
&:after
2013-10-25 11:44:58 -04:00
background: $red
2013-09-16 05:19:07 -04:00
&.away,
&.xa
2013-09-25 02:57:46 -04:00
&:after
2013-10-25 11:44:58 -04:00
background: $orange
2013-09-21 12:16:53 -04:00
&.offline:not(:hover)
.name
2013-10-23 13:57:46 -04:00
color: darken($gray-light, 40%)
2013-09-16 05:19:07 -04:00
2013-09-23 14:06:42 -04:00
.status
2013-10-23 13:57:46 -04:00
color: darken($gray-light, 65%)
2013-09-23 14:06:42 -04:00
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: $font-weight-bold
2013-09-16 05:19:07 -04:00
2013-09-21 12:16:53 -04:00
.name
2013-10-23 13:57:46 -04:00
color: $gray
2013-09-21 12:16:53 -04:00
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
2013-10-23 13:57:46 -04:00
background: $gray-light
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-10-23 13:57:46 -04:00
color: $gray-light
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: 20px
avatar()
2013-09-16 05:19:07 -04:00
noselect()
.user
2013-09-21 12:16:53 -04:00
color: white
width: 70%
2013-10-23 09:02:08 -04:00
line-height: 100%
.name
display: inline-block
text-overflow: ellipsis
overflow: hidden
2013-09-16 05:19:07 -04:00
.status
2013-10-23 13:57:46 -04:00
color: $gray-light
2013-10-24 18:46:40 -04:00
font-size: $font-size-small
2013-09-25 04:45:23 -04:00
font-weight: 400
line-height: 12px
margin: 0
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: 5px
left: 10px
2013-10-24 18:46:40 -04:00
font-size: $font-size-small
font-weight: $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-10-23 13:15:38 -04:00
font-size: $font-size-small
2013-10-23 13:57:46 -04:00
color: darken($gray-light, 50%)
2013-09-27 03:28:18 -04:00
2013-10-15 14:56:40 -04:00
#bookmarks
.name
2013-10-23 09:05:51 -04:00
padding: 5px 10px 5px 40px
2013-10-15 14:56:40 -04:00
@keyframes pulsate
0%
opacity: 1.0
50%
opacity: 0.5
100%
opacity: 1.0