255 lines
8.8 KiB
CSS
255 lines
8.8 KiB
CSS
/* Imports */
|
|
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
|
|
|
/* Variables */
|
|
:root {
|
|
/* Fonts */
|
|
--font-size: 35px;
|
|
--font-family-1: "Montserrat", sans-serif;
|
|
--font-family-2: "Merriweather", 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: linear-gradient(75deg, #812027, #2A0B0C);
|
|
--color-3: linear-gradient(75deg, #BD4867, #3B0F1B);
|
|
--color-4: linear-gradient(75deg, #A64C77, #501732);
|
|
}
|
|
|
|
/* 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: 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 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: 40px 15px 15px;
|
|
}
|
|
|
|
message top {
|
|
display: inline-flex;
|
|
margin-bottom: 5px;
|
|
margin-left: 40px;
|
|
gap: 5px;
|
|
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
|
|
}
|
|
|
|
message top::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -25px;
|
|
height: 30px;
|
|
aspect-ratio: 296 / 18;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='296' height='18' fill='none'%3E%3Ccircle cx='175.5' cy='9.5' r='1.5' fill='%23fff'/%3E%3Ccircle cx='120.5' cy='9.5' r='1.5' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M147.746 17.902a.514.514 0 0 0 .287.098.481.481 0 0 0 .318-.13c5.263-3.278 8.453-6.718 9.41-10.224.765-2.726-.351-5.582-2.711-6.978-3.157-1.85-6.028.616-7.05 1.688-1.02-1.072-3.86-3.538-7.05-1.688-2.36 1.396-3.476 4.253-2.711 6.978 1.022 3.505 4.211 6.946 9.507 10.256ZM103 9.5a.5.5 0 0 0 0-1v1ZM0 9v.5h103v-1H0V9ZM193 8a.5.5 0 0 0 0 1V8Zm0 .5V9h103V8H193v.5Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message top author {
|
|
position: relative;
|
|
color: var(--color-1);
|
|
font-family: var(--font-family-1);
|
|
font-weight: bolder;
|
|
text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
|
|
border-radius: 25px;
|
|
}
|
|
|
|
message top author::before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 50%;
|
|
left: -40px;
|
|
transform: translateY(-50%);
|
|
width: 30px;
|
|
aspect-ratio: 23 / 21;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='21' fill='none'%3E%3Cpath fill='%23fff' d='M20.063 11.037c-.894-.42-1.967-.945-1.099.184 1.201 1.602 2.147 3.254 1.968 4.777-.154 1.339-1.15 1.68-2.223 1.575-.665-.08-1.201-.656-1.585-1.155-1.712-2.23-4.702-2.782-6.9-.866-.87.76-1.739 2.126-3.017 2.126-1.328 0-2.095-1.575-1.635-2.756.818-2.152 3.195-3.15 4.856-4.462 2.045-1.601 3.323-4.042 2.94-6.22-.384-2.258-1.969-3.99-4.32-4.2-2.146-.21-2.862.42-4.55 1.627-.868.158-2.3-.341-3.628 1.575C.103 4.344.205 5.998.052 6.234-.102 6.39 0 7.598 1.534 7.467c1.533-.131 4.499-2.94 4.499-2.94.996-.787 1.738-1.6 2.99-1.023 1.2.552 1.2 2.074.485 3.046-.307.42-1.355 1.364-1.763 1.68-.562.393-1.124.76-1.688 1.154-1.124.814-2.172 1.785-2.913 2.966-1.456 2.336-1.304 5.354.716 7.297.996.946 2.351 1.444 3.706 1.34 1.355-.105 2.556-.815 3.578-1.707.613-.552 1.252-1.601 2.147-1.601.894 0 1.405 1.05 1.993 1.601 1.457 1.34 3.579 1.81 5.368.867 3.706-1.944 2.657-7.167-.588-9.11Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message bottom {
|
|
position: relative;
|
|
color: var(--color-1);
|
|
background: var(--color-2);
|
|
font-family: var(--font-family-2);
|
|
padding: 40px 30px;
|
|
border-radius: 0 25px 25px 25px;
|
|
}
|
|
|
|
message.moderator bottom {
|
|
background: var(--color-3) !important;
|
|
}
|
|
|
|
message.vip bottom,
|
|
message.subscriber bottom {
|
|
background: var(--color-4);
|
|
}
|
|
|
|
message bottom::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 1px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 25px;
|
|
aspect-ratio: 16 / 53;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='53' fill='none'%3E%3Cpath fill='%23fff' d='M16 26.5 8 16 0 26.5 8 37l8-10.5Z'/%3E%3Ccircle cx='8' cy='43.5' r='1.5' fill='%23fff'/%3E%3Ccircle cx='8' cy='1.5' r='1.5' fill='%23fff'/%3E%3Ccircle cx='8' cy='51.5' r='1.5' fill='%23fff'/%3E%3Ccircle cx='8' cy='9.5' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message bottom::after {
|
|
position: absolute;
|
|
content: '';
|
|
inset: -2px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
|
|
z-index: -1;
|
|
}
|
|
|
|
message flag {
|
|
position: absolute;
|
|
content: '';
|
|
top: 0;
|
|
right: 25px;
|
|
width: 40px;
|
|
aspect-ratio: 26 / 43;
|
|
background-size: cover;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='43' fill='none'%3E%3Cpath fill='url(%23a)' fill-opacity='.8' d='M26 41.48c0 .366-.148.683-.398.851-.25.166-.534.14-.764-.07L13.907 32.145c-.543-.504-1.271-.504-1.814 0L1.162 42.26c-.229.211-.515.24-.764.07-.249-.168-.398-.485-.398-.85V.513C0-1.425 1.211-3 2.7-3h20.596c1.49 0 2.7 1.577 2.7 3.514V41.48H26Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='13' x2='13' y1='-3' y2='42.441' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B24252'/%3E%3Cstop offset='1' stop-color='%237E2026'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.moderator flag {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='43' fill='none'%3E%3Cpath fill='url(%23a)' fill-opacity='.8' d='M26 41.48c0 .366-.148.683-.398.851-.25.166-.534.14-.764-.07L13.907 32.145c-.543-.504-1.271-.504-1.814 0L1.162 42.26c-.229.211-.515.24-.764.07-.249-.168-.398-.485-.398-.85V.513C0-1.425 1.211-3 2.7-3h20.596c1.49 0 2.7 1.577 2.7 3.514V41.48H26Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='13' x2='13' y1='-3' y2='42.441' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E25E82'/%3E%3Cstop offset='1' stop-color='%23B74563'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")!important;
|
|
}
|
|
|
|
message.vip flag,
|
|
message.subscriber flag
|
|
{
|
|
background-image: url("data:image/svg+xml,%3Csvg width='26' height='43' viewBox='0 0 26 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 41.4803C26 41.8458 25.8519 42.1631 25.6017 42.331C25.3528 42.4971 25.0681 42.4705 24.8383 42.2612L13.907 32.1446C13.3645 31.6412 12.6355 31.6412 12.093 32.1446L1.16168 42.2612C0.933176 42.4722 0.647223 42.5004 0.398291 42.331C0.149359 42.1631 0 41.8458 0 41.4803V0.513963C0 -1.42495 1.21147 -3 2.69996 -3H23.2962C24.786 -3 25.9962 -1.42329 25.9962 0.513963V41.4803H26Z' fill='url(%23paint0_linear_2116_38)' fill-opacity='0.8'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2116_38' x1='13' y1='-3' x2='13' y2='42.4411' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D787AD'/%3E%3Cstop offset='1' stop-color='%23A6547B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
|
|
}
|