From 98c2213a862b253f8f967f428b0b248bbe3a32f7 Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Sat, 8 Mar 2025 17:25:56 +0100 Subject: [PATCH 1/8] Fix rounded corners on follow-up messages --- src/snek/static/base.css | 374 ++++++++++++++++++++------------------- 1 file changed, 191 insertions(+), 183 deletions(-) diff --git a/src/snek/static/base.css b/src/snek/static/base.css index 4405785..bcdc1d1 100644 --- a/src/snek/static/base.css +++ b/src/snek/static/base.css @@ -1,183 +1,189 @@ * { - margin: 0; - box-sizing: border-box; + margin: 0; + box-sizing: border-box; } .gallery { - padding: 50px; - height: auto; - overflow: auto; - flex: 1; + padding: 50px; + height: auto; + overflow: auto; + flex: 1; } .gallery.tile, .tile { - width: 100px; - height: 100px; - object-fit: cover; - margin: 20px 10px 20px 0; - border-radius: 5px; + width: 100px; + height: 100px; + object-fit: cover; + margin: 20px 10px 20px 0; + border-radius: 5px; } body { - font-family: Arial, sans-serif; - background-color: #1a1a1a; - color: #e6e6e6; - line-height: 1.5; - display: flex; - flex-direction: column; - height: 100vh; - min-width: 100%; + font-family: Arial, sans-serif; + background-color: #1a1a1a; + color: #e6e6e6; + line-height: 1.5; + display: flex; + flex-direction: column; + height: 100vh; + min-width: 100%; } main { - display: flex; - flex: 1; - overflow: hidden; + display: flex; + flex: 1; + overflow: hidden; } header { - background-color: #0f0f0f; - padding: 10px 20px; - display: flex; - justify-content: space-between; - align-items: center; + background-color: #0f0f0f; + padding: 10px 20px; + display: flex; + justify-content: space-between; + align-items: center; } header .logo { - color: #fff; - font-size: 1.5em; - font-weight: bold; + color: #fff; + font-size: 1.5em; + font-weight: bold; } header nav a { - color: #aaa; - text-decoration: none; - margin-left: 15px; - font-size: 1em; - transition: color 0.3s; + color: #aaa; + text-decoration: none; + margin-left: 15px; + font-size: 1em; + transition: color 0.3s; } .no-select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } header nav a:hover { - color: #fff; + color: #fff; } a { - font-weight: bold; - color: #f05a28; - margin-bottom: 3px; + font-weight: bold; + color: #f05a28; + margin-bottom: 3px; } .chat-area { - flex: 1; - display: flex; - flex-direction: column; - background-color: #1a1a1a; - overflow: hidden; + flex: 1; + display: flex; + flex-direction: column; + background-color: #1a1a1a; + overflow: hidden; } .chat-header { - padding: 10px 20px; - background-color: #0f0f0f; - border-bottom: 1px solid #333; - user-select: none; + padding: 10px 20px; + background-color: #0f0f0f; + border-bottom: 1px solid #333; + user-select: none; } .chat-header h2 { - font-size: 1.2em; - color: #fff; + font-size: 1.2em; + color: #fff; } .message-list { - flex: 1; - height: 200px; - padding-bottom: 40px; - overflow-y: auto; + flex: 1; + height: 200px; + padding-bottom: 40px; + overflow-y: auto; } .chat-messages, .threads { - flex: 1; - overflow-y: scroll; - scrollbar-width: none; - -ms-overflow-style: none; - padding: 10px; - height: 200px; - background: #1a1a1a; + flex: 1; + overflow-y: scroll; + scrollbar-width: none; + -ms-overflow-style: none; + padding: 10px; + height: 200px; + background: #1a1a1a; } + .container { - flex: 1; - padding: 10px; - ul { - list-style: none; - margin: 0; - padding: 0; - } - a { + flex: 1; + padding: 10px; + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + a { font-size: 20px; color: #f05a28; - } - + } + } .chat-messages::-webkit-scrollbar { - display: none; + display: none; } .chat-messages .message, .threads .thread { - display: flex; - align-items: flex-start; - margin-bottom: 0; - padding: 5px; - border-radius: 8px; + display: flex; + align-items: flex-start; + margin-bottom: 0; + padding: 5px; + border-radius: 8px; } .chat-messages .message .avatar, .threads .thread .avatar { - width: 40px; - height: 40px; - border-radius: 50%; - background: #f05a28; - color: #fff; - font-size: 1em; - font-weight: bold; - display: flex; - justify-content: center; - align-items: center; - margin-right: 15px; + width: 40px; + height: 40px; + border-radius: 50%; + background: #f05a28; + color: #fff; + font-size: 1em; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; + margin-right: 15px; } .chat-messages .message .message-content, .threads .thread .message-content { - flex: 1; + flex: 1; } .chat-messages .message .message-content .author, .threads .thread .message-content .author { - font-weight: bold; - color: #f05a28; - margin-bottom: 3px; + font-weight: bold; + color: #f05a28; + margin-bottom: 3px; } + * { -word-break: break-word; - overflow-wrap: break-word; + word-break: break-word; + overflow-wrap: break-word; hyphens: auto; } + .highlight pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; hyphens: auto; - } +} + .chat-messages .message .message-content .text, .threads .thread .message-content .text { - margin-bottom: 5px; - color: #e6e6e6; - word-break: break-word; - overflow-wrap: break-word; -hyphens: auto; + margin-bottom: 5px; + color: #e6e6e6; + word-break: break-word; + overflow-wrap: break-word; + hyphens: auto; } .message-content { @@ -187,151 +193,153 @@ hyphens: auto; .message-content { img, video, iframe, div { - max-width: 100%; + max-width: 90%; + border-radius: 20px; } } .chat-messages .message .message-content .time, .threads .thread .message-content .time { - font-size: 0.8em; - color: #aaa; + font-size: 0.8em; + color: #aaa; } .chat-input { - padding: 15px; - background-color: #121212; - display: flex; - align-items: center; - border-top: 1px solid #333; + padding: 15px; + background-color: #121212; + display: flex; + align-items: center; + border-top: 1px solid #333; } input[type="text"], .chat-input textarea { - flex: 1; - background-color: #1a1a1a; - color: white; - border: none; - padding: 10px; - border-radius: 5px; - resize: none; + flex: 1; + background-color: #1a1a1a; + color: white; + border: none; + padding: 10px; + border-radius: 5px; + resize: none; } .chat-input upload-button { - background-color: #f05a28; - color: white; - border: none; - padding: 10px 15px; - margin-left: 10px; - border-radius: 5px; - cursor: pointer; - font-size: 1em; - transition: background-color 0.3s; + background-color: #f05a28; + color: white; + border: none; + padding: 10px 15px; + margin-left: 10px; + border-radius: 5px; + cursor: pointer; + font-size: 1em; + transition: background-color 0.3s; } .chat-input button:hover { - background-color: #e04924; + background-color: #e04924; } @media (max-width: 768px) { - .sidebar { - display: none; - } + .sidebar { + display: none; + } } .message { - .text { - max-width: 100%; - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; - } + .text { + max-width: 100%; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + } - .avatar { - opacity: 0; - } + .avatar { + opacity: 0; + } - .author, .time { - display: none; - } + .author, .time { + display: none; + } } .message.switch-user { - .text img,iframe, video { - max-width: 90%; - border-radius: 20px; - } - - .avatar { - user-select: none; - opacity: 1; - } + .text img, iframe, video { + max-width: 90%; + border-radius: 20px; + } - .author { - display: block; - } + .avatar { + user-select: none; + opacity: 1; + } + + .author { + display: block; + } } -.message:has(+ .message.switch-user), .message:last-child{ +.message:has(+ .message.switch-user), .message:last-child { .time { - display: block; -} + display: block; + } } /* The entire scrollbar */ ::-webkit-scrollbar { - display:none; + display: none; } ::-webkit-scrollbar-track { - background: #f1f1f1; + background: #f1f1f1; } ::-webkit-scrollbar-thumb { - background-color: #888; - border-radius: 3px; - border: 1px solid #f1f1f1; + background-color: #888; + border-radius: 3px; + border: 1px solid #f1f1f1; } ::-webkit-scrollbar-thumb:hover { - background-color: #555; + background-color: #555; } .chat-messages, .threads { - scrollbar-width: none; - scrollbar-color: #888 #f1f1f1; + scrollbar-width: none; + scrollbar-color: #888 #f1f1f1; } a { - text-decoration:none + text-decoration: none } + .sidebar { - width: 250px; - background-color: #121212; - padding: 20px; - overflow-y: auto; - border-right: 1px solid #333; + width: 250px; + background-color: #121212; + padding: 20px; + overflow-y: auto; + border-right: 1px solid #333; } .sidebar h2 { - color: #f05a28; - font-size: 1.2em; - margin-bottom: 20px; + color: #f05a28; + font-size: 1.2em; + margin-bottom: 20px; } .sidebar ul { - list-style: none; + list-style: none; } .sidebar ul li { - margin-bottom: 15px; + margin-bottom: 15px; } .sidebar ul li a { - color: #ccc; - text-decoration: none; - font-size: 1em; - transition: color 0.3s; + color: #ccc; + text-decoration: none; + font-size: 1em; + transition: color 0.3s; } .sidebar ul li a:hover { - color: #fff; + color: #fff; } From 6ecd356cc08e17596ff6b5007c46def2bc17c851 Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Sat, 8 Mar 2025 18:04:53 +0100 Subject: [PATCH 2/8] Made improvement to page titles (mainly setting a default, login and regsiter) --- src/snek/templates/base.html | 29 ++++++++++++++--------------- src/snek/templates/login.html | 8 ++++++-- src/snek/templates/register.html | 10 +++++++--- 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/snek/templates/base.html b/src/snek/templates/base.html index 36a012c..0785366 100644 --- a/src/snek/templates/base.html +++ b/src/snek/templates/base.html @@ -1,26 +1,25 @@ - - - {% block title %}{% endblock %} - - - - - + + + {% block title %}Snek chat by Molodetz{% endblock %} + + + + + - - + -
- {% block header %} - {% endblock %} +
+ {% block header %} + {% endblock %} -
-
+
+
{% block main %} {% endblock %}
diff --git a/src/snek/templates/login.html b/src/snek/templates/login.html index 0a6bcc1..0ffc379 100644 --- a/src/snek/templates/login.html +++ b/src/snek/templates/login.html @@ -1,7 +1,11 @@ {% extends "base.html" %} +{% block title %} + Login - Snek chat by Molodetz +{% endblock %} + {% block main %} - - + + {% endblock %} diff --git a/src/snek/templates/register.html b/src/snek/templates/register.html index f8d1067..2b783a7 100644 --- a/src/snek/templates/register.html +++ b/src/snek/templates/register.html @@ -1,7 +1,11 @@ {% extends "base.html" %} +{% block title %} + Register - Snek chat by Molodetz +{% endblock %} + {% block main %} - - - + + + {% endblock %} \ No newline at end of file From 804556b74d8caa5e3a79a03cd1a8d7870843b898 Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Sat, 8 Mar 2025 18:09:14 +0100 Subject: [PATCH 3/8] Fixed issues with auto complete not working correctly with form sync --- src/snek/static/generic-form.js | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/src/snek/static/generic-form.js b/src/snek/static/generic-form.js index 730d70a..e71d817 100644 --- a/src/snek/static/generic-form.js +++ b/src/snek/static/generic-form.js @@ -62,7 +62,7 @@ class GenericField extends HTMLElement { constructor() { super(); - this.attachShadow({ mode: 'open' }); + this.attachShadow({mode: 'open'}); this.container = document.createElement('div'); this.styleElement = document.createElement('style'); this.styleElement.innerHTML = ` @@ -165,18 +165,26 @@ class GenericField extends HTMLElement { const me = this; this.inputElement.addEventListener("keyup", (e) => { if (e.key === 'Enter') { + const event = new CustomEvent("change", {detail: me, bubbles: true}); + me.dispatchEvent(event); + me.dispatchEvent(new Event("submit")); } else if (me.field.value !== e.target.value) { - const event = new CustomEvent("change", { detail: me, bubbles: true }); + const event = new CustomEvent("change", {detail: me, bubbles: true}); me.dispatchEvent(event); } }); this.inputElement.addEventListener("click", (e) => { - const event = new CustomEvent("click", { detail: me, bubbles: true }); + const event = new CustomEvent("click", {detail: me, bubbles: true}); me.dispatchEvent(event); }); + this.inputElement.addEventListener("blur", (e) => { + const event = new CustomEvent("change", {detail: me, bubbles: true}); + me.dispatchEvent(event); + }, true); + this.container.appendChild(this.inputElement); } @@ -226,7 +234,7 @@ class GenericForm extends HTMLElement { constructor() { super(); - this.attachShadow({ mode: 'open' }); + this.attachShadow({mode: 'open'}); this.styleElement = document.createElement("style"); this.styleElement.innerHTML = ` @@ -307,6 +315,16 @@ class GenericForm extends HTMLElement { } } }); + + fieldElement.addEventListener("submit", async (e) => { + const isValid = await this.validate(); + if (isValid) { + const saveResult = await this.submit(); + if (saveResult.redirect_url) { + window.location.pathname = saveResult.redirect_url; + } + } + }) }); } catch (error) { @@ -322,7 +340,7 @@ class GenericForm extends HTMLElement { headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ "action": "validate", "form": this.form }) + body: JSON.stringify({"action": "validate", "form": this.form}) }); const form = await response.json(); @@ -353,7 +371,7 @@ class GenericForm extends HTMLElement { headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ "action": "submit", "form": this.form }) + body: JSON.stringify({"action": "submit", "form": this.form}) }); return await response.json(); } From 7c22a70722db3fa97a813c30c01c4cd5462138eb Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Sat, 8 Mar 2025 18:25:15 +0100 Subject: [PATCH 4/8] Added additional meta info to base.html --- src/snek/templates/base.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/snek/templates/base.html b/src/snek/templates/base.html index 0785366..1e89c50 100644 --- a/src/snek/templates/base.html +++ b/src/snek/templates/base.html @@ -3,7 +3,15 @@ + + + + + + + {% block title %}Snek chat by Molodetz{% endblock %} + From c9113ca09500c5b3cc277fb09b9607a505d39f30 Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Sat, 8 Mar 2025 18:56:55 +0100 Subject: [PATCH 5/8] Tweaked form input styling --- src/snek/static/generic-form.js | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/snek/static/generic-form.js b/src/snek/static/generic-form.js index e71d817..11647dc 100644 --- a/src/snek/static/generic-form.js +++ b/src/snek/static/generic-form.js @@ -75,16 +75,28 @@ class GenericField extends HTMLElement { } input { - width: 90%; - padding: 10px; - margin: 10px 0; - border: 1px solid #333; - border-radius: 5px; - background-color: #1a1a1a; - color: #e6e6e6; - font-size: 1em; + width: 90%; + padding: 10px; + margin: 10px 0; + border: 1px solid #333; + border-radius: 5px; + background-color: #1a1a1a; + color: #e6e6e6; + font-size: 1em; + + &:focus { + outline: 2px solid #f05a28 !important; + } + + &::placeholder { + transition: opacity 0.3s; + } + + &:focus::placeholder { + opacity: 0.4; + } } - + button { width: 50%; padding: 10px; From 62aa15a4b4d6514824378cca73084c9ce2df903b Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Sat, 8 Mar 2025 18:59:00 +0100 Subject: [PATCH 6/8] Added head block --- src/snek/templates/base.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/snek/templates/base.html b/src/snek/templates/base.html index 1e89c50..d93b568 100644 --- a/src/snek/templates/base.html +++ b/src/snek/templates/base.html @@ -20,6 +20,9 @@ + + {% block head %} + {% endblock %}
From ad7eab9717848584369ded6e19babb6a7b9f5b98 Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Sat, 8 Mar 2025 19:07:09 +0100 Subject: [PATCH 7/8] Tweaked the back button position --- src/snek/static/back-form.css | 18 ++++++++++++++++++ src/snek/templates/login.html | 13 +++++++++---- src/snek/templates/register.html | 12 +++++++++--- 3 files changed, 36 insertions(+), 7 deletions(-) create mode 100644 src/snek/static/back-form.css diff --git a/src/snek/static/back-form.css b/src/snek/static/back-form.css new file mode 100644 index 0000000..4824d6c --- /dev/null +++ b/src/snek/static/back-form.css @@ -0,0 +1,18 @@ +.back-form { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + + fancy-button { + grid-column: 1 / 1; + grid-row: 1 / 1; + z-index: 1; + margin-left: 30px; + margin-top: 30px; + } + + generic-form { + grid-column: 1 / 3; + grid-row: 1 / 3; + } +} \ No newline at end of file diff --git a/src/snek/templates/login.html b/src/snek/templates/login.html index 0ffc379..ed81224 100644 --- a/src/snek/templates/login.html +++ b/src/snek/templates/login.html @@ -4,8 +4,13 @@ Login - Snek chat by Molodetz {% endblock %} -{% block main %} - - - +{% block head %} + +{% endblock %} + +{% block main %} +
+ + +
{% endblock %} diff --git a/src/snek/templates/register.html b/src/snek/templates/register.html index 2b783a7..2fa89d3 100644 --- a/src/snek/templates/register.html +++ b/src/snek/templates/register.html @@ -4,8 +4,14 @@ Register - Snek chat by Molodetz {% endblock %} -{% block main %} - +{% block head %} + +{% endblock %} - +{% block main %} +
+ + + +
{% endblock %} \ No newline at end of file From e91ae4584aaf08cb02b89cdf26b8c43a8c8179b0 Mon Sep 17 00:00:00 2001 From: BordedDev <> Date: Sat, 8 Mar 2025 19:35:22 +0100 Subject: [PATCH 8/8] Undo auto formatting --- src/snek/static/base.css | 382 +++++++++++++++++++-------------------- 1 file changed, 191 insertions(+), 191 deletions(-) diff --git a/src/snek/static/base.css b/src/snek/static/base.css index bcdc1d1..3d154a9 100644 --- a/src/snek/static/base.css +++ b/src/snek/static/base.css @@ -1,345 +1,345 @@ * { - margin: 0; - box-sizing: border-box; + margin: 0; + box-sizing: border-box; } .gallery { - padding: 50px; - height: auto; - overflow: auto; - flex: 1; + padding: 50px; + height: auto; + overflow: auto; + flex: 1; } .gallery.tile, .tile { - width: 100px; - height: 100px; - object-fit: cover; - margin: 20px 10px 20px 0; - border-radius: 5px; + width: 100px; + height: 100px; + object-fit: cover; + margin: 20px 10px 20px 0; + border-radius: 5px; } body { - font-family: Arial, sans-serif; - background-color: #1a1a1a; - color: #e6e6e6; - line-height: 1.5; - display: flex; - flex-direction: column; - height: 100vh; - min-width: 100%; + font-family: Arial, sans-serif; + background-color: #1a1a1a; + color: #e6e6e6; + line-height: 1.5; + display: flex; + flex-direction: column; + height: 100vh; + min-width: 100%; } main { - display: flex; - flex: 1; - overflow: hidden; + display: flex; + flex: 1; + overflow: hidden; } header { - background-color: #0f0f0f; - padding: 10px 20px; - display: flex; - justify-content: space-between; - align-items: center; + background-color: #0f0f0f; + padding: 10px 20px; + display: flex; + justify-content: space-between; + align-items: center; } header .logo { - color: #fff; - font-size: 1.5em; - font-weight: bold; + color: #fff; + font-size: 1.5em; + font-weight: bold; } header nav a { - color: #aaa; - text-decoration: none; - margin-left: 15px; - font-size: 1em; - transition: color 0.3s; + color: #aaa; + text-decoration: none; + margin-left: 15px; + font-size: 1em; + transition: color 0.3s; } .no-select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } header nav a:hover { - color: #fff; + color: #fff; } a { - font-weight: bold; - color: #f05a28; - margin-bottom: 3px; + font-weight: bold; + color: #f05a28; + margin-bottom: 3px; } .chat-area { - flex: 1; - display: flex; - flex-direction: column; - background-color: #1a1a1a; - overflow: hidden; + flex: 1; + display: flex; + flex-direction: column; + background-color: #1a1a1a; + overflow: hidden; } .chat-header { - padding: 10px 20px; - background-color: #0f0f0f; - border-bottom: 1px solid #333; - user-select: none; + padding: 10px 20px; + background-color: #0f0f0f; + border-bottom: 1px solid #333; + user-select: none; } .chat-header h2 { - font-size: 1.2em; - color: #fff; + font-size: 1.2em; + color: #fff; } .message-list { - flex: 1; - height: 200px; - padding-bottom: 40px; - overflow-y: auto; + flex: 1; + height: 200px; + padding-bottom: 40px; + overflow-y: auto; } .chat-messages, .threads { - flex: 1; - overflow-y: scroll; - scrollbar-width: none; - -ms-overflow-style: none; - padding: 10px; - height: 200px; - background: #1a1a1a; + flex: 1; + overflow-y: scroll; + scrollbar-width: none; + -ms-overflow-style: none; + padding: 10px; + height: 200px; + background: #1a1a1a; } .container { - flex: 1; - padding: 10px; + flex: 1; + padding: 10px; - ul { - list-style: none; - margin: 0; - padding: 0; - } + ul { + list-style: none; + margin: 0; + padding: 0; + } - a { - font-size: 20px; - color: #f05a28; - } + a { + font-size: 20px; + color: #f05a28; + } } .chat-messages::-webkit-scrollbar { - display: none; + display: none; } .chat-messages .message, .threads .thread { - display: flex; - align-items: flex-start; - margin-bottom: 0; - padding: 5px; - border-radius: 8px; + display: flex; + align-items: flex-start; + margin-bottom: 0; + padding: 5px; + border-radius: 8px; } .chat-messages .message .avatar, .threads .thread .avatar { - width: 40px; - height: 40px; - border-radius: 50%; - background: #f05a28; - color: #fff; - font-size: 1em; - font-weight: bold; - display: flex; - justify-content: center; - align-items: center; - margin-right: 15px; + width: 40px; + height: 40px; + border-radius: 50%; + background: #f05a28; + color: #fff; + font-size: 1em; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; + margin-right: 15px; } .chat-messages .message .message-content, .threads .thread .message-content { - flex: 1; + flex: 1; } .chat-messages .message .message-content .author, .threads .thread .message-content .author { - font-weight: bold; - color: #f05a28; - margin-bottom: 3px; + font-weight: bold; + color: #f05a28; + margin-bottom: 3px; } * { - word-break: break-word; - overflow-wrap: break-word; - hyphens: auto; + word-break: break-word; + overflow-wrap: break-word; + hyphens: auto; } .highlight pre { - white-space: pre-wrap; - word-break: break-word; - overflow-wrap: break-word; - hyphens: auto; + white-space: pre-wrap; + word-break: break-word; + overflow-wrap: break-word; + hyphens: auto; } .chat-messages .message .message-content .text, .threads .thread .message-content .text { - margin-bottom: 5px; - color: #e6e6e6; - word-break: break-word; - overflow-wrap: break-word; - hyphens: auto; + margin-bottom: 5px; + color: #e6e6e6; + word-break: break-word; + overflow-wrap: break-word; + hyphens: auto; } .message-content { - max-width: 100%; + max-width: 100%; } .message-content { - img, video, iframe, div { - max-width: 90%; - border-radius: 20px; - } + img, video, iframe, div { + max-width: 90%; + border-radius: 20px; + } } .chat-messages .message .message-content .time, .threads .thread .message-content .time { - font-size: 0.8em; - color: #aaa; + font-size: 0.8em; + color: #aaa; } .chat-input { - padding: 15px; - background-color: #121212; - display: flex; - align-items: center; - border-top: 1px solid #333; + padding: 15px; + background-color: #121212; + display: flex; + align-items: center; + border-top: 1px solid #333; } input[type="text"], .chat-input textarea { - flex: 1; - background-color: #1a1a1a; - color: white; - border: none; - padding: 10px; - border-radius: 5px; - resize: none; + flex: 1; + background-color: #1a1a1a; + color: white; + border: none; + padding: 10px; + border-radius: 5px; + resize: none; } .chat-input upload-button { - background-color: #f05a28; - color: white; - border: none; - padding: 10px 15px; - margin-left: 10px; - border-radius: 5px; - cursor: pointer; - font-size: 1em; - transition: background-color 0.3s; + background-color: #f05a28; + color: white; + border: none; + padding: 10px 15px; + margin-left: 10px; + border-radius: 5px; + cursor: pointer; + font-size: 1em; + transition: background-color 0.3s; } .chat-input button:hover { - background-color: #e04924; + background-color: #e04924; } @media (max-width: 768px) { - .sidebar { - display: none; - } + .sidebar { + display: none; + } } .message { - .text { - max-width: 100%; - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; - } + .text { + max-width: 100%; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + } - .avatar { - opacity: 0; - } + .avatar { + opacity: 0; + } - .author, .time { - display: none; - } + .author, .time { + display: none; + } } .message.switch-user { - .text img, iframe, video { - max-width: 90%; - border-radius: 20px; - } + .text img, iframe, video { + max-width: 90%; + border-radius: 20px; + } - .avatar { - user-select: none; - opacity: 1; - } + .avatar { + user-select: none; + opacity: 1; + } - .author { - display: block; - } + .author { + display: block; + } } .message:has(+ .message.switch-user), .message:last-child { - .time { - display: block; - } + .time { + display: block; + } } /* The entire scrollbar */ ::-webkit-scrollbar { - display: none; + display: none; } ::-webkit-scrollbar-track { - background: #f1f1f1; + background: #f1f1f1; } ::-webkit-scrollbar-thumb { - background-color: #888; - border-radius: 3px; - border: 1px solid #f1f1f1; + background-color: #888; + border-radius: 3px; + border: 1px solid #f1f1f1; } ::-webkit-scrollbar-thumb:hover { - background-color: #555; + background-color: #555; } .chat-messages, .threads { - scrollbar-width: none; - scrollbar-color: #888 #f1f1f1; + scrollbar-width: none; + scrollbar-color: #888 #f1f1f1; } a { - text-decoration: none + text-decoration: none } .sidebar { - width: 250px; - background-color: #121212; - padding: 20px; - overflow-y: auto; - border-right: 1px solid #333; + width: 250px; + background-color: #121212; + padding: 20px; + overflow-y: auto; + border-right: 1px solid #333; } .sidebar h2 { - color: #f05a28; - font-size: 1.2em; - margin-bottom: 20px; + color: #f05a28; + font-size: 1.2em; + margin-bottom: 20px; } .sidebar ul { - list-style: none; + list-style: none; } .sidebar ul li { - margin-bottom: 15px; + margin-bottom: 15px; } .sidebar ul li a { - color: #ccc; - text-decoration: none; - font-size: 1em; - transition: color 0.3s; + color: #ccc; + text-decoration: none; + font-size: 1em; + transition: color 0.3s; } .sidebar ul li a:hover { - color: #fff; + color: #fff; }