More style changes.

* titlebar has now a sligh 3D effect
* restyling of the roster (the big "vision")
* contacts now have an icon on their left depending on their status
* adding font-awesome to the project (can be used transparently with bootstrap icons system)

1 files changed, 48 insertions, 10 deletions

diff --git a/alias-angular/app/css/app.less b/alias-angular/app/css/app.less
index 589d9ba..5006542 100644
--- a/alias-angular/app/css/app.less
+++ b/alias-angular/app/css/app.less
@@ -1,26 +1,64 @@
 @import "less/mixins.less";
 
+@border-gray: #D6D6D6;
+@background-gray: #F5F5F5;
+
+html, body{
+    height: 100%;
+}
+
 #roster{
+    min-height: 100%;
+    float: left;
     width: 250px;
+    background-color: @background-gray;
+    border: 1px solid @border-gray;
     
     ul{
-        list-style:none;
-        padding:0;
-        margin:0;
+        list-style: none;
+        padding: 0;
+        margin: 0;
     }
-    
+
     li{
-        background-color: #F4F3F1;
-        border-bottom: 1px solid #E0E0E0;
-        border-top: 1px solid white;
-        border-right: 4px solid #c8c8c8;
+        background-color: white;
+        border-bottom: 1px solid @border-gray;
         padding: 0;
         margin: 0;
         padding: 1em 1em;
         color: #363636;
-        .transition(0.5s);
+        .transition(0.3s);
+        
         &:hover{
-            background-color: white;
+            background-color: @background-gray;
+        }
+        
+        &:first-child{
+            border-top: 1px solid @border-gray;
+        }
+        
+        i{
+            font-size:120%;
+        }
+        
+        .online{
+            color: #3D9940;
+        }
+
+        .away{
+            color: #D9B232;
         }
     }
 }
+
+#rostersearch{
+    margin: 10px;
+}
+
+#titlebar{
+    border-bottom:1px solid @border-gray;
+    padding:10px;
+    #gradient > .vertical(@background-gray,#EDEDED);
+    margin-bottom:20px;
+}
+