260 lines
26 KiB
CSS
260 lines
26 KiB
CSS
/* Imports */
|
|
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Wix+Madefor+Display:wght@400..800&display=swap');
|
|
|
|
/* Variables */
|
|
:root {
|
|
/* Fonts */
|
|
--font-size: 35px;
|
|
--font-family-1: "Audiowide", sans-serif;
|
|
--font-family-2: "Wix Madefor Display", 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;
|
|
}
|
|
|
|
/* 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-top: 40px;
|
|
}
|
|
|
|
message top {
|
|
position: absolute;
|
|
bottom: 35px;
|
|
right: 160px;
|
|
width: 200px;
|
|
z-index: 99;
|
|
}
|
|
|
|
message top author {
|
|
font-family: var(--font-family-1);
|
|
color: var(--color-1);
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: auto-phrase;
|
|
width: 100%;
|
|
}
|
|
|
|
message.long top {
|
|
right: 200px;
|
|
bottom: 40px;
|
|
}
|
|
|
|
message bottom {
|
|
position: relative;
|
|
width: 800px;
|
|
margin-left: 30px;
|
|
aspect-ratio: 193 / 98;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='193' height='98' fill='none'%3E%3Cpath fill='url(%23a)' stroke='%23fff' d='M5.5 9.5h15.354a4.5 4.5 0 0 1 3.262 1.4l6.543 6.888a5.5 5.5 0 0 0 3.988 1.712h29.54a5.501 5.501 0 0 0 4.192-1.938l5.505-6.476A4.5 4.5 0 0 1 77.312 9.5H187.5A4.5 4.5 0 0 1 192 14v65.767c0 1.01-.34 1.991-.965 2.785l-10.427 13.233a4.499 4.499 0 0 1-3.534 1.715H5.5A4.5 4.5 0 0 1 1 93v-5.097a4.5 4.5 0 0 1 1.688-3.513l1.248-.998A5.5 5.5 0 0 0 6 79.097v-23.87a5.5 5.5 0 0 0-1.82-4.088l-1.69-1.52A4.5 4.5 0 0 1 1 46.272V14a4.5 4.5 0 0 1 4.5-4.5Z'/%3E%3Cpath fill='%23fff' d='m87.113 15.55-.13 4.85h-.95l-.13-4.85h1.21Zm-.57 7.02a.706.706 0 0 1-.52-.21.706.706 0 0 1-.21-.52c0-.207.07-.38.21-.52.14-.14.313-.21.52-.21.2 0 .37.07.51.21.14.14.21.313.21.52 0 .207-.07.38-.21.52-.14.14-.31.21-.51.21Z'/%3E%3Cpath stroke='%23fff' stroke-width='.5' d='M85.221 14.084a1.5 1.5 0 0 1 2.558 0l4.68 7.632A1.5 1.5 0 0 1 91.182 24H81.82a1.5 1.5 0 0 1-1.279-2.284l4.681-7.632Z'/%3E%3Cpath fill='%235D5D5D' stroke='%235D5D5D' stroke-width='.5' d='M176.012 27.01a.493.493 0 0 1-.488-.488.473.473 0 0 1 .48-.48c.267.003.486.221.488.489a.474.474 0 0 1-.48.48Zm.505 2.417a.493.493 0 0 0-.488-.489.474.474 0 0 0-.48.48.494.494 0 0 0 .488.489.473.473 0 0 0 .48-.48Zm.025 2.895a.493.493 0 0 0-.488-.488.474.474 0 0 0-.48.48.494.494 0 0 0 .488.488.473.473 0 0 0 .48-.48Zm.026 2.896a.495.495 0 0 0-.489-.488.474.474 0 0 0-.48.48.495.495 0 0 0 .489.488.474.474 0 0 0 .48-.48Zm.025 2.896a.495.495 0 0 0-.489-.489.474.474 0 0 0-.48.48.495.495 0 0 0 .489.489.474.474 0 0 0 .48-.48Zm-2.997-11.608a.493.493 0 0 0-.488-.489.474.474 0 0 0-.48.48.494.494 0 0 0 .488.489.473.473 0 0 0 .48-.48Zm.025 2.895a.493.493 0 0 0-.488-.488.474.474 0 0 0-.48.48.494.494 0 0 0 .489.488.473.473 0 0 0 .479-.48Zm.026 2.896a.495.495 0 0 0-.489-.488.474.474 0 0 0-.48.48.495.495 0 0 0 .489.488.474.474 0 0 0 .48-.48Zm.025 2.896a.495.495 0 0 0-.489-.488.474.474 0 0 0-.48.48.495.495 0 0 0 .489.488.474.474 0 0 0 .48-.48Zm.025 2.896a.494.494 0 0 0-.488-.489.473.473 0 0 0-.48.48c.002.268.22.486.488.489a.474.474 0 0 0 .48-.48Zm-2.996-11.608a.495.495 0 0 0-.489-.489.474.474 0 0 0-.48.48.495.495 0 0 0 .489.488.474.474 0 0 0 .48-.48Zm.025 2.895a.495.495 0 0 0-.489-.488.474.474 0 0 0-.48.48.495.495 0 0 0 .489.488.474.474 0 0 0 .48-.48Zm.025 2.896a.494.494 0 0 0-.488-.488.473.473 0 0 0-.48.48c.002.267.22.486.488.488a.474.474 0 0 0 .48-.48Zm.025 2.896a.494.494 0 0 0-.488-.489.473.473 0 0 0-.48.48c.002.268.22.486.488.489a.474.474 0 0 0 .48-.48Zm.025 2.895a.493.493 0 0 0-.488-.488.474.474 0 0 0-.48.48.494.494 0 0 0 .488.488.473.473 0 0 0 .48-.48Zm-2.996-11.608a.494.494 0 0 0-.488-.488.473.473 0 0 0-.48.48c.002.268.22.486.488.488a.474.474 0 0 0 .48-.48Zm.025 2.896a.494.494 0 0 0-.488-.488.473.473 0 0 0-.48.48c.002.267.22.486.488.488a.474.474 0 0 0 .48-.48Zm.025 2.896a.493.493 0 0 0-.488-.489.474.474 0 0 0-.48.48.494.494 0 0 0 .488.489.473.473 0 0 0 .48-.48Zm.025 2.895a.493.493 0 0 0-.488-.488.474.474 0 0 0-.48.48.494.494 0 0 0 .488.489.473.473 0 0 0 .48-.48Zm.026 2.896a.495.495 0 0 0-.489-.488.474.474 0 0 0-.48.48.495.495 0 0 0 .489.488.475.475 0 0 0 .48-.48Zm-2.997-11.608a.493.493 0 0 0-.488-.488.474.474 0 0 0-.48.48.494.494 0 0 0 .488.488.473.473 0 0 0 .48-.48Zm.025 2.896a.493.493 0 0 0-.488-.489.474.474 0 0 0-.48.48.494.494 0 0 0 .488.489.473.473 0 0 0 .48-.48Zm.026 2.896a.495.495 0 0 0-.489-.489.474.474 0 0 0-.48.48.495.495 0 0 0 .489.489.475.475 0 0 0 .48-.48Zm.025 2.895a.495.495 0 0 0-.489-.488.474.474 0 0 0-.48.48.495.495 0 0 0 .489.488.475.475 0 0 0 .48-.48Zm.026 2.895a.494.494 0 0 0-.488-.489.473.473 0 0 0-.48.48c.002.268.22.486.488.489a.474.474 0 0 0 .48-.48Z'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-width='.5' d='M184.901 29.9a.48.48 0 1 1 0-.96.48.48 0 0 1 0 .96Zm.48 2.39a.48.48 0 1 0-.958 0 .48.48 0 0 0 .958 0Zm0 2.871a.48.48 0 1 0-.958-.001.48.48 0 0 0 .958.001Zm0 2.87a.48.48 0 1 0-.958 0 .48.48 0 0 0 .958 0Zm0 2.871a.48.48 0 1 0-.958-.001.48.48 0 0 0 .958.001Zm-2.87-11.482a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.87a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.871a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.87a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.871a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0ZM179.64 29.42a.48.48 0 1 0-.958-.001.48.48 0 0 0 .958.001Zm0 2.87a.48.48 0 1 0-.958 0 .48.48 0 0 0 .958 0Zm0 2.871a.48.48 0 1 0-.958-.001.48.48 0 0 0 .958.001Zm0 2.87a.48.48 0 1 0-.958 0 .48.48 0 0 0 .958 0Zm0 2.871a.48.48 0 1 0-.958-.001.48.48 0 0 0 .958.001Zm-2.87-11.482a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.87a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.871a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.87a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.871a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm-2.871-11.482a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.87a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.871a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm0 2.87a.48.48 0 1 0-.96 0 .48.48 0 0 0 .96 0Zm.001 2.87a.48.48 0 1 0-.958-.001.48.48 0 0 0 .958.001Z'/%3E%3Cpath fill='%23000' d='M83.353 0H91l-5.353 7H78l5.353-7Z'/%3E%3Cpath fill='%23282828' d='M94.353 0H102l-5.353 7H89l5.353-7Z'/%3E%3Cpath fill='%23525252' d='M105.353 0H113l-5.353 7H100l5.353-7Z'/%3E%3Cpath fill='%23747474' d='M116.353 0H124l-5.353 7H111l5.353-7Z'/%3E%3Cpath fill='%239A9A9A' d='M128.353 0H136l-5.353 7H123l5.353-7Z'/%3E%3Cpath fill='%23B7B7B7' d='M139.353 0H147l-5.353 7H134l5.353-7Z'/%3E%3Cpath fill='%23fff' d='M121.667 90.5a1.333 1.333 0 1 0 2.667 0 1.333 1.333 0 0 0-2.667 0Zm50.919.586-.177.177.177-.177ZM123 90.5v.25h48.172v-.5H123v.25Zm49.586.586-.177.177 6.414 6.414.177-.177.177-.177-6.414-6.414-.177.177Zm-1.414-.586v.25c.464 0 .909.184 1.237.513l.177-.177.177-.177a2.252 2.252 0 0 0-1.591-.659v.25Z'/%3E%3Cpath fill='%23fff' d='M135 91.5a1 1 0 0 0 1 1h23.061l2.939-2h-26a1 1 0 0 0-1 1Z'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' d='M112.5 18.5h72'/%3E%3Ccircle cx='106.5' cy='18.5' r='.5' fill='%23fff'/%3E%3Ccircle cx='102.5' cy='18.5' r='.5' fill='%23fff'/%3E%3Ccircle cx='98.5' cy='18.5' r='.5' fill='%23fff'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='6' x2='190.5' y1='58.5' y2='58' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23343434'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.long bottom {
|
|
aspect-ratio: 193 / 128;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='193' height='128' fill='none'%3E%3Cpath fill='url(%23a)' stroke='%23fff' d='M5.5 10.694h15.168a4.5 4.5 0 0 1 3.447 1.608l6.503 7.753a5.5 5.5 0 0 0 4.214 1.965h29.169a5.5 5.5 0 0 0 4.4-2.198l5.498-7.33a4.5 4.5 0 0 1 3.335-1.79l.265-.008H187.5a4.5 4.5 0 0 1 4.5 4.5v75.655a4.5 4.5 0 0 1-.709 2.425l-20.237 31.649a4.502 4.502 0 0 1-3.791 2.077H5.5a4.5 4.5 0 0 1-4.5-4.5V99.058a4.5 4.5 0 0 1 1.479-3.334l1.714-1.554A5.5 5.5 0 0 0 6 90.094v-28.02a5.5 5.5 0 0 0-1.574-3.852l-2.138-2.18A4.5 4.5 0 0 1 1 52.892V15.193a4.5 4.5 0 0 1 4.5-4.5Z'/%3E%3Cpath fill='%23fff' d='m87.113 18.004-.13 4.85h-.95l-.13-4.85h1.21Zm-.57 7.02a.706.706 0 0 1-.52-.21.706.706 0 0 1-.21-.52c0-.207.07-.38.21-.52.14-.14.313-.21.52-.21.2 0 .37.07.51.21.14.14.21.313.21.52 0 .207-.07.38-.21.52-.14.14-.31.21-.51.21Z'/%3E%3Cpath stroke='%23fff' stroke-width='.5' d='M85.181 16.027c.567-1.047 2.07-1.047 2.638 0l4.843 8.942a1.5 1.5 0 0 1-1.319 2.215h-9.686a1.5 1.5 0 0 1-1.319-2.215l4.843-8.942Z'/%3E%3Cpath fill='%235D5D5D' stroke='%235D5D5D' stroke-width='.5' d='M176.012 30.594c-.268-.003-.486-.25-.488-.553-.003-.303.212-.547.48-.544.267.003.486.25.488.553.002.303-.212.547-.48.544Zm.505 2.736c-.002-.303-.22-.55-.488-.553-.268-.003-.482.24-.48.544.002.303.221.55.488.553.268.002.483-.24.48-.544Zm.025 3.28c-.002-.303-.22-.55-.488-.553-.268-.003-.482.24-.48.543.002.304.221.55.488.554.268.002.483-.24.48-.544Zm.026 3.28c-.003-.303-.221-.55-.489-.553-.268-.003-.482.24-.48.543.003.303.221.55.489.553.267.003.482-.24.48-.543Zm.025 3.28c-.003-.304-.221-.55-.489-.553-.267-.003-.482.24-.48.543.003.303.221.55.489.553.267.003.482-.24.48-.543Zm-2.997-13.148c-.002-.303-.22-.55-.488-.553-.268-.003-.482.24-.48.543.002.303.221.55.488.553.268.003.483-.24.48-.543Zm.025 3.28c-.002-.304-.22-.55-.488-.553-.268-.003-.482.24-.48.543.002.303.221.55.489.553.267.003.482-.24.479-.543Zm.026 3.28c-.003-.304-.221-.551-.489-.554-.267-.002-.482.24-.48.544.003.303.221.55.489.553.267.003.482-.24.48-.544Zm.025 3.28c-.003-.304-.221-.551-.489-.554-.267-.002-.482.24-.48.544.003.303.221.55.489.553.268.002.482-.24.48-.544Zm.025 3.28c-.002-.304-.221-.551-.488-.554-.268-.003-.483.24-.48.544.002.303.22.55.488.553.268.002.482-.24.48-.544Zm-2.996-13.149c-.003-.303-.221-.55-.489-.553-.267-.003-.482.24-.48.544.003.303.221.55.489.553.267.003.482-.24.48-.544Zm.025 3.28c-.003-.303-.221-.55-.489-.553-.267-.003-.482.24-.48.544.003.303.221.55.489.553.268.002.482-.24.48-.544Zm.025 3.28c-.002-.303-.221-.55-.488-.553-.268-.003-.483.24-.48.543.002.304.22.55.488.554.268.002.482-.24.48-.544Zm.025 3.28c-.002-.303-.221-.55-.488-.553-.268-.003-.483.24-.48.543.002.303.22.55.488.553.268.003.482-.24.48-.543Zm.025 3.28c-.002-.304-.22-.55-.488-.554-.268-.002-.482.24-.48.544.002.303.221.55.488.553.268.003.484-.242.48-.543Zm-2.996-13.148c-.002-.303-.221-.55-.488-.553-.268-.003-.483.24-.48.543.002.304.22.55.488.553.268.003.482-.24.48-.543Zm.025 3.28c-.002-.304-.221-.55-.488-.553-.268-.003-.483.24-.48.543.002.303.22.55.488.553.268.003.482-.24.48-.543Zm.025 3.28c-.002-.304-.22-.551-.488-.554-.268-.002-.482.24-.48.544.002.303.221.55.488.553.268.003.483-.24.48-.544Zm.025 3.28c-.002-.304-.22-.551-.488-.554-.268-.002-.482.24-.48.544.002.303.221.55.488.553.268.002.484-.242.48-.544Zm.026 3.28c-.003-.304-.221-.551-.489-.554-.267-.003-.482.24-.48.544.003.303.221.55.489.553.267.002.483-.242.48-.544Zm-2.997-13.149c-.002-.303-.22-.55-.488-.553-.268-.002-.482.24-.48.544.002.303.221.55.488.553.268.003.483-.24.48-.544Zm.025 3.28c-.002-.303-.22-.55-.488-.553-.268-.003-.482.24-.48.544.002.303.221.55.488.553.268.002.483-.24.48-.544Zm.026 3.28c-.003-.303-.221-.55-.489-.553-.268-.003-.482.24-.48.543.003.304.221.55.489.554.267.002.483-.242.48-.544Zm.025 3.28c-.003-.303-.221-.55-.489-.553-.267-.003-.482.24-.48.543.003.303.221.55.489.553.267.003.483-.241.48-.543Zm.026 3.278c-.002-.303-.221-.55-.488-.553-.268-.002-.483.24-.48.544.002.303.22.55.488.553.267.004.482-.24.48-.544Z'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-width='.5' d='M184.901 33.866c-.265 0-.48-.243-.48-.543 0-.3.215-.544.48-.544.266 0 .48.243.48.544 0 .3-.214.543-.48.543Zm.48 2.708c0-.3-.214-.544-.48-.544-.265 0-.48.243-.48.544 0 .3.215.544.48.544.266 0 .48-.243.48-.544Zm0 3.251c0-.3-.214-.543-.48-.543-.265 0-.48.243-.48.543 0 .3.215.544.48.544.266 0 .48-.243.48-.544Zm0 3.252c0-.3-.214-.544-.48-.544-.265 0-.48.243-.48.544 0 .3.215.543.48.543.266 0 .48-.243.48-.543Zm0 3.251c0-.3-.214-.544-.48-.544-.265 0-.48.244-.48.544 0 .3.215.544.48.544.266 0 .48-.243.48-.544Zm-2.87-13.005c0-.3-.215-.544-.48-.544-.266 0-.48.243-.48.544 0 .3.214.543.48.543.265 0 .48-.243.48-.543Zm0 3.251c0-.3-.215-.544-.48-.544-.266 0-.48.243-.48.544 0 .3.214.544.48.544.265 0 .48-.243.48-.544Zm0 3.251c0-.3-.215-.543-.48-.543-.266 0-.48.243-.48.543 0 .3.214.544.48.544.265 0 .48-.243.48-.544Zm0 3.252c0-.3-.215-.544-.48-.544-.266 0-.48.243-.48.544 0 .3.214.543.48.543.265 0 .48-.243.48-.543Zm0 3.251c0-.3-.215-.544-.48-.544-.266 0-.48.244-.48.544 0 .3.214.544.48.544.265 0 .48-.243.48-.544Zm-2.871-13.005c0-.3-.214-.544-.48-.544-.265 0-.48.243-.48.544 0 .3.215.543.48.543.266 0 .48-.243.48-.543Zm0 3.251c0-.3-.214-.544-.48-.544-.265 0-.48.243-.48.544 0 .3.215.544.48.544.266 0 .48-.243.48-.544Zm0 3.251c0-.3-.214-.543-.48-.543-.265 0-.48.243-.48.543 0 .3.215.544.48.544.266 0 .48-.243.48-.544Zm0 3.252c0-.3-.214-.544-.48-.544-.265 0-.48.243-.48.544 0 .3.215.543.48.543.266 0 .48-.243.48-.543Zm0 3.251c0-.3-.214-.544-.48-.544-.265 0-.48.244-.48.544 0 .3.215.544.48.544.266 0 .481-.245.48-.544Zm-2.87-13.005c0-.3-.215-.544-.48-.544-.266 0-.48.243-.48.544 0 .3.214.543.48.543.265 0 .48-.243.48-.543Zm0 3.251c0-.3-.215-.544-.48-.544-.266 0-.48.243-.48.544 0 .3.214.544.48.544.265 0 .48-.243.48-.544Zm0 3.251c0-.3-.215-.543-.48-.543-.266 0-.48.243-.48.543 0 .3.214.544.48.544.265 0 .48-.243.48-.544Zm0 3.252c0-.3-.215-.544-.48-.544-.266 0-.48.243-.48.544 0 .3.214.543.48.543.265 0 .481-.244.48-.543Zm0 3.251c0-.3-.215-.544-.48-.544-.266 0-.48.244-.48.544 0 .3.214.544.48.544.265 0 .481-.245.48-.544Zm-2.871-13.005c0-.3-.215-.544-.48-.544s-.48.243-.48.544c0 .3.215.543.48.543s.48-.243.48-.543Zm0 3.251c0-.3-.215-.544-.48-.544s-.48.243-.48.544c0 .3.215.544.48.544s.48-.243.48-.544Zm0 3.251c0-.3-.215-.543-.48-.543s-.48.243-.48.543c0 .3.215.544.48.544s.481-.244.48-.544Zm0 3.252c0-.3-.215-.544-.48-.544s-.48.243-.48.544c0 .3.215.543.48.543s.481-.244.48-.543Zm.001 3.25c0-.3-.214-.544-.48-.544-.265 0-.48.243-.48.544 0 .3.215.543.48.543.264.002.48-.243.48-.543Z'/%3E%3Cpath fill='%23000' d='M83.353 0H91l-5.353 7.929H78L83.353 0Z'/%3E%3Cpath fill='%23282828' d='M94.353 0H102l-5.353 7.929H89L94.353 0Z'/%3E%3Cpath fill='%23525252' d='M105.353 0H113l-5.353 7.929H100L105.353 0Z'/%3E%3Cpath fill='%23747474' d='M116.353 0H124l-5.353 7.929H111L116.353 0Z'/%3E%3Cpath fill='%239A9A9A' d='M128.353 0H136l-5.353 7.929H123L128.353 0Z'/%3E%3Cpath fill='%23B7B7B7' d='M139.353 0H147l-5.353 7.929H134L139.353 0Z'/%3E%3Cpath fill='%23fff' d='M112.667 119a1.333 1.333 0 1 0 2.667 0 1.333 1.333 0 0 0-2.667 0Zm50.93.676-.187.166.187-.166ZM114 119v.25h48.098v-.5H114v.25Zm49.597.676-.187.166 6.403 7.252.187-.165.187-.166-6.402-7.252-.188.165Zm-1.499-.676v.25c.502 0 .979.216 1.312.592l.187-.166.188-.165a2.252 2.252 0 0 0-1.687-.761v.25Z'/%3E%3Cpath fill='%23fff' d='M126 120.265a1 1 0 0 0 1 1h23.061L153 119h-26a1 1 0 0 0-1 1v.265Z'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' d='M112.5 21.02h72'/%3E%3Cellipse cx='106.5' cy='20.954' fill='%23fff' rx='.5' ry='.566'/%3E%3Cellipse cx='102.5' cy='20.954' fill='%23fff' rx='.5' ry='.566'/%3E%3Cellipse cx='98.5' cy='20.954' fill='%23fff' rx='.5' ry='.566'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='6' x2='190.5' y1='66.26' y2='65.819' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23343434'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
|
}
|
|
|
|
message bottom::before {
|
|
position: absolute;
|
|
content: '';
|
|
height: 40px;
|
|
left: -10px;
|
|
top: 110px;
|
|
width: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
message.long bottom::before {
|
|
top: 130px;
|
|
}
|
|
|
|
message bottom::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 30px;
|
|
bottom: 20px;
|
|
height: 20px;
|
|
width: 100%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
message.subscriber bottom::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='14' fill='none'%3E%3Cpath fill='%23fff' d='M0 4a4 4 0 0 1 4-4h28.849a2 2 0 0 1 1.895 1.362l3.368 10A2 2 0 0 1 36.216 14H4a4 4 0 0 1-4-4V4Z'/%3E%3Cpath fill='%23F7C894' d='M15.128 8.396c0 .196-.024.374-.074.532a1.41 1.41 0 0 1-.483.716 1.788 1.788 0 0 1-.703.32c-.12.024-.235.036-.344.036h-3.093V8.857h3.085c.155 0 .272-.04.351-.118.08-.08.119-.194.119-.343-.015-.305-.169-.457-.462-.457h-1.77c-.252 0-.466-.044-.642-.132a1.335 1.335 0 0 1-.43-.33 1.31 1.31 0 0 1-.238-.426 1.457 1.457 0 0 1-.07-.426c0-.255.045-.469.136-.642a1.28 1.28 0 0 1 .79-.659c.162-.05.313-.074.453-.074h2.809v1.142h-2.8a.372.372 0 0 0-.14.022.158.158 0 0 0-.075.053.146.146 0 0 0-.027.07.572.572 0 0 0-.004.07.261.261 0 0 0 .027.11.143.143 0 0 0 .052.057.22.22 0 0 0 .075.022H13.524c.293 0 .542.053.748.159a1.522 1.522 0 0 1 .769.918c.058.188.087.362.087.523Zm5.999 1.028a.588.588 0 0 1-.167.413c-.05.05-.11.09-.18.119a.545.545 0 0 1-.22.044h-2.584a2.315 2.315 0 0 1-.923-.202 2.69 2.69 0 0 1-.452-.273 1.82 1.82 0 0 1-.378-.4 2.14 2.14 0 0 1-.264-.544 2.31 2.31 0 0 1-.097-.695V5.25h1.143v2.636c0 .15.025.284.075.405a.94.94 0 0 0 .518.501c.12.043.25.065.387.065h2V5.25h1.142v4.174Zm6.31-1.028c0 .108-.013.223-.04.343a1.635 1.635 0 0 1-.32.699 1.364 1.364 0 0 1-.303.29 1.514 1.514 0 0 1-.409.197c-.155.05-.33.075-.527.075h-2.061c-.108 0-.223-.012-.343-.035a1.75 1.75 0 0 1-.699-.32 1.505 1.505 0 0 1-.29-.304 1.588 1.588 0 0 1-.197-.413 1.767 1.767 0 0 1-.075-.532V3.241h1.142v5.155c0 .14.044.253.132.338a.464.464 0 0 0 .33.123h2.06a.434.434 0 0 0 .335-.127.46.46 0 0 0 .123-.334V6.849a.434.434 0 0 0-.128-.334.455.455 0 0 0-.33-.123h-2.06V5.25h2.06c.11 0 .224.013.344.04.12.022.238.06.356.113.12.053.234.122.342.207.109.082.204.183.286.303.082.117.148.253.198.409.05.155.075.33.075.527v1.547Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.subscriber bottom::after {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6' fill='none'%3E%3Cpath fill='%23F7C894' d='M0 2.586 2.586 0l2.586 2.586-2.586 2.586zM7 2.586 9.586 0l2.586 2.586-2.586 2.586zM14 2.586 16.586 0l2.586 2.586-2.586 2.586z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.vip bottom::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='14' fill='none'%3E%3Cpath fill='%23fff' d='M0 4a4 4 0 0 1 4-4h28.849a2 2 0 0 1 1.895 1.362l3.368 10A2 2 0 0 1 36.216 14H4a4 4 0 0 1-4-4V4Z'/%3E%3Cpath fill='%23C6AFCC' d='M16.205 5.25c-.129.4-.28.796-.453 1.186-.172.39-.372.762-.597 1.116a6.845 6.845 0 0 1-.752.98 4.842 4.842 0 0 1-.918.778 4.517 4.517 0 0 1-1.094.514 4.256 4.256 0 0 1-1.28.185.606.606 0 0 1-.409-.163.58.58 0 0 1-.122-.18.577.577 0 0 1-.044-.224V5.25h1.143v3.572c.278 0 .545-.06.8-.18.257-.12.5-.278.729-.475.229-.199.44-.424.633-.676a6.775 6.775 0 0 0 .91-1.556c.108-.255.189-.483.241-.685h1.213Zm1.573-.976h-1.142V3.24h1.142v1.033Zm0 5.726h-1.142V5.25h1.142V10Zm6.337-1.604c0 .196-.025.374-.074.532a1.41 1.41 0 0 1-.483.716 1.814 1.814 0 0 1-.699.32c-.12.024-.235.036-.343.036h-2.061V8.857h2.06c.153 0 .267-.04.343-.118.077-.08.115-.194.115-.343V6.858c0-.158-.04-.275-.119-.352-.076-.076-.189-.114-.338-.114h-2.053c-.155 0-.272.04-.351.119-.08.076-.119.189-.119.338v4.636h-1.142V6.85c0-.196.024-.372.074-.527.05-.155.116-.292.198-.409.085-.12.182-.221.29-.303a1.638 1.638 0 0 1 .699-.32c.123-.027.237-.04.343-.04h2.06c.197 0 .373.024.528.074.155.05.291.116.409.198.12.082.22.177.303.286.085.108.154.222.206.342.053.118.091.236.115.356.026.12.04.235.04.343v1.547Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.vip bottom::after {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='5' fill='none'%3E%3Cpath stroke='%23C6AFCC' d='m1.354.646 4 4M8.354.646l4 4M15.354.646l4 4M5.193.646l-4 4M12.193.646l-4 4M19.193.646l-4 4'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.moderator bottom::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='14' fill='none'%3E%3Cpath fill='%23fff' d='M0 4a4 4 0 0 1 4-4h56.41a2 2 0 0 1 1.712.965l6.044 10c.806 1.333-.154 3.035-1.712 3.035H4a4 4 0 0 1-4-4V4Z'/%3E%3Cpath fill='%2376B2D4' d='M10.777 10H9.634V6.85c0-.15-.04-.263-.118-.34-.08-.078-.197-.118-.352-.118H7.68V10H6.536V5.816a.545.545 0 0 1 .167-.4.566.566 0 0 1 .409-.166h2.06a1.745 1.745 0 0 1 1.03.351V5.25h1.546a1.6 1.6 0 0 1 .343.04c.12.022.239.06.356.113.12.053.234.122.343.207.108.082.203.183.285.303.082.117.148.253.198.409.05.155.075.33.075.527V10h-1.143V6.85c0-.15-.038-.263-.114-.34-.073-.078-.188-.118-.343-.118H10.72c.038.14.057.293.057.457V10Zm8.793-1.604c0 .196-.025.374-.074.532a1.41 1.41 0 0 1-.483.716 1.79 1.79 0 0 1-.703.32c-.121.024-.235.036-.344.036h-2.06c-.159 0-.332-.028-.52-.084a1.568 1.568 0 0 1-.522-.272 1.614 1.614 0 0 1-.4-.497 1.628 1.628 0 0 1-.158-.751V6.849c0-.293.052-.54.158-.743a1.528 1.528 0 0 1 .923-.773c.187-.056.36-.083.518-.083h2.061c.293 0 .542.052.747.158.206.105.371.238.497.4.126.158.217.33.272.518.059.188.088.362.088.523v1.547Zm-1.142-1.538c0-.158-.04-.275-.119-.352-.079-.076-.193-.114-.343-.114h-2.052c-.152 0-.268.04-.347.119-.08.076-.119.189-.119.338v1.547c0 .15.04.264.119.343.079.079.195.118.347.118h2.052c.156 0 .271-.04.348-.118.076-.08.114-.194.114-.343V6.858Zm7.33 1.538c0 .196-.025.374-.075.532a1.41 1.41 0 0 1-.483.716 1.79 1.79 0 0 1-.703.32c-.12.024-.235.036-.343.036h-2.061c-.197 0-.372-.025-.528-.075a1.59 1.59 0 0 1-.413-.197 1.507 1.507 0 0 1-.505-.629 1.918 1.918 0 0 1-.119-.36 1.842 1.842 0 0 1-.035-.343V6.849c0-.293.053-.54.158-.743a1.528 1.528 0 0 1 .923-.773c.188-.056.36-.083.519-.083h2.06v1.142h-2.051c-.153 0-.268.04-.348.119-.079.076-.118.189-.118.338v1.538c0 .155.038.273.114.352.08.079.193.118.343.118h2.06c.156 0 .272-.04.348-.118.076-.08.114-.194.114-.343V3.241h1.143v5.155Zm6.2-1.573c0 .158-.027.33-.083.514a1.489 1.489 0 0 1-1.49 1.06h-2.06V7.31h2.06a.462.462 0 0 0 .36-.141.52.52 0 0 0 .128-.356.444.444 0 0 0-.145-.352.492.492 0 0 0-.343-.127h-2.06a.454.454 0 0 0-.361.145.504.504 0 0 0-.128.352v1.595c0 .152.047.27.141.356a.52.52 0 0 0 .356.127h2.052V10h-2.06c-.159 0-.33-.028-.515-.084a1.58 1.58 0 0 1-.51-.268 1.552 1.552 0 0 1-.39-.487 1.57 1.57 0 0 1-.159-.734V6.823c0-.158.028-.328.083-.51.056-.185.146-.354.268-.51.127-.158.29-.29.488-.395a1.57 1.57 0 0 1 .734-.158h2.061c.159 0 .328.027.51.083.185.056.355.146.51.272.158.124.29.286.395.488.106.2.159.443.159.73Zm4.927-.43h-2.571c-.155 0-.273.039-.352.118-.079.076-.118.189-.118.338V10H32.7V6.85c0-.197.025-.373.075-.528.05-.155.116-.292.198-.409.085-.12.181-.221.29-.303a1.638 1.638 0 0 1 .698-.32c.123-.027.238-.04.343-.04h2.58v1.142Zm5.29 2.034c0 .158-.027.33-.083.514a1.489 1.489 0 0 1-1.49 1.06h-2.06c-.159-.001-.33-.029-.515-.085a1.58 1.58 0 0 1-.51-.268 1.552 1.552 0 0 1-.39-.487 1.57 1.57 0 0 1-.159-.734c0-.158.028-.33.084-.514.055-.185.145-.355.268-.51.126-.158.288-.29.488-.396a1.57 1.57 0 0 1 .733-.158h2.062v1.09H38.54a.454.454 0 0 0-.36.145.504.504 0 0 0-.127.352c0 .149.048.266.145.351.1.082.217.123.351.123h2.053a.462.462 0 0 0 .36-.14.504.504 0 0 0 .127-.352V6.823a.464.464 0 0 0-.488-.488h-2.509V5.25h2.51c.158 0 .328.027.51.083.184.056.354.146.51.272.157.124.29.286.395.488.105.2.158.443.158.73v1.604Zm5.279-2.035h-1.995V10h-1.156V6.392h-1.486V5.25h1.486V3.698h1.156V5.25h1.995v1.142Zm5.901 2.004c0 .196-.024.374-.074.532a1.407 1.407 0 0 1-.483.716 1.789 1.789 0 0 1-.703.32 1.79 1.79 0 0 1-.343.036H49.69c-.158 0-.33-.028-.518-.084a1.57 1.57 0 0 1-.523-.272 1.614 1.614 0 0 1-.4-.497 1.63 1.63 0 0 1-.158-.751V6.849c0-.293.053-.54.158-.743a1.53 1.53 0 0 1 .923-.773c.187-.056.36-.083.518-.083h2.062c.292 0 .541.052.746.158.206.105.371.238.497.4.126.158.217.33.273.518.058.188.087.362.087.523v1.547Zm-1.142-1.538c0-.158-.04-.275-.119-.352-.079-.076-.193-.114-.343-.114H49.7c-.152 0-.268.04-.347.119-.08.076-.119.189-.119.338v1.547c0 .15.04.264.12.343.078.079.194.118.346.118h2.053c.155 0 .27-.04.347-.118.076-.08.114-.194.114-.343V6.858Zm6.275-.466h-2.57c-.156 0-.273.04-.352.119-.08.076-.119.189-.119.338V10h-1.142V6.85c0-.197.025-.373.074-.528.05-.155.116-.292.198-.409.085-.12.182-.221.29-.303a1.638 1.638 0 0 1 .699-.32c.123-.027.237-.04.343-.04h2.58v1.142Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message.moderator bottom::after {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='5' fill='none'%3E%3Cpath fill='%2376B2D4' d='M4.85 2.413a.1.1 0 0 1 0 .174L1.4 4.578a.1.1 0 0 1-.15-.086V.508A.1.1 0 0 1 1.4.422l3.45 1.991ZM11.85 2.413a.1.1 0 0 1 0 .174L8.4 4.578a.1.1 0 0 1-.15-.086V.508A.1.1 0 0 1 8.4.422l3.45 1.991ZM18.85 2.413a.1.1 0 0 1 0 .174L15.4 4.578a.1.1 0 0 1-.15-.086V.508a.1.1 0 0 1 .15-.086l3.45 1.991Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
message bottom content {
|
|
font-family: var(--font-family-2);
|
|
color: var(--color-1);
|
|
margin-top: 185px;
|
|
margin-left: 40px;
|
|
margin-right: 30px;
|
|
max-height: 140px;
|
|
word-break: break-word;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
message.long bottom content {
|
|
-webkit-line-clamp: 5;
|
|
max-height: 235px;
|
|
margin-top: 205px;
|
|
}
|