[ux] started on styling idle timestamp

clientapp/templates.js

@@ -51,7 +51,7 @@ exports.includes.contactListItem = function anonymous(locals) {
             "class": "avatar"
         }, {
             src: true
-        }) + '/><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + "</div></li>");
+        }) + '/><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + '</div><div class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + "</div></li>");
     }
     return buf.join("");
 };

clientapp/templates/includes/contactListItem.jade

@@ -3,3 +3,4 @@ li.contact
   .name=contact.displayName
   .unread=contact.unreadCount
   .status=contact.status
+  .idleTime=contact.idleSince

public/css/app/roster.styl

@@ -118,15 +118,13 @@
         -webkit-animation: pulsate 1.5s infinite ease-in
         -moz-animation: pulsate 1.5s infinite ease-in
 
-    &.paused
+    &.paused, &.idle
       &:after
         background: $textSecondary
 
     &.idle
       .name
-        color: red
-      &:after
-        background: red
+        color: $textSecondary
 
     img
       opacity: 1
@@ -175,6 +173,9 @@
       text-align: center
       background: rgba(0, 174, 239, .8)
 
+    .idle
+      font-size: 10px
+
 @keyframes pulsate
   0%
     opacity: 1.0

public/css/otalk.css

@@ -466,16 +466,14 @@ h3 {
   -moz-animation: pulsate 1.5s infinite ease-in;
 }
 #roster li.paused:after,
-#bookmarks li.paused:after {
+#bookmarks li.paused:after,
+#roster li.idle:after,
+#bookmarks li.idle:after {
   background: #b7b7b7;
 }
 #roster li.idle .name,
 #bookmarks li.idle .name {
-  color: #f00;
-}
-#roster li.idle:after,
-#bookmarks li.idle:after {
-  background: #f00;
+  color: #b7b7b7;
 }
 #roster li img,
 #bookmarks li img {
@@ -547,6 +545,10 @@ h3 {
   text-align: center;
   background: rgba(0,174,239,0.8);
 }
+#roster li .idle,
+#bookmarks li .idle {
+  font-size: 10px;
+}
 @-moz-keyframes pulsate {
   0% {
     opacity: 1;