Updated some colors
This commit is contained in:
Darius Rapalis
565
css.css
Normal file
565
css.css
Normal file
@@ -0,0 +1,565 @@
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user