Improved chat color and increased panel size.

src/styles/components/_chat.scss

@@ -205,7 +205,7 @@
   .typinghint {
     color: $chat-typing;
     font-size: .8em;
-    height: 14px;
+    height: 16px;
     overflow: hidden;
     padding: 0 6px;
     white-space: nowrap;
@@ -229,10 +229,6 @@
       right: 6px;
       top: 1px;
     }
-
-    > div {
-      border-top: 1px solid $bordercolor;
-    }
   }
 
   .input {
@@ -310,7 +306,6 @@
     }
 
     .timestamp {
-      color: $chat-timestamp;
       font-size: .8em;
       position: absolute;
       right: 8px;
@@ -421,6 +416,7 @@
     &.is_remote {
       float: left;
       background: $chat-msg-remote-background;
+      color: $chat-msg-remote-color;
 
       &:before {  // arrow border
         border-color: transparent $chat-arrow-border;
@@ -442,9 +438,10 @@
     &.is_self {
       float: right;
       background: $chat-msg-self-background;
+      color: $chat-msg-self-color;
       margin-left: 4px;
       margin-right: 18px;
-      padding-right: 0;
+      padding-right: 4px;
 
       &:before { // arrow border
         border-color: transparent $chat-arrow-border;
@@ -523,7 +520,7 @@
 .chatmenu {
   height: 36px;
   left: 0;
-  padding: 2px 4px;
+  padding: 4px;
   position: absolute;
   right: 0;
   top: 36px;
@@ -534,7 +531,6 @@
 }
 
 .chatbody {
-  border-left: 1px solid $bordercolor;
   bottom: -1px;
   left: 0;
   position: absolute;
@@ -605,7 +601,7 @@
 }
 
 @keyframes newmessage {
-  0% {background-color: $actioncolor1;}
-  50% {background-color: $componentbg;}
-  100% {background-color: $actioncolor1;}
+  0% {background-color: $actioncolor1; border-color: $actioncolor1;}
+  50% {background-color: $componentbg; border-color: $componentbg;}
+  100% {background-color: $actioncolor1; border-color: $actioncolor1;}
 }

src/styles/global/_variables.scss

@@ -32,6 +32,7 @@ $sidepanebg: #fff !default;
 $bordercolor: #e7e7e7 !default;
 $actioncolor1: rgb(132, 184, 25) !default;
 $actioncolor2: rgb(0, 149, 52) !default;
+$specialbg1: $background;
 
 // branding
 $logo: url('../img/logo-small.png') !default;
@@ -54,7 +55,7 @@ $welcome: #aaa !default;
 $loading: #ddd !default;
 
 // panes
-$pane-width: 260px !default;
+$pane-width: 320px !default;
 
 // font
 $font-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
@@ -107,17 +108,16 @@ $buddylist-action-font-size: 1.6em;
 
 // chat
 $chat-width: $pane-width !default;
-$chat-background: $componentbg !default;
+$chat-background: $specialbg1 !default;
 $chat-header: rgba(255, 255, 255, .9) !default;
 $chat-disabled: #aaa !default;
 $chat-badge: #84b819 !default;
 $chat-ctrl: rgba(0, 0, 0, .3) !default;
-$chat-timestamp: #aaa !default;
-$chat-meta: #aaa !default;
+$chat-meta: #666 !default;
 $chat-msg-background: #fff !default;
 $chat-msg-border: transparent !default;
 $chat-msg-shadow: rgba(0, 0, 0, .03) !default;
-$chat-arrow-border: #eee;
+$chat-arrow-border: #fff;
 
 $chat-msg-default-icon-color: #ccc !default;
 $chat-msg-unread-icon-color: #fe9a2e !default;
@@ -135,9 +135,11 @@ $chat-msg-received-icon: '\f06e' !default;
 $chat-msg-read-icon: '\f00c' !default;
 
 $chat-msg-self-background: #fff !default;
+$chat-msg-self-color: $font-color !default;
 $chat-msg-remote-background: #fff !default;
+$chat-msg-remote-color: $font-color !default;
 
-$chat-bottom-background: $chat-background !default;
+$chat-bottom-background: transparent !default;
 $chat-typing: $chat-meta !default;
 $chat-input-border-color: #66afe9 !default;