.wrapper { height: 100%; width: 100%; display: flex; flex-direction: column; } .container { display: flex; flex-direction: column; align-items: center; height: 100%; width: 100%; margin: auto; justify-content: {{justifyMessages}}; } .message { display: flex; flex-shrink: 0; flex-direction: column; width: calc(100% - 66px); margin: 14px 0; } .message__user { display: flex; align-items: center; align-self: flex-start; justify-self: flex-start; position: relative; margin: 0 0 0 4px; } .badges { display: flex; align-items: center; position: relative; z-index: 10; } .badge { display: inline; height: {{badgeSize}}px; margin: 0 2px 0 0; } .emote { height: {{emoteSize}}px; vertical-align: middle; background-repeat: no-repeat; } .action { font-style: italic; } .username { color: {{userNickColor}}; font-size: {{usernameSize}}px; text-shadow: 0px 0px 1px {{userNickShadowColor}}, 0px 0px 3px {{userNickShadowColor}}, 0px 0px 6px {{userNickShadowColor}}; position: relative; z-index: 150; } .first-message.username { color: {{firstMessageNickColor}}; text-shadow: 0px 0px 1px {{firstMessageNickShadowColor}}, 0px 0px 3px {{firstMessageNickShadowColor}}, 0px 0px 6px {{firstMessageNickShadowColor}}; } .subscriber.username { color: {{subscriberNickColor}}; text-shadow: 0px 0px 1px {{subscriberNickShadowColor}}, 0px 0px 3px {{subscriberNickShadowColor}}, 0px 0px 6px {{subscriberNickShadowColor}}; } .vip.username { color: {{vipNickColor}}; text-shadow: 0px 0px 1px {{vipNickShadowColor}}, 0px 0px 3px {{vipNickShadowColor}}, 0px 0px 6px {{vipNickShadowColor}}; } .moderator.username { color: {{moderatorNickColor}}; text-shadow: 0px 0px 1px {{moderatorNickShadowColor}}, 0px 0px 3px {{moderatorNickShadowColor}}, 0px 0px 6px {{moderatorNickShadowColor}}; } .broadcaster.username { color: {{broadcasterNickColor}}; text-shadow: 0px 0px 1px {{broadcasterNickShadowColor}}, 0px 0px 3px {{broadcasterNickShadowColor}}, 0px 0px 6px {{broadcasterNickShadowColor}}; } .message__body { display: flex; flex-direction: column; background: {{userMessageBackgroundColor}}; border-radius: 8px; padding: 8px 16px; position: relative; } .first-message.message__body { background: {{firstMessageMessageBackgroundColor}}; } .subscriber.message__body { background: {{subscriberMessageBackgroundColor}}; } .vip.message__body { background: {{vipMessageBackgroundColor}}; } .moderator.message__body { background: {{moderatorMessageBackgroundColor}}; } .broadcaster.message__body { background: {{broadcasterMessageBackgroundColor}}; } .text { display: inline; color: {{userMessageColor}}; font-size: {{messageSize}}px; text-shadow: 0px 0px 1px {{userMessageShadowColor}}, 0px 0px 3px {{userMessageShadowColor}}, 0px 0px 6px {{userMessageShadowColor}}; word-wrap: break-word; } .first-message.text { color: {{firstMessageMessageColor}}; text-shadow: 0px 0px 1px {{firstMessageMessageShadowColor}}, 0px 0px 3px {{firstMessageMessageShadowColor}}, 0px 0px 6px {{firstMessageMessageShadowColor}}; } .subscriber.text { color: {{subscriberMessageColor}}; text-shadow: 0px 0px 1px {{subscriberMessageShadowColor}}, 0px 0px 3px {{subscriberMessageShadowColor}}, 0px 0px 6px {{subscriberMessageShadowColor}}; } .vip.text { color: {{vipMessageColor}}; text-shadow: 0px 0px 1px {{vipMessageShadowColor}}, 0px 0px 3px {{vipMessageShadowColor}}, 0px 0px 6px {{vipMessageShadowColor}}; } .moderator.text { color: {{moderatorMessageColor}}; text-shadow: 0px 0px 1px {{moderatorMessageShadowColor}}, 0px 0px 3px {{moderatorMessageShadowColor}}, 0px 0px 6px {{moderatorMessageShadowColor}}; } .broadcaster.text { color: {{broadcasterMessageColor}}; text-shadow: 0px 0px 1px {{broadcasterMessageShadowColor}}, 0px 0px 3px {{broadcasterMessageShadowColor}}, 0px 0px 6px {{broadcasterMessageShadowColor}}; } .custom-badge { position: absolute; background-repeat: no-repeat; background-position: 0 0; height: 100px; width: 100px; z-index: 100; } .subscriber.subscriber-1.custom-badge { top: calc(-3px + {{subscriberBadgeVerticalShiftLevel1}}px); right: calc(-102px + {{subscriberBadgeHorizontalShiftLevel1}}px); background-image: url({{subscriberBadgeLevel1}}); } .subscriber.subscriber-2.custom-badge { top: calc(-3px + {{subscriberBadgeVerticalShiftLevel2}}px); right: calc(-102px + {{subscriberBadgeHorizontalShiftLevel2}}px); background-image: url({{subscriberBadgeLevel2}}); } .subscriber.custom-badge, .subscriber.subscriber-3.custom-badge { top: calc(-3px + {{subscriberBadgeVerticalShiftLevel3}}px); right: calc(-102px + {{subscriberBadgeHorizontalShiftLevel3}}px); background-image: url({{subscriberBadgeLevel3}}); } .vip.custom-badge { top: calc(-11px + {{vipBadgeVerticalShift}}px); right: calc(-92px + {{vipBadgeHorizontalShift}}px); background-image: url({{vipBadge}}); } .moderator.custom-badge { top: calc(-3px + {{moderatorBadgeVerticalShift}}px); right: calc(-105px + {{moderatorBadgeHorizontalShift}}px); background-image: url({{moderatorBadge}}); } .broadcaster.custom-badge { top: calc(-10px + {{broadcasterBadgeVerticalShift}}px); right: calc(-92px + {{broadcasterBadgeHorizontalShift}}px); background-image: url({{broadcasterBadge}}); } .element { position: absolute; background-repeat: no-repeat; background-position: 0 0; height: 100px; width: 100px; z-index: 100; } .element.element-1 { top: -30px; left: -26px; background-image: url("https://cdn.streamelements.com/uploads/4a5c20e1-5608-4b15-a507-77d429b67f4f.png"); } .element.element-2 { top: -22px; right: -76px; background-image: url("https://cdn.streamelements.com/uploads/ae696a3a-ad0c-49c4-9d76-afa222028126.png"); } .first-message.element.element-1 { top: -30px; left: -30px; background-image: url("https://cdn.streamelements.com/uploads/14ad589f-9408-44b8-a3a1-ace82b4eec59.png"); } .first-message.element.element-2 { top: -16px; right: -26px; background-image: url("https://cdn.streamelements.com/uploads/6d015255-6612-4e24-9ffd-e783203943ef.png"); } .first-message.element.element-4 { top: calc(100% - 20px); left: -15px; background-image: url("https://cdn.streamelements.com/uploads/e68bcd3c-c5f1-4a65-af90-e01b0c123cc8.png"); } .first-message.element.element-6 { top: calc(100% - 11px); left: calc(50% - 16px); background-image: url("https://cdn.streamelements.com/uploads/7eaf8323-7507-4762-9101-8187417c6410.png"); } .subscriber.element.element-1 { top: -41px; left: -27px; background-image: url("https://cdn.streamelements.com/uploads/1f894b47-ff31-49c9-978a-590ab085ba1e.png"); } .subscriber.element.element-2 { top: -20px; right: -56px; background-image: url("https://cdn.streamelements.com/uploads/7e4d1d2c-65df-41ed-bef6-1cbf881f57e5.png"); } .vip.element.element-1 { top: -32px; left: -29px; background-image: url("https://cdn.streamelements.com/uploads/9df1052c-9c25-4bc2-b105-773904e29f18.png"); } .vip.element.element-2 { top: -38px; right: -9px; background-image: url("https://cdn.streamelements.com/uploads/41bba790-0fe6-4212-947a-83d404888957.png"); } .vip.element.element-3 { top: -18px; left: calc(50% - 16px); background-image: url("https://cdn.streamelements.com/uploads/4a5c20e1-5608-4b15-a507-77d429b67f4f.png"); } .vip.element.element-4 { top: calc(100% - 20px); left: -14px; background-image: url("https://cdn.streamelements.com/uploads/4a5c20e1-5608-4b15-a507-77d429b67f4f.png"); } .moderator.element.element-1, .broadcaster.element.element-1 { top: -40px; left: -34px; background-image: url("https://cdn.streamelements.com/uploads/fb4cafad-d594-4eee-8bf7-9c97c38e80fb.png"); } .moderator.element.element-2, .broadcaster.element.element-2 { top: -21px; right: -56px; background-image: url("https://cdn.streamelements.com/uploads/7e4d1d2c-65df-41ed-bef6-1cbf881f57e5.png"); } .moderator.element.element-3, .broadcaster.element.element-3 { top: -18px; left: calc(50% - 16px); background-image: url("https://cdn.streamelements.com/uploads/4a5c20e1-5608-4b15-a507-77d429b67f4f.png"); } .alert { display: flex; flex-shrink: 0; flex-direction: column; width: calc(100% - 40px); margin: 16px 0; } .alert__body { display: flex; flex-direction: column; border-radius: 32px; padding: 12px 16px; position: relative; background: {{alertBackgroundColor}}; } .follow.alert__body { background: {{followBackgroundColor}}; } .subscriber.alert__body { background: {{subscribeBackgroundColor}}; } .subscriber.subscriber-resubscribe.alert__body { background: {{resubscribeBackgroundColor}}; } .subscriber.subscriber-gift.alert__body { background: {{giftsubBackgroundColor}}; } .raid.alert__body { background: {{raidBackgroundColor}}; background: linear-gradient(90deg, {{raidBackgroundColor}} 0%, {{raidBackgroundColor2}} 50%, {{raidBackgroundColor3}} 100%); } .alert__text { display: inline; color: {{alertMessageColor}}; font-size: {{alertMessageSize}}px; word-wrap: break-word; text-align: center; } .follow.alert__text { color: {{followMessageColor}}; } .subscriber.alert__text { color: {{subscribeMessageColor}}; } .subscriber.subscriber-resubscribe.alert__text { color: {{resubscribeMessageColor}}; } .subscriber.subscriber-gift.alert__text { color: {{giftsubMessageColor}}; } .raid.alert__text { color: {{raidMessageColor}}; } .alert__element { position: absolute; background-repeat: no-repeat; background-position: 0 0; height: 100px; width: 100px; z-index: 100; } .alert__element.alert__element-10 { top: 2px; left: 2px; height: calc(100% - 4px); width: calc(100% - 4px); z-index: 99; border-radius: 32px; border: solid 1px {{alertBorderColor}}; } .follow.alert__element.alert__element-1 { top: -14px; left: 37px; background-image: url("https://cdn.streamelements.com/uploads/cf2a2abb-ac17-46e8-823b-44cecff5f90d.png"); } .follow.alert__element.alert__element-2 { top: -14px; right: -27px; background-image: url("https://cdn.streamelements.com/uploads/cf2a2abb-ac17-46e8-823b-44cecff5f90d.png"); } .follow.alert__element.alert__element-3 { top: -14px; left: calc(50% - 16px); background-image: url("https://cdn.streamelements.com/uploads/cf2a2abb-ac17-46e8-823b-44cecff5f90d.png"); } .follow.alert__element.alert__element-4 { top: calc(100% - 24px); left: 5px; background-image: url("https://cdn.streamelements.com/uploads/d82c1a30-4dbc-41ed-9266-7056c23f71c7.png"); } .follow.alert__element.alert__element-5 { top: calc(100% - 26px); right: -50px; background-image: url("https://cdn.streamelements.com/uploads/d82c1a30-4dbc-41ed-9266-7056c23f71c7.png"); } .follow.alert__element.alert__element-10 { border-color: {{followBorderColor}}; } .subscriber.alert__element.alert__element-1 { top: -18px; left: 90px; background-image: url("https://cdn.streamelements.com/uploads/78c0e210-ca01-4b80-b057-0b1704d8e005.png"); } .subscriber.alert__element.alert__element-2 { top: -18px; right: 20px; background-image: url("https://cdn.streamelements.com/uploads/cf9cc25d-3c3c-4240-a329-b7c806cc2900.png"); } .subscriber.alert__element.alert__element-3 { top: -20px; left: calc(50% - 21px); background-image: url("https://cdn.streamelements.com/uploads/992253b8-0615-4ba0-a249-7357eeb8889d.png"); } .subscriber.alert__element.alert__element-4 { top: calc(100% - 39px); left: -11px; background-image: url("https://cdn.streamelements.com/uploads/65330c88-24c1-4f1a-83fb-4ebb3bc916dc.png"); } .subscriber.alert__element.alert__element-5 { top: calc(100% - 51px); right: -68px; background-image: url("https://cdn.streamelements.com/uploads/af3849dc-d734-4d7c-9e65-37757f51fbfa.png"); } .subscriber.alert__element.alert__element-6 { top: calc(100% - 30px); left: calc(50% - 46px); background-image: url("https://cdn.streamelements.com/uploads/17e2811e-af3f-44f5-803d-4052c6248405.png"); } .subscriber.alert__element.alert__element-10 { border-color: {{subscribeBorderColor}}; } .subscriber.subscriber-resubscribe.alert__element.alert__element-2 { top: -18px; right: -4px; background-image: url("https://cdn.streamelements.com/uploads/ee57f749-42fb-4200-a9cc-2ddd346ba352.png"); } .subscriber.subscriber-resubscribe.alert__element.alert__element-3 { top: -22px; left: calc(50% - 26px); background-image: url("https://cdn.streamelements.com/uploads/5d895ad6-1438-4406-bfc2-696e3d4009de.png"); } .subscriber.subscriber-resubscribe.alert__element.alert__element-6 { top: calc(100% - 19px); left: 50px; background-image: url("https://cdn.streamelements.com/uploads/5ec6252d-0543-4dec-8bd6-b8b2a1883925.png"); } .subscriber.subscriber-resubscribe.alert__element.alert__element-10 { border-color: {{resubscribeBorderColor}}; } .subscriber.subscriber-gift.alert__element.alert__element-2 { top: -18px; right: 5px; background-image: url("https://cdn.streamelements.com/uploads/715bd775-0151-430c-bade-a5ffdf269b39.png"); } .subscriber.subscriber-gift.alert__element.alert__element-3 { top: -28px; left: calc(50% - 20px); background-image: url("https://cdn.streamelements.com/uploads/385fd873-5e70-4725-bd51-4a18fd496024.png"); } .subscriber.subscriber-gift.alert__element.alert__element-6 { top: calc(100% - 19px); left: 60px; background-image: url("https://cdn.streamelements.com/uploads/c457cfd0-7d49-49a7-ba68-c6d2aad8ddfa.png"); } .subscriber.subscriber-gift.alert__element.alert__element-10 { border-color: {{giftsubBorderColor}}; } .raid.alert__element.alert__element-1 { top: -34px; left: -14px; background-image: url("https://cdn.streamelements.com/uploads/b1dabc64-9d41-40b6-9853-e037bb1c0b70.png"); } .raid.alert__element.alert__element-2 { top: -33px; right: -39px; background-image: url("https://cdn.streamelements.com/uploads/08f2c863-392d-40fc-a33e-7a3ec8335623.png"); } .raid.alert__element.alert__element-3 { top: -17px; left: calc(50% - 19px); background-image: url("https://cdn.streamelements.com/uploads/4b282a59-2858-4080-860a-efcd12ef886c.png"); } .raid.alert__element.alert__element-4 { top: calc(100% - 8px); left: 91px; background-image: url("https://cdn.streamelements.com/uploads/c7e78d2c-31b1-490b-837a-df565a246a87.png"); } .raid.alert__element.alert__element-5 { top: calc(100% - 28px); right: -82px; background-image: url("https://cdn.streamelements.com/uploads/9393c491-d2ba-41ec-b4ef-828edf190227.png"); } .raid.alert__element.alert__element-10 { border-color: {{raidBorderColor}}; }