From 92bd3557d5a09b8a464409c10d7bc4f1850aa89f Mon Sep 17 00:00:00 2001 From: hanishkvc Date: Tue, 18 Nov 2025 11:35:30 +0530 Subject: [PATCH] SimpleChatTCRV:UI theme cleanup - html+css r3 Move the heading, sessions list and system prompt into a details block so that user can hide them if required. avoid the borders around chat message blocks and the chat message role blocks within them, instead go for a subtle box shadow. Use gradiants wrt heading, as well as chat message role based color codings. Update both the normal/screen view as well as the print view wr above. --- tools/server/public_simplechat/index.html | 18 +++--- tools/server/public_simplechat/simplechat.css | 55 +++++++++++-------- 2 files changed, 40 insertions(+), 33 deletions(-) diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html index 4f3e192931..806a2348f1 100644 --- a/tools/server/public_simplechat/index.html +++ b/tools/server/public_simplechat/index.html @@ -23,21 +23,21 @@
-
-
SimpleChat
-
- - -
-
- +
+ +
SimpleChat
+
+ + +
+
-
+
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css index 01c51b294a..b78d1789fe 100644 --- a/tools/server/public_simplechat/simplechat.css +++ b/tools/server/public_simplechat/simplechat.css @@ -3,15 +3,21 @@ * by Humans for All */ +:root { + --background-color: #f4f4f9 +} + body { - background-color: #f8f9fa; + background-color: var(--background-color); + font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; } #fullbody { height: 98vh; } -.heading { - background: linear-gradient(135deg, lightblue 0%, white 100%); +#heading { + background: linear-gradient(135deg, var(--background-color) 0%, lightblue 100%); + margin: 0; } .session-selected { @@ -19,17 +25,16 @@ body { } .role-system { - background-color: lightblue; + background: linear-gradient(135deg, lightblue 0%, var(--background-color) 100%); } .role-user { - background-color: lightgray; + background: linear-gradient(135deg, lightgray 0%, var(--background-color) 100%); } .role-assistant { text-align: initial; } .role-tool { - /* background-color: cornsilk; */ - background-color: lightyellow; + background: linear-gradient(135deg, var(--background-color) 0%, lightyellow 100%); } .role-trim { background-color: lightpink; @@ -40,24 +45,22 @@ body { } .chat-message { - border-style: solid; - border-color: grey; - border-width: thin; - border-radius: 1vmin; display: flex; + border-radius: 1vmin; margin-bottom: 2vh; - /* box-shadow: 1px 1px 4px lightslategray; */ + border: none; + padding: 0.4vmin; + padding-left: 0; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .chat-message:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .chat-message-role { - border-style: dotted; - border-color: black; - border-width: thin; - border-radius: 4px; + border: none; writing-mode: vertical-lr; padding-inline: 1vmin; + border-right: 1px solid rgba(0, 0, 0, 0.2); } .chat-message-reasoning { border-block-style: dashed; @@ -159,6 +162,7 @@ button { padding-inline: 2vmin; border-radius: 1vmin; min-height: 3vmin; + border-color: lightgray; } .sameline { @@ -193,25 +197,28 @@ button { @media print { + body { + background-color: white; + } #fullbody { height: auto; } .chat-message { - border-style: solid; - border-color: grey; - border-width: thin; - border-radius: 2px; display:inherit; + padding: 0.4vmin; + border-radius: 1vmin; + margin-bottom: 2vh; + border: none; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .chat-message-role { - border-style: dotted; - border-color: black; - border-width: thin; - border-radius: 4px; writing-mode:inherit; + max-width: fit-content; padding-inline: 1vmin; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); }