Перенос чатов из другого репозитория
This commit is contained in:
190
StreamLabsChats/sauyon/generation 1/style.css
Normal file
190
StreamLabsChats/sauyon/generation 1/style.css
Normal file
@ -0,0 +1,190 @@
|
||||
/* Imports */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito:ital@0;1&display=swap');
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-size: 35px;
|
||||
--font-family-1: "Fredoka", serif;
|
||||
--font-family-2: "Nunito", serif;
|
||||
|
||||
/* Emotes */
|
||||
--emote-size: calc(var(--font-size) * 2);
|
||||
--emote-size-xl: calc(var(--font-size) * 4);
|
||||
--emote-size-xxl: calc(var(--font-size) * 8);
|
||||
|
||||
/* Badges */
|
||||
--badge-size: 25px;
|
||||
|
||||
/* Colors */
|
||||
--color-1: #FFFFFF;
|
||||
--color-2: #E2CBA9;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
.font-2 {
|
||||
opacity: 0;
|
||||
font-family: var(--font-family-2);
|
||||
}
|
||||
|
||||
.emote {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.emote.emote-left {
|
||||
margin-left: -5.5px;
|
||||
}
|
||||
|
||||
.emote.emote-right {
|
||||
margin-right: -5.5px;
|
||||
}
|
||||
|
||||
.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: scale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
width: fit-content;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
transform-origin: bottom;
|
||||
animation: appear 700ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
#chatbox[disappear="true"] message,
|
||||
#chatbox[disappear="true"] event {
|
||||
animation:
|
||||
appear 700ms ease-in-out forwards,
|
||||
disappear 700ms linear 30s forwards;
|
||||
}
|
||||
|
||||
#chatbox message[deleted="true"],
|
||||
#chatbox event[deleted="true"] {
|
||||
animation: deleted 700ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
message {
|
||||
padding: 10px;
|
||||
color: var(--color-1);
|
||||
}
|
||||
|
||||
message author {
|
||||
position: relative;
|
||||
font-family: var(--font-family-1);
|
||||
margin-left: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
message author::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -45px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 30px;
|
||||
aspect-ratio: 13 / 15;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 13 15'%3E%3Cpath fill='%23E2CBA9' d='M12.8932 2.52946C12.5796.764687 11.0684-.218957 9.32914.0414197 7.67541.272865 6.47788 1.57475 5.73655 3.02128 3.91175.735756.632797 1.25651.0910575 4.46782-.222581 6.29045.290646 8.14201 1.37412 9.58855 2.82827 11.498 4.79564 13.176 6.47788 14.8539c.31364.2893.71281.1158.85538-.2314 1.5967-3.8189 6.44384-7.52199 5.55994-12.09304Zm-1.8818 4.19495C9.81385 9.18352 7.90351 11.1797 6.70598 13.6099 4.85266 11.903 2.4576 10.1093 1.43115 7.85271.832385 6.55083.632797 4.84391 1.3171 3.5131c.94091-1.90942 3.1649-1.01257 4.04879.40503v.02893c-.05703.49183.76984.78113 1.02645.28931.79835-1.5044 2.16696-3.73206 4.21986-3.00879 2.1955.78113 1.1405 3.99243.3992 5.49683Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message content {
|
||||
font-family: var(--font-family-2);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
event {
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
event content {
|
||||
font-family: var(--font-family-1);
|
||||
font-weight: 600;
|
||||
padding: 5px 75px;
|
||||
border: 5px solid var(--color-2);
|
||||
border-radius: 50px;
|
||||
color: var(--color-2);
|
||||
}
|
||||
Reference in New Issue
Block a user