diff --git a/chat.html b/chat.html index 1506442..3a26076 100644 --- a/chat.html +++ b/chat.html @@ -1,4 +1,3 @@ - @@ -55,11 +54,33 @@
+
+
+ + +
+
+ + +
+
+ + + Chat only.
Needs setup!
Read More +
+
+ + + Chat only.
Needs setup!
Read More +
+
+
+
diff --git a/css/app.css b/css/app.css index 07a2dde..e52784c 100644 --- a/css/app.css +++ b/css/app.css @@ -576,19 +576,29 @@ body { } #chat-input #chat-input-send { + right: 60px; +} + +#chat-input #chat-input-settings { right: 20px; } #chat-input .settings { - display: inline-block; + display: none; background: #0c0c0c; - padding: 10px; + padding: 10px 20px; border-radius: 10px; position: absolute; - top: -55px; + top: -75px; right: 0px; z-index: 11; + + box-shadow: 0 0 10px rgba(255,255,255,0.05) +} + +#chat-input .settings.active { + display: inline-block; } #chat-input .settings::after { @@ -625,6 +635,16 @@ body { height: 27px; } +#chat-input .settings .hint { + color: #FFF; + font-size: 12px; +} + +#chat-input .settings .hint a { + color: #ffcc00; + font-weight: bold; +} + /* Hide default HTML checkbox */ #chat-input .settings .switch input[type=checkbox] { opacity: 1; @@ -668,7 +688,9 @@ body { #chat-input #youtube input[type=checkbox]:checked + .slider { background-color: #FF0000; } - +#chat-input #tiktok input[type=checkbox]:checked + .slider { + background-color: #ff0050; +} #chat-input #kick input[type=checkbox]:checked + .slider { background-color: #48d415; } @@ -716,7 +738,6 @@ body { #chat-autocomplete-list div.autocomplete-item { cursor: pointer; - transition: all ease-in-out 300ms; } #chat-autocomplete-list div:not(.autocomplete-item) { @@ -821,4 +842,4 @@ body { width: 18px; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5)); } -} \ No newline at end of file +} diff --git a/css/settings.css b/css/settings.css index e6ed3f4..18fe4a4 100644 --- a/css/settings.css +++ b/css/settings.css @@ -11,7 +11,6 @@ body { background-color: #121212; color: #FFF; text-align: center; - padding: 30px; font-size: 16px; } @@ -22,12 +21,69 @@ hr { margin: 20px 0; } +h2 { + font-size: 20px; + padding: 15px 30px; + border-bottom: 1px solid #222; + margin: 15px 0 0 0; + text-align: left; + position: relative; +} + +h2 i { + margin-right: 5px; +} + +h2 svg { + width: 26px; + vertical-align: bottom; + fill: #FFF; +} + +h2 img { + width: 26px; + vertical-align: bottom; +} + +h2 button { + display: none; + + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + + border: none; + background: black; + text-align: center; + color: #FFF; + cursor: pointer; + + font-size: 16px; + padding: 10px; + border-radius: 100px; +} + +h2 button i { + margin: 0; + transition: transform 0.3s ease; +} + + +.accordion-container { + /*max-height: 0; + overflow: hidden;*/ + transition: max-height 0.4s ease; +} + + #chat-divided { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 30px; + padding: 30px; } #chat-settings { width: 640px; } @@ -56,16 +112,6 @@ hr { } .url-bar input[type=text] { - /*font-family: "Inter", sans-serif; - border: none; - background: #171717; - color: #FFF; - padding: 15px 30px; - border-radius: 10px; - width: 100%; - text-align: center; - outline: none; - font-size: 14px;*/ display: none; } @@ -90,33 +136,20 @@ hr { } .tab-content { - padding: 20px 30px; - border-radius: 20px; + border-radius: 0 0 20px 20px; background: #171717; - margin: 20px auto; + margin: 0 auto; text-align: left; + margin: 0 0 30px 0; } -.tab-content h2 { - margin-bottom: 15px; - font-size: 20px; - padding: 15px 0px; - border-bottom: 1px solid #222; +.tab-content .wrapper { + padding: 20px 30px; } -.tab-content h2 i { - margin-right: 5px; -} - -.tab-content h2 svg { - width: 26px; - vertical-align: bottom; - fill: #FFF; -} - -.tab-content h2 img { - width: 26px; - vertical-align: bottom; +/* When visible */ +.tab-content.open { + display: block; } .tab-content .setting { diff --git a/index.html b/index.html index 4f112f4..88272dd 100644 --- a/index.html +++ b/index.html @@ -19,274 +19,329 @@

ChatRD - Setup

+

Config

-

Config

- -
- - - Streamer.Bot is Offline! - -
- -
-
- -
- -
Speaker.Bot is required for Text-to-Speech! Follow the tutorial.
- -
- -
- -
-
- -
-

General

-
- - -
- -
- - -
- -
- -
- -
- -
- -
The Chat Field is a BETA feature!
- -
- -
- -
The Chat Field also accepts /commands. Commands Supported.
- -
- -
Moderation is a BETA feature!
- -
- -
- -
Moderation Actions follows the Commands suported. Read More.
- -
- -
- - -
- -
- - -
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-

Twitch

-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

YouTube

-
-
-
- -
- -
- -
-
-
-
- -
- -
YouTube API doesn't expose Member Emotes. Read more.
- -
- - -
-