[ux] enlarge avatars and place unread count in the avatar. #2

public/css/_mixins.styl

@@ -87,17 +87,11 @@ borderbox()
 
 // avatars
 
-avatarLarge()
+avatar()
   width: 30px
   height: 30px
   roundall(50px)
 
-avatarSmall()
-  width: 20px
-  height: 20px
-  roundall(30px)
-
-
 // this if for the content flash and hardware acceleration bugs in webkit
 webkit-transition-fix()
   -webkit-backface-visibility: hidden

public/css/app/chat.styl

@@ -28,7 +28,7 @@
 
     .avatar
       margin-right: 5px
-      avatarLarge()
+      avatar()
       position: absolute
       top: 11px
       left: 11px

public/css/app/roster.styl

@@ -52,10 +52,10 @@
 #bookmarks
   li
     list-style-type: none
-    padding: 7px 25px 7px 10px
+    padding: 7px 35px 7px 10px
     margin: 0px
     position: relative
-    min-height: 15px
+    min-height: 30px
     font-size: $fontSmall
     color: #fff
     cursor: pointer
@@ -66,8 +66,8 @@
     &:hover
       background: $sidebarActive
 
-    &.hasUnread .unread
-      display: block
+      &.hasUnread .unread
+        display: block
 
     &.online, &.chat, &.dnd, &.away, &.xa
 
@@ -128,16 +128,16 @@
     .avatar
       vertical-align: top
       margin-right: 5px
-      margin-top: -10px
+      margin-top: -15px
       position: absolute
       left: 10px
       top: 50%
-      avatarSmall()
+      avatar()
       noselect()
 
     .name
-      margin-left: 30px
-      line-height: 20px
+      margin-left: 40px
+      line-height: 30px
       color: white
       text-overflow: ellipsis
       overflow: hidden
@@ -156,15 +156,17 @@
     .unread
       display: none
       color: white
-      padding: 2px 5px
-      roundall(20px)
+      height: 22px
+      width: 30px
+      padding-top: 8px
+      roundall(30px)
       position: absolute
-      top: 8px
-      right: 10px
+      top: 7px
+      left: 10px
       font-size: 10px
+      font-weight: bold
       text-align: center
-      color: lighten($sidebarActive, 30%)
-      background: $sidebarActive
+      background: rgba(0, 174, 239, .8)
 
 @keyframes pulsate
   0%

public/css/otalk.css

@@ -365,10 +365,10 @@ h4 {
 #roster li,
 #bookmarks li {
   list-style-type: none;
-  padding: 7px 25px 7px 10px;
+  padding: 7px 35px 7px 10px;
   margin: 0px;
   position: relative;
-  min-height: 15px;
+  min-height: 30px;
   font-size: 12px;
   color: #fff;
   cursor: pointer;
@@ -383,8 +383,8 @@ h4 {
 #bookmarks li:hover {
   background: #1f2d49;
 }
-#roster li.hasUnread .unread,
-#bookmarks li.hasUnread .unread {
+#roster li:hover.hasUnread .unread,
+#bookmarks li:hover.hasUnread .unread {
   display: block;
 }
 #roster li.online:after,
@@ -470,18 +470,18 @@ h4 {
 #bookmarks li .avatar {
   vertical-align: top;
   margin-right: 5px;
-  margin-top: -10px;
+  margin-top: -15px;
   position: absolute;
   left: 10px;
   top: 50%;
-  width: 20px;
-  height: 20px;
-  -moz-border-radius: 30px;
-  -webkit-border-radius: 30px;
-  -khtml-border-radius: 30px;
-  -o-border-radius: 30px;
-  -border-radius: 30px;
-  border-radius: 30px;
+  width: 30px;
+  height: 30px;
+  -moz-border-radius: 50px;
+  -webkit-border-radius: 50px;
+  -khtml-border-radius: 50px;
+  -o-border-radius: 50px;
+  -border-radius: 50px;
+  border-radius: 50px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -491,8 +491,8 @@ h4 {
 }
 #roster li .name,
 #bookmarks li .name {
-  margin-left: 30px;
-  line-height: 20px;
+  margin-left: 40px;
+  line-height: 30px;
   color: #fff;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -514,20 +514,22 @@ h4 {
 #bookmarks li .unread {
   display: none;
   color: #fff;
-  padding: 2px 5px;
-  -moz-border-radius: 20px;
-  -webkit-border-radius: 20px;
-  -khtml-border-radius: 20px;
-  -o-border-radius: 20px;
-  -border-radius: 20px;
-  border-radius: 20px;
+  height: 22px;
+  width: 30px;
+  padding-top: 8px;
+  -moz-border-radius: 30px;
+  -webkit-border-radius: 30px;
+  -khtml-border-radius: 30px;
+  -o-border-radius: 30px;
+  -border-radius: 30px;
+  border-radius: 30px;
   position: absolute;
-  top: 8px;
-  right: 10px;
+  top: 7px;
+  left: 10px;
   font-size: 10px;
+  font-weight: bold;
   text-align: center;
-  color: #43629e;
-  background: #1f2d49;
+  background: rgba(0,174,239,0.8);
 }
 @-moz-keyframes pulsate {
   0% {