[ux] move statuses to dots. #2

public/css/app/roster.styl

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

public/css/otalk.css

@@ -387,25 +387,45 @@ h4 {
 #bookmarks li.hasUnread .unread {
   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,
 #bookmarks li.offline:not(:hover) .name {
@@ -433,26 +453,7 @@ h4 {
   color: #565656;
 }
 #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 {
-  background: #f57900;
   animation: pulsate 1.5s infinite ease-in;
   -webkit-animation: pulsate 1.5s infinite ease-in;
   -moz-animation: pulsate 1.5s infinite ease-in;