Смена gen
This commit is contained in:
310
StreamLabsChats/k1r4ka/generation 2/style.css
Normal file
310
StreamLabsChats/k1r4ka/generation 2/style.css
Normal file
@ -0,0 +1,310 @@
|
||||
/* 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 */
|
||||
--text-color: #FFFFFF;
|
||||
--event-color: #302321;
|
||||
--message-background: linear-gradient(to right, #F09C50, #B84939);
|
||||
--event-background: linear-gradient(to right, #FFE3C9, #FFC794);
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
color: var(--text-color);
|
||||
max-width: fit-content;
|
||||
padding: 45px 30px 10px;
|
||||
}
|
||||
|
||||
message top {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: -87px;
|
||||
font-size: calc(var(--font-size) * 2 / 3);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
message top::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
height: 30px;
|
||||
z-index: -1;
|
||||
aspect-ratio: 307 / 67;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='307' height='67' fill='none'%3E%3Cpath fill='%23CD6841' d='M261.395 1.593C249.563 10.972 216.202 49.105 201 67h106c-1.233-20.98-30.814-77.131-45.605-65.407Z'/%3E%3Cpath fill='%23DA7B47' d='M45.605 1.593C57.437 10.972 90.799 49.105 106 67H0C1.233 46.02 30.814-10.131 45.605 1.593Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message top author {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-inline: 45px;
|
||||
}
|
||||
|
||||
message top author::before {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
content: '';
|
||||
aspect-ratio: 45 / 56;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='56' fill='none'%3E%3Cpath fill='%23FFD6B1' d='M10.874 43.119c2.017.592 1.866 2.963 2.72 4.889.854 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.433 4.974-2.828ZM18.627 46.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.375-2.718.534-1.159 1.567-1.82 2.308-1.479.74.342.908 1.56.374 2.718ZM2.298 42.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.118-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM15.579 41.639c-.534 1.158-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM7.445 39.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166ZM34.874 26.119c2.017.592 1.866 2.963 2.72 4.889.855 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.432 4.974-2.828ZM42.627 29.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.374-2.718.533-1.159 1.566-1.82 2.307-1.479.74.342.908 1.56.374 2.718ZM26.298 25.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.118-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM39.579 24.639c-.534 1.159-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM31.445 22.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166ZM16.874 9.119c2.017.592 1.866 2.963 2.72 4.889.854 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.433 4.974-2.828ZM24.627 12.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.375-2.718.534-1.159 1.567-1.82 2.308-1.479.74.342.908 1.56.374 2.718ZM8.298 8.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.117-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM21.579 7.639c-.534 1.159-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM13.445 5.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message top author::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -10px;
|
||||
right: 12px;
|
||||
width: 30px;
|
||||
aspect-ratio: 32 / 37;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='37' fill='none'%3E%3Cpath stroke='%23EF9543' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.996 1.014c1.268 6.131 5.615 17.236 12.856 12.605C36.094 8.99 23.3 3.286 15.996 1.014Zm0 0c-1.4 6.045-5.93 17.03-12.856 12.605C-5.518 8.09 14.815.632 15.996 1.014Zm0 0L10.486 36m5.51-34.986L21.637 36'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message bottom {
|
||||
position: relative;
|
||||
background-image: var(--message-background);
|
||||
padding: 50px 70px 20px;
|
||||
margin-block: 50px 40px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
message bottom::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 5px;
|
||||
bottom: -40px;
|
||||
width: 35px;
|
||||
aspect-ratio: 46 / 54;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='54' fill='none'%3E%3Cpath stroke='%23B84939' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M22.994 2.02c1.776 8.759 7.861 24.623 18 18.008 10.137-6.615-7.776-14.762-18-18.008Zm0 0c-1.959 8.636-8.3 24.329-17.998 18.008C-7.126 12.126 21.342 1.475 22.994 2.02Zm0 0L15.281 52m7.713-49.98L30.892 52'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
message bottom::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: 15px;
|
||||
bottom: -5px;
|
||||
height: 20px;
|
||||
aspect-ratio: 82 / 38;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='38' fill='none'%3E%3Cpath fill='url(%23a)' d='M81.263 9.055s-18.81 2.2-26.616 5.818c-9.268 4.296-22.273 18.99-22.273 18.99s17.068 1.8 30.587-2.096C76.481 27.87 81.263 9.055 81.263 9.055Z'/%3E%3Cpath fill='url(%23b)' d='M3.764 0s17.764 6 24.579 11.11c8.092 6.067 17.663 22.973 17.663 22.973s-21.33 2.18-31.979-6.823C3.378 18.255 3.764 0 3.764 0Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='58.023' x2='55.614' y1='7.106' y2='35.818' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.672' x2='23.097' y1='2.894' y2='31.195' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
event {
|
||||
padding: 50px 15px 45px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
event content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: var(--event-color);
|
||||
background-image: var(--event-background);
|
||||
width: fit-content;
|
||||
padding: 25px 75px 35px;
|
||||
border-radius: 25px;
|
||||
gap: 7.5px;
|
||||
}
|
||||
|
||||
event content::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 4px;
|
||||
left: 50%;
|
||||
height: 50px;
|
||||
transform: translate(-50%, -100%);
|
||||
aspect-ratio: 307 / 72;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='307' height='72' fill='none'%3E%3Cpath fill='%23FECDA0' d='M261.395 1.593C249.563 10.972 216.202 49.105 201 67h106c-1.233-20.98-30.814-77.131-45.605-65.407Z'/%3E%3Cpath fill='%23FFDCBC' d='M45.605 1.593C57.437 10.972 90.799 49.105 106 67H0C1.233 46.02 30.814-10.131 45.605 1.593Z'/%3E%3Cpath fill='url(%23a)' d='M184 49.02s-14.582 1.706-20.634 4.51c-7.186 3.331-17.267 14.723-17.267 14.723s13.232 1.395 23.713-1.625C180.293 63.608 184 49.02 184 49.02Z'/%3E%3Cpath fill='url(%23b)' d='M123.918 42s13.772 4.652 19.055 8.613c6.274 4.704 13.694 17.81 13.694 17.81s-16.536 1.69-24.792-5.29S123.918 42 123.918 42Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='165.983' x2='164.116' y1='47.51' y2='69.769' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='141.678' x2='138.906' y1='44.243' y2='66.184' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
event content::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: -50px;
|
||||
bottom: -40px;
|
||||
width: 115px;
|
||||
aspect-ratio: 151 / 137;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='151' height='137' fill='none'%3E%3Cpath stroke='%23FEC794' stroke-linecap='round' stroke-width='16' d='M80.5 8c27 2.833 76.4 21.5 58 73.5-23 65-106.5 11-130 47'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
event content author,
|
||||
event content desc
|
||||
{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: calc(var(--font-size) * 2 / 3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
event content author::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -90px;
|
||||
top: 0;
|
||||
width: 35px;
|
||||
aspect-ratio: 51 / 50;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='50' fill='none'%3E%3Cpath fill='%23302321' d='M23.908 17.25c5.801-1.771 9.195 4.18 14.308 7.467 5.113 3.286 11.194 3.318 11.877 9.364.88 7.786-9.942 7.333-17.379 9.72-7.789 2.499-16.935 10.21-20.661 2.898-2.818-5.53 2.04-8.999 4.356-14.749 2.315-5.75 1.583-12.892 7.5-14.7ZM48.194 13.469c.551 3.639-.889 6.872-3.216 7.222-2.327.35-4.66-2.316-5.211-5.955-.552-3.639.888-6.872 3.215-7.222 2.327-.35 4.66 2.316 5.212 5.955ZM1.91 28.82c1.733 3.247 4.82 4.98 6.894 3.87 2.075-1.11 2.353-4.643.62-7.89-1.732-3.247-4.819-4.98-6.894-3.87-2.075 1.111-2.352 4.643-.62 7.89ZM32.898 6.224c.551 3.638-.888 6.872-3.215 7.222-2.327.35-4.66-2.316-5.212-5.955-.551-3.64.888-6.873 3.215-7.222 2.327-.35 4.66 2.316 5.212 5.955ZM9.845 13.87c1.732 3.247 4.819 4.98 6.893 3.87 2.075-1.111 2.353-4.643.62-7.89-1.732-3.247-4.819-4.98-6.894-3.87-2.075 1.11-2.352 4.643-.62 7.89Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
event content meow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 50%);
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
font-size: calc(var(--font-size) / 2);
|
||||
color: var(--text-color);
|
||||
background-image: var(--message-background);
|
||||
}
|
||||
Reference in New Issue
Block a user