565 lines
10 KiB
CSS
565 lines
10 KiB
CSS
/* Copyright (C) 2023 Max @sigmacw_ and Matt @mattsquare_.
|
|
*
|
|
* You may not distribute this code without obtaining explicit permission
|
|
* from Max @sigmacw_ and Matt @mattsquare_.
|
|
*
|
|
* All rights reserved.
|
|
*/
|
|
|
|
:root {
|
|
/* On streamer message */
|
|
--rouded-corners-and-heart-next-to-username-color: #FFDEE6;
|
|
--top-right-heart-and-bottom-left-heart-color: #FFDEE6;
|
|
--top-and-bottom-border-lines-color: #FFDEE6;
|
|
|
|
/* Both streamer and non-streamer messages */
|
|
--background-gradient-top-color: #491824;
|
|
--background-gradient-bottom-color: #67192C;
|
|
--message-text-color: #FFAEC2;
|
|
--mod-icon-background-color: #FFDEE6;
|
|
--username-bubble-background-color: #FFDEE6;
|
|
--username-bubble-text-color: #FF4976;
|
|
|
|
/* On non-streamer messages */
|
|
--right-border-color: #FF4976;
|
|
--bottom-border-color: #FF4976;
|
|
--top-border-color: #FF4976;
|
|
--top-right-border-piece-color: #FF4976;
|
|
|
|
/* Event bubble */
|
|
--event-background-gradient-top-color: #FF5F84;
|
|
--event-background-gradient-bottom-color: #FF4976;
|
|
--event-right-border-color: #FFAEC2;
|
|
--event-icon-background-color: #FFDEE6;
|
|
--event-text-color: #ffffff;
|
|
--#FFAEC2;
|
|
|
|
/* Unknowns */
|
|
--unknown-color-1: #00FFFF; /* original value: #FF4976; */
|
|
--unknown-color-2: #009999; /* original value: #FF4976; */
|
|
}
|
|
|
|
* {
|
|
font-family: 'Quicksand';
|
|
letter-spacing: 2px;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.badges {
|
|
display: flex;
|
|
}
|
|
|
|
.badges img {
|
|
width: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.pronouns {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.emote {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
vertical-align: middle;
|
|
height: 28px;
|
|
}
|
|
|
|
.emote-only img {
|
|
height: 60px;
|
|
width: auto;
|
|
}
|
|
|
|
.white-border {
|
|
background: var(--top-and-bottom-border-lines-color) !important;
|
|
stroke: var(--rouded-corners-and-heart-next-to-username-color) !important;
|
|
}
|
|
|
|
.white-fill {
|
|
fill: var(--top-right-heart-and-bottom-left-heart-color) !important;
|
|
}
|
|
|
|
.main-container {
|
|
display: flex;
|
|
height: 95%;
|
|
width: 90%;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
position: absolute;
|
|
bottom: 40px;
|
|
}
|
|
|
|
.message-wrap {
|
|
transform: scaleY(0);
|
|
transform-origin: bottom left;
|
|
animation: scaleIn 0.5s ease 0.2s forwards;
|
|
width: 100%;
|
|
}
|
|
|
|
/* MESSAGE BOX STYLES */
|
|
|
|
.message-row {
|
|
display: flex;
|
|
margin-bottom: 32px;
|
|
position: relative;
|
|
}
|
|
|
|
.regular {
|
|
position: absolute;
|
|
top: 18px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.message-box {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 16px 32px;
|
|
background: linear-gradient(to bottom, var(--background-gradient-top-color), var(--background-gradient-bottom-color));
|
|
color: var(--message-text-color);
|
|
border-radius: 16px;
|
|
border: solid 4px var(--right-border-color);
|
|
box-sizing: border-box;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-bottom: none;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.message-box .heart {
|
|
align-self: center;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.message-box__top-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-direction: row;
|
|
width: 32px;
|
|
position: absolute;
|
|
top: 33px;
|
|
right: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.message-box__top-left{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
width: 32px;
|
|
position: absolute;
|
|
top: -1px;
|
|
left: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.message-box__bottom-left {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
width: 32px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.message-box__bottom-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-direction: row;
|
|
width: 32px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.bottom-border {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: -6px;
|
|
height: fit-content;
|
|
}
|
|
|
|
.bottom-border svg#corner {
|
|
min-width: 20px;
|
|
position: absolute;
|
|
bottom: 6px;
|
|
left: -1px;
|
|
}
|
|
|
|
.bottom-border svg#heart {
|
|
margin: 0px 16px 0 36px;
|
|
min-width: 18px;
|
|
}
|
|
|
|
.bottom-border .separator-1 {
|
|
height: 4px;
|
|
background: var(--unknown-color-1);
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.bottom-border .separator-2 {
|
|
height: 4px;
|
|
background: var(--bottom-border-color);
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
/* USER BOX STYLES */
|
|
|
|
.user-box {
|
|
display: flex;
|
|
position: relative;
|
|
top: 4px;
|
|
left: -2px;
|
|
}
|
|
|
|
.icon-role {
|
|
min-width: 35px;
|
|
min-height: 35px;
|
|
display: flex;
|
|
background: var(--mod-icon-background-color);
|
|
border-radius: 64px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.username {
|
|
padding: 6px 32px;
|
|
background: var(--username-bubble-background-color);
|
|
border-radius: 64px;
|
|
display: flex;
|
|
color: var(--username-bubble-text-color);
|
|
align-items: center;
|
|
width: fit-content;
|
|
max-width: 40%;
|
|
}
|
|
|
|
.username .username-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.username .divider {
|
|
margin: 0 10px;
|
|
width: 4px;
|
|
height: 4px;
|
|
min-width: 4px;
|
|
background: var(--unknown-color-2);
|
|
border-radius: 64px;
|
|
}
|
|
|
|
.username .pronouns {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.top-border {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-right: 14px;
|
|
margin-left: 0;
|
|
align-items: center;
|
|
position: relative;
|
|
top: 13.5px;
|
|
}
|
|
|
|
.top-border svg {
|
|
margin: 0px 16px;
|
|
min-width: 18px;
|
|
}
|
|
|
|
.top-border .separator-1 {
|
|
height: 4px;
|
|
background: var(--top-border-color);
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.top-border .separator-2 {
|
|
height: 4px;
|
|
background: var(--top-right-border-piece-color);
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ALERT STYLING */
|
|
|
|
.alert-wrap {
|
|
background: linear-gradient(to top, var(--event-background-gradient-top-color), var(--event-background-gradient-bottom-color));
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
padding: 24px 32px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: solid 4px var(--event-right-border-color);
|
|
transform: scaleY(0);
|
|
transform-origin: bottom left;
|
|
animation: scaleIn 0.5s ease 0.2s forwards;
|
|
width: 100%;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-left: none;
|
|
}
|
|
|
|
.alert-wrap .background {
|
|
position: absolute;
|
|
left: auto;
|
|
right: auto;
|
|
}
|
|
|
|
.alert-borders {
|
|
transform: scaleY(0);
|
|
transform-origin: bottom left;
|
|
animation: scaleIn 0.5s ease 0.2s forwards;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.alert-message {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.alert-message .header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
align-self: center;
|
|
}
|
|
|
|
.alert-message .header .heart-bubble {
|
|
width: 35px;
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--event-icon-background-color);
|
|
border-radius: 64px;
|
|
}
|
|
|
|
.alert-message .header .chevron {
|
|
margin: 0 16px;
|
|
}
|
|
|
|
.alert-message > p {
|
|
color: var(--event-text-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.alert-username {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.alert-wrap__top-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-direction: row;
|
|
width: 32px;
|
|
position: absolute;
|
|
top: -1px;
|
|
right: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.alert-wrap__top-left{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
width: 32px;
|
|
position: absolute;
|
|
top: -1px;
|
|
left: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.alert-wrap__bottom-left {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
width: 32px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.alert-wrap__bottom-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-direction: row;
|
|
width: 32px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.alert-top-border {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-right: 16px;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: -7px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.alert-top-border svg {
|
|
margin: 0px 16px;
|
|
min-width: 18px;
|
|
}
|
|
|
|
.alert-top-border .separator-1 {
|
|
height: 4px;
|
|
background: var(--event-top-left-border-color);
|
|
border-radius: 10px;
|
|
width: 25%;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.alert-top-border .separator-2 {
|
|
height: 4px;
|
|
background: var(--event-top-middle-border-color);
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.alert-top-border .separator-3 {
|
|
height: 4px;
|
|
background: var(--event-top-right-border-color);
|
|
border-radius: 10px;
|
|
width: 25%;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.alert-bottom-border {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: -6px;
|
|
height: fit-content;
|
|
z-index: 3;
|
|
}
|
|
|
|
.alert-bottom-border svg#heart {
|
|
margin: 0px 16px 0 16px;
|
|
min-width: 18px;
|
|
}
|
|
|
|
.alert-bottom-border .separator-1 {
|
|
height: 4px;
|
|
background: #FFAEC2;
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.alert-bottom-border .separator-2 {
|
|
height: 4px;
|
|
background: #FFAEC2;
|
|
border-radius: 10px;
|
|
width: 50%;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.alert-left-border {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: -7px;
|
|
bottom: 0px;
|
|
height: 100%;
|
|
z-index: 3;
|
|
}
|
|
|
|
.alert-left-border svg#heart {
|
|
margin: 16px 0;
|
|
min-height: 18px;
|
|
}
|
|
|
|
.alert-left-border .separator-1 {
|
|
height: 100%;
|
|
background: #FFAEC2;
|
|
border-radius: 10px;
|
|
width: 4px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.alert-left-border .separator-2 {
|
|
height: 50%;
|
|
background: #FFAEC2;
|
|
border-radius: 10px;
|
|
width: 4px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ANIMATION DECLARATIONS */
|
|
|
|
@keyframes scaleIn {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
60% {
|
|
transform: scale(110%)
|
|
}
|
|
|
|
100% {
|
|
transform: scale(100%)
|
|
}
|
|
}
|
|
|
|
@keyframes swing {
|
|
|
|
0%,
|
|
100% {
|
|
transform: rotate(3deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
} |