Invario/Key-service-Server
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance chat and admin chat styling for improved user experience

Browse Source
This commit is contained in:
AIIrondev
2026-05-05 19:15:16 +02:00
parent 960a827ee1
commit dd000e16ed
2 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Website/templates/admin_chats.html
+11 -7
View File
@@ -44,15 +44,19 @@
.panel { margin-bottom: 1rem; }
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; }
.users, .chat-panel { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
.chat-panel { background: #efeae2; display: flex; flex-direction: column; }
.user-link { display: block; padding: 0.5rem; border-radius: 10px; border: 1px solid transparent; margin-bottom: 0.45rem; }
.user-link:hover, .user-link.active { border-color: #bcd0de; background: #f4f9fd; }
.messages { display: grid; gap: 0.6rem; margin-bottom: 0.8rem; max-height: 460px; overflow: auto; }
.message { border: 1px solid #e4edf3; border-radius: 10px; padding: 0.65rem; }
.message.admin { background: #f2f8ff; }
.message.user { background: #fcfdff; }
.composer { display: grid; gap: 0.6rem; }
textarea { width: 100%; border: 1px solid #c9d8e3; border-radius: 12px; padding: 0.7rem; font: inherit; }
button { width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.5rem 1rem; border-radius: 999px; font-weight: 700; }
.messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; height: 100%; min-height: 300px; max-height: 460px; overflow-y: auto; padding: 1rem 0; }
.message { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; }
.message.user { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; }
.message.admin { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }
.message strong { display: block; font-size: 0.85rem; color: #075e54; margin-bottom: 0.2rem; }
.message p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.message small { display: block; text-align: right; font-size: 0.7rem; color: #888; margin-top: 0.3rem; }
.composer { display: flex; gap: 0.6rem; align-items: flex-end; background: transparent; }
textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; }
button { flex-shrink: 0; width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; height: fit-content; margin-bottom: 0.2rem; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }
</style>
{% endblock %}
Website/templates/chat.html
+11 -10
View File
@@ -28,15 +28,16 @@
<style>
.panel { margin-bottom: 1rem; }
.chat-box { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
.messages { display: grid; gap: 0.6rem; margin-bottom: 0.8rem; max-height: 440px; overflow: auto; }
.message { border: 1px solid #e4edf3; border-radius: 10px; padding: 0.65rem; background: #f9fcff; }
.message.admin { background: #f2f8ff; border-color: #c8def1; }
.message.user { background: #fcfdff; }
.message p { margin-top: 0.3rem; }
.message small { color: #6f8798; }
.composer { display: grid; gap: 0.6rem; }
textarea { width: 100%; border: 1px solid #c9d8e3; border-radius: 12px; padding: 0.7rem; font: inherit; }
button { width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.5rem 1rem; border-radius: 999px; font-weight: 700; }
.chat-box { background: #efeae2; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
.messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; max-height: 440px; overflow-y: auto; padding: 1rem 0; }
.message { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; }
.message.admin { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; }
.message.user { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }
.message strong { display: block; font-size: 0.85rem; color: #075e54; margin-bottom: 0.2rem; }
.message p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.message small { display: block; text-align: right; font-size: 0.7rem; color: #888; margin-top: 0.3rem; }
.composer { display: flex; gap: 0.6rem; align-items: flex-end; }
textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; }
button { flex-shrink: 0; width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; height: fit-content; margin-bottom: 0.2rem; }
</style>
{% endblock %}