miyuchiq chat gen 1

StreamLabsChats/miyuchiq/generation 1/style.css

@@ -0,0 +1,192 @@
+/* Imports */
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
+
+/* Variables */
+:root {
+    /* Fonts */
+    --font-size: 35px;
+    --font-family-1: "Comfortaa", serif;
+
+    /* Emotes */
+    --emote-size: calc(var(--font-size) * 2);
+    --emote-size-xl: calc(var(--font-size) * 3);
+    --emote-size-xxl: calc(var(--font-size) * 8);
+
+    /* Badges */
+    --badge-size: 25px;
+
+    /* Colors */
+    --author-background: #fe9dbe;
+    --author-text: #fddfee;
+    --message-background: #fdf4f7;
+    --message-text: #272123;
+}
+
+/* Main styling */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(to top,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 75%,
+            rgba(0, 0, 0, 0) 100%);
+}
+
+content {
+    display: block;
+}
+
+.font-1 {
+    opacity: 0;
+    font-family: var(--font-family-1);
+}
+
+.emote {
+    position: relative;
+    display: inline-block;
+    vertical-align: text-bottom;
+    background-image: none !important;
+}
+
+.emote.emote-left {
+    margin-left: 0;
+}
+
+.emote.emote-right {
+    margin-right: 0;
+}
+
+.emote img {
+    height: var(--emote-size);
+}
+
+.emote img.zero-width {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+[large-emotes="true"] .emote img {
+    height: var(--emote-size-xl);
+}
+
+[gigaemote="true"] .emote img {
+    height: var(--emote-size-xxl);
+}
+
+@keyframes appear {
+    from {
+        transform: translateY(200%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes disappear {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(0);
+    }
+}
+
+@keyframes deleted {
+    to {
+        transform: translateX(-200%);
+        padding: 0;
+        margin: 0;
+        max-height: 0;
+    }
+}
+
+#chatbox {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    padding: 5px 5px 0 5px;
+    font-size: var(--font-size);
+    font-family: var(--font-family-1);
+}
+
+#chatbox message,
+#chatbox event {
+    max-height: var(--max-height);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    word-break: break-word;
+    transform-origin: bottom;
+    animation: appear 500ms ease-out forwards;
+}
+
+#chatbox[disappear="true"] message,
+#chatbox[disappear="true"] event {
+    animation:
+        appear 500ms ease-in-out forwards,
+        disappear 500ms linear 30s forwards;
+}
+
+#chatbox message[deleted="true"],
+#chatbox event[deleted="true"] {
+    animation: deleted 500ms ease-in-out forwards;
+}
+
+message {
+    padding: 40px 15px 15px 30px;
+    font-weight: 900;
+}
+
+message top {
+    background-color: var(--author-background);
+    color: var(--author-text);
+    width: fit-content;
+    margin-left: 50px;
+    padding: 5px 50px;
+    border-radius: 15px 15px 0 0;
+    border: 3px solid black;
+    border-bottom: 0;
+    z-index: 10;
+}
+
+message bottom {
+    position: relative;
+    background-color: var(--message-background);
+    color: var(--message-text);
+    padding: 20px 30px;
+    border-radius: 15px;
+    border: 3px solid black;
+    border-bottom-left-radius: 0;
+}
+
+message bottom::before {
+    position: absolute;
+    content: '';
+    background-color: black;
+    width: 17px;
+    aspect-ratio: 1;
+    bottom: -3px;
+    left: -19px;
+    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+}
+
+message bottom::after {
+    position: absolute;
+    content: '';
+    background-color: var(--message-background);
+    width: 20px;
+    aspect-ratio: 1;
+    bottom: -0.5px;
+    left: -12px;
+    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+}