Add files via upload

- Added the ability to add a scroll bar.
- Fixed a bug on rendering emotes on resub messages
- Fixed a bug on how likes would not display correctly
- Fixed inner margin between messages and events

css/app.css

@@ -20,22 +20,44 @@ html {
 
 
 body {
+    height: 100%;
     overflow: hidden;
 }
 
-.wrapper {
-    position: absolute;
-    width: 100%;
+
+#container {
     height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+#chat {
+    flex: 1;
+    display: flex;
+    flex-direction: column-reverse; /* conteúdo começa no fundo */
+    overflow-y: auto;
+    padding: 10px;
+    scrollbar-color: #555 #1e1e1e;
 }
 
-#chat {
-    position: absolute;
-    width: 100%;
-    bottom: 0px;
-    padding: 10px;
+#chat.noscrollbar {
+    overflow-y: hidden;
 }
 
+#chat::-webkit-scrollbar { width: 8px; }
+#chat::-webkit-scrollbar-track { background: #1e1e1e; }
+#chat::-webkit-scrollbar-thumb { background-color: #555; border-radius: 4px; border: 2px solid #1e1e1e; }
+#chat::-webkit-scrollbar-thumb:hover { background-color: #777; }
+
+
+
+
+
 #chat .message {
     color: #FFF;
     font-size: 18px;
@@ -134,7 +156,7 @@ body {
     display: block;
     text-shadow: none;
     font-size: 14px;
-    margin: 2px 0 -5px 0;
+    margin: 10px 0 -5px 0;
     color: #999;
 }
 
@@ -163,7 +185,9 @@ body {
     align-items: flex-start;
 }
 
-
+#chat .message:not(.event) > div {
+    margin-top: -10px;
+}
 
 
 #chat .message.twitch .shared span {