moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-12-25 00:48:51 -05:00
Code Issues Releases Wiki Activity

[ux] move statuses to dots. #2

Browse Source
This commit is contained in:
karolinaszczur 2013-09-25 08:57:46 +02:00
parent 9f454bb16f
commit b32385391e
2 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
public/css/app/roster.styl
View File

@ -69,19 +69,31 @@
&.hasUnread .unread &.hasUnread .unread
display: block 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, &.online,
&.chat &.chat
border-left: 3px solid #427a00 &:after
background: #427a00
&.dnd &.dnd
border-left: 3px solid #c50041 &:after
background: #c50041
&.away, &.away,
&.xa &.xa
border-left: 3px solid #f57900 &:after
background: #f57900
&.offline
border-left: none
&.offline:not(:hover) &.offline:not(:hover)
.name .name
@ -100,21 +112,8 @@
.name .name
color: $baseText color: $baseText
&.composing, &.paused
&:after
content: ''
position: absolute
top: 50%
right: 15px
height: 8px
width: 8px
margin-top: -4px
roundall(10px)
&.composing &.composing
&:after &:after
background: #f57900
animation: pulsate 1.5s infinite ease-in animation: pulsate 1.5s infinite ease-in
-webkit-animation: pulsate 1.5s infinite ease-in -webkit-animation: pulsate 1.5s infinite ease-in
-moz-animation: pulsate 1.5s infinite ease-in -moz-animation: pulsate 1.5s infinite ease-in

71
public/css/otalk.css
View File

@ -387,25 +387,45 @@ h4 {
#bookmarks li.hasUnread .unread { #bookmarks li.hasUnread .unread {
display: block; display: block;
} }
#roster li.online, #roster li.online:after,
#bookmarks li.online, #bookmarks li.online:after,
#roster li.chat, #roster li.chat:after,
#bookmarks li.chat { #bookmarks li.chat:after,
border-left: 3px solid #427a00; #roster li.dnd:after,
#bookmarks li.dnd:after,
#roster li.away:after,
#bookmarks li.away:after,
#roster li.xa:after,
#bookmarks li.xa:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
height: 8px;
width: 8px;
margin-top: -4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-o-border-radius: 10px;
-border-radius: 10px;
border-radius: 10px;
} }
#roster li.dnd, #roster li.online:after,
#bookmarks li.dnd { #bookmarks li.online:after,
border-left: 3px solid #c50041; #roster li.chat:after,
#bookmarks li.chat:after {
background: #427a00;
} }
#roster li.away, #roster li.dnd:after,
#bookmarks li.away, #bookmarks li.dnd:after {
#roster li.xa, background: #c50041;
#bookmarks li.xa {
border-left: 3px solid #f57900;
} }
#roster li.offline, #roster li.away:after,
#bookmarks li.offline { #bookmarks li.away:after,
border-left: none; #roster li.xa:after,
#bookmarks li.xa:after {
background: #f57900;
} }
#roster li.offline:not(:hover) .name, #roster li.offline:not(:hover) .name,
#bookmarks li.offline:not(:hover) .name { #bookmarks li.offline:not(:hover) .name {
@ -433,26 +453,7 @@ h4 {
color: #565656; color: #565656;
} }
#roster li.composing:after, #roster li.composing:after,
#bookmarks li.composing:after,
#roster li.paused:after,
#bookmarks li.paused:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
height: 8px;
width: 8px;
margin-top: -4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-o-border-radius: 10px;
-border-radius: 10px;
border-radius: 10px;
}
#roster li.composing:after,
#bookmarks li.composing:after { #bookmarks li.composing:after {
background: #f57900;
animation: pulsate 1.5s infinite ease-in; animation: pulsate 1.5s infinite ease-in;
-webkit-animation: pulsate 1.5s infinite ease-in; -webkit-animation: pulsate 1.5s infinite ease-in;
-moz-animation: pulsate 1.5s infinite ease-in; -moz-animation: pulsate 1.5s infinite ease-in;