Convert chat to scss. Change colors to variables.

src/styles/components/_chat.scss

@@ -58,6 +58,15 @@
   width: 260px;
 }
 
+.showchatlist {
+  .chatpane {
+    right: 100%;
+  }
+  .chatlist {
+    left: 0;
+  }
+}
+
 .chatlist {
   position: absolute;
   top: 0;
@@ -118,15 +127,6 @@
   width: 100%;
 }
 
-.showchatlist {
-  .chatpane {
-    right: 100%;
-  }
-  .chatlist {
-    left: 0;
-  }
-}
-
 .chat {
   background: $chat-background;
   display: none;
@@ -211,117 +211,121 @@
 }
 
 .chat .outputbox {
-position:absolute;
-left:0px;
-right:0px;
-top:0px;
   bottom: 75px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
+
 .chat .output {
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0.4em 0;
-height:100%;
+  > i {
-}
+    clear: both;
-.chat .output > i {
-font-size:0.8em;
     color: #aaa;
     display: block;
+    font-size: 0.8em;
     padding: 6px 0;
     text-align: center;
-clear:both;
+    &.p2p {
-}
-.chat .output > i.p2p {
       padding: 6px 0;
       font-weight: bold;
     }
-.chat .output .message {
-background: #fff;
-border: 1px solid #e5e5ef;
-border-radius: 6px;
-margin-bottom: 2px;
-position: relative;
-word-wrap: break-word;
-padding:8px;
-margin-left:20px;
-margin-right:4px;
-clear:both;
-display:block;
   }
-
-.chat .output .message .timestamp {
-font-size:0.8em;
-color: #aaa;
-text-align:right;
-position:absolute;
-top:8px;
-right:8px;
 }
 
 .chat.with_pictures .output .message.is_self .timestamp {
   right: 58px;
 }
+.chat.with_pictures .output .message.is_remote {
+  padding-left: 58px;
+}
+.chat.with_pictures .output .message.is_self {
+  padding-right:54px;
+}
+
 
-.chat .output .message > ul {
+.chat .message {
+  background: #fff;
+  border: 1px solid #e5e5ef;
+  border-radius: 6px;
+  clear: both;
+  display: block;
+  margin-bottom: 2px;
+  padding: 8px;
+  position: relative;
+  margin-left: 20px;
+  margin-right: 4px;
+  word-wrap: break-word;
+  ul {
     list-style-type: none;
     margin: 0;
     padding-left: 0;
   }
-
+  li {
-.chat .output .message > ul > li {
     line-height: 1.1em;
     margin: 4px 0;
     padding-left: 1.2em;
     position: relative;
-}
+    &:before {
-
-.chat .message li:before {
-font-family: 'FontAwesome';
-content: '\f075';
       color: #ccc;
+      content: '\f075';
+      font-family: FontAwesome;
+      left: 0;
+      text-align: center;
       position: absolute;
-left:0px;
       width: 12px;
-text-align:center;
+    }
+  }
+  .timestamp {
+    color: $chat-timestamp;
+    font-size: 0.8em;
+    position: absolute;
+    right: 8px;
+    text-align: right;
+    top: 8px;
+  }
 }
 
-.chat .message.is_self li:before {
+.chat .message {
-moz-transform: scale(-1, 1);
+  &.is_self li:before {
--webkit-transform: scale(-1, 1);
-transform: scale(-1, 1);
     color:#ccc;
+    transform: scale(-1, 1);
   }
-
+  .unread:before {
-.chat .message li.unread:before {
     content: '\f0eb';
     color: #FE9A2E;
   }
-
+  .sending:before {
-.chat .message li.sending:before {
     content: '\f0ec';
   }
-
+  .sent:before {
-.chat .message li.sent:before {
     content: '\f003';
     color:#5882FA;
   }
-
+  .delivered:before {
-.chat .message li.delivered:before {
     content: '\f019';
     color:#5882FA;
   }
-
+  .received:before {
-.chat .message li.received:before {
     content: '\f06e';
     color:#84b819;
   }
-
+  .read:before {
-.chat .message li.read:before {
     content: '\f00c';
     color:#ccc;
   }
+}
 
-.chat .output .message .avatar {
+.chat .message {
+  &.is_self .avatar {
+    right: 4px;
+    left: auto;
+  }
+  .avatar {
     position: absolute;
     top: 4px;
     width:46px;
@@ -331,16 +335,11 @@ overflow: hidden;
     border-radius: 2px;
     background: $actioncolor1;
     text-align:center;
-}
+    .#{$fa-css-prefix} {
-.chat .output .message.is_self .avatar {
-right: 4px;
-left: auto;
-}
-.chat .output .message .avatar > i {
       line-height:46px;
       color:$actioncolor2;
     }
-.chat .output .message .avatar > img {
+    img {
       position: absolute;
       left:0px;
       right:0px;
@@ -348,58 +347,57 @@ bottom:0px;
       top:0px;
       display:block;
     }
-
+  }
-.chat.with_pictures .output .message.is_remote {
-padding-left: 58px;
 }
 
-.chat .output .message:before, .chat .output .message:after {
+.chat .message {
+  &:before,
+  &:after {
     content: "";
     position: absolute;
     border-style: solid;
     width: 0;
     display: block;
   }
-.chat .output .message.is_remote:before {
+  &.is_remote {
+    &:before {
       top: 4px;
       bottom: auto;
       left: -16px;
       border-width: 10px 17px 10px 0;
       border-color: transparent #fff;
     }
-.chat .output .message.is_remote:after {
+    &:after {
       top:5px;
       bottom:auto;
       left:-15px;
       border-width: 9px 15px 9px 0;
       border-color: transparent #fff;
     }
-.chat .output .message.is_self:before {
+  }
+  &.is_self {
+    background: #fff;
+    margin-right:20px;
+    margin-left:4px;
+    padding-right:0px;
+    &:before {
       top:4px;
       bottom:auto;
       right:-16px;
       border-width: 10px 0 10px 17px;
       border-color: transparent #fff;
     }
-.chat .output .message.is_self:after {
+    &:after {
       top:5px;
       bottom:auto;
       right:-15px;
       border-width: 9px 0 9px 15px;
       border-color: transparent #fff;
     }
-
-.chat .output .message.with_name {
   }
-
+  &.with_name {
-.chat .output .message.is_self {
+    // none
-background: #fff;
-margin-right:20px;
-margin-left:4px;
-padding-right:0px;
   }
-.chat.with_pictures .output .message.is_self {
-padding-right:54px;
 }
 
 .chat .output .message strong {
@@ -456,7 +454,9 @@ border-color:transparent;
   -moz-box-shadow: none;
   box-shadow: none;
 }
-.chat .input.active, .chat .input:active, .chat .input:focus {
+.chat .input.active,
+.chat .input:active,
+.chat .input:focus {
   border-color:#66afe9;
 }
 

src/styles/global/_variables.scss

@@ -52,6 +52,7 @@ $chat-background: #e7e7e7;
 $chat-disabled: #aaa;
 $chat-badge: #84b819;
 $chat-ctrl: rgba(0,0,0,.3);
+$chat-timestamp: #aaa;
 
 $tap-highlight: rgba(0, 0, 0, 0);