F2U ~ Heart Shaped Chat Widget ~ for StreamElements
Source: https://ko-fi.com/s/76ed4108a5
Check them out and support them for this great widget!
This repository has some changes made in original code, to make it easier to change colors of the widget to make it fit your stream asthetics!
Colors mapping
Message Icons
Streamer
js.js > colorSettings.streamerIconColor
Mod
js.js > colorSettings.modIconColor
VIP
js.js > colorSettings.vipIconColor
Sub
js.js > colorSettings.subIconColor
Streamer's Messages
css.css > --rouded-corners-and-heart-next-to-username-color
css.css > --top-right-heart-and-bottom-left-heart-color
css.css > --top-and-bottom-border-lines-color
js.js > colorSettings.streamerRightBorderColor
Non-Streamer's Messages
js.js > colorSettings.messageMentionedUsernameColor
js.js > colorSettings.nonStreamerHeartTopLeftColor
js.js > colorSettings.heartInChatBubbleOnTheRightColor
js.js > colorSettings.nonStreamerTopRightCornerColor
js.js > colorSettings.nonStreamerBottomRightCornerColor
js.js > colorSettings.nonStreamerBottomLeftCornerColor
js.js > colorSettings.nonStreamerHeartBottomLeftColor
css.css > --right-border-color
css.css > --bottom-border-color
css.css > --top-border-color
css.css > --top-right-border-piece-color
All Messages
js.js > colorSettings.cornerPieceUnderBadgeColor
js.js > colorSettings.messageMentionedUsernameColor
css.css > --background-gradient-top-color
css.css > --background-gradient-bottom-color
css.css > --message-text-color
css.css > --mod-icon-background-color
css.css > --username-bubble-background-color
css.css > --username-bubble-text-color
Events
js.js > colorSettings.eventBorderTopRightCornerColor
js.js > colorSettings.eventBorderTopLeftCornerColor
js.js > colorSettings.eventBorderBottomRightCornerColor
js.js > colorSettings.eventBorderBottomLeftCornerColor
js.js > colorSettings.eventTopLeftHeartColor
js.js > colorSettings.eventTopRightHeartColor
js.js > colorSettings.eventBottomHeartColor
js.js > colorSettings.eventLeftHeartColor
js.js > colorSettings.eventBackgroundLeftEnvelopeInsidesColor
js.js > colorSettings.eventBackgroundLeftEnvelopeOuterBorderColor
js.js > colorSettings.eventBackgroundLeftEnvelopeBottomLeftInsideLineColor
js.js > colorSettings.eventBackgroundLeftEnvelopeBottomRightInsideLineColor
js.js > colorSettings.eventBackgroundLeftEnvelopeInsideTopLinesColor
js.js > colorSettings.eventBackgroundRightEnvelopeInsidesColor
js.js > colorSettings.eventBackgroundRightEnvelopeOuterBorderColor
js.js > colorSettings.eventBackgroundRightEnvelopeBottomLeftInsideLineColor
js.js > colorSettings.eventBackgroundRightEnvelopeBottomRightInsideLineColor
js.js > colorSettings.eventBackgroundRightEnvelopeInsideTopLinesColor
js.js > colorSettings.eventBackgroundLeftHeartColor
js.js > colorSettings.eventBackgroundLeftWhiskersColor
js.js > colorSettings.eventBackgroundRightWhiskersColor
When subscribed:
js.js > colorSettings.eventBackgroundSubscribeHeartLeftColor
When re-subscribed:
js.js > colorSettings.eventBackgroundReSubscribeHeartLeftColor
When gifted more than one sub:
js.js > colorSettings.eventBackgroundGiftManyHeartLeftColor
When gifted one sub:
js.js > colorSettings.eventBackgroundGiftOneHeartLeftColor
When giving bits:
js.js > colorSettings.eventBackgroundCheerHeartLeftColor
When donating:
js.js > colorSettings.eventBackgroundDonationHeartLeftColor
When subscribed:
js.js > colorSettings.eventBackgroundSubscribeHeartRightColor
When re-subscribed:
js.js > colorSettings.eventBackgroundReSubscribeHeartRightColor
When gifted more than one sub:
js.js > colorSettings.eventBackgroundGiftManyHeartRightColor
When gifted one sub:
js.js > colorSettings.eventBackgroundGiftOneHeartRightColor
When giving bits:
js.js > colorSettings.eventBackgroundCheerHeartRightColor
When donating:
js.js > colorSettings.eventBackgroundDonationHeartRightColor
css.css > --event-background-gradient-top-color
css.css > --event-background-gradient-bottom-color
css.css > --event-right-border-color
css.css > --event-icon-background-color
css.css > --event-text-color
css.css > --event-top-center-border-color
css.css > --event-top-right-border-color
css.css > --event-bottom-left-border-color
css.css > --event-bottom-right-border-color
css.css > --event-left-top-border-color
css.css > --event-left-bottom-border-color
