diff --git a/README.md b/README.md index 431aae2..08745de 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # 💬 ChatRD -ChatRD is a chat overlay widget for OBS that unifies messages and events from **Twitch**, **YouTube**, **TikTok**, **Kick** (and more to come). +ChatRD is a chat overlay widget for OBS that unifies messages and events from **Twitch**, **YouTube**, **TikTok**, **Kick**, **Streamlabs**, **StreamElements**, **Patreon**, **TipeeeStream**, **Ko-Fi**, **Fourthwall** (and more to come). ![ChatRD Config UI](https://i.imgur.com/kDYPY1g.png) @@ -29,6 +29,7 @@ Make sure your **Twitch** and **YouTube** accounts are connected on **Streamer.B 6. Choose your desired options. 7. Click **"Copy URL"**. 8. Add the copied URL as a Browser Source in OBS. Or use it in your browser to read chat. 😊 +9. For **Streamlabs**, **StreamElements**, **Patreon**, **TipeeeStream**, **Ko-Fi** and **Fourthwall**, you need to connect them to your Streamer.Bot account to their website. Follow the tutorial links in each section presented in the [Settings Page](https://vortisrd.github.io/chatrd). ### Kick.Bot installation on Streamer.Bot @@ -92,10 +93,6 @@ Also, at any point either **Kick** or **Kick.Bot** might change their stuff, so ## 📝 To-Do List - Trovo -- Patreon -- Ko-Fi -- TipeeeStream -- Fourthwall - LivePix - Tipa.Ai diff --git a/chat.html b/chat.html index 7c0d0a0..b481ea0 100644 --- a/chat.html +++ b/chat.html @@ -70,6 +70,10 @@ + + + + diff --git a/css/app.css b/css/app.css index a026c14..f3fb9c8 100644 --- a/css/app.css +++ b/css/app.css @@ -360,6 +360,84 @@ body { +#chat .message.patreon.event > div { + background: #ff5900; + background: linear-gradient(180deg,rgba(255, 89, 0, 1) 0%, rgba(199, 70, 0, 1) 100%); +} + + + + + + + +#chat .message.tipeeestream.event > div { + background: #E02F44; + background: linear-gradient(180deg,rgba(224, 47, 68, 1) 0%, rgba(140, 35, 47, 1) 100%); +} + + + + + + + +#chat .message.kofi.event > div { + background: #72A5F2; + background: linear-gradient(180deg,rgba(114, 165, 242, 1) 0%, rgba(81, 115, 166, 1) 100%); +} + + + + + + + + +#chat .message.fourthwall.event.order > div .platform { order: 1; } +#chat .message.fourthwall.event.order > div .image { + order: 2; + width: max-content; + height: 72px; + filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.25)); + padding: 5px 10px 5px 0; +} +#chat .message.fourthwall.event.order > div .image img { + width: max-content; + height: 100%; + border-radius: 5px; +} +#chat .message.fourthwall.event.order > div .info { order: 3; } +#chat .message.fourthwall.event.order.giantimage > div { + flex-wrap: wrap; +} +#chat .message.fourthwall.event.order.giantimage > div .platform { order: 2; } +#chat .message.fourthwall.event.order.giantimage > div .image { + order: 1; + flex: 0 0 100%; + height: 202px; + text-align: center; + margin: 10px 0; +} +#chat .message.fourthwall.event.order.giantimage > div .image img { + width: max-content; + height: 192px; +} +#chat .message.fourthwall.event.order.giantimage > div .info { order: 3; } + +#chat .message.fourthwall.event > div { + background: #0044ff; + background: linear-gradient(180deg,rgba(0, 68, 255, 1) 0%, rgba(0, 47, 176, 1) 100%); +} + + + + + + + + + #chat.horizontal { display: flex; diff --git a/css/settings.css b/css/settings.css index 03e6a2a..95c105e 100644 --- a/css/settings.css +++ b/css/settings.css @@ -37,12 +37,12 @@ a { color: #ffcc00; } } .url-bar { - margin: 20px 0; + margin: 0 0 20px 0; font-size: 16px; } .url-bar input[type=text] { - font-family: "Inter", sans-serif; + /*font-family: "Inter", sans-serif; border: none; background: #171717; color: #FFF; @@ -51,7 +51,8 @@ a { color: #ffcc00; } width: 100%; text-align: center; outline: none; - font-size: 14px; + font-size: 14px;*/ + display: none; } @@ -99,6 +100,11 @@ a { color: #ffcc00; } fill: #FFF; } +.tab-content h2 img { + width: 26px; + vertical-align: bottom; +} + .tab-content .setting { display: flex; justify-content: space-between; @@ -292,10 +298,29 @@ a { color: #ffcc00; } background-color: #00dd63; } +.tab-content#patreon .setting input[type=checkbox]:checked + .slider { + background-color: #ff5900; +} + +.tab-content#tipeee .setting input[type=checkbox]:checked + .slider { + background-color: #e02f44; +} + +.tab-content#kofi .setting input[type=checkbox]:checked + .slider { + background-color: #72a5f2; +} + +.tab-content#fourthwall .setting input[type=checkbox]:checked + .slider { + background-color: #0042ff; +} + .tab-content .setting input[type=checkbox]:disabled + .slider { background-color: #000 !important; } + + + #font-value { display: inline-block; font-style: normal; @@ -331,6 +356,11 @@ footer a svg { fill: #ffcc00; } +footer a img { + width: 24px; + vertical-align: bottom; +} + footer .nav-bar { display: inline-flex; flex-direction: row; diff --git a/images/logo-fourthwall.svg b/images/logo-fourthwall.svg new file mode 100644 index 0000000..b517914 --- /dev/null +++ b/images/logo-fourthwall.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/images/logo-kofi.svg b/images/logo-kofi.svg new file mode 100644 index 0000000..1fa0451 --- /dev/null +++ b/images/logo-kofi.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/logo-patreon.svg b/images/logo-patreon.svg new file mode 100644 index 0000000..eb0d6ae --- /dev/null +++ b/images/logo-patreon.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/images/logo-tipeeestream.svg b/images/logo-tipeeestream.svg new file mode 100644 index 0000000..b321836 --- /dev/null +++ b/images/logo-tipeeestream.svg @@ -0,0 +1,13 @@ + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 59a8a39..9c787cf 100644 --- a/index.html +++ b/index.html @@ -151,7 +151,7 @@ Kick -
This is a BETA feature! Read more.
+
This is a BETA feature! Read more.
@@ -176,24 +176,94 @@

Donations

+ +
You need to connect Streamlabs to Streamer.Bot. Follow the tutorial.
+ +
+ +
You need to connect StreamElements to Streamer.Bot. Follow the tutorial.
+ +
+
+
+

Patreon

+ +
You need to connect Patreon to Streamer.Bot. Follow the tutorial.
+ +
+ +
+
+ +
+

TipeeeStream

+ +
You need to connect TipeeeStream to Streamer.Bot. Follow the tutorial.
+ +
+ +
+
+ +
+

Ko-Fi

+ +
You need to connect Ko-Fi to Streamer.Bot. Follow the tutorial.
+ +
+ +
+
+
+
+ +
+

Fourthwall

+ +
You need to connect Fourthwall to Streamer.Bot. Follow the tutorial.
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+
+ +
+ +
+
+