rdarius/hearty-stream-elements-chat-widget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pushing original code

Browse Source
This commit is contained in:
Darius Rapalis
2023-06-28 23:53:11 +03:00
parent c6203fbcd4
commit 425535d9b3
6 changed files with 1869 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

532
css.txt Normal file
View File

@@ -0,0 +1,532 @@
/* 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.
*/
* {
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: #FFDEE6 !important;
stroke: #FFDEE6 !important;
}
.white-fill {
fill: #FFDEE6 !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, #491824, #67192C);
color: #FFAEC2;
border-radius: 16px;
border: solid 4px #FF4976;
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: #FF4976;
border-radius: 10px;
width: 100%;
}
.bottom-border .separator-2 {
height: 4px;
background: #FF4976;
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: #FFDEE6;
border-radius: 64px;
justify-content: center;
align-items: center;
margin-right: 8px;
position: relative;
z-index: 2;
}
.username {
padding: 6px 32px;
background: #FFDEE6;
border-radius: 64px;
display: flex;
color: #FF4976;
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: #FF4976;
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: #FF4976;
border-radius: 10px;
width: 100%;
}
.top-border .separator-2 {
height: 4px;
background: #FF4976;
border-radius: 10px;
width: 100%;
}
/* ALERT STYLING */
.alert-wrap {
background: linear-gradient(to top, #FF5F84, #FF4976);
border-radius: 16px;
overflow: hidden;
position: relative;
display: flex;
padding: 24px 32px;
justify-content: space-between;
align-items: center;
border: solid 4px #FFAEC2;
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: #FFDEE6;
border-radius: 64px;
}
.alert-message .header .chevron {
margin: 0 16px;
}
.alert-message > p {
color: white;
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: #FFAEC2;
border-radius: 10px;
width: 25%;
margin-left: 16px;
}
.alert-top-border .separator-2 {
height: 4px;
background: #FFAEC2;
border-radius: 10px;
width: 100%;
}
.alert-top-border .separator-3 {
height: 4px;
background: #FFAEC2;
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);
}
}

1
data.txt Normal file
View File

@@ -0,0 +1 @@
{"eventsLimit":5,"includeFollowers":"yes","includeRedemptions":"yes","includeHosts":"yes","minHost":1,"includeRaids":"yes","minRaid":1,"includeSubs":"yes","includeTips":"yes","minTip":1,"includeCheers":"yes","minCheer":1,"direction":"top","textOrder":"nameFirst","fadeoutTime":999,"fontColor":"rgb(255, 255, 255)","theme":"texture","backgroundOpacity":50,"backgroundColor":"rgba(36, 6, 73, 0.15)","iconColor":"rgb(255, 255, 255, 255)","locale":"en-US","displayPronouns":true,"messagesLimit":15,"hideAfter":999,"hideCommands":"yes","ignoredUsers":"StreamElements","ignoredCommands":"!,?","tipEnabled":true,"tipMin":0,"tipCurrency":"$","subEnabled":true,"resubEnabled":true,"giftEnabled":true,"directEnabled":true,"cheerEnabled":true,"cheerMin":0,"testMessage":"Test message","testMessage1":"Test message 2","testMessage2":"Test message 3","testMessageName":"mattsquare_","testMessageText":"Happy Valentine's Day!","testMessage3":"Test message 4"}

135
fields.txt Normal file
View File

@@ -0,0 +1,135 @@
{
"displayPronouns": {
"label": "Show Pronouns",
"group": "Display Settings",
"type": "checkbox",
"value": false
},
"messagesLimit": {
"type": "number",
"label": "Message Limit",
"value": 15,
"group": "Display Settings"
},
"hideAfter": {
"type": "number",
"label": "Hide after seconds (999 to disable)",
"value": 999,
"group": "Display Settings"
},
"hideCommands": {
"label": "Hide messages with ! (commands)",
"type": "dropdown",
"value": "yes",
"options": {
"yes": "Yes",
"no": "No"
},
"group": "Display Settings"
},
"ignoredUsers": {
"label": "Ignored users (comma separated)",
"type": "text",
"value": "StreamElements",
"group": "Display Settings"
},
"ignoredCommands": {
"label": "Ignored commands (comma separated)",
"type": "text",
"value": "!,?",
"group": "Display Settings"
},
"tipEnabled": {
"type": "checkbox",
"label": "Display tips in chat",
"value": true,
"group": "Tips"
},
"tipMin": {
"type": "number",
"label": "Minimum tip",
"value": 0,
"group": "Tips"
},
"tipCurrency": {
"type": "text",
"label": "Tip currency",
"value": "$",
"group": "Tips"
},
"subEnabled": {
"type": "checkbox",
"label": "Display subs in chat",
"value": true,
"group": "Subs"
},
"resubEnabled": {
"type": "checkbox",
"label": "Display resubs in chat",
"value": true,
"group": "Subs"
},
"giftEnabled": {
"type": "checkbox",
"label": "Display gift subs in chat",
"value": true,
"group": "Subs"
},
"directEnabled": {
"type": "checkbox",
"label": "Display direct gifts in chat",
"value": true,
"group": "Subs"
},
"cheerEnabled": {
"type": "checkbox",
"label": "Display cheers in chat",
"value": true,
"group": "Cheers"
},
"cheerMin": {
"type": "number",
"label": "Minimum cheers",
"value": 0,
"group": "Cheers"
},
"testMessage": {
"type": "button",
"label": "Test broadcaster message",
"value": "Test message",
"group": "Debug"
},
"testMessage1": {
"type": "button",
"label": "Test moderator message",
"value": "Test message 2",
"group": "Debug"
},
"testMessage2": {
"type": "button",
"label": "Test subscriber message",
"value": "Test message 3",
"group": "Debug"
},
"testMessageName": {
"label": "Username",
"type": "text",
"value": "Test",
"group": "Debug"
},
"testMessageText": {
"label": "Message content",
"type": "text",
"value": "Test",
"group": "Debug"
},
"testMessage3": {
"type": "button",
"label": "Test regular message",
"value": "Test message 4",
"group": "Debug"
}
}

2
html.txt Normal file
View File

@@ -0,0 +1,2 @@
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
<div class="main-container"></div>

1185
js.txt Normal file
View File

File diff suppressed because it is too large Load Diff

14
widget.ini Normal file
View File

@@ -0,0 +1,14 @@
[HTML]
path = "html.txt"
[CSS]
path = "css.txt"
[JS]
path = "js.txt"
[FIELDS]
path = "fields.txt"
[DATA]
path = "data.txt"