Messaging app

www/friends/main.less

@@ -3,6 +3,7 @@
 
 @button-border: 2px;
 @bg-color: @toolbar-friends-bg;
+@color: @toolbar-friends-color;
 
 html, body {
     margin: 0px;
@@ -22,6 +23,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    min-height: 0;
 }
 
 #app.ready {
@@ -34,14 +36,143 @@ body {
     display: inline-block;
 }
 
+
+@keyframes example {
+    0% {
+        background: rgba(0,0,0,0.1);
+    }
+    50% {
+        background: rgba(0,0,0,0.3);
+    }
+    100% {
+        background: rgba(0,0,0,0.1);
+    }
+}
 #friendList {
     width: 350px;
     height: 100%;
     background-color: lighten(@bg-color, 10%);
+    .friend {
+        background: rgba(0,0,0,0.1);
+        padding: 5px;
+        margin: 10px;
+        cursor: pointer;
+        &:hover {
+            background-color: rgba(0,0,0,0.3);
+        }
+        &.notify {
+            animation: example 2s ease-in-out infinite;
+        }
+    }
+}
+
+#friendList .friend, #messaging .header {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        color: @color;
+        .default, media-tag {
+            display: inline-flex;
+            width: 50px;
+            height: 50px;
+            justify-content: center;
+            align-items: center;
+            margin-right: 5px;
+            border-radius: 10px / 6px;
+            overflow: hidden;
+            border: 1px solid black;
+            box-sizing: content-box;
+        }
+        .default {
+            .unselectable();
+            background: white;
+            color: black;
+            font-size: 40px;
+        }
+        .right-col {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: flex;
+            flex-flow: column;
+            .name {
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .friend {
+                padding: 0;
+            }
+        }
+        media-tag {
+            min-height: 50px;
+            min-width: 50px;
+            max-height: 50px;
+            max-width: 50px;
+            img {
+                color: #000;
+                min-width: 100%;
+                min-height: 100%;
+                max-width: none;
+                max-height: none; // To override 'media-tag img' in slide.less
+            }
+        }
+
+
 }
 
 #messaging {
     flex: 1;
     height: 100%;
     background-color: lighten(@bg-color, 20%);
+    min-width: 0;
+    .header {
+        background-color: lighten(@bg-color, 15%);
+        padding: 10px;
+    }
+    .chat {
+        height: 100%;
+        display: flex;
+        flex-flow: column;
+        .messages {
+            padding: 0 20px;
+            margin: 10px 0;
+            flex: 1;
+            overflow-x: auto;
+            .message {
+                & > div {
+                    padding: 0 10px;
+                }
+                .content {
+                    overflow: hidden;
+                    word-wrap: break-word;
+                }
+                .date {
+                    display: none;
+                    font-style: italic;
+                }
+                .sender {
+                    margin-top: 10px;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .input {
+        background-color: lighten(@bg-color, 15%);
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 75px;
+        input {
+            flex: 1;
+        }
+    }
 }
+