Rename style.css to styles.css

style.css

@@ -1,19 +0,0 @@
-h1 {
-  text-align: center;
-  display: block;
-}
-
-#duplicate-button {
-  margin: auto;
-  color: white;
-  background: #1565c0;
-  border-radius: 100vh;
-}
-
-.contain {
-  max-width: 900px;
-  margin: auto;
-  /* padding-top: 1.5rem; */
-  text-align: center;
-  display: block;
-}

styles.css

@@ -0,0 +1,210 @@
+@mixin size($w, $h) {
+    width: $w;
+    height: $h;
+}
+
+@mixin bdrs($bdrs) {
+    border-radius: $bdrs;
+}
+
+%center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+%clearfix {
+    &::after {
+        content: "";
+        display: block;
+        clear: both;
+    }
+}
+
+@keyframes ball {
+    0% { margin-top: 0; }
+    20% { margin-top: 3px; }
+    80% { margin-top: -5px; }
+}
+
+@keyframes pop {
+    0% { transform: scale(.6); }
+    30% { transform: scale(1.1); }
+    60% { transform: scale(.9); }
+    100% { transform: scale(1); }
+}
+
+body, html {
+    margin: 0;
+    height: 100%;
+    width: 100%;
+}
+
+html {
+    background: #bdc3c7;
+    background: -webkit-linear-gradient(to right bottom, #bdc3c7 , #2c3e50);
+    background: linear-gradient(to right bottom, #bdc3c7 , #2c3e50);
+}
+
+body {
+    font-family: 'Microsoft JhengHei', Arial, sans-serif;
+    background: url('https://www.transparenttextures.com/patterns/45-degree-fabric-light.png');
+    letter-spacing: 1px;
+}
+
+.chat {
+    @extend %center;
+    @include size(300px, 80vh);
+    max-height: 500px;
+    @include bdrs(15px);
+    background-color: rgba(0, 0, 0, .5);
+    overflow: hidden;
+}
+
+.chat-title {
+    background-color: rgba(0, 0, 0, .3);
+    @extend %clearfix;
+    @include size(100%, 50px);
+
+    h2 {
+        margin: 10px 0;
+        padding: 0;
+        color: #f0f0f0;
+        font-weight: normal;
+        font-size: 16px;
+        display: inline-block;
+        line-height: 30px;
+    }
+
+    .avatar {
+        float: left;
+        margin: 10px;
+        padding: 0;
+        @include size(30px, 30px);
+
+        img {
+            @include bdrs(50%);
+            @include size(30px, 30px);
+        }
+    }
+}
+
+.messages {
+    @include size(100%, calc(100% - 90px));
+
+    .messages-content {
+        @include size(100%, 100%);
+        overflow-y: auto;
+        box-sizing: border-box;
+
+        .message {
+            max-width: calc(100% - 76px);
+            padding: 8px;
+            margin: 8px 0 8px 12px;
+            @include bdrs(5px);
+            background-color: rgba(171, 188, 202, .1);
+            color: #e3e3e3;
+            float: left;
+            font-size: 13px;
+            position: relative;
+            word-break: break-all;
+            clear: both;
+            animation: pop .3s forwards;
+
+            .timestamp {
+                position: absolute;
+                right: -40px;
+                bottom: 0;
+                font-size: 12px;
+                color: #bababa;
+            }
+
+            &.personal {
+                float: right;
+                margin: 8px 12px 8px 0;
+
+                .timestamp {
+                    right: auto;
+                    left: -40px;
+                }
+            }
+
+            &.typing {
+                @include size(30px, 16px);
+
+                &::after {
+                    content: "";
+                    @include bdrs(50%);
+                    @include size(3px, 3px);
+                    background-color: white;
+                    @extend %center;
+                    transform: translate(-50%, -50%);
+                    animation: ball 1.2s infinite linear;
+                }
+
+                span {
+                    @include size(3px, 3px);
+                    @extend %center;
+                    transform: translate(-50%, -50%);
+
+                    &::before, &::after {
+                        content: "";
+                        @include bdrs(50%);
+                        @include size(3px, 3px);
+                        position: absolute;
+                        background-color: white;
+                        animation: ball 1.2s infinite linear;
+                    }
+
+                    &::before {
+                        left: 8px;
+                        animation-delay: .3s;
+                    }
+
+                    &::after {
+                        right: 8px;
+                        animation-delay: -.3s;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.action-box {
+    background-color: rgba(0, 0, 0, .3);
+    @include size(100%, 40px);
+    @extend %clearfix;
+
+    .action-box-input, .action-box-submit {
+        box-sizing: border-box;
+        border: 0;
+        float: left;
+    }
+
+    .action-box-input {
+        @include size(calc(100% - 60px), 20px);
+        background-color: transparent;
+        resize: none;
+        color: white;
+        margin: 10px 0;
+        padding: 0 10px;
+        line-height: 20px;
+        font-size: 16px;
+        letter-spacing: 1px;
+        overflow: hidden;
+
+        &::-webkit-input-placeholder {
+            line-height: 20px;
+            font-size: 13px;
+        }
+    }
+
+    .action-box-submit {
+        @include size(60px, 40px);
+        background-color: rgba(189, 195, 199, .2);
+        color: white;
+        cursor: pointer;
+    }
+}