From d3cddf2a4910665b65c7e14e8d57a05ab5c4ccf0 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Tue, 24 Sep 2013 13:27:58 +0200
Subject: [PATCH] [ux] improve chat readability

---
 public/css/app/chat.styl | 11 +++++------
 public/css/otalk.css     | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index d6680c7..700e5cb 100644
--- a/public/css/app/chat.styl
+++ b/public/css/app/chat.styl
@@ -57,8 +57,6 @@
       background: $grayOutline
 
 .messages
-  background: lighten($activeBlue, 97%)
-  font-weight: normal
   margin: 0px
   padding: 0px
   padding-top: 130px
@@ -68,6 +66,7 @@
   bottom: 75px
   width: 100%
   borderbox()
+  background: lighten($activeBlue, 97%)
 
   li
     position: relative
@@ -85,17 +84,18 @@
   .message
     font-size: 12px
     margin: 0px
-    padding: 7px 11px
+    padding: 10px
     display: inline-block
     padding-right: 11px
     min-width: 20px
     width: 100%
-    border-bottom: 1px solid lighten($activeBlue, 90%)
     borderbox()
 
+    &:not(.mine)
+      color: $activeBlue
+
     &.mine
       background: white
-      border-bottom: 1px solid lighten($grayOutline, 10%)
 
       .timestamp
         color: darken($grayOutline, 20%)
@@ -113,7 +113,6 @@
       word-break: break-word
       padding: 0px
       margin: 0px
-      color: #111
 
     .timestamp
       font-size: 10px
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 9dfe20e..80a8cbb 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -603,8 +603,6 @@ td {
   background: #e4e4e4;
 }
 .messages {
-  background: #f7fdff;
-  font-weight: normal;
   margin: 0px;
   padding: 0px;
   padding-top: 130px;
@@ -616,6 +614,7 @@ td {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  background: #f7fdff;
 }
 .messages li {
   position: relative;
@@ -635,19 +634,20 @@ td {
 .messages .message {
   font-size: 12px;
   margin: 0px;
-  padding: 7px 11px;
+  padding: 10px;
   display: inline-block;
   padding-right: 11px;
   min-width: 20px;
   width: 100%;
-  border-bottom: 1px solid #e4f8ff;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
+.messages .message:not(.mine) {
+  color: #00aeef;
+}
 .messages .message.mine {
   background: #fff;
-  border-bottom: 1px solid #e7e7e7;
 }
 .messages .message.mine .timestamp {
   color: #b6b6b6;
@@ -663,7 +663,6 @@ td {
   word-break: break-word;
   padding: 0px;
   margin: 0px;
-  color: #111;
 }
 .messages .message .timestamp {
   font-size: 10px;