330 lines
15 KiB
CSS
330 lines
15 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", sans-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 */
|
|
--color-1: #FFFFFF;
|
|
--color-2: #AF99E6;
|
|
--color-3: linear-gradient(75deg, #FEEDFE, #FFFFFF);
|
|
--color-4: linear-gradient(75deg, #FEEDFE, #D3CBFE);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
@keyframes beat {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
transform: scale(1.2);
|
|
}
|
|
50% {
|
|
transform: scale(0.9);
|
|
}
|
|
75% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
#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);
|
|
font-family: var(--font-family-1);
|
|
width: 100%;
|
|
display: flex;
|
|
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-top: 75px;
|
|
}
|
|
|
|
message top {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 25px;
|
|
margin-left: 30px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
message top::before {
|
|
position: absolute;
|
|
content: '';
|
|
height: 80px;
|
|
top: 0;
|
|
left: -40px;
|
|
z-index: -1;
|
|
aspect-ratio: 192 / 191;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='191' fill='none'%3E%3Cpath fill='%23FFE9A9' d='M39.622 125.229c1.236-12.115 2.708-18.617 4.57-30.476l71.647-60.209 11.352-1.423 10.074 4.369s-9.021-1.763-13.305 1.215c-4.058 2.82-4.938 6.375-5.812 11.238-1.624 9.05.347 13.123 1.254 22.204 1.247 12.483 5.149 19.654 7.515 31.436 1.819 9.06-.84 23.297-.84 23.297s-13.318-1.75-20.427-6.133c-9.889-6.096-14.45-12.742-25.537-16.889-8.15-3.05-13.866-4.984-22.216-1.713-10.378 4.066-18.275 23.084-18.275 23.084Z'/%3E%3Cpath fill='%23fff' d='M87.3 76.625s9.204-6.323 13.767-11.706c3.441-4.058 6.823-11.46 6.823-11.46s7.595-.177 11.517 3.206c7.884 6.803 10.676 26.503 10.676 26.503s-13.741-6.985-22.172-8.296c-8.545-1.328-20.61 1.753-20.61 1.753Z'/%3E%3Cpath fill='%23FFF1C9' d='m71.487 85.795 1.39-13.028 28.685-24.937 6.689 5.337s-2.466 9.54-8.553 15.216c-6.088 5.676-11.396 8.007-16.36 14.395-1.665 2.142-.986 6.153-.986 6.153-4.025-2.032-6.438-2.696-10.865-3.136Z'/%3E%3Cpath fill='%23fff' d='M35.975 100.8c1.646-7.956 12.812-15.103 12.812-15.103-7.342-3.075-12.017-3.163-20.914-1.573 0 0 .553-18.798 8.702-26.094 10.366-9.282 28.563-5.174 28.563-5.174s.988-20.165 8.348-25.796c7.746-5.926 15.906-.944 21.114-3.34-2.123 8.882-2.033 13.644.02 21.412 0 0 7.339-9.516 13.837-12.358 6.629-2.9 10.601-3.02 17.574-1.088 4.762 1.318 11.238 5.81 11.238 5.81s-7.089-2.55-11.655-1.902c-3.74.53-5.889 1.45-8.955 3.656-5.535 3.982-8.542 15.228-8.542 15.228s-4.092 7.47-13.337 10.765c-4.7 1.675-10.062-1.404-10.062-1.404s-1.953 4.553-4.312 6.457c-2.36 1.905-7.222 2.853-7.222 2.853 1.785 4.847 1.913 7.989.266 12.868 0 0-8.697.25-13.438 2.526-4.73 2.27-6.983 4.502-10.453 8.436-7.736 8.774-9.94 28.249-9.94 28.249s-5.709-14.449-3.644-24.428Z'/%3E%3Cpath fill='%23FFDD8C' d='m80.453 46.392-2.4-.399s.713 11.226 3.666 17.712c2.938 6.454 8.062 12.666 8.062 12.666s.347-.302 1.099-.887c.751-.586 1.473-1.124 1.473-1.124s-4.211-5.046-7.246-11.637c-2.911-6.324-4.654-16.331-4.654-16.331ZM54.738 65.275l.617-2.229s12.63 4.193 18.247 8.543c5.591 4.33 10.765 9.997 10.765 9.997s-.707.882-1.18 1.5c-.474.62-.826 2.353-.826 2.353s-4.797-6.328-10.498-10.783c-5.47-4.273-17.125-9.38-17.125-9.38Z'/%3E%3Cpath fill='%23C3DB76' d='M68.986 120.514c6.036-6.871 10.209-9.895 19.254-11.248 20.217-3.024 42.398 30.699 42.398 30.699s-14.937-12.458-30.137-14.18c-18.136-2.055-41.39 15.409-41.304 15.901 0 0 4.065-14.656 9.789-21.172Z'/%3E%3Cpath fill='%239ABD2E' d='M63.742 114.376c6.022-6.054 18.181-3.416 18.181-3.416s-9.154 5.002-13.357 10.141c-5.519 6.75-9.36 20.58-9.36 20.58s-2.311-20.422 4.535-27.305Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message top author {
|
|
color: var(--color-2);
|
|
background-image: var(--color-3);
|
|
padding: 10px 20px;
|
|
border-radius: 35px;
|
|
font-weight: 600;
|
|
filter: drop-shadow(0 0 3px rgba(0, 0, 0, .2));
|
|
}
|
|
|
|
message top heart {
|
|
filter: drop-shadow(0 0 15px var(--color-1));
|
|
width: 25px;
|
|
animation: beat 1s infinite;
|
|
aspect-ratio: 35 / 32;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='32' fill='none'%3E%3Cpath fill='%23856EC7' fill-rule='evenodd' d='M34.745 8.47C33.748 3.355 30.185.06 25.595.06c-2.568 0-5.347 1.078-8.064 3.11C14.78 1.078 12.003 0 9.405 0 4.816 0 1.219 3.326.254 8.5c-1.45 7.669 3.201 17.863 16.822 23.406a1.2 1.2 0 0 0 .454.094c.15 0 .301-.032.453-.094C31.574 26.24 36.195 16.077 34.745 8.47Z' clip-rule='evenodd'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message top role {
|
|
opacity: 0;
|
|
border: 1px solid var(--color-1);
|
|
padding: 10px 20px;
|
|
border-radius: 25px;
|
|
box-sizing: border-box;
|
|
width: 55px;
|
|
height: 40px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 45%;
|
|
filter: drop-shadow(0 0 5px var(--color-1));
|
|
}
|
|
|
|
message.moderator top role,
|
|
message.vip top role
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
message.vip top role {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='40' height='33' viewBox='0 0 40 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.97743 0.270996H32.0252C32.2914 0.270959 32.5539 0.334605 32.7911 0.456732C33.0283 0.578859 33.2335 0.756 33.3901 0.973677L39.8398 9.93798C39.9545 10.0975 40.0109 10.2922 39.9995 10.4891C39.9882 10.6859 39.9097 10.8727 39.7774 11.0176L20.6205 31.9974C20.5415 32.0837 20.4457 32.1525 20.3392 32.1996C20.2326 32.2467 20.1176 32.271 20.0013 32.271C19.885 32.271 19.77 32.2467 19.6635 32.1996C19.5569 32.1525 19.4611 32.0837 19.3822 31.9974L0.225246 11.0193C0.0925583 10.8743 0.0137951 10.6872 0.00241011 10.4899C-0.00897489 10.2927 0.0477246 10.0976 0.162824 9.93798L6.61257 0.973677C6.7691 0.756 6.97436 0.578859 7.21157 0.456732C7.44879 0.334605 7.71122 0.270959 7.97743 0.270996Z' fill='white'/%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
message.moderator top role {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' fill='none'%3E%3Cpath fill='%23fff' d='M11.577 20.824A2.223 2.223 0 0 0 8.53 24.06l.854.801-7.736 8.23a2.275 2.275 0 0 0 .1 3.215l4.35 4.09a2.276 2.276 0 0 0 3.216-.1l7.733-8.226.852.8a2.222 2.222 0 1 0 3.044-3.24l-9.367-8.807ZM25.098.463 13.903 18.434l9.287 8.732 17.248-12.282-.46-14.88-14.88.459Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message bottom {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
message bottom::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 30px;
|
|
left: 0;
|
|
bottom: -60px;
|
|
aspect-ratio: 40 / 73;
|
|
filter: drop-shadow(0 0 3px var(--color-1));
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='73' fill='none'%3E%3Cpath fill='%23fff' d='M37.56 31.713c-.16-.472.172-1.07.861-1.69a.724.724 0 0 0 .094-.964 7.8 7.8 0 0 0-9.814-2.392.723.723 0 0 1-1.035-.772 7.8 7.8 0 0 0-5.55-8.867.727.727 0 0 0-.875.44c-.377.968-.866 1.552-1.402 1.552-.524 0-1.004-.56-1.378-1.491a.722.722 0 0 0-.892-.414 7.801 7.801 0 0 0-5.262 8.775.723.723 0 0 1-1.035.773A7.8 7.8 0 0 0 1.038 29.72a.727.727 0 0 0 .209.956c.865.619 1.321 1.251 1.184 1.777-.134.508-.802.832-1.804.956a.722.722 0 0 0-.625.77 7.8 7.8 0 0 0 6.715 7.183c.578.08.828.774.434 1.205a7.8 7.8 0 0 0 .14 10.69.728.728 0 0 0 .834.153c.55-.263 1.016-.313 1.334-.1.307.204.441.627.423 1.203a.717.717 0 0 0 .48.7 7.8 7.8 0 0 0 9.016-3.035l.007-.01a.727.727 0 0 1 1.213 0l.007.01a7.8 7.8 0 0 0 9.943 2.645.726.726 0 0 0 .389-.772c-.117-.696-.026-1.22.307-1.476.306-.235.78-.215 1.353.017a.718.718 0 0 0 .852-.249 7.8 7.8 0 0 0-.617-9.776.723.723 0 0 1 .434-1.205 7.8 7.8 0 0 0 6.723-8.14.729.729 0 0 0-.67-.691c-.95-.067-1.596-.339-1.76-.819Zm-17.564 5.55-.005.023-.004-.024.028-.031-.019.031Z'/%3E%3Cpath fill='%23FFE8A9' d='M27.599 34.944a2.54 2.54 0 0 0-3.11-1.797l-1.967.527v-2.037a2.54 2.54 0 0 0-5.079 0v2.052l-1.985-.521a2.54 2.54 0 0 0-1.29 4.912l1.68.441-1.144 1.667a2.54 2.54 0 1 0 4.189 2.872l1.042-1.52 1.011 1.542a2.537 2.537 0 0 0 3.516.73 2.54 2.54 0 0 0 .731-3.515l-1.16-1.77 1.769-.473a2.54 2.54 0 0 0 1.797-3.11Z'/%3E%3Ccircle cx='20' cy='68.637' r='4' fill='%23fff'/%3E%3Ccircle cx='20' cy='4' r='4' fill='%23fff'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message bottom content {
|
|
color: var(--color-1);
|
|
}
|
|
|
|
event {
|
|
max-width: fit-content;
|
|
padding-top: 75px;
|
|
}
|
|
|
|
event main {
|
|
position: relative;
|
|
}
|
|
|
|
event main::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
top: -45px;
|
|
width: 100px;
|
|
aspect-ratio: 149 / 229;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='149' height='229' fill='none'%3E%3Cpath stroke='%23FCBF58' stroke-linecap='round' stroke-width='6' d='M84.022 119.783S19.393 208.728 5.04 172.245c-13.218-33.598 78.987-52.462 78.987-52.462M81.158 130.731s-15.163 26.145-20.87 46.496c-4.98 17.758-9.15 45.763-9.15 45.763'/%3E%3Cpath stroke='%23FCBF58' stroke-linecap='round' stroke-width='6' d='M84.783 118.394s-9.321 29.702-12.322 53.243c-2.619 20.542-5.89 54.159-5.89 54.159'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='4' d='M146.718 56.418s-15.307 13.592-28.454 19.09c-11.472 4.8-28.31 11.993-28.31 11.993'/%3E%3Cpath fill='%23fff' d='M138.252 4.918s4.478 26.592 1.276 43.935c-3.202 17.344-15.394 21.552-25.381 35.393 0 0-6.983-7.52-9.358-13.515-3.254-8.214-4.642-11.614-2.381-20.143 4.98-18.783 35.844-45.67 35.844-45.67Z'/%3E%3Cpath fill='%23fff' d='M61.191 68.138s17.822-4.301 32.316-4.866c5.472-.213 9.072 2.652 13.662 6.374 3.902 3.163 8.495 8.678 8.495 8.678s-9.934 8.055-16.628 8.617c-5.5.461-8.797-.924-13.766-3.202-10.177-4.666-24.079-15.6-24.079-15.6Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
event main::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: -15px;
|
|
right: -15px;
|
|
width: 125px;
|
|
aspect-ratio: 1;
|
|
z-index: -1;
|
|
filter: drop-shadow(0 0 3px var(--color-1));
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='178' height='178' fill='none'%3E%3Ccircle cx='88.957' cy='89' r='86' stroke='%23fff' stroke-dasharray='0.1 20 0.1 20' stroke-linecap='round' stroke-width='5'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
event main content {
|
|
position: relative;
|
|
color: var(--color-2);
|
|
background-image: var(--color-4);
|
|
padding: 35px 50px;
|
|
margin-left: 40px;
|
|
border-radius: 50px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
event main content::before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 0;
|
|
left: 50%;
|
|
width: 40px;
|
|
aspect-ratio: 50 / 62;
|
|
z-index: 100;
|
|
transform: translate(-50%, -50%);
|
|
filter: drop-shadow(0 0 3px var(--color-1));
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='62' fill='none'%3E%3Cpath fill='%23fff' d='m25.453 0 1.154 9.172c1.37 10.903 9.793 19.609 20.698 21.394l2.648.434-2.648.434C36.4 33.219 27.977 41.925 26.607 52.828L25.453 62 24.3 52.828C22.929 41.925 14.506 33.219 3.6 31.434L.953 31l2.648-.434C14.506 28.781 22.93 20.075 24.3 9.172L25.453 0Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
event main content::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 30px;
|
|
left: -30px;
|
|
bottom: -60px;
|
|
aspect-ratio: 40 / 73;
|
|
filter: drop-shadow(0 0 3px var(--color-1));
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='73' fill='none'%3E%3Cpath fill='%23fff' d='M37.56 31.713c-.16-.472.172-1.07.861-1.69a.724.724 0 0 0 .094-.964 7.8 7.8 0 0 0-9.814-2.392.723.723 0 0 1-1.035-.772 7.8 7.8 0 0 0-5.55-8.867.727.727 0 0 0-.875.44c-.377.968-.866 1.552-1.402 1.552-.524 0-1.004-.56-1.378-1.491a.722.722 0 0 0-.892-.414 7.801 7.801 0 0 0-5.262 8.775.723.723 0 0 1-1.035.773A7.8 7.8 0 0 0 1.038 29.72a.727.727 0 0 0 .209.956c.865.619 1.321 1.251 1.184 1.777-.134.508-.802.832-1.804.956a.722.722 0 0 0-.625.77 7.8 7.8 0 0 0 6.715 7.183c.578.08.828.774.434 1.205a7.8 7.8 0 0 0 .14 10.69.728.728 0 0 0 .834.153c.55-.263 1.016-.313 1.334-.1.307.204.441.627.423 1.203a.717.717 0 0 0 .48.7 7.8 7.8 0 0 0 9.016-3.035l.007-.01a.727.727 0 0 1 1.213 0l.007.01a7.8 7.8 0 0 0 9.943 2.645.726.726 0 0 0 .389-.772c-.117-.696-.026-1.22.307-1.476.306-.235.78-.215 1.353.017a.718.718 0 0 0 .852-.249 7.8 7.8 0 0 0-.617-9.776.723.723 0 0 1 .434-1.205 7.8 7.8 0 0 0 6.723-8.14.729.729 0 0 0-.67-.691c-.95-.067-1.596-.339-1.76-.819Zm-17.564 5.55-.005.023-.004-.024.028-.031-.019.031Z'/%3E%3Cpath fill='%23FFE8A9' d='M27.599 34.944a2.54 2.54 0 0 0-3.11-1.797l-1.967.527v-2.037a2.54 2.54 0 0 0-5.079 0v2.052l-1.985-.521a2.54 2.54 0 0 0-1.29 4.912l1.68.441-1.144 1.667a2.54 2.54 0 1 0 4.189 2.872l1.042-1.52 1.011 1.542a2.537 2.537 0 0 0 3.516.73 2.54 2.54 0 0 0 .731-3.515l-1.16-1.77 1.769-.473a2.54 2.54 0 0 0 1.797-3.11Z'/%3E%3Ccircle cx='20' cy='68.637' r='4' fill='%23fff'/%3E%3Ccircle cx='20' cy='4' r='4' fill='%23fff'/%3E%3C/svg%3E");
|
|
}
|