[ux] finalize roster

public/css/_variables.styl

@@ -4,8 +4,7 @@ $activeBlue = #00aeef
 $actionPink = #ec008c
 
 $sidebarBg = #0b1316
-$sidebarActive = #192a47
-$sidebarButton = #1f2d49
+$sidebarActive = #1f2d49
 
 $baseText = #565656
 $textSecondary = #b7b7b7

public/css/app/roster.styl

@@ -15,6 +15,7 @@
   noselect()
 
   .main
+    margin-bottom: 10px
     li
       list-style-type: none
       margin: 10px 0 5px 0
@@ -35,15 +36,15 @@
         width: 130px
 
       .button
-        background: $sidebarButton
+        background: $sidebarActive
 
         &:hover
-          background: lighten($sidebarButton, 10%)
+          background: lighten($sidebarActive, 10%)
 
   h1
-    font-size: $fontSmall
+    font-size: 10px
     margin: 0
-    padding: 10px
+    padding: 20px 10px
     color: white
     text-transform: uppercase
 
@@ -63,7 +64,7 @@
     -moz-transition: all .3s ease-in 0
 
     &:hover
-      background: $activeBlue
+      background: $sidebarActive
 
     &.hasUnread .unread
       display: block
@@ -86,6 +87,9 @@
       .name
         color: darken($textSecondary, 40%)
 
+      .status
+        color: darken($textSecondary, 65%)
+
       img
         opacity: .25
 
@@ -153,14 +157,15 @@
     .unread
       display: none
       color: white
-      padding: 0 5px
+      padding: 2px 5px
       roundall(20px)
       position: absolute
-      top: 10px
+      top: 8px
       right: 10px
+      font-size: 10px
       text-align: center
-      font-weight: bold
-      background: $activeBlue
+      color: lighten($sidebarActive, 30%)
+      background: $sidebarActive
 
 @keyframes pulsate
   0%

public/css/otalk.css

@@ -263,6 +263,9 @@ td {
   -ms-user-select: none;
   user-select: none;
 }
+#menu .main {
+  margin-bottom: 10px;
+}
 #menu .main li {
   list-style-type: none;
   margin: 10px 0 5px 0;
@@ -289,9 +292,9 @@ td {
   background: #2b3f65;
 }
 #menu h1 {
-  font-size: 12px;
+  font-size: 10px;
   margin: 0;
-  padding: 10px;
+  padding: 20px 10px;
   color: #fff;
   text-transform: uppercase;
 }
@@ -314,7 +317,7 @@ td {
 }
 #roster li:hover,
 #bookmarks li:hover {
-  background: #00aeef;
+  background: #1f2d49;
 }
 #roster li.hasUnread .unread,
 #bookmarks li.hasUnread .unread {
@@ -344,6 +347,10 @@ td {
 #bookmarks li.offline:not(:hover) .name {
   color: #6e6e6e;
 }
+#roster li.offline:not(:hover) .status,
+#bookmarks li.offline:not(:hover) .status {
+  color: #404040;
+}
 #roster li.offline:not(:hover) img,
 #bookmarks li.offline:not(:hover) img {
   opacity: 0.25;
@@ -442,7 +449,7 @@ td {
 #bookmarks li .unread {
   display: none;
   color: #fff;
-  padding: 0 5px;
+  padding: 2px 5px;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   -khtml-border-radius: 20px;
@@ -450,11 +457,12 @@ td {
   -border-radius: 20px;
   border-radius: 20px;
   position: absolute;
-  top: 10px;
+  top: 8px;
   right: 10px;
+  font-size: 10px;
   text-align: center;
-  font-weight: bold;
-  background: #00aeef;
+  color: #43629e;
+  background: #1f2d49;
 }
 @-moz-keyframes pulsate {
   0% {