v1.6 - added group mode

src_less/grp_gui.less

@@ -0,0 +1,23 @@
+#grp_gui{
+    background-color: #f4f5f6;
+    line-height: 50px;
+    display: flex;
+    border: #e0e0e0 1px solid;
+
+    &.invi{
+        height: 0;
+        opacity: 0;
+    }
+    &.vi{
+        height: auto;
+        opacity: 1;
+        transition: 500ms all;
+    }
+    button{
+        height: 40px;
+        border: 1px solid #0c81f5;
+        background: #0c81f5;
+        color: #FFF;
+    }
+
+}

src_less/main.less

@@ -92,6 +92,7 @@ html,body{
         margin: 5px;
         padding: 5px;
         transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
+        position: relative;
         &.disappear{
             opacity: 0.09;
             transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
@@ -100,9 +101,24 @@ html,body{
             opacity: 1;
             transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
         }
+        .group{
+            display: block;
+            position: absolute;
+            right: 5px;
+            padding: 5px;
+            border: 1px solid #56a1ec;
+            color: #FFF;
+            background: #0c81f5;
+        }
         .user_img{
+            width: 200px;
+            height: 200px;
+            text-align: center;
+            line-height: 200px;
             img{
-                width:200px;
+                max-width: 100%;
+                max-height: 100%;
+                vertical-align: middle;
             }
         }
         .username{
@@ -111,4 +127,5 @@ html,body{
             width: 200px;
         }
     }
-}
+}
+@import './grp_gui.less';