[ux] improve colors on roster list

public/css/app/roster.styl

@@ -30,7 +30,7 @@
         fill: white
 
       &:hover
-        background: lighten($sidebarBg, 10%)
+        background: $activeBlue
 
       a
         display: block
@@ -44,23 +44,26 @@
 
 
   h1
-    font-size: $fontMedium
+    font-size: $fontSmall
     margin: 0
-    padding: 5px 10px
-    color: lighten($sidebarActive, 50%)
-    background: $sidebarActive
+    padding: 5px 15px
+    color: white
+    text-transform: uppercase
 
 #roster,
 #bookmarks
   li
     list-style-type: none
-    padding: 8px 10px
+    padding: 7px 10px
     margin: 0px
     position: relative
     min-height: 15px
     font-size: $fontSmall
     color: #fff
     cursor: pointer
+    transition: all .3s ease-in 0
+    -webkit-transition: all .3s ease-in 0
+    -moz-transition: all .3s ease-in 0
 
     &:nth-child(2n)
       background: lighten($sidebarBg, 5%)
@@ -73,18 +76,21 @@
 
     &.online,
     &.chat
-      border-left: 4px solid #427a00
+      border-left: 3px solid #427a00
 
     &.dnd
-      border-left: 4px solid #c50041
+      border-left: 3px solid #c50041
 
     &.away,
     &.xa
-      border-left: 4px solid #f57900
+      border-left: 3px solid #f57900
 
     &.offline
       border-left: none
-      color: #aaa
+
+    &.offline:not(:hover)
+      .name
+        color: $textSecondary
 
       img
         opacity: .25
@@ -92,11 +98,13 @@
       .status
         color: #777
 
-    &.activeContact
+    &.activeContact, &.offline.activeContact
       background: white
-      color: $activeBlue
       font-weight: bold
 
+      .name
+        color: $baseText
+
     &.composing
       border-right: 4px solid orange
 
@@ -121,6 +129,7 @@
     .name
       margin-left: 30px
       line-height: 20px
+      color: white
 
     .status
       color: #ccc

public/css/otalk.css

@@ -280,7 +280,7 @@ td {
   fill: #fff;
 }
 #menu .main li:hover {
-  background: #1b2e36;
+  background: #00aeef;
 }
 #menu .main li a {
   display: block;
@@ -293,22 +293,28 @@ td {
   line-height: 35px;
 }
 #menu h1 {
-  font-size: 14px;
+  font-size: 12px;
   margin: 0;
-  padding: 5px 10px;
-  color: #668bc9;
-  background: #192a47;
+  padding: 5px 15px;
+  color: #fff;
+  text-transform: uppercase;
 }
 #roster li,
 #bookmarks li {
   list-style-type: none;
-  padding: 8px 10px;
+  padding: 7px 10px;
   margin: 0px;
   position: relative;
   min-height: 15px;
   font-size: 12px;
   color: #fff;
   cursor: pointer;
+  -webkit-transition: all 0.3s ease-in 0;
+  -o-transition: all 0.3s ease-in 0;
+  transition: all 0.3s ease-in 0;
+  -moz-transition: all 0.3s ease-in 0;
+  -webkit-transition: all 0.3s ease-in 0;
+  -moz-transition: all 0.3s ease-in 0;
 }
 #roster li:nth-child(2n),
 #bookmarks li:nth-child(2n) {
@@ -326,37 +332,47 @@ td {
 #bookmarks li.online,
 #roster li.chat,
 #bookmarks li.chat {
-  border-left: 4px solid #427a00;
+  border-left: 3px solid #427a00;
 }
 #roster li.dnd,
 #bookmarks li.dnd {
-  border-left: 4px solid #c50041;
+  border-left: 3px solid #c50041;
 }
 #roster li.away,
 #bookmarks li.away,
 #roster li.xa,
 #bookmarks li.xa {
-  border-left: 4px solid #f57900;
+  border-left: 3px solid #f57900;
 }
 #roster li.offline,
 #bookmarks li.offline {
   border-left: none;
-  color: #aaa;
 }
-#roster li.offline img,
-#bookmarks li.offline img {
+#roster li.offline:not(:hover) .name,
+#bookmarks li.offline:not(:hover) .name {
+  color: #b7b7b7;
+}
+#roster li.offline:not(:hover) img,
+#bookmarks li.offline:not(:hover) img {
   opacity: 0.25;
 }
-#roster li.offline .status,
-#bookmarks li.offline .status {
+#roster li.offline:not(:hover) .status,
+#bookmarks li.offline:not(:hover) .status {
   color: #777;
 }
 #roster li.activeContact,
-#bookmarks li.activeContact {
+#bookmarks li.activeContact,
+#roster li.offline.activeContact,
+#bookmarks li.offline.activeContact {
   background: #fff;
-  color: #00aeef;
   font-weight: bold;
 }
+#roster li.activeContact .name,
+#bookmarks li.activeContact .name,
+#roster li.offline.activeContact .name,
+#bookmarks li.offline.activeContact .name {
+  color: #565656;
+}
 #roster li.composing,
 #bookmarks li.composing {
   border-right: 4px solid #ffa500;
@@ -396,6 +412,7 @@ td {
 #bookmarks li .name {
   margin-left: 30px;
   line-height: 20px;
+  color: #fff;
 }
 #roster li .status,
 #bookmarks li .status {