Styling

public/css/otalk.css

@@ -558,6 +558,7 @@ button.secondary:hover:not(:disabled) {
   left: 0px;
   width: 200px;
   background-color: #0b1316;
+  border-right: 1px solid #eee;
   z-index: 300;
   overflow-y: auto;
   overflow-x: hidden;
@@ -1052,7 +1053,8 @@ button.secondary:hover:not(:disabled) {
   padding: 0px;
   overflow-y: auto;
   overflow-x: hidden;
-  position: fixed;
+  position: absolute;
+  width: 100%;
   top: 0px;
   bottom: 55px;
   padding-top: 75px;
@@ -1507,12 +1509,19 @@ rgba(0,0,0,0.7)
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: all 0.25s;
 }
 #me .status:before {
   content: '-';
   padding-left: 5px;
   padding-right: 5px;
 }
+#me .status:empty {
+  font-style: italic;
+}
+#me .status:empty:before {
+  content: '- Update your status';
+}
 #me .name:focus,
 #me .status:focus {
   background-color: #fffcea;

public/css/pages/chat.styl

@@ -173,7 +173,8 @@
   padding: 0px
   overflow-y: auto
   overflow-x: hidden
-  position: fixed
+  position: absolute
+  width: 100%
   top: 0px
   bottom: 55px
   padding-top: 75px

public/css/pages/header.styl

@@ -43,11 +43,19 @@
     overflow: hidden
     text-overflow: ellipsis
 
+    transition: all .25s
+
     &:before
       content: '-'
       padding-left: 5px
       padding-right: 5px
 
+    &:empty
+      font-style: italic
+
+      &:before
+        content: '- Update your status'
+
   .name,
   .status
     &:focus

public/css/pages/roster.styl

@@ -8,6 +8,7 @@
   left: 0px
   width: 200px
   background-color: $blue-saturated-darker
+  border-right: 1px solid $gray-lighter
   z-index: 300
   overflow-y: auto;
   overflow-x: hidden;

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1387562882363
+# 0.0.1 1387566998684
 
 CACHE:
 /app.js