392 lines
24 KiB
CSS
392 lines
24 KiB
CSS
/* Imports */
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
|
|
|
/* Variables */
|
|
:root {
|
|
/* Fonts */
|
|
--font-size: 35px;
|
|
--font-family-1: "Montserrat", 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;
|
|
--leaf-shadow: #BAE0C4;
|
|
|
|
--default-bg: linear-gradient(to right, white 50%, #E0BAF5 120%);
|
|
--vip-bg: linear-gradient(to right, white 50%, #FFC3E8 120%);
|
|
--moderator-bg: linear-gradient(to right, white 50%, #A4D6B1 120%);
|
|
--broadcaster-bg: linear-gradient(to right, white 50%, #A9A9A9 120%);
|
|
|
|
--default-primary: #CFA5E6;
|
|
--vip-primary: #F4A5D2;
|
|
--moderator-primary: #7FBC8D;
|
|
--broadcaster-primary: #4E4E4E;
|
|
}
|
|
|
|
/* 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: -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: 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: 25px 15px 0;
|
|
--bg: var(--default-bg);
|
|
--primary: var(--default-primary);
|
|
}
|
|
|
|
message.vip {
|
|
--bg: var(--vip-bg);
|
|
--primary: var(--vip-primary);
|
|
}
|
|
|
|
message.moderator {
|
|
--bg: var(--moderator-bg);
|
|
--primary: var(--moderator-primary);
|
|
}
|
|
|
|
message.broadcaster {
|
|
--bg: var(--broadcaster-bg);
|
|
--primary: var(--broadcaster-primary);
|
|
}
|
|
|
|
message top {
|
|
position: relative;
|
|
}
|
|
|
|
message top::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 25px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 25px;
|
|
aspect-ratio: 31 / 27;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='27' fill='none'%3E%3Cpath fill='%23E3BBF9' d='m1.644.006 9.7 7.297h8.314L29.356.006s4.498 15.975-1.386 21.892c-3.712 3.734-7.337 5.108-12.47 5.108-5.133 0-8.758-1.374-12.47-5.108C-2.854 15.98 1.644.006 1.644.006Z'/%3E%3C/svg%3E");
|
|
filter: drop-shadow(0 0 5px #E3BBF9);
|
|
}
|
|
|
|
message.vip top::before {
|
|
aspect-ratio: 31 / 31;
|
|
filter: drop-shadow(0 0 5px #FFC0E4);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' fill='none'%3E%3Cpath fill='%23FFC0E4' d='M28.015 7.746c-1.179-.575-3.9-1.232-7.502 2.231 1.878-5.246-.348-7.822-1.223-8.596A5.882 5.882 0 0 0 15.517.014c-1.38 0-2.717.484-3.773 1.367-.892.774-3.128 3.35-1.24 8.596-3.618-3.463-6.34-2.806-7.518-2.231C.529 8.95-.65 12.236.362 15.089c.4 1.123 1.95 4.168 7.026 4.367-3.745 1.885-3.907 4.339-3.735 5.495.427 2.875 3.687 5.277 6.826 5.047 1.292-.092 3.91-.787 5.02-4.684 1.11 3.898 3.728 4.592 5.02 4.684h.42c3.009 0 5.996-2.32 6.406-5.064.172-1.157 0-3.61-3.735-5.495 5.075-.202 6.626-3.244 7.026-4.367 1.013-2.837-.166-6.122-2.622-7.326Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.moderator top::before {
|
|
aspect-ratio: 25 / 29;
|
|
filter: drop-shadow(0 0 5px #CFFFA4);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='29' fill='none'%3E%3Cpath fill='%23CFFFA4' d='M.41.002s12.633 3.38 14.925 8.704c2.186 5.076-1.72 13.296-1.72 13.296S4.113 18.839 1.57 13.79C-1.06 8.56.41.002.41.002Z'/%3E%3Cpath fill='%23CFFFA4' d='M24.667 3.002S14.403 5.767 12.54 10.124c-1.776 4.153 1.398 10.878 1.398 10.878s7.72-2.588 9.785-6.719c2.139-4.278.944-11.281.944-11.281Z'/%3E%3Cpath stroke='%23D2FDAD' stroke-linecap='round' stroke-width='2' d='M13 19.002v9'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.broadcaster top::before {
|
|
aspect-ratio: 32 / 29;
|
|
filter: drop-shadow(0 0 5px #707070);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='29' fill='none'%3E%3Cpath fill='%23707070' d='M23.288.004c5.291 0 8.538 4.477 8.538 8.15 0 7.94-9.328 15.311-15.913 20.004C9.328 23.465 0 16.095 0 8.154 0 4.48 3.247.004 8.54.004c2.955 0 5.48 2.28 7.374 4.445 1.895-2.165 4.42-4.445 7.375-4.445Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message top author {
|
|
position: relative;
|
|
margin-left: 65px;
|
|
color: var(--color-1);
|
|
filter: drop-shadow(0 0 5px #E3BBF9) drop-shadow(0 0 10px #E3BBF9);
|
|
}
|
|
|
|
message.vip top author {
|
|
filter: drop-shadow(0 0 5px #FFC0E4) drop-shadow(0 0 10px #FFC0E4);
|
|
}
|
|
|
|
message.moderator top author {
|
|
filter: drop-shadow(0 0 5px #CFFFA4) drop-shadow(0 0 10px #CFFFA4);
|
|
}
|
|
|
|
message.broadcaster top author {
|
|
filter: drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 10px #FFFFFF);
|
|
}
|
|
|
|
message bottom {
|
|
position: relative;
|
|
border-radius: 40px;
|
|
margin-left: 10px;
|
|
padding-bottom: 28px;
|
|
}
|
|
|
|
message bottom::before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 30px;
|
|
top: 30px;
|
|
left: -8px;
|
|
transform: translateX(-50%);
|
|
filter: drop-shadow(0 0 5px var(--leaf-shadow));
|
|
aspect-ratio: 31 / 45;
|
|
z-index: -1;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='45' fill='none'%3E%3Cpath fill='%23A7D5B3' d='M20.303 7.677c5.133 3.026 7.717 11.993 8.443 14.934a.92.92 0 0 1-.734 1.138c-2.947.546-12.025 1.89-17.148-1.13C5.808 19.638 1.746 10.352.44 7.086a.936.936 0 0 1 .781-1.29c3.565-.362 14.008-1.11 19.082 1.88Z'/%3E%3Cpath fill='%23A7D5B3' d='M16.27 23.83c4.56-1.404 11.21 1.795 13.55 3.05a.92.92 0 0 1 .347 1.31c-1.398 2.223-5.51 8.208-10.06 9.61-4.486 1.38-12.082-1.125-14.958-2.19a.929.929 0 0 1-.424-1.441c1.873-2.503 7.043-8.953 11.546-10.34Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message bottom::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: -6px;
|
|
right: 4px;
|
|
width: 75px;
|
|
transform: translateX(30%);
|
|
aspect-ratio: 100 / 160;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='160' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23A7D5B3' d='M76.056 115.777c4.695-3.669 13.985-2.791 16.989-2.39a.92.92 0 0 1 .79 1.1c-.571 2.942-2.644 11.882-7.33 15.543-4.625 3.615-14.753 3.995-18.27 4.014a.935.935 0 0 1-.915-1.198c.968-3.45 4.095-13.443 8.736-17.069Z'/%3E%3C/g%3E%3Cg filter='url(%23b)'%3E%3Cpath fill='%23A7D5B3' d='M85.844 134.004c3.65 2.107 6.717 8.513 7.901 11.259a.931.931 0 0 1-.85 1.31c-3.165.045-10.978-.076-14.671-2.208-3.646-2.104-6.588-8.078-7.721-10.643a.926.926 0 0 1 .786-1.309c3.07-.229 10.836-.555 14.555 1.591Z'/%3E%3C/g%3E%3Cg filter='url(%23c)'%3E%3Cpath fill='%23fff' d='M77.332 127.018c-1.257 4.975-5.816 8.114-10.182 7.011-4.367-1.104-6.887-6.032-5.63-11.007 1.258-4.976 6.421-10.505 10.788-9.402 4.366 1.104 6.282 8.422 5.024 13.398Z'/%3E%3C/g%3E%3Cg filter='url(%23d)'%3E%3Cpath fill='%23fff' d='M58.174 136.258c1.258-4.975 5.816-8.114 10.183-7.011 4.366 1.104 6.886 6.032 5.629 11.007-1.258 4.976-6.42 10.505-10.787 9.401-4.366-1.103-6.282-8.421-5.025-13.397Z'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath fill='%23fff' d='M58.953 137.825c4.975 1.257 9.904-1.263 11.007-5.629 1.104-4.366-2.035-8.925-7.01-10.183-4.976-1.257-12.294.659-13.398 5.025-1.104 4.366 4.425 9.529 9.401 10.787Z'/%3E%3C/g%3E%3Cg filter='url(%23f)'%3E%3Cpath fill='%23fff' d='M72.373 141.217c-4.975-1.257-8.114-5.816-7.01-10.183 1.103-4.366 6.031-6.886 11.007-5.629 4.975 1.258 10.504 6.421 9.4 10.787-1.103 4.367-8.421 6.283-13.397 5.025Z'/%3E%3C/g%3E%3Ccircle cx='67.981' cy='131.498' r='3.793' fill='%23F8EFD6' transform='rotate(14.184 67.981 131.498)'/%3E%3Cg filter='url(%23g)'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='3.5' d='M7.569 7.02C28.918 30.845 44.135 39.22 75.296 47.154'/%3E%3C/g%3E%3Cg filter='url(%23h)'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='3.5' d='M68.91 46.466c-43.514 20.27-2.968 41.85.353.484'/%3E%3C/g%3E%3Cg filter='url(%23i)'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='3.5' d='M71.4 46.71c-23.63 55.642 34.837 46.679.775.236'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='38.569' height='33.046' x='61.283' y='106.998' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.729412 0 0 0 0 0.878431 0 0 0 0 0.768627 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='b' width='35.406' height='26.333' x='64.42' y='126.247' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.729412 0 0 0 0 0.878431 0 0 0 0 0.768627 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='c' width='36.515' height='40.771' x='51.197' y='103.478' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='d' width='36.515' height='40.771' x='47.794' y='119.026' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='e' width='40.772' height='36.515' x='39.41' y='111.634' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='f' width='40.771' height='36.515' x='55.142' y='115.082' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='g' width='81.227' height='53.635' x='.819' y='.27' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='h' width='33.855' height='37.56' x='42.158' y='39.716' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='i' width='31.027' height='51.972' x='58.849' y='39.96' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2191_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2191_2' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
|
|
}
|
|
|
|
message bottom content {
|
|
color: var(--primary);
|
|
background: linear-gradient(to bottom, transparent calc(100% - 20px), var(--primary) calc(100% - 19.99px), var(--primary)), var(--bg);
|
|
border-radius: inherit;
|
|
padding: 55px 35px;
|
|
}
|
|
|
|
message bottom footer {
|
|
position: absolute;
|
|
content: '';
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 15px;
|
|
width: 100%;
|
|
aspect-ratio: 111 / 40;
|
|
}
|
|
|
|
message bottom footer::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 50px;
|
|
bottom: -10px;
|
|
transform: translateY(-50%);
|
|
height: 40px;
|
|
aspect-ratio: 111 / 40;
|
|
filter: drop-shadow(0 0 5px #E0BAF5);
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='111' height='40' fill='none'%3E%3Cpath fill='%23fff' d='m95.5.516.73 5.77c.867 6.857 6.196 12.334 13.095 13.457l1.675.273-1.675.273c-6.899 1.123-12.228 6.6-13.095 13.457l-.73 5.77-.73-5.77c-.867-6.858-6.196-12.334-13.095-13.457L80 20.016l1.675-.273c6.9-1.123 12.228-6.6 13.095-13.457l.73-5.77ZM55.5.516l.73 5.77c.867 6.857 6.196 12.334 13.095 13.457l1.675.273-1.675.273c-6.9 1.123-12.228 6.6-13.095 13.457l-.73 5.77-.73-5.77c-.867-6.858-6.196-12.334-13.095-13.457L40 20.016l1.675-.273c6.9-1.123 12.228-6.6 13.095-13.457l.73-5.77ZM15.5 1.006l.73 5.77c.867 6.858 6.196 12.334 13.095 13.457l1.675.273-1.675.273c-6.9 1.123-12.228 6.6-13.095 13.457l-.73 5.77-.73-5.77C13.903 27.38 8.574 21.902 1.675 20.78L0 20.506l1.675-.273c6.9-1.123 12.228-6.6 13.095-13.457l.73-5.77Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.vip bottom footer::before {
|
|
filter: drop-shadow(0 0 5px #FFC0E4);
|
|
}
|
|
|
|
message.moderator bottom footer::before {
|
|
filter: drop-shadow(0 0 5px #CEFFA4);
|
|
}
|
|
|
|
message.broadcaster bottom footer::before {
|
|
filter: drop-shadow(0 0 5px #AFAFAF);
|
|
}
|
|
|
|
message bottom footer::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: 15px;
|
|
right: 0;
|
|
width: 15px;
|
|
aspect-ratio: 16 / 47;
|
|
filter: drop-shadow(0 0 5px white);
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='47' fill='none'%3E%3Ccircle cx='8' cy='3.014' r='3' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M0 20.773c0 3.955 3.216 6.062 5.57 7.948.83.666 1.63 1.293 2.43 1.293.8 0 1.6-.627 2.43-1.293 2.354-1.886 5.57-3.993 5.57-7.948 0-3.955-4.4-6.76-8-2.957-3.6-3.802-8-.998-8 2.957Z'/%3E%3Ccircle cx='8' cy='43.014' r='3' fill='%23fff'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
event {
|
|
margin: auto;
|
|
padding: 70px 10px 50px;
|
|
}
|
|
|
|
event content {
|
|
position: relative;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: var(--color-1);
|
|
text-shadow: 0 0 10px white;
|
|
background: linear-gradient(to bottom, transparent calc(100% - 20px), #B5B5B5 calc(100% - 19.99px), #B5B5B5), linear-gradient(to right, #464646 50%, #282828 120%);
|
|
border-radius: 85px;
|
|
padding: 35px 75px 55px;
|
|
}
|
|
|
|
event content::before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 25px;
|
|
left: 50%;
|
|
z-index: -1;
|
|
transform: translate(-50%, -100%);
|
|
height: 70px;
|
|
aspect-ratio: 462 / 89;
|
|
filter: drop-shadow(0 0 5px white);
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='462' height='89' fill='none'%3E%3Cpath fill='url(%23a)' d='M8.21 29.231C13.295 16.881 26 .014 26 .014s-4.226 22.373-4.238 36.863C21.75 51.474 26 74.014 26 74.014H0S1.442 45.677 8.21 29.23Z'/%3E%3Cpath fill='url(%23b)' d='M453.789 29.231C448.706 16.881 436 .014 436 .014s4.226 22.373 4.238 36.863C440.25 51.474 436 74.014 436 74.014h26s-1.442-28.337-8.211-44.783Z'/%3E%3Cpath fill='%23fff' d='M121.002 47.014h222v10h-222z'/%3E%3Ccircle cx='395.813' cy='66.2' r='22.186' fill='%23fff' transform='rotate(90 395.813 66.2)'/%3E%3Ccircle cx='313.409' cy='47.2' r='22.186' fill='%23fff' transform='rotate(90 313.409 47.2)'/%3E%3Ccircle cx='356.186' cy='54.2' r='22.186' fill='%23fff' transform='rotate(90 356.186 54.2)'/%3E%3Ccircle cx='272.202' cy='43.2' r='22.186' fill='%23fff' transform='rotate(90 272.202 43.2)'/%3E%3Ccircle cx='189.792' cy='43.2' r='22.186' fill='%23fff' transform='rotate(90 189.792 43.2)'/%3E%3Ccircle cx='230.999' cy='40.2' r='22.186' fill='%23fff' transform='rotate(90 230.999 40.2)'/%3E%3Ccircle cx='148.589' cy='47.2' r='22.186' fill='%23fff' transform='rotate(90 148.589 47.2)'/%3E%3Ccircle cx='67.186' cy='66.2' r='22.186' fill='%23fff' transform='rotate(90 67.186 66.2)'/%3E%3Ccircle cx='108.186' cy='54.2' r='22.186' fill='%23fff' transform='rotate(90 108.186 54.2)'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='13' x2='13' y1='.014' y2='74.014' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D8A291'/%3E%3Cstop offset='1' stop-color='%23F6E4DC'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='449' x2='449' y1='.014' y2='74.014' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D8A291'/%3E%3Cstop offset='1' stop-color='%23F6E4DC'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
|
}
|
|
|
|
event content::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: 35px;
|
|
right: -10px;
|
|
width: 40px;
|
|
aspect-ratio: 1;
|
|
filter: drop-shadow(0 0 5px white);
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath fill='%23fff' d='M32.335 18.01c-1.258 4.976-5.817 8.115-10.183 7.012-4.367-1.104-6.887-6.032-5.63-11.008C17.78 9.04 22.944 3.51 27.31 4.614c4.366 1.103 6.282 8.421 5.025 13.397Z'/%3E%3Cpath fill='%23fff' d='M13.178 27.252c1.258-4.976 5.817-8.114 10.183-7.01 4.366 1.103 6.887 6.03 5.63 11.006-1.258 4.976-6.421 10.505-10.788 9.401-4.366-1.103-6.282-8.421-5.025-13.397Z'/%3E%3Cpath fill='%23fff' d='M13.956 28.818c4.976 1.258 9.904-1.262 11.007-5.629 1.104-4.366-2.035-8.925-7.01-10.182-4.976-1.258-12.294.658-13.398 5.024-1.103 4.367 4.426 9.53 9.401 10.787Z'/%3E%3Cpath fill='%23fff' d='M27.378 32.21c-4.976-1.258-8.115-5.817-7.011-10.183 1.103-4.366 6.031-6.886 11.007-5.629 4.976 1.258 10.505 6.42 9.401 10.787-1.103 4.367-8.422 6.283-13.397 5.025Z'/%3E%3Ccircle cx='22.986' cy='22.493' r='3.793' fill='%23F8EFD6' transform='rotate(14.184 22.986 22.493)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
event bottom {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -30px;
|
|
height: 30px;
|
|
width: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center 110%;
|
|
background-size: 40%;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='219' height='92' fill='none'%3E%3Cellipse cx='109.5' cy='45.514' stroke='%23fff' stroke-dasharray='0.1 10' stroke-linecap='round' stroke-width='4' rx='107.5' ry='43.5'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
event bottom::before {
|
|
position: absolute;
|
|
content: '';
|
|
bottom: 5px;
|
|
left: 50px;
|
|
width: 65px;
|
|
aspect-ratio: 1;
|
|
filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px white);
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' fill='none'%3E%3Cpath fill='%23fff' d='M47.346 24.064c3.27 7.595.52 16.079-6.145 18.95-6.665 2.87-14.72-.96-17.992-8.555-3.27-7.595-2.09-19.727 4.574-22.598 6.665-2.87 16.291 4.608 19.563 12.203Z'/%3E%3Cpath fill='%23fff' d='M31.915 54.665c-3.271-7.595-.52-16.079 6.145-18.95 6.665-2.87 14.72.96 17.991 8.555 3.271 7.595 2.092 19.727-4.573 22.598-6.665 2.87-16.292-4.608-19.563-12.203Z'/%3E%3Cpath fill='%23fff' d='M34.444 55.905c7.595-3.271 11.425-11.326 8.554-17.991-2.87-6.665-11.354-9.416-18.95-6.145-7.594 3.27-15.073 12.897-12.202 19.562 2.87 6.665 15.003 7.845 22.598 4.574Z'/%3E%3Cpath fill='%23fff' d='M54.932 47.08c-7.595 3.271-16.079.52-18.95-6.145-2.87-6.665.96-14.72 8.555-17.99 7.595-3.272 19.727-2.092 22.598 4.573 2.87 6.665-4.608 16.291-12.203 19.562Z'/%3E%3Ccircle cx='39.789' cy='38.964' r='6.112' fill='%23F8EFD6' transform='rotate(-23.302 39.789 38.964)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
event bottom::after {
|
|
position: absolute;
|
|
content: '';
|
|
right: 65px;
|
|
bottom: -20px;
|
|
width: 70px;
|
|
aspect-ratio: 84 / 64;
|
|
z-index: -1;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='64' fill='none'%3E%3Cg fill='%23fff' clip-path='url(%23a)'%3E%3Cpath d='M17.102-12.986 35-10.186c-5.016 29.602-8.56 45.78-15.644 74.2L0 26.447C11.14 12.644 15.046 3.978 17.102-12.986ZM66.898-12.986 49-10.186c5.016 29.602 8.56 45.78 15.644 74.2L84 26.447C72.86 12.644 68.954 3.978 66.898-12.986Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h84v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
|
|
}
|