Skip to content

Instantly share code, notes, and snippets.

@Encrypted-Thoughts

Encrypted-Thoughts/1 - install.md

Last active November 12, 2021 00:36
Show Gist options
  • Save Encrypted-Thoughts/26f768faf7cd3b4466a36a076c40a54e to your computer and use it in GitHub Desktop.
Save Encrypted-Thoughts/26f768faf7cd3b4466a36a076c40a54e to your computer and use it in GitHub Desktop.
Download ZIP
Custom StreamElements Sub Goal Bar - Minecraft Hearts
Raw
2 - html.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<div id='bar'></div>
Raw
3 - css.css
:root {
--bar-bevel: {{bar_bevel}}px;
--bar-border-color: {{bar_border_color}};
--bar-border-thickness: {{bar_border_thickness}}px;
--bar-border-style: {{bar_border_style}};
--animate-duration: 1500ms;
--animate-delay: 1000ms;
--tier0-background: {{tier0_background}};
--heart0-primary: {{tier0_primary}};
--heart0-secondary: {{tier0_primary}};
--heart0-shine: {{tier0_primary}};
--heart0-outline: {{tier0_primary}};
--heart0-outline-special: {{tier0_primary}};
--tier1-background: {{tier1_background}};
--heart1-primary: {{heart1_primary}};
--heart1-secondary: {{heart1_secondary}};
--heart1-shine: {{heart1_shine}};
--heart1-outline: {{heart1_outline}};
--heart1-outline-special: {{heart1_outline_special}};
--tier2-background: {{tier2_background}};
--heart2-primary: {{heart2_primary}};
--heart2-secondary: {{heart2_secondary}};
--heart2-shine: {{heart2_shine}};
--heart2-outline: {{heart2_outline}};
--heart2-outline-special: {{heart2_outline_special}};
--tier3-background: {{tier3_background}};
--heart3-primary: {{heart3_primary}};
--heart3-secondary: {{heart3_secondary}};
--heart3-shine: {{heart3_shine}};
--heart3-outline: {{heart3_outline}};
--heart3-outline-special: {{heart3_outline_special}};
--tier4-background: {{tier4_background}};
--heart4-primary: {{heart4_primary}};
--heart4-secondary: {{heart4_secondary}};
--heart4-shine: {{heart4_shine}};
--heart4-outline: {{heart4_outline}};
--heart4-outline-special: {{heart4_outline_special}};
--tier5-background: {{tier5_background}};
--heart5-primary: {{heart5_primary}};
--heart5-secondary: {{heart5_secondary}};
--heart5-shine: {{heart5_shine}};
--heart5-outline: {{heart5_outline}};
--heart5-outline-special: {{heart5_outline_special}};
--tier6-background: {{tier6_background}};
--heart6-primary: {{heart6_primary}};
--heart6-secondary: {{heart6_secondary}};
--heart6-shine: {{heart6_shine}};
--heart6-outline: {{heart6_outline}};
--heart6-outline-special: {{heart6_outline_special}};
--tier7-background: {{tier7_background}};
--heart7-primary: {{heart7_primary}};
--heart7-secondary: {{heart7_secondary}};
--heart7-shine: {{heart7_shine}};
--heart7-outline: {{heart7_outline}};
--heart7-outline-special: {{heart7_outline_special}};
--tier8-background: {{tier8_background}};
--heart8-primary: {{heart8_primary}};
--heart8-secondary: {{heart8_secondary}};
--heart8-shine: {{heart8_shine}};
--heart8-outline: {{heart8_outline}};
--heart8-outline-special: {{heart8_outline_special}};
}
body {
display: flex;
align-items: center;
justify-content: center;
}
#bar {
border-radius: var(--bar-bevel);
border-style: var(--bar-border-style);
border-width: var(--bar-border-thickness);
border-color: var(--bar-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 95%;
width: 100%;
}
.animate__updown {
-webkit-animation-name: updown;
animation-name: updown;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
}
@-webkit-keyframes updown {
0% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
50% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
}
100% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
@keyframes updown {
0% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
50% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
}
100% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
.heart-container {
position: relative;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
height: 9em;
min-width: 9em;
padding-left: 1em;
}
.block {
position: absolute;
}
.heart {
display: block;
width: 1.05em;
height: 1.05em;
}
.heart0-fill {
-webkit-box-shadow: 2em 1em var(--heart0-primary), 3em 1em var(--heart0-primary), 5em 1em var(--heart0-primary), 6em 1em var(--heart0-primary), 1em 2em var(--heart0-primary), 2em 2em var(--heart0-shine), 3em 2em var(--heart0-primary), 4em 2em var(--heart0-primary), 5em 2em var(--heart0-primary), 6em 2em var(--heart0-primary), 7em 2em var(--heart0-primary), 1em 3em var(--heart0-primary), 2em 3em var(--heart0-primary), 3em 3em var(--heart0-primary), 4em 3em var(--heart0-primary), 5em 3em var(--heart0-primary), 6em 3em var(--heart0-primary), 7em 3em var(--heart0-primary), 1em 4em var(--heart0-secondary), 2em 4em var(--heart0-primary), 3em 4em var(--heart0-primary), 4em 4em var(--heart0-primary), 5em 4em var(--heart0-primary), 6em 4em var(--heart0-primary), 7em 4em var(--heart0-primary), 2em 5em var(--heart0-secondary), 3em 5em var(--heart0-primary), 4em 5em var(--heart0-primary), 5em 5em var(--heart0-primary), 6em 5em var(--heart0-secondary), 3em 6em var(--heart0-secondary), 4em 6em var(--heart0-primary), 5em 6em var(--heart0-secondary), 4em 7em var(--heart0-secondary);
box-shadow: 2em 1em var(--heart0-primary), 3em 1em var(--heart0-primary), 5em 1em var(--heart0-primary), 6em 1em var(--heart0-primary), 1em 2em var(--heart0-primary), 2em 2em var(--heart0-shine), 3em 2em var(--heart0-primary), 4em 2em var(--heart0-primary), 5em 2em var(--heart0-primary), 6em 2em var(--heart0-primary), 7em 2em var(--heart0-primary), 1em 3em var(--heart0-primary), 2em 3em var(--heart0-primary), 3em 3em var(--heart0-primary), 4em 3em var(--heart0-primary), 5em 3em var(--heart0-primary), 6em 3em var(--heart0-primary), 7em 3em var(--heart0-primary), 1em 4em var(--heart0-secondary), 2em 4em var(--heart0-primary), 3em 4em var(--heart0-primary), 4em 4em var(--heart0-primary), 5em 4em var(--heart0-primary), 6em 4em var(--heart0-primary), 7em 4em var(--heart0-primary), 2em 5em var(--heart0-secondary), 3em 5em var(--heart0-primary), 4em 5em var(--heart0-primary), 5em 5em var(--heart0-primary), 6em 5em var(--heart0-secondary), 3em 6em var(--heart0-secondary), 4em 6em var(--heart0-primary), 5em 6em var(--heart0-secondary), 4em 7em var(--heart0-secondary);
}
.heart0-outline {
-webkit-box-shadow: 2em 0em var(--heart0-outline), 3em 0em var(--heart0-outline), 5em 0em var(--heart0-outline), 6em 0em var(--heart0-outline), 1em 1em var(--heart0-outline), 4em 1em var(--heart0-outline), 7em 1em var(--heart0-outline), 0em 2em var(--heart0-outline), 8em 2em var(--heart0-outline), 0em 3em var(--heart0-outline), 8em 3em var(--heart0-outline), 0em 4em var(--heart0-outline), 8em 4em var(--heart0-outline), 1em 5em var(--heart0-outline), 7em 5em var(--heart0-outline), 2em 6em var(--heart0-outline), 6em 6em var(--heart0-outline), 3em 7em var(--heart0-outline), 5em 7em var(--heart0-outline), 4em 8em var(--heart0-outline);
box-shadow: 2em 0em var(--heart0-outline), 3em 0em var(--heart0-outline), 5em 0em var(--heart0-outline), 6em 0em var(--heart0-outline), 1em 1em var(--heart0-outline), 4em 1em var(--heart0-outline), 7em 1em var(--heart0-outline), 0em 2em var(--heart0-outline), 8em 2em var(--heart0-outline), 0em 3em var(--heart0-outline), 8em 3em var(--heart0-outline), 0em 4em var(--heart0-outline), 8em 4em var(--heart0-outline), 1em 5em var(--heart0-outline), 7em 5em var(--heart0-outline), 2em 6em var(--heart0-outline), 6em 6em var(--heart0-outline), 3em 7em var(--heart0-outline), 5em 7em var(--heart0-outline), 4em 8em var(--heart0-outline);
}
.heart0-outline-special {
-webkit-box-shadow: 2em 0em var(--heart0-outline-special), 3em 0em var(--heart0-outline-special), 5em 0em var(--heart0-outline-special), 6em 0em var(--heart0-outline-special), 1em 1em var(--heart0-outline-special), 4em 1em var(--heart0-outline-special), 7em 1em var(--heart0-outline-special), 0em 2em var(--heart0-outline-special), 8em 2em var(--heart0-outline-special), 0em 3em var(--heart0-outline-special), 8em 3em var(--heart0-outline-special), 0em 4em var(--heart0-outline-special), 8em 4em var(--heart0-outline-special), 1em 5em var(--heart0-outline-special), 7em 5em var(--heart0-outline-special), 2em 6em var(--heart0-outline-special), 6em 6em var(--heart0-outline-special), 3em 7em var(--heart0-outline-special), 5em 7em var(--heart0-outline-special), 4em 8em var(--heart0-outline-special);
box-shadow: 2em 0em var(--heart0-outline-special), 3em 0em var(--heart0-outline-special), 5em 0em var(--heart0-outline-special), 6em 0em var(--heart0-outline-special), 1em 1em var(--heart0-outline-special), 4em 1em var(--heart0-outline-special), 7em 1em var(--heart0-outline-special), 0em 2em var(--heart0-outline-special), 8em 2em var(--heart0-outline-special), 0em 3em var(--heart0-outline-special), 8em 3em var(--heart0-outline-special), 0em 4em var(--heart0-outline-special), 8em 4em var(--heart0-outline-special), 1em 5em var(--heart0-outline-special), 7em 5em var(--heart0-outline-special), 2em 6em var(--heart0-outline-special), 6em 6em var(--heart0-outline-special), 3em 7em var(--heart0-outline-special), 5em 7em var(--heart0-outline-special), 4em 8em var(--heart0-outline-special);
}
.heart1-fill {
-webkit-box-shadow: 2em 1em var(--heart1-primary), 3em 1em var(--heart1-primary), 5em 1em var(--heart1-primary), 6em 1em var(--heart1-primary), 1em 2em var(--heart1-primary), 2em 2em var(--heart1-shine), 3em 2em var(--heart1-primary), 4em 2em var(--heart1-primary), 5em 2em var(--heart1-primary), 6em 2em var(--heart1-primary), 7em 2em var(--heart1-primary), 1em 3em var(--heart1-primary), 2em 3em var(--heart1-primary), 3em 3em var(--heart1-primary), 4em 3em var(--heart1-primary), 5em 3em var(--heart1-primary), 6em 3em var(--heart1-primary), 7em 3em var(--heart1-primary), 1em 4em var(--heart1-secondary), 2em 4em var(--heart1-primary), 3em 4em var(--heart1-primary), 4em 4em var(--heart1-primary), 5em 4em var(--heart1-primary), 6em 4em var(--heart1-primary), 7em 4em var(--heart1-primary), 2em 5em var(--heart1-secondary), 3em 5em var(--heart1-primary), 4em 5em var(--heart1-primary), 5em 5em var(--heart1-primary), 6em 5em var(--heart1-secondary), 3em 6em var(--heart1-secondary), 4em 6em var(--heart1-primary), 5em 6em var(--heart1-secondary), 4em 7em var(--heart1-secondary);
box-shadow: 2em 1em var(--heart1-primary), 3em 1em var(--heart1-primary), 5em 1em var(--heart1-primary), 6em 1em var(--heart1-primary), 1em 2em var(--heart1-primary), 2em 2em var(--heart1-shine), 3em 2em var(--heart1-primary), 4em 2em var(--heart1-primary), 5em 2em var(--heart1-primary), 6em 2em var(--heart1-primary), 7em 2em var(--heart1-primary), 1em 3em var(--heart1-primary), 2em 3em var(--heart1-primary), 3em 3em var(--heart1-primary), 4em 3em var(--heart1-primary), 5em 3em var(--heart1-primary), 6em 3em var(--heart1-primary), 7em 3em var(--heart1-primary), 1em 4em var(--heart1-secondary), 2em 4em var(--heart1-primary), 3em 4em var(--heart1-primary), 4em 4em var(--heart1-primary), 5em 4em var(--heart1-primary), 6em 4em var(--heart1-primary), 7em 4em var(--heart1-primary), 2em 5em var(--heart1-secondary), 3em 5em var(--heart1-primary), 4em 5em var(--heart1-primary), 5em 5em var(--heart1-primary), 6em 5em var(--heart1-secondary), 3em 6em var(--heart1-secondary), 4em 6em var(--heart1-primary), 5em 6em var(--heart1-secondary), 4em 7em var(--heart1-secondary);
}
.heart1-outline {
-webkit-box-shadow: 2em 0em var(--heart1-outline), 3em 0em var(--heart1-outline), 5em 0em var(--heart1-outline), 6em 0em var(--heart1-outline), 1em 1em var(--heart1-outline), 4em 1em var(--heart1-outline), 7em 1em var(--heart1-outline), 0em 2em var(--heart1-outline), 8em 2em var(--heart1-outline), 0em 3em var(--heart1-outline), 8em 3em var(--heart1-outline), 0em 4em var(--heart1-outline), 8em 4em var(--heart1-outline), 1em 5em var(--heart1-outline), 7em 5em var(--heart1-outline), 2em 6em var(--heart1-outline), 6em 6em var(--heart1-outline), 3em 7em var(--heart1-outline), 5em 7em var(--heart1-outline), 4em 8em var(--heart1-outline);
box-shadow: 2em 0em var(--heart1-outline), 3em 0em var(--heart1-outline), 5em 0em var(--heart1-outline), 6em 0em var(--heart1-outline), 1em 1em var(--heart1-outline), 4em 1em var(--heart1-outline), 7em 1em var(--heart1-outline), 0em 2em var(--heart1-outline), 8em 2em var(--heart1-outline), 0em 3em var(--heart1-outline), 8em 3em var(--heart1-outline), 0em 4em var(--heart1-outline), 8em 4em var(--heart1-outline), 1em 5em var(--heart1-outline), 7em 5em var(--heart1-outline), 2em 6em var(--heart1-outline), 6em 6em var(--heart1-outline), 3em 7em var(--heart1-outline), 5em 7em var(--heart1-outline), 4em 8em var(--heart1-outline);
}
.heart1-outline-special {
-webkit-box-shadow: 2em 0em var(--heart1-outline-special), 3em 0em var(--heart1-outline-special), 5em 0em var(--heart1-outline-special), 6em 0em var(--heart1-outline-special), 1em 1em var(--heart1-outline-special), 4em 1em var(--heart1-outline-special), 7em 1em var(--heart1-outline-special), 0em 2em var(--heart1-outline-special), 8em 2em var(--heart1-outline-special), 0em 3em var(--heart1-outline-special), 8em 3em var(--heart1-outline-special), 0em 4em var(--heart1-outline-special), 8em 4em var(--heart1-outline-special), 1em 5em var(--heart1-outline-special), 7em 5em var(--heart1-outline-special), 2em 6em var(--heart1-outline-special), 6em 6em var(--heart1-outline-special), 3em 7em var(--heart1-outline-special), 5em 7em var(--heart1-outline-special), 4em 8em var(--heart1-outline-special);
box-shadow: 2em 0em var(--heart1-outline-special), 3em 0em var(--heart1-outline-special), 5em 0em var(--heart1-outline-special), 6em 0em var(--heart1-outline-special), 1em 1em var(--heart1-outline-special), 4em 1em var(--heart1-outline-special), 7em 1em var(--heart1-outline-special), 0em 2em var(--heart1-outline-special), 8em 2em var(--heart1-outline-special), 0em 3em var(--heart1-outline-special), 8em 3em var(--heart1-outline-special), 0em 4em var(--heart1-outline-special), 8em 4em var(--heart1-outline-special), 1em 5em var(--heart1-outline-special), 7em 5em var(--heart1-outline-special), 2em 6em var(--heart1-outline-special), 6em 6em var(--heart1-outline-special), 3em 7em var(--heart1-outline-special), 5em 7em var(--heart1-outline-special), 4em 8em var(--heart1-outline-special);
}
.heart2-fill {
-webkit-box-shadow: 2em 1em var(--heart2-primary), 3em 1em var(--heart2-primary), 5em 1em var(--heart2-primary), 6em 1em var(--heart2-primary), 1em 2em var(--heart2-primary), 2em 2em var(--heart2-shine), 3em 2em var(--heart2-primary), 4em 2em var(--heart2-primary), 5em 2em var(--heart2-primary), 6em 2em var(--heart2-primary), 7em 2em var(--heart2-primary), 1em 3em var(--heart2-primary), 2em 3em var(--heart2-primary), 3em 3em var(--heart2-primary), 4em 3em var(--heart2-primary), 5em 3em var(--heart2-primary), 6em 3em var(--heart2-primary), 7em 3em var(--heart2-primary), 1em 4em var(--heart2-secondary), 2em 4em var(--heart2-primary), 3em 4em var(--heart2-primary), 4em 4em var(--heart2-primary), 5em 4em var(--heart2-primary), 6em 4em var(--heart2-primary), 7em 4em var(--heart2-primary), 2em 5em var(--heart2-secondary), 3em 5em var(--heart2-primary), 4em 5em var(--heart2-primary), 5em 5em var(--heart2-primary), 6em 5em var(--heart2-secondary), 3em 6em var(--heart2-secondary), 4em 6em var(--heart2-primary), 5em 6em var(--heart2-secondary), 4em 7em var(--heart2-secondary);
box-shadow: 2em 1em var(--heart2-primary), 3em 1em var(--heart2-primary), 5em 1em var(--heart2-primary), 6em 1em var(--heart2-primary), 1em 2em var(--heart2-primary), 2em 2em var(--heart2-shine), 3em 2em var(--heart2-primary), 4em 2em var(--heart2-primary), 5em 2em var(--heart2-primary), 6em 2em var(--heart2-primary), 7em 2em var(--heart2-primary), 1em 3em var(--heart2-primary), 2em 3em var(--heart2-primary), 3em 3em var(--heart2-primary), 4em 3em var(--heart2-primary), 5em 3em var(--heart2-primary), 6em 3em var(--heart2-primary), 7em 3em var(--heart2-primary), 1em 4em var(--heart2-secondary), 2em 4em var(--heart2-primary), 3em 4em var(--heart2-primary), 4em 4em var(--heart2-primary), 5em 4em var(--heart2-primary), 6em 4em var(--heart2-primary), 7em 4em var(--heart2-primary), 2em 5em var(--heart2-secondary), 3em 5em var(--heart2-primary), 4em 5em var(--heart2-primary), 5em 5em var(--heart2-primary), 6em 5em var(--heart2-secondary), 3em 6em var(--heart2-secondary), 4em 6em var(--heart2-primary), 5em 6em var(--heart2-secondary), 4em 7em var(--heart2-secondary);
}
.heart2-outline {
-webkit-box-shadow: 2em 0em var(--heart2-outline), 3em 0em var(--heart2-outline), 5em 0em var(--heart2-outline), 6em 0em var(--heart2-outline), 1em 1em var(--heart2-outline), 4em 1em var(--heart2-outline), 7em 1em var(--heart2-outline), 0em 2em var(--heart2-outline), 8em 2em var(--heart2-outline), 0em 3em var(--heart2-outline), 8em 3em var(--heart2-outline), 0em 4em var(--heart2-outline), 8em 4em var(--heart2-outline), 1em 5em var(--heart2-outline), 7em 5em var(--heart2-outline), 2em 6em var(--heart2-outline), 6em 6em var(--heart2-outline), 3em 7em var(--heart2-outline), 5em 7em var(--heart2-outline), 4em 8em var(--heart2-outline);
box-shadow: 2em 0em var(--heart2-outline), 3em 0em var(--heart2-outline), 5em 0em var(--heart2-outline), 6em 0em var(--heart2-outline), 1em 1em var(--heart2-outline), 4em 1em var(--heart2-outline), 7em 1em var(--heart2-outline), 0em 2em var(--heart2-outline), 8em 2em var(--heart2-outline), 0em 3em var(--heart2-outline), 8em 3em var(--heart2-outline), 0em 4em var(--heart2-outline), 8em 4em var(--heart2-outline), 1em 5em var(--heart2-outline), 7em 5em var(--heart2-outline), 2em 6em var(--heart2-outline), 6em 6em var(--heart2-outline), 3em 7em var(--heart2-outline), 5em 7em var(--heart2-outline), 4em 8em var(--heart2-outline);
}
.heart2-outline-special {
-webkit-box-shadow: 2em 0em var(--heart2-outline-special), 3em 0em var(--heart2-outline-special), 5em 0em var(--heart2-outline-special), 6em 0em var(--heart2-outline-special), 1em 1em var(--heart2-outline-special), 4em 1em var(--heart2-outline-special), 7em 1em var(--heart2-outline-special), 0em 2em var(--heart2-outline-special), 8em 2em var(--heart2-outline-special), 0em 3em var(--heart2-outline-special), 8em 3em var(--heart2-outline-special), 0em 4em var(--heart2-outline-special), 8em 4em var(--heart2-outline-special), 1em 5em var(--heart2-outline-special), 7em 5em var(--heart2-outline-special), 2em 6em var(--heart2-outline-special), 6em 6em var(--heart2-outline-special), 3em 7em var(--heart2-outline-special), 5em 7em var(--heart2-outline-special), 4em 8em var(--heart2-outline-special);
box-shadow: 2em 0em var(--heart2-outline-special), 3em 0em var(--heart2-outline-special), 5em 0em var(--heart2-outline-special), 6em 0em var(--heart2-outline-special), 1em 1em var(--heart2-outline-special), 4em 1em var(--heart2-outline-special), 7em 1em var(--heart2-outline-special), 0em 2em var(--heart2-outline-special), 8em 2em var(--heart2-outline-special), 0em 3em var(--heart2-outline-special), 8em 3em var(--heart2-outline-special), 0em 4em var(--heart2-outline-special), 8em 4em var(--heart2-outline-special), 1em 5em var(--heart2-outline-special), 7em 5em var(--heart2-outline-special), 2em 6em var(--heart2-outline-special), 6em 6em var(--heart2-outline-special), 3em 7em var(--heart2-outline-special), 5em 7em var(--heart2-outline-special), 4em 8em var(--heart2-outline-special);
}
.heart3-fill {
-webkit-box-shadow: 2em 1em var(--heart3-primary), 3em 1em var(--heart3-primary), 5em 1em var(--heart3-primary), 6em 1em var(--heart3-primary), 1em 2em var(--heart3-primary), 2em 2em var(--heart3-shine), 3em 2em var(--heart3-primary), 4em 2em var(--heart3-primary), 5em 2em var(--heart3-primary), 6em 2em var(--heart3-primary), 7em 2em var(--heart3-primary), 1em 3em var(--heart3-primary), 2em 3em var(--heart3-primary), 3em 3em var(--heart3-primary), 4em 3em var(--heart3-primary), 5em 3em var(--heart3-primary), 6em 3em var(--heart3-primary), 7em 3em var(--heart3-primary), 1em 4em var(--heart3-secondary), 2em 4em var(--heart3-primary), 3em 4em var(--heart3-primary), 4em 4em var(--heart3-primary), 5em 4em var(--heart3-primary), 6em 4em var(--heart3-primary), 7em 4em var(--heart3-primary), 2em 5em var(--heart3-secondary), 3em 5em var(--heart3-primary), 4em 5em var(--heart3-primary), 5em 5em var(--heart3-primary), 6em 5em var(--heart3-secondary), 3em 6em var(--heart3-secondary), 4em 6em var(--heart3-primary), 5em 6em var(--heart3-secondary), 4em 7em var(--heart3-secondary);
box-shadow: 2em 1em var(--heart3-primary), 3em 1em var(--heart3-primary), 5em 1em var(--heart3-primary), 6em 1em var(--heart3-primary), 1em 2em var(--heart3-primary), 2em 2em var(--heart3-shine), 3em 2em var(--heart3-primary), 4em 2em var(--heart3-primary), 5em 2em var(--heart3-primary), 6em 2em var(--heart3-primary), 7em 2em var(--heart3-primary), 1em 3em var(--heart3-primary), 2em 3em var(--heart3-primary), 3em 3em var(--heart3-primary), 4em 3em var(--heart3-primary), 5em 3em var(--heart3-primary), 6em 3em var(--heart3-primary), 7em 3em var(--heart3-primary), 1em 4em var(--heart3-secondary), 2em 4em var(--heart3-primary), 3em 4em var(--heart3-primary), 4em 4em var(--heart3-primary), 5em 4em var(--heart3-primary), 6em 4em var(--heart3-primary), 7em 4em var(--heart3-primary), 2em 5em var(--heart3-secondary), 3em 5em var(--heart3-primary), 4em 5em var(--heart3-primary), 5em 5em var(--heart3-primary), 6em 5em var(--heart3-secondary), 3em 6em var(--heart3-secondary), 4em 6em var(--heart3-primary), 5em 6em var(--heart3-secondary), 4em 7em var(--heart3-secondary);
}
.heart3-outline {
-webkit-box-shadow: 2em 0em var(--heart3-outline), 3em 0em var(--heart3-outline), 5em 0em var(--heart3-outline), 6em 0em var(--heart3-outline), 1em 1em var(--heart3-outline), 4em 1em var(--heart3-outline), 7em 1em var(--heart3-outline), 0em 2em var(--heart3-outline), 8em 2em var(--heart3-outline), 0em 3em var(--heart3-outline), 8em 3em var(--heart3-outline), 0em 4em var(--heart3-outline), 8em 4em var(--heart3-outline), 1em 5em var(--heart3-outline), 7em 5em var(--heart3-outline), 2em 6em var(--heart3-outline), 6em 6em var(--heart3-outline), 3em 7em var(--heart3-outline), 5em 7em var(--heart3-outline), 4em 8em var(--heart3-outline);
box-shadow: 2em 0em var(--heart3-outline), 3em 0em var(--heart3-outline), 5em 0em var(--heart3-outline), 6em 0em var(--heart3-outline), 1em 1em var(--heart3-outline), 4em 1em var(--heart3-outline), 7em 1em var(--heart3-outline), 0em 2em var(--heart3-outline), 8em 2em var(--heart3-outline), 0em 3em var(--heart3-outline), 8em 3em var(--heart3-outline), 0em 4em var(--heart3-outline), 8em 4em var(--heart3-outline), 1em 5em var(--heart3-outline), 7em 5em var(--heart3-outline), 2em 6em var(--heart3-outline), 6em 6em var(--heart3-outline), 3em 7em var(--heart3-outline), 5em 7em var(--heart3-outline), 4em 8em var(--heart3-outline);
}
.heart3-outline-special {
-webkit-box-shadow: 2em 0em var(--heart3-outline-special), 3em 0em var(--heart3-outline-special), 5em 0em var(--heart3-outline-special), 6em 0em var(--heart3-outline-special), 1em 1em var(--heart3-outline-special), 4em 1em var(--heart3-outline-special), 7em 1em var(--heart3-outline-special), 0em 2em var(--heart3-outline-special), 8em 2em var(--heart3-outline-special), 0em 3em var(--heart3-outline-special), 8em 3em var(--heart3-outline-special), 0em 4em var(--heart3-outline-special), 8em 4em var(--heart3-outline-special), 1em 5em var(--heart3-outline-special), 7em 5em var(--heart3-outline-special), 2em 6em var(--heart3-outline-special), 6em 6em var(--heart3-outline-special), 3em 7em var(--heart3-outline-special), 5em 7em var(--heart3-outline-special), 4em 8em var(--heart3-outline-special);
box-shadow: 2em 0em var(--heart3-outline-special), 3em 0em var(--heart3-outline-special), 5em 0em var(--heart3-outline-special), 6em 0em var(--heart3-outline-special), 1em 1em var(--heart3-outline-special), 4em 1em var(--heart3-outline-special), 7em 1em var(--heart3-outline-special), 0em 2em var(--heart3-outline-special), 8em 2em var(--heart3-outline-special), 0em 3em var(--heart3-outline-special), 8em 3em var(--heart3-outline-special), 0em 4em var(--heart3-outline-special), 8em 4em var(--heart3-outline-special), 1em 5em var(--heart3-outline-special), 7em 5em var(--heart3-outline-special), 2em 6em var(--heart3-outline-special), 6em 6em var(--heart3-outline-special), 3em 7em var(--heart3-outline-special), 5em 7em var(--heart3-outline-special), 4em 8em var(--heart3-outline-special);
}
.heart4-fill {
-webkit-box-shadow: 2em 1em var(--heart4-primary), 3em 1em var(--heart4-primary), 5em 1em var(--heart4-primary), 6em 1em var(--heart4-primary), 1em 2em var(--heart4-primary), 2em 2em var(--heart4-shine), 3em 2em var(--heart4-primary), 4em 2em var(--heart4-primary), 5em 2em var(--heart4-primary), 6em 2em var(--heart4-primary), 7em 2em var(--heart4-primary), 1em 3em var(--heart4-primary), 2em 3em var(--heart4-primary), 3em 3em var(--heart4-primary), 4em 3em var(--heart4-primary), 5em 3em var(--heart4-primary), 6em 3em var(--heart4-primary), 7em 3em var(--heart4-primary), 1em 4em var(--heart4-secondary), 2em 4em var(--heart4-primary), 3em 4em var(--heart4-primary), 4em 4em var(--heart4-primary), 5em 4em var(--heart4-primary), 6em 4em var(--heart4-primary), 7em 4em var(--heart4-primary), 2em 5em var(--heart4-secondary), 3em 5em var(--heart4-primary), 4em 5em var(--heart4-primary), 5em 5em var(--heart4-primary), 6em 5em var(--heart4-secondary), 3em 6em var(--heart4-secondary), 4em 6em var(--heart4-primary), 5em 6em var(--heart4-secondary), 4em 7em var(--heart4-secondary);
box-shadow: 2em 1em var(--heart4-primary), 3em 1em var(--heart4-primary), 5em 1em var(--heart4-primary), 6em 1em var(--heart4-primary), 1em 2em var(--heart4-primary), 2em 2em var(--heart4-shine), 3em 2em var(--heart4-primary), 4em 2em var(--heart4-primary), 5em 2em var(--heart4-primary), 6em 2em var(--heart4-primary), 7em 2em var(--heart4-primary), 1em 3em var(--heart4-primary), 2em 3em var(--heart4-primary), 3em 3em var(--heart4-primary), 4em 3em var(--heart4-primary), 5em 3em var(--heart4-primary), 6em 3em var(--heart4-primary), 7em 3em var(--heart4-primary), 1em 4em var(--heart4-secondary), 2em 4em var(--heart4-primary), 3em 4em var(--heart4-primary), 4em 4em var(--heart4-primary), 5em 4em var(--heart4-primary), 6em 4em var(--heart4-primary), 7em 4em var(--heart4-primary), 2em 5em var(--heart4-secondary), 3em 5em var(--heart4-primary), 4em 5em var(--heart4-primary), 5em 5em var(--heart4-primary), 6em 5em var(--heart4-secondary), 3em 6em var(--heart4-secondary), 4em 6em var(--heart4-primary), 5em 6em var(--heart4-secondary), 4em 7em var(--heart4-secondary);
}
.heart4-outline {
-webkit-box-shadow: 2em 0em var(--heart4-outline), 3em 0em var(--heart4-outline), 5em 0em var(--heart4-outline), 6em 0em var(--heart4-outline), 1em 1em var(--heart4-outline), 4em 1em var(--heart4-outline), 7em 1em var(--heart4-outline), 0em 2em var(--heart4-outline), 8em 2em var(--heart4-outline), 0em 3em var(--heart4-outline), 8em 3em var(--heart4-outline), 0em 4em var(--heart4-outline), 8em 4em var(--heart4-outline), 1em 5em var(--heart4-outline), 7em 5em var(--heart4-outline), 2em 6em var(--heart4-outline), 6em 6em var(--heart4-outline), 3em 7em var(--heart4-outline), 5em 7em var(--heart4-outline), 4em 8em var(--heart4-outline);
box-shadow: 2em 0em var(--heart4-outline), 3em 0em var(--heart4-outline), 5em 0em var(--heart4-outline), 6em 0em var(--heart4-outline), 1em 1em var(--heart4-outline), 4em 1em var(--heart4-outline), 7em 1em var(--heart4-outline), 0em 2em var(--heart4-outline), 8em 2em var(--heart4-outline), 0em 3em var(--heart4-outline), 8em 3em var(--heart4-outline), 0em 4em var(--heart4-outline), 8em 4em var(--heart4-outline), 1em 5em var(--heart4-outline), 7em 5em var(--heart4-outline), 2em 6em var(--heart4-outline), 6em 6em var(--heart4-outline), 3em 7em var(--heart4-outline), 5em 7em var(--heart4-outline), 4em 8em var(--heart4-outline);
}
.heart4-outline-special {
-webkit-box-shadow: 2em 0em var(--heart4-outline-special), 3em 0em var(--heart4-outline-special), 5em 0em var(--heart4-outline-special), 6em 0em var(--heart4-outline-special), 1em 1em var(--heart4-outline-special), 4em 1em var(--heart4-outline-special), 7em 1em var(--heart4-outline-special), 0em 2em var(--heart4-outline-special), 8em 2em var(--heart4-outline-special), 0em 3em var(--heart4-outline-special), 8em 3em var(--heart4-outline-special), 0em 4em var(--heart4-outline-special), 8em 4em var(--heart4-outline-special), 1em 5em var(--heart4-outline-special), 7em 5em var(--heart4-outline-special), 2em 6em var(--heart4-outline-special), 6em 6em var(--heart4-outline-special), 3em 7em var(--heart4-outline-special), 5em 7em var(--heart4-outline-special), 4em 8em var(--heart4-outline-special);
box-shadow: 2em 0em var(--heart4-outline-special), 3em 0em var(--heart4-outline-special), 5em 0em var(--heart4-outline-special), 6em 0em var(--heart4-outline-special), 1em 1em var(--heart4-outline-special), 4em 1em var(--heart4-outline-special), 7em 1em var(--heart4-outline-special), 0em 2em var(--heart4-outline-special), 8em 2em var(--heart4-outline-special), 0em 3em var(--heart4-outline-special), 8em 3em var(--heart4-outline-special), 0em 4em var(--heart4-outline-special), 8em 4em var(--heart4-outline-special), 1em 5em var(--heart4-outline-special), 7em 5em var(--heart4-outline-special), 2em 6em var(--heart4-outline-special), 6em 6em var(--heart4-outline-special), 3em 7em var(--heart4-outline-special), 5em 7em var(--heart4-outline-special), 4em 8em var(--heart4-outline-special);
}
.heart5-fill {
-webkit-box-shadow: 2em 1em var(--heart5-primary), 3em 1em var(--heart5-primary), 5em 1em var(--heart5-primary), 6em 1em var(--heart5-primary), 1em 2em var(--heart5-primary), 2em 2em var(--heart5-shine), 3em 2em var(--heart5-primary), 4em 2em var(--heart5-primary), 5em 2em var(--heart5-primary), 6em 2em var(--heart5-primary), 7em 2em var(--heart5-primary), 1em 3em var(--heart5-primary), 2em 3em var(--heart5-primary), 3em 3em var(--heart5-primary), 4em 3em var(--heart5-primary), 5em 3em var(--heart5-primary), 6em 3em var(--heart5-primary), 7em 3em var(--heart5-primary), 1em 4em var(--heart5-secondary), 2em 4em var(--heart5-primary), 3em 4em var(--heart5-primary), 4em 4em var(--heart5-primary), 5em 4em var(--heart5-primary), 6em 4em var(--heart5-primary), 7em 4em var(--heart5-primary), 2em 5em var(--heart5-secondary), 3em 5em var(--heart5-primary), 4em 5em var(--heart5-primary), 5em 5em var(--heart5-primary), 6em 5em var(--heart5-secondary), 3em 6em var(--heart5-secondary), 4em 6em var(--heart5-primary), 5em 6em var(--heart5-secondary), 4em 7em var(--heart5-secondary);
box-shadow: 2em 1em var(--heart5-primary), 3em 1em var(--heart5-primary), 5em 1em var(--heart5-primary), 6em 1em var(--heart5-primary), 1em 2em var(--heart5-primary), 2em 2em var(--heart5-shine), 3em 2em var(--heart5-primary), 4em 2em var(--heart5-primary), 5em 2em var(--heart5-primary), 6em 2em var(--heart5-primary), 7em 2em var(--heart5-primary), 1em 3em var(--heart5-primary), 2em 3em var(--heart5-primary), 3em 3em var(--heart5-primary), 4em 3em var(--heart5-primary), 5em 3em var(--heart5-primary), 6em 3em var(--heart5-primary), 7em 3em var(--heart5-primary), 1em 4em var(--heart5-secondary), 2em 4em var(--heart5-primary), 3em 4em var(--heart5-primary), 4em 4em var(--heart5-primary), 5em 4em var(--heart5-primary), 6em 4em var(--heart5-primary), 7em 4em var(--heart5-primary), 2em 5em var(--heart5-secondary), 3em 5em var(--heart5-primary), 4em 5em var(--heart5-primary), 5em 5em var(--heart5-primary), 6em 5em var(--heart5-secondary), 3em 6em var(--heart5-secondary), 4em 6em var(--heart5-primary), 5em 6em var(--heart5-secondary), 4em 7em var(--heart5-secondary);
}
.heart5-outline {
-webkit-box-shadow: 2em 0em var(--heart5-outline), 3em 0em var(--heart5-outline), 5em 0em var(--heart5-outline), 6em 0em var(--heart5-outline), 1em 1em var(--heart5-outline), 4em 1em var(--heart5-outline), 7em 1em var(--heart5-outline), 0em 2em var(--heart5-outline), 8em 2em var(--heart5-outline), 0em 3em var(--heart5-outline), 8em 3em var(--heart5-outline), 0em 4em var(--heart5-outline), 8em 4em var(--heart5-outline), 1em 5em var(--heart5-outline), 7em 5em var(--heart5-outline), 2em 6em var(--heart5-outline), 6em 6em var(--heart5-outline), 3em 7em var(--heart5-outline), 5em 7em var(--heart5-outline), 4em 8em var(--heart5-outline);
box-shadow: 2em 0em var(--heart5-outline), 3em 0em var(--heart5-outline), 5em 0em var(--heart5-outline), 6em 0em var(--heart5-outline), 1em 1em var(--heart5-outline), 4em 1em var(--heart5-outline), 7em 1em var(--heart5-outline), 0em 2em var(--heart5-outline), 8em 2em var(--heart5-outline), 0em 3em var(--heart5-outline), 8em 3em var(--heart5-outline), 0em 4em var(--heart5-outline), 8em 4em var(--heart5-outline), 1em 5em var(--heart5-outline), 7em 5em var(--heart5-outline), 2em 6em var(--heart5-outline), 6em 6em var(--heart5-outline), 3em 7em var(--heart5-outline), 5em 7em var(--heart5-outline), 4em 8em var(--heart5-outline);
}
.heart5-outline-special {
-webkit-box-shadow: 2em 0em var(--heart5-outline-special), 3em 0em var(--heart5-outline-special), 5em 0em var(--heart5-outline-special), 6em 0em var(--heart5-outline-special), 1em 1em var(--heart5-outline-special), 4em 1em var(--heart5-outline-special), 7em 1em var(--heart5-outline-special), 0em 2em var(--heart5-outline-special), 8em 2em var(--heart5-outline-special), 0em 3em var(--heart5-outline-special), 8em 3em var(--heart5-outline-special), 0em 4em var(--heart5-outline-special), 8em 4em var(--heart5-outline-special), 1em 5em var(--heart5-outline-special), 7em 5em var(--heart5-outline-special), 2em 6em var(--heart5-outline-special), 6em 6em var(--heart5-outline-special), 3em 7em var(--heart5-outline-special), 5em 7em var(--heart5-outline-special), 4em 8em var(--heart5-outline-special);
box-shadow: 2em 0em var(--heart5-outline-special), 3em 0em var(--heart5-outline-special), 5em 0em var(--heart5-outline-special), 6em 0em var(--heart5-outline-special), 1em 1em var(--heart5-outline-special), 4em 1em var(--heart5-outline-special), 7em 1em var(--heart5-outline-special), 0em 2em var(--heart5-outline-special), 8em 2em var(--heart5-outline-special), 0em 3em var(--heart5-outline-special), 8em 3em var(--heart5-outline-special), 0em 4em var(--heart5-outline-special), 8em 4em var(--heart5-outline-special), 1em 5em var(--heart5-outline-special), 7em 5em var(--heart5-outline-special), 2em 6em var(--heart5-outline-special), 6em 6em var(--heart5-outline-special), 3em 7em var(--heart5-outline-special), 5em 7em var(--heart5-outline-special), 4em 8em var(--heart5-outline-special);
}
.heart6-fill {
-webkit-box-shadow: 2em 1em var(--heart6-primary), 3em 1em var(--heart6-primary), 5em 1em var(--heart6-primary), 6em 1em var(--heart6-primary), 1em 2em var(--heart6-primary), 2em 2em var(--heart6-shine), 3em 2em var(--heart6-primary), 4em 2em var(--heart6-primary), 5em 2em var(--heart6-primary), 6em 2em var(--heart6-primary), 7em 2em var(--heart6-primary), 1em 3em var(--heart6-primary), 2em 3em var(--heart6-primary), 3em 3em var(--heart6-primary), 4em 3em var(--heart6-primary), 5em 3em var(--heart6-primary), 6em 3em var(--heart6-primary), 7em 3em var(--heart6-primary), 1em 4em var(--heart6-secondary), 2em 4em var(--heart6-primary), 3em 4em var(--heart6-primary), 4em 4em var(--heart6-primary), 5em 4em var(--heart6-primary), 6em 4em var(--heart6-primary), 7em 4em var(--heart6-primary), 2em 5em var(--heart6-secondary), 3em 5em var(--heart6-primary), 4em 5em var(--heart6-primary), 5em 5em var(--heart6-primary), 6em 5em var(--heart6-secondary), 3em 6em var(--heart6-secondary), 4em 6em var(--heart6-primary), 5em 6em var(--heart6-secondary), 4em 7em var(--heart6-secondary);
box-shadow: 2em 1em var(--heart6-primary), 3em 1em var(--heart6-primary), 5em 1em var(--heart6-primary), 6em 1em var(--heart6-primary), 1em 2em var(--heart6-primary), 2em 2em var(--heart6-shine), 3em 2em var(--heart6-primary), 4em 2em var(--heart6-primary), 5em 2em var(--heart6-primary), 6em 2em var(--heart6-primary), 7em 2em var(--heart6-primary), 1em 3em var(--heart6-primary), 2em 3em var(--heart6-primary), 3em 3em var(--heart6-primary), 4em 3em var(--heart6-primary), 5em 3em var(--heart6-primary), 6em 3em var(--heart6-primary), 7em 3em var(--heart6-primary), 1em 4em var(--heart6-secondary), 2em 4em var(--heart6-primary), 3em 4em var(--heart6-primary), 4em 4em var(--heart6-primary), 5em 4em var(--heart6-primary), 6em 4em var(--heart6-primary), 7em 4em var(--heart6-primary), 2em 5em var(--heart6-secondary), 3em 5em var(--heart6-primary), 4em 5em var(--heart6-primary), 5em 5em var(--heart6-primary), 6em 5em var(--heart6-secondary), 3em 6em var(--heart6-secondary), 4em 6em var(--heart6-primary), 5em 6em var(--heart6-secondary), 4em 7em var(--heart6-secondary);
}
.heart6-outline {
-webkit-box-shadow: 2em 0em var(--heart6-outline), 3em 0em var(--heart6-outline), 5em 0em var(--heart6-outline), 6em 0em var(--heart6-outline), 1em 1em var(--heart6-outline), 4em 1em var(--heart6-outline), 7em 1em var(--heart6-outline), 0em 2em var(--heart6-outline), 8em 2em var(--heart6-outline), 0em 3em var(--heart6-outline), 8em 3em var(--heart6-outline), 0em 4em var(--heart6-outline), 8em 4em var(--heart6-outline), 1em 5em var(--heart6-outline), 7em 5em var(--heart6-outline), 2em 6em var(--heart6-outline), 6em 6em var(--heart6-outline), 3em 7em var(--heart6-outline), 5em 7em var(--heart6-outline), 4em 8em var(--heart6-outline);
box-shadow: 2em 0em var(--heart6-outline), 3em 0em var(--heart6-outline), 5em 0em var(--heart6-outline), 6em 0em var(--heart6-outline), 1em 1em var(--heart6-outline), 4em 1em var(--heart6-outline), 7em 1em var(--heart6-outline), 0em 2em var(--heart6-outline), 8em 2em var(--heart6-outline), 0em 3em var(--heart6-outline), 8em 3em var(--heart6-outline), 0em 4em var(--heart6-outline), 8em 4em var(--heart6-outline), 1em 5em var(--heart6-outline), 7em 5em var(--heart6-outline), 2em 6em var(--heart6-outline), 6em 6em var(--heart6-outline), 3em 7em var(--heart6-outline), 5em 7em var(--heart6-outline), 4em 8em var(--heart6-outline);
}
.heart6-outline-special {
-webkit-box-shadow: 2em 0em var(--heart6-outline-special), 3em 0em var(--heart6-outline-special), 5em 0em var(--heart6-outline-special), 6em 0em var(--heart6-outline-special), 1em 1em var(--heart6-outline-special), 4em 1em var(--heart6-outline-special), 7em 1em var(--heart6-outline-special), 0em 2em var(--heart6-outline-special), 8em 2em var(--heart6-outline-special), 0em 3em var(--heart6-outline-special), 8em 3em var(--heart6-outline-special), 0em 4em var(--heart6-outline-special), 8em 4em var(--heart6-outline-special), 1em 5em var(--heart6-outline-special), 7em 5em var(--heart6-outline-special), 2em 6em var(--heart6-outline-special), 6em 6em var(--heart6-outline-special), 3em 7em var(--heart6-outline-special), 5em 7em var(--heart6-outline-special), 4em 8em var(--heart6-outline-special);
box-shadow: 2em 0em var(--heart6-outline-special), 3em 0em var(--heart6-outline-special), 5em 0em var(--heart6-outline-special), 6em 0em var(--heart6-outline-special), 1em 1em var(--heart6-outline-special), 4em 1em var(--heart6-outline-special), 7em 1em var(--heart6-outline-special), 0em 2em var(--heart6-outline-special), 8em 2em var(--heart6-outline-special), 0em 3em var(--heart6-outline-special), 8em 3em var(--heart6-outline-special), 0em 4em var(--heart6-outline-special), 8em 4em var(--heart6-outline-special), 1em 5em var(--heart6-outline-special), 7em 5em var(--heart6-outline-special), 2em 6em var(--heart6-outline-special), 6em 6em var(--heart6-outline-special), 3em 7em var(--heart6-outline-special), 5em 7em var(--heart6-outline-special), 4em 8em var(--heart6-outline-special);
}
.heart7-fill {
-webkit-box-shadow: 2em 1em var(--heart7-primary), 3em 1em var(--heart7-primary), 5em 1em var(--heart7-primary), 6em 1em var(--heart7-primary), 1em 2em var(--heart7-primary), 2em 2em var(--heart7-shine), 3em 2em var(--heart7-primary), 4em 2em var(--heart7-primary), 5em 2em var(--heart7-primary), 6em 2em var(--heart7-primary), 7em 2em var(--heart7-primary), 1em 3em var(--heart7-primary), 2em 3em var(--heart7-primary), 3em 3em var(--heart7-primary), 4em 3em var(--heart7-primary), 5em 3em var(--heart7-primary), 6em 3em var(--heart7-primary), 7em 3em var(--heart7-primary), 1em 4em var(--heart7-secondary), 2em 4em var(--heart7-primary), 3em 4em var(--heart7-primary), 4em 4em var(--heart7-primary), 5em 4em var(--heart7-primary), 6em 4em var(--heart7-primary), 7em 4em var(--heart7-primary), 2em 5em var(--heart7-secondary), 3em 5em var(--heart7-primary), 4em 5em var(--heart7-primary), 5em 5em var(--heart7-primary), 6em 5em var(--heart7-secondary), 3em 6em var(--heart7-secondary), 4em 6em var(--heart7-primary), 5em 6em var(--heart7-secondary), 4em 7em var(--heart7-secondary);
box-shadow: 2em 1em var(--heart7-primary), 3em 1em var(--heart7-primary), 5em 1em var(--heart7-primary), 6em 1em var(--heart7-primary), 1em 2em var(--heart7-primary), 2em 2em var(--heart7-shine), 3em 2em var(--heart7-primary), 4em 2em var(--heart7-primary), 5em 2em var(--heart7-primary), 6em 2em var(--heart7-primary), 7em 2em var(--heart7-primary), 1em 3em var(--heart7-primary), 2em 3em var(--heart7-primary), 3em 3em var(--heart7-primary), 4em 3em var(--heart7-primary), 5em 3em var(--heart7-primary), 6em 3em var(--heart7-primary), 7em 3em var(--heart7-primary), 1em 4em var(--heart7-secondary), 2em 4em var(--heart7-primary), 3em 4em var(--heart7-primary), 4em 4em var(--heart7-primary), 5em 4em var(--heart7-primary), 6em 4em var(--heart7-primary), 7em 4em var(--heart7-primary), 2em 5em var(--heart7-secondary), 3em 5em var(--heart7-primary), 4em 5em var(--heart7-primary), 5em 5em var(--heart7-primary), 6em 5em var(--heart7-secondary), 3em 6em var(--heart7-secondary), 4em 6em var(--heart7-primary), 5em 6em var(--heart7-secondary), 4em 7em var(--heart7-secondary);
}
.heart7-outline {
-webkit-box-shadow: 2em 0em var(--heart7-outline), 3em 0em var(--heart7-outline), 5em 0em var(--heart7-outline), 6em 0em var(--heart7-outline), 1em 1em var(--heart7-outline), 4em 1em var(--heart7-outline), 7em 1em var(--heart7-outline), 0em 2em var(--heart7-outline), 8em 2em var(--heart7-outline), 0em 3em var(--heart7-outline), 8em 3em var(--heart7-outline), 0em 4em var(--heart7-outline), 8em 4em var(--heart7-outline), 1em 5em var(--heart7-outline), 7em 5em var(--heart7-outline), 2em 6em var(--heart7-outline), 6em 6em var(--heart7-outline), 3em 7em var(--heart7-outline), 5em 7em var(--heart7-outline), 4em 8em var(--heart7-outline);
box-shadow: 2em 0em var(--heart7-outline), 3em 0em var(--heart7-outline), 5em 0em var(--heart7-outline), 6em 0em var(--heart7-outline), 1em 1em var(--heart7-outline), 4em 1em var(--heart7-outline), 7em 1em var(--heart7-outline), 0em 2em var(--heart7-outline), 8em 2em var(--heart7-outline), 0em 3em var(--heart7-outline), 8em 3em var(--heart7-outline), 0em 4em var(--heart7-outline), 8em 4em var(--heart7-outline), 1em 5em var(--heart7-outline), 7em 5em var(--heart7-outline), 2em 6em var(--heart7-outline), 6em 6em var(--heart7-outline), 3em 7em var(--heart7-outline), 5em 7em var(--heart7-outline), 4em 8em var(--heart7-outline);
}
.heart7-outline-special {
-webkit-box-shadow: 2em 0em var(--heart7-outline-special), 3em 0em var(--heart7-outline-special), 5em 0em var(--heart7-outline-special), 6em 0em var(--heart7-outline-special), 1em 1em var(--heart7-outline-special), 4em 1em var(--heart7-outline-special), 7em 1em var(--heart7-outline-special), 0em 2em var(--heart7-outline-special), 8em 2em var(--heart7-outline-special), 0em 3em var(--heart7-outline-special), 8em 3em var(--heart7-outline-special), 0em 4em var(--heart7-outline-special), 8em 4em var(--heart7-outline-special), 1em 5em var(--heart7-outline-special), 7em 5em var(--heart7-outline-special), 2em 6em var(--heart7-outline-special), 6em 6em var(--heart7-outline-special), 3em 7em var(--heart7-outline-special), 5em 7em var(--heart7-outline-special), 4em 8em var(--heart7-outline-special);
box-shadow: 2em 0em var(--heart7-outline-special), 3em 0em var(--heart7-outline-special), 5em 0em var(--heart7-outline-special), 6em 0em var(--heart7-outline-special), 1em 1em var(--heart7-outline-special), 4em 1em var(--heart7-outline-special), 7em 1em var(--heart7-outline-special), 0em 2em var(--heart7-outline-special), 8em 2em var(--heart7-outline-special), 0em 3em var(--heart7-outline-special), 8em 3em var(--heart7-outline-special), 0em 4em var(--heart7-outline-special), 8em 4em var(--heart7-outline-special), 1em 5em var(--heart7-outline-special), 7em 5em var(--heart7-outline-special), 2em 6em var(--heart7-outline-special), 6em 6em var(--heart7-outline-special), 3em 7em var(--heart7-outline-special), 5em 7em var(--heart7-outline-special), 4em 8em var(--heart7-outline-special);
}
.heart8-fill {
-webkit-box-shadow: 2em 1em var(--heart8-primary), 3em 1em var(--heart8-primary), 5em 1em var(--heart8-primary), 6em 1em var(--heart8-primary), 1em 2em var(--heart8-primary), 2em 2em var(--heart8-shine), 3em 2em var(--heart8-primary), 4em 2em var(--heart8-primary), 5em 2em var(--heart8-primary), 6em 2em var(--heart8-primary), 7em 2em var(--heart8-primary), 1em 3em var(--heart8-primary), 2em 3em var(--heart8-primary), 3em 3em var(--heart8-primary), 4em 3em var(--heart8-primary), 5em 3em var(--heart8-primary), 6em 3em var(--heart8-primary), 7em 3em var(--heart8-primary), 1em 4em var(--heart8-secondary), 2em 4em var(--heart8-primary), 3em 4em var(--heart8-primary), 4em 4em var(--heart8-primary), 5em 4em var(--heart8-primary), 6em 4em var(--heart8-primary), 7em 4em var(--heart8-primary), 2em 5em var(--heart8-secondary), 3em 5em var(--heart8-primary), 4em 5em var(--heart8-primary), 5em 5em var(--heart8-primary), 6em 5em var(--heart8-secondary), 3em 6em var(--heart8-secondary), 4em 6em var(--heart8-primary), 5em 6em var(--heart8-secondary), 4em 7em var(--heart8-secondary);
box-shadow: 2em 1em var(--heart8-primary), 3em 1em var(--heart8-primary), 5em 1em var(--heart8-primary), 6em 1em var(--heart8-primary), 1em 2em var(--heart8-primary), 2em 2em var(--heart8-shine), 3em 2em var(--heart8-primary), 4em 2em var(--heart8-primary), 5em 2em var(--heart8-primary), 6em 2em var(--heart8-primary), 7em 2em var(--heart8-primary), 1em 3em var(--heart8-primary), 2em 3em var(--heart8-primary), 3em 3em var(--heart8-primary), 4em 3em var(--heart8-primary), 5em 3em var(--heart8-primary), 6em 3em var(--heart8-primary), 7em 3em var(--heart8-primary), 1em 4em var(--heart8-secondary), 2em 4em var(--heart8-primary), 3em 4em var(--heart8-primary), 4em 4em var(--heart8-primary), 5em 4em var(--heart8-primary), 6em 4em var(--heart8-primary), 7em 4em var(--heart8-primary), 2em 5em var(--heart8-secondary), 3em 5em var(--heart8-primary), 4em 5em var(--heart8-primary), 5em 5em var(--heart8-primary), 6em 5em var(--heart8-secondary), 3em 6em var(--heart8-secondary), 4em 6em var(--heart8-primary), 5em 6em var(--heart8-secondary), 4em 7em var(--heart8-secondary);
}
.heart8-outline {
-webkit-box-shadow: 2em 0em var(--heart8-outline), 3em 0em var(--heart8-outline), 5em 0em var(--heart8-outline), 6em 0em var(--heart8-outline), 1em 1em var(--heart8-outline), 4em 1em var(--heart8-outline), 7em 1em var(--heart8-outline), 0em 2em var(--heart8-outline), 8em 2em var(--heart8-outline), 0em 3em var(--heart8-outline), 8em 3em var(--heart8-outline), 0em 4em var(--heart8-outline), 8em 4em var(--heart8-outline), 1em 5em var(--heart8-outline), 7em 5em var(--heart8-outline), 2em 6em var(--heart8-outline), 6em 6em var(--heart8-outline), 3em 7em var(--heart8-outline), 5em 7em var(--heart8-outline), 4em 8em var(--heart8-outline);
box-shadow: 2em 0em var(--heart8-outline), 3em 0em var(--heart8-outline), 5em 0em var(--heart8-outline), 6em 0em var(--heart8-outline), 1em 1em var(--heart8-outline), 4em 1em var(--heart8-outline), 7em 1em var(--heart8-outline), 0em 2em var(--heart8-outline), 8em 2em var(--heart8-outline), 0em 3em var(--heart8-outline), 8em 3em var(--heart8-outline), 0em 4em var(--heart8-outline), 8em 4em var(--heart8-outline), 1em 5em var(--heart8-outline), 7em 5em var(--heart8-outline), 2em 6em var(--heart8-outline), 6em 6em var(--heart8-outline), 3em 7em var(--heart8-outline), 5em 7em var(--heart8-outline), 4em 8em var(--heart8-outline);
}
.heart8-outline-special {
-webkit-box-shadow: 2em 0em var(--heart8-outline-special), 3em 0em var(--heart8-outline-special), 5em 0em var(--heart8-outline-special), 6em 0em var(--heart8-outline-special), 1em 1em var(--heart8-outline-special), 4em 1em var(--heart8-outline-special), 7em 1em var(--heart8-outline-special), 0em 2em var(--heart8-outline-special), 8em 2em var(--heart8-outline-special), 0em 3em var(--heart8-outline-special), 8em 3em var(--heart8-outline-special), 0em 4em var(--heart8-outline-special), 8em 4em var(--heart8-outline-special), 1em 5em var(--heart8-outline-special), 7em 5em var(--heart8-outline-special), 2em 6em var(--heart8-outline-special), 6em 6em var(--heart8-outline-special), 3em 7em var(--heart8-outline-special), 5em 7em var(--heart8-outline-special), 4em 8em var(--heart8-outline-special);
box-shadow: 2em 0em var(--heart8-outline-special), 3em 0em var(--heart8-outline-special), 5em 0em var(--heart8-outline-special), 6em 0em var(--heart8-outline-special), 1em 1em var(--heart8-outline-special), 4em 1em var(--heart8-outline-special), 7em 1em var(--heart8-outline-special), 0em 2em var(--heart8-outline-special), 8em 2em var(--heart8-outline-special), 0em 3em var(--heart8-outline-special), 8em 3em var(--heart8-outline-special), 0em 4em var(--heart8-outline-special), 8em 4em var(--heart8-outline-special), 1em 5em var(--heart8-outline-special), 7em 5em var(--heart8-outline-special), 2em 6em var(--heart8-outline-special), 6em 6em var(--heart8-outline-special), 3em 7em var(--heart8-outline-special), 5em 7em var(--heart8-outline-special), 4em 8em var(--heart8-outline-special);
}.event-sub {
mask-image: url('https://cdn.streamelements.com/static/custom-event-list/sub.svg');
-webkit-mask-image: url('https://cdn.streamelements.com/static/custom-event-list/sub.svg');
}
Raw
4 - js.js
let tierCount = 0,
progressCount = 1,
seSettings = {},
tierLimit = 110,
subCount = 0,
heartAmount = 100,
totalHearts = 0;
window.addEventListener('onWidgetLoad', function(obj) {
console.log(obj);
console.log(obj.detail.fieldData);
seSettings = obj.detail.fieldData;
applySettings();
$('#bar').empty();
updateGlobarVars(obj);
setBackground();
for (let i=1; i <= heartAmount; i++)
addHeart(i);
});
window.addEventListener('onEventReceived', function(obj) {
console.log(obj);
const listener = obj.detail.listener.split("-")[0];
if (listener === 'subscriber') {
updateGlobarVars(obj);
setBackground();
for (let i=1; i <= heartAmount; i++)
updateHeart(i);
}
});
function updateGlobarVars(obj){
if (obj.detail.session) {
if (obj.detail.session.data[`subscriber-${seSettings.goal_period}`])
subCount = obj.detail.session.data[`subscriber-${seSettings.goal_period}`].count;
}
else
subCount += obj.detail.event.count;
console.log(subCount);
heartAmount = seSettings.heart_amount;
totalHearts = Math.floor(subCount / seSettings.subs_per_heart);
tierLimit = heartAmount ** 2;
if (seSettings.rank_up_point === "after_last")
tierLimit += heartAmount;
tierCount = Math.floor(totalHearts/tierLimit);
progressCount = Math.floor((totalHearts-(tierCount * tierLimit))/heartAmount);
}
function setBackground() {
for(var j = seSettings.max_tier; j > 0; j--) {
if(seSettings.max_tier >= j && tierCount >= j) {
$('#bar').css("background", `var(--tier${j}-background)`);
return;
}
}
$('#bar').css("background", "var(--tier0-background)");
}
function addHeart(i) {
$('#bar').append(`<div id='heart-container-${i}' class='heart-container ${getAnimateClass(i)}'></div>`);
$(`#heart-container-${i}`).append(`<div id='outline-block-${i}' class='block'></div>`);
$(`#outline-block-${i}`).append(
`<span id='heart-outline-${i}' class='heart ${getOutlineClass(i)}'></span>`
);
$(`#heart-container-${i}`).append(`<div id='fill-block-${i}' class='block'></div>`);
$(`#fill-block-${i}`).append(
`<span id='heart-fill-${i}' class='heart ${getFillClass(i)}'></span>`
);
}
function updateHeart(i) {
$(`#heart-container-${i}`).removeClass();
$(`#heart-outline-${i}`).removeClass();
$(`#heart-fill-${i}`).removeClass();
$(`#heart-container-${i}`).addClass(`heart-container ${getAnimateClass(i)}`);
$(`#heart-outline-${i}`).addClass(`heart ${getOutlineClass(i)}`);
$(`#heart-fill-${i}`).addClass(`heart ${getFillClass(i)}`);
}
function getOutlineClass(i) {
for(var j = seSettings.max_tier; j > 0; j--) {
if (seSettings.max_tier === j && tierCount >= j)
return `heart${j}-outline`;
}
if (progressCount >= i)
return `heart${tierCount+1}-outline-special`;
return `heart${tierCount+1}-outline`;
}
function getFillClass(i) {
for(var j = seSettings.max_tier; j > 0; j--) {
if (seSettings.max_tier === j && tierCount >= j)
return `heart${j}-fill`;
}
if (i <= (totalHearts-(tierCount * tierLimit))%heartAmount)
return `heart${tierCount+1}-fill`;
return `heart${tierCount}-fill`
}
function getAnimateClass(i) {
if (totalHearts < seSettings.animate_stop_threshold)
return `animate__animated animate__${seSettings.animate_type_begin} animate__infinite animate__delay-${i%3}s`;
if (tierCount >= seSettings.max_tier)
return `animate__animated animate__${seSettings.animate_type_end} animate__infinite animate__delay-${i%3}s`;
return "";
}
function applySettings() {
document.documentElement.style.setProperty('--animate-duration', seSettings.animate_duration + "ms");
document.documentElement.style.setProperty('--animate-delay', seSettings.animate_delay + "ms");
}
Raw
5 - fields.json
{
"widgetName": {
"type": "hidden",
"value": "Heart Sub Bar"
},
"widgetAuthor": {
"type": "hidden",
"value": "EncryptedThoughts"
},
"goal_period": {
"label": "Goal Period",
"type": "dropdown",
"options": {
"session": "This Session",
"week": "Weekly Aggregation",
"month": "Monthly Aggregation"
},
"value": "session"
},
"heart_amount": {
"label": "How Many Heart Containers",
"type": "number",
"value": 10
},
"subs_per_heart": {
"label": "How Many Subs to Fill a Single Heart",
"type": "number",
"value": 1
},
"rank_up_point": {
"label": "Rank Up Rollover Point",
"type": "dropdown",
"options": {
"at_last": "At Last Heart (Maxed Bar = Heart Container Count^2 * Max Tier)",
"after_last": "After Last Heart (Maxed Bar = (Heart Container Count^2 + Heart Container Count) * Max Tier)"
},
"value": "at_last"
},
"max_tier": {
"label": "Set Max Tier",
"type": "dropdown",
"options": {
"1": "1 Tier",
"2": "2 Tiers",
"3": "3 Tiers",
"4": "4 Tiers",
"5": "5 Tiers",
"6": "6 Tiers",
"7": "7 Tiers",
"8": "8 Tiers"
},
"value": "8"
},
"bar_bevel": {
"label": "Bar Bevel",
"type": "slider",
"name": "",
"value": 25,
"max": 200,
"min": 0,
"steps": 1
},
"bar_border_style": {
"label": "Bar Border Style",
"type": "dropdown",
"options": {
"dotted": "Dotted",
"dashed": "Dashed",
"solid": "Solid",
"double": "Double",
"groove": "Groove",
"ridge": "Ridge",
"inset": "Inset",
"outset": "Outset",
"none": "None"
},
"value": "solid"
},
"bar_border_thickness": {
"label": "Bar Border Thickness",
"type": "slider",
"name": "",
"value": 10,
"max": 100,
"min": 0,
"steps": 1
},
"bar_border_color": {
"label": "Bar Border Color",
"type": "colorpicker",
"value": "#292929"
},
"animate_type_begin": {
"label": "Beginning Animation Type",
"type": "dropdown",
"options": {
"updown": "Up Down",
"bounce": "Bounce",
"shakeY": "Shake",
"pulse": "Pulse",
"heartBeat": "Heartbeat",
"flip": "Flip"
},
"value": "shakeY"
},
"animate_type_end": {
"label": "Ending Animation Type",
"type": "dropdown",
"options": {
"updown": "Up Down",
"bounce": "Bounce",
"shakeY": "Shake",
"pulse": "Pulse",
"heartBeat": "Heartbeat",
"flip": "Flip"
},
"value": "bounce"
},
"animate_stop_threshold": {
"label": "Stop Animation After This Sub Amount",
"type": "number",
"value": 4
},
"animate_duration": {
"label": "Animation Duration",
"type": "slider",
"name": "",
"value": 1500,
"max": 5000,
"min": 0,
"steps": 50
},
"animate_delay": {
"label": "Animation Delay",
"type": "slider",
"name": "",
"value": 1000,
"max": 5000,
"min": 0,
"steps": 50
},
"tier0_background": {
"label": "Empty - Background",
"type": "colorpicker",
"value": "#000000"
},
"tier0_primary": {
"label": "Empty Heart - Primary",
"type": "colorpicker",
"value": "#353535"
},
"tier1_background": {
"label": "Tier 1 - Background",
"type": "colorpicker",
"value": "#9b4428"
},
"heart1_primary": {
"label": "Heart 1 - Primary",
"type": "colorpicker",
"value": "#ff1313"
},
"heart1_secondary": {
"label": "Heart 1 - Secondary",
"type": "colorpicker",
"value": "#bb1313"
},
"heart1_shine": {
"label": "Heart 1 - Shine",
"type": "colorpicker",
"value": "#ffffff"
},
"heart1_outline": {
"label": "Heart 1 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart1_outline_special": {
"label": "Heart 1 - Outline Special",
"type": "colorpicker",
"value": "#e47c56"
},
"tier2_background": {
"label": "Tier 2 - Background",
"type": "colorpicker",
"value": "#737373"
},
"heart2_primary": {
"label": "Heart 2 - Primary",
"type": "colorpicker",
"value": "#e47c56"
},
"heart2_secondary": {
"label": "Heart 2 - Secondary",
"type": "colorpicker",
"value": "#c15938"
},
"heart2_shine": {
"label": "Heart 2 - Shine",
"type": "colorpicker",
"value": "#ffc2b2"
},
"heart2_outline": {
"label": "Heart 2 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart2_outline_special": {
"label": "Heart 2 - Outline Special",
"type": "colorpicker",
"value": "#d9d9d9"
},
"tier3_background": {
"label": "Tier 3 - Background",
"type": "colorpicker",
"value": "#bc880a"
},
"heart3_primary": {
"label": "Heart 3 - Primary",
"type": "colorpicker",
"value": "#d9d9d9"
},
"heart3_secondary": {
"label": "Heart 3 - Secondary",
"type": "colorpicker",
"value": "#a9a9a9"
},
"heart3_shine": {
"label": "Heart 3 - Shine",
"type": "colorpicker",
"value": "#fefefe"
},
"heart3_outline": {
"label": "Heart 3 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart3_outline_special": {
"label": "Heart 3 - Outline Special",
"type": "colorpicker",
"value": "#f5b20f"
},
"tier4_background": {
"label": "Tier 4 - Background",
"type": "colorpicker",
"value": "#11418f"
},
"heart4_primary": {
"label": "Heart 4 - Primary",
"type": "colorpicker",
"value": "#f5b20f"
},
"heart4_secondary": {
"label": "Heart 4 - Secondary",
"type": "colorpicker",
"value": "#bc880a"
},
"heart4_shine": {
"label": "Heart 4 - Shine",
"type": "colorpicker",
"value": "#fbc443"
},
"heart4_outline": {
"label": "Heart 4 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart4_outline_special": {
"label": "Heart 4 - Outline Special",
"type": "colorpicker",
"value": "#5b85df"
},
"tier5_background": {
"label": "Tier 5 - Background",
"type": "colorpicker",
"value": "#012d01"
},
"heart5_primary": {
"label": "Heart 5 - Primary",
"type": "colorpicker",
"value": "#5b85df"
},
"heart5_secondary": {
"label": "Heart 5 - Secondary",
"type": "colorpicker",
"value": "#3061c2"
},
"heart5_shine": {
"label": "Heart 5 - Shine",
"type": "colorpicker",
"value": "#7299ed"
},
"heart5_outline": {
"label": "Heart 5 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart5_outline_special": {
"label": "Heart 5 - Outline Special",
"type": "colorpicker",
"value": "#00ab2e"
},
"tier6_background": {
"label": "Tier 6 - Background",
"type": "colorpicker",
"value": "#13737c"
},
"heart6_primary": {
"label": "Heart 6 - Primary",
"type": "colorpicker",
"value": "#00ab2e"
},
"heart6_secondary": {
"label": "Heart 6 - Secondary",
"type": "colorpicker",
"value": "#007d17"
},
"heart6_shine": {
"label": "Heart 6 - Shine",
"type": "colorpicker",
"value": "#aeffcd"
},
"heart6_outline": {
"label": "Heart 6 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart6_outline_special": {
"label": "Heart 6 - Outline Special",
"type": "colorpicker",
"value": "#2dcdb3"
},
"tier7_background": {
"label": "Tier 7 - Background",
"type": "colorpicker",
"value": "#401f17"
},
"heart7_primary": {
"label": "Heart 7 - Primary",
"type": "colorpicker",
"value": "#8bf4e3"
},
"heart7_secondary": {
"label": "Heart 7 - Secondary",
"type": "colorpicker",
"value": "#2dcdb3"
},
"heart7_shine": {
"label": "Heart 7 - Shine",
"type": "colorpicker",
"value": "#d5f8f4"
},
"heart7_outline": {
"label": "Heart 7 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart7_outline_special": {
"label": "Heart 7 - Outline Special",
"type": "colorpicker",
"value": "#66473f"
},
"tier8_background": {
"label": "Tier 8 - Background",
"type": "colorpicker",
"value": "#ffffff"
},
"heart8_primary": {
"label": "Heart 8 - Primary",
"type": "colorpicker",
"value": "#66473f"
},
"heart8_secondary": {
"label": "Heart 8 - Secondary",
"type": "colorpicker",
"value": "#5d332d"
},
"heart8_shine": {
"label": "Heart 8 - Shine",
"type": "colorpicker",
"value": "#98857b"
},
"heart8_outline": {
"label": "Heart 8 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart8_outline_special": {
"label": "Heart 8 - Outline Special",
"type": "colorpicker",
"value": "#ffffff"
}
}
Raw
6 - data.json
{"heart_amount":10,"subs_per_heart":1,"rank_up_point":"at_last","max_tier":"8","bar_bevel":45,"bar_border_style":"solid","bar_border_thickness":15,"bar_border_color":"#292929","animate_type_begin":"shakeY","animate_type_end":"bounce","animate_stop_threshold":5,"animate_duration":1500,"animate_delay":1000,"empty_background":"#000000","empty_primary":"#353535","tier1_background":"#9b4428","heart1_primary":"#ff1313","heart1_secondary":"#bb1313","heart1_shine":"#ffffff","heart1_outline":"#191919","heart1_outline_special":"#e47c56","tier2_background":"#737373","heart2_primary":"#e47c56","heart2_secondary":"#c15938","heart2_shine":"#ffc2b2","heart2_outline":"#191919","heart2_outline_special":"#d9d9d9","tier3_background":"#bc880a","heart3_primary":"#d9d9d9","heart3_secondary":"#a9a9a9","heart3_shine":"#fefefe","heart3_outline":"#191919","heart3_outline_special":"#f5b20f","tier4_background":"#11418f","heart4_primary":"#f5b20f","heart4_secondary":"#bc880a","heart4_shine":"#fbc443","heart4_outline":"#191919","heart4_outline_special":"#5b85df","tier5_background":"#012d01","heart5_primary":"#5b85df","heart5_secondary":"#3061c2","heart5_shine":"#7299ed","heart5_outline":"#191919","heart5_outline_special":"#00ab2e","tier6_background":"#13737c","heart6_primary":"#00ab2e","heart6_secondary":"#007d17","heart6_shine":"#aeffcd","heart6_outline":"#191919","heart6_outline_special":"#2dcdb3","tier7_background":"#401f17","heart7_primary":"#8bf4e3","heart7_secondary":"#2dcdb3","heart7_shine":"#d5f8f4","heart7_outline":"#191919","heart7_outline_special":"#66473f","tier8_background":"#ffffff","heart8_primary":"#66473f","heart8_secondary":"#5d332d","heart8_shine":"#98857b","heart8_outline":"#191919","heart8_outline_special":"#ffffff","widgetName":"Heart Sub Bar","widgetAuthor":"EncryptedThoughts","tier0_background":"#000000","tier0_primary":"#353535","goal_period":"session"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment