UI polishing
frdel committed
Jan 7, 2026 at 16:59 UTC
f11f5da5552661ddec535a05b5df8e99693b9691
7 files changed
+102
-26
webui/components/messages/action-buttons/simple-action-buttons.css
+2
-2
@@ -25,8 +25,8 @@
25
width: 26px;
26
height: 26px;
27
cursor: pointer;
28
- background-color: var(--color-background);
29
- /* border: 1px solid var(--color-border); */
28
+ background-color: var(--color-chat-background);
29
+ border: 1px solid var(--color-border);
30
/* transition: background-color var(--transition-speed) ease-in-out; */
31
color: var(--color-text);
32
padding: 0;
webui/components/messages/process-group/process-group.css
+26
-8
@@ -18,7 +18,7 @@
18
width: 100%;
19
margin: 0;
20
border-radius: var(--border-radius) var(--border-radius) 0 0;
21
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
21
+ /* border-bottom: 1px solid rgba(255, 255, 255, 0.08); */
22
background: transparent;
23
}
24
@@ -86,7 +86,7 @@
86
/* Group title - prominent display */
87
.process-group-header .group-title {
88
flex: 0 1 auto;
89
- font-size: var(--font-size-smaller);
89
+ font-size: var(--font-size-medium);
90
font-weight: 500;
91
color: var(--color-text);
92
opacity: 0.9;
@@ -339,7 +339,7 @@
339
opacity: 1;
340
margin-top: var(--spacing-xs);
341
padding-top: var(--spacing-xs);
342
- border-top-color: rgba(255, 255, 255, 0.06);
342
+ /* border-top-color: var(--color-border); */
343
}
344
345
/* Process Steps List */
@@ -354,7 +354,7 @@
354
.process-step {
355
display: flex;
356
flex-direction: column;
357
- padding: 4px 0;
357
+ padding: 0.1em;
358
transition: background-color 0.15s ease;
359
}
360
@@ -442,7 +442,8 @@
442
display: grid;
443
grid-template-rows: 0fr;
444
opacity: 0;
445
- transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out;
445
+ margin-top: 0;
446
+ transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out, margin-top 0.2s ease-out;
447
overflow: hidden;
448
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
449
scroll-behavior: smooth;
@@ -450,6 +451,17 @@
451
-ms-overflow-style: none; /* IE/Edge */
452
overscroll-behavior: contain; /* avoid scroll chaining */
453
}
454
+
455
+.process-step:not(.step-expanded) > .process-step-detail {
456
+ margin-top: 0;
457
+}
458
+
459
+.process-step:not(.step-expanded) > .process-step-detail > .process-step-detail-content {
460
+ padding: 0;
461
+ margin-top: 0;
462
+ max-height: 0;
463
+ overflow: hidden;
464
+}
465
/* Hide scrollbar for Chrome/Safari/Webkit */
466
.process-step-detail::-webkit-scrollbar {
467
display: none;
@@ -475,7 +487,13 @@
487
margin-top: var(--spacing-xs);
488
}
489
490
+.process-step.step-expanded > .process-step-detail > .process-step-detail-content {
491
+ max-height: 300px;
492
+ overflow-y: auto;
493
+}
494
+
495
.process-step-detail-content {
496
+ transition: max-height 0.2s ease-out, padding 0.2s ease-out, margin-top 0.2s ease-out;
497
padding: var(--spacing-xs) 0;
498
margin-top: var(--spacing-xxs);
499
margin-left: 28px; /* Align with icon */
@@ -498,7 +516,7 @@
516
font-family: var(--font-family-code);
517
font-size: 0.7rem;
518
color: var(--color-text);
501
- opacity: 0.8;
519
+ /* opacity: 0.8; */
520
}
521
522
/* KVPs in step detail - CSS Grid for aligned columns */
@@ -637,7 +655,7 @@
655
.process-step-detail-content .terminal-output {
656
margin: var(--spacing-xs) 0 0 0;
657
padding: var(--spacing-xs);
640
- background: rgba(0, 0, 0, 0.2);
658
+ background: rgba(0, 0, 0, 0.8);
659
border-radius: 4px;
660
color: #c9d1d9;
661
white-space: pre-wrap;
@@ -660,7 +678,7 @@
678
/* Light mode terminal */
679
.light-mode .process-step-detail-content .terminal-output {
680
background: rgba(0, 0, 0, 0.05);
663
- color: #24292f;
681
+ color: black;
682
}
683
684
/* Light mode adjustments */
webui/components/sidebar/chats/chats-list.html
+20
-1
@@ -28,7 +28,7 @@
28
<div class="chat-list-button">
29
<span class="project-color-ball"
30
:style="context.project?.color ? { backgroundColor: context.project.color } : { border: '1px solid var(--color-border)' }"></span>
31
- <span class="chat-name"
31
+ <span class="chat-name"
32
x-text="context.name ? context.name : 'Chat #' + context.no"></span>
33
</div>
34
<button class="btn-icon-action chat-list-action-btn" title="Close chat" @click.stop="$confirmClick($event, () => $store.chats.killChat(context.id))">
@@ -134,6 +134,25 @@
134
margin-right: 8px;
135
}
136
137
+ .device-pointer .chat-container .chat-list-action-btn {
138
+ opacity: 0;
139
+ visibility: hidden;
140
+ pointer-events: none;
141
+ transition: opacity 0.12s ease-in-out;
142
+ }
143
+
144
+ .device-pointer .chat-container:hover .chat-list-action-btn {
145
+ opacity: 1;
146
+ visibility: visible;
147
+ pointer-events: auto;
148
+ }
149
+
150
+ .device-touch .chats-list-container .chat-list-action-btn {
151
+ opacity: 1;
152
+ visibility: visible;
153
+ pointer-events: auto;
154
+ }
155
+
156
.empty-list-message {
157
display: flex;
158
justify-content: center;
webui/css/messages.css
+40
-10
@@ -1,5 +1,6 @@
1
/* Chat History */
2
#chat-history {
3
+ background-color: var(--color-chat-background);
4
position: relative;
5
display: -webkit-flex;
6
display: flex;
@@ -9,11 +10,14 @@
10
overflow-y: scroll;
11
overflow-x: hidden;
12
scroll-behavior: auto !important; /* avoid infinite scrolling! */
12
- padding: var(--spacing-md) 10em 0 !important;
13
+ /* padding: var(--spacing-md) 10em 0 !important; */
14
-webkit-transition: all 0.3s ease;
15
transition: all 0.3s ease;
16
scrollbar-width: thin;
17
scrollbar-color: #555 transparent;
18
+ padding-left: var(--spacing-sm);
19
+ padding-right: var(--spacing-sm);
20
+ padding-bottom:5em;
21
}
22
23
#chat-history > *:first-child {
@@ -53,7 +57,7 @@
57
justify-content: flex-end;
58
position: relative;
59
width: 100%;
56
- padding-left: 5%;
60
+ padding-left: 20%;
61
}
62
63
.ai-container {
@@ -78,10 +82,12 @@
82
.message-user {
83
text-align: end;
84
margin-bottom: var(--spacing-md);
85
+ border: 1px solid var(--color-border);
86
+ border-radius: var(--border-radius);
87
}
88
89
.message-user > div {
84
- padding-top: var(--spacing-xs);
90
+ /* padding-top: var(--spacing-xs); */
91
/* font-family: "Roboto Mono", monospace; */
92
font-optical-sizing: auto;
93
-webkit-font-optical-sizing: auto;
@@ -95,14 +101,15 @@
101
102
.message-user .message-text pre {
103
font-family: var(--font-family-main);
98
- font-weight: 500;
99
- font-size: medium;
100
- color: azure;
104
+ font-weight: 200;
105
+ font-size: larger;
106
+ /* color: azure; */
107
+ color: var(--color-text);
108
}
109
103
-.light-mode .message-user .message-text pre {
110
+/* .light-mode .message-user .message-text pre {
111
color: #2e2e2e;
105
-}
112
+} */
113
114
.message-ai {
115
/* border-bottom-left-radius: var(--spacing-xxs); */
@@ -442,6 +449,20 @@
449
}
450
451
/* Media Queries */
452
+@media (min-width: 55em) {
453
+ #chat-history {
454
+ padding-left: max(var(--spacing-sm), calc((100% - 55em) / 2)) !important;
455
+ padding-right: max(var(--spacing-sm), calc((100% - 55em) / 2)) !important;
456
+ }
457
+}
458
+
459
+@media (min-width: 1025px) and (max-width: 55em) {
460
+ #chat-history {
461
+ padding-left: var(--spacing-sm) !important;
462
+ padding-right: var(--spacing-sm) !important;
463
+ }
464
+}
465
+
466
@media (max-width: 1024px) {
467
#chat-history {
468
padding: var(--spacing-md) var(--spacing-sm) 0 !important;
@@ -513,7 +534,7 @@
534
}
535
536
.message-agent-response .msg-content {
516
- font-size: var(--font-size-smaller);
537
+ font-size: var(--font-size-larger);
538
}
539
540
.message-agent-response .msg-content img {
@@ -598,6 +619,13 @@
619
border-radius: 0.3em;
620
}
621
622
+.msg-content hr {
623
+ border: 0;
624
+ border-top: 1px solid var(--color-border);
625
+ /* border-top-color: color-mix(in srgb, var(--color-text) 50%, transparent); */
626
+ height: 0;
627
+}
628
+
629
.msg-min-max-btns {
630
opacity: 40%;
631
position: absolute;
@@ -625,6 +653,8 @@
653
.message-group-right {
654
width: 100%;
655
justify-content: end;
656
+ margin-top: 5em;
657
+ margin-bottom:5em;
658
}
659
660
.message-group-mid {
@@ -641,7 +671,7 @@
671
672
.message {
673
/* background-color: var(--color-message-bg); */
644
- border-radius: 0;
674
+ /* border-radius: 0; */
675
padding: 0.9rem var(--spacing-sm) 0.7rem var(--spacing-sm);
676
overflow-x: auto;
677
width: auto;
webui/index.css
+12
-3
@@ -10,7 +10,8 @@
10
:root {
11
/* Dark mode */
12
--color-background-dark: #131313;
13
- --color-text-dark: #d4d4d4;
13
+ --color-text-dark: #ffffff;
14
+ --color-text-muted-dark: #d4d4d4e4;
15
--color-primary-dark: #737a81;
16
--color-secondary-dark: #656565;
17
--color-accent-dark: #cf6679;
@@ -21,10 +22,12 @@
22
--color-border-dark: #444444a8;
23
--color-input-dark: #131313;
24
--color-input-focus-dark: #101010;
25
+ --color-chat-background-dark: #212121;
26
27
/* Light mode */
28
--color-background-light: #fafafa;
29
--color-text-light: #333333;
30
+ --color-text-muted-light: #333333e4;
31
--color-primary-light: #384653;
32
--color-secondary-light: #e8eaf6;
33
--color-accent-light: #b00020;
@@ -35,10 +38,12 @@
38
--color-border-light: #bdbdbdcf;
39
--color-input-light: #e4e4e4;
40
--color-input-focus-light: #dadada;
41
+ --color-chat-background-light: #fafafaf3;
42
43
/* Default to dark mode */
44
--color-background: var(--color-background-dark);
45
--color-text: var(--color-text-dark);
46
+ --color-text-muted: var(--color-text-muted-dark);
47
--color-primary: var(--color-primary-dark);
48
--color-secondary: var(--color-secondary-dark);
49
--color-accent: var(--color-accent-dark);
@@ -50,6 +55,7 @@
55
--color-input: var(--color-input-dark);
56
--color-input-focus: var(--color-input-focus-dark);
57
--color-background-hover: color-mix(in srgb, var(--color-border) 50%, transparent);
58
+ --color-chat-background: var(--color-chat-background-dark);
59
60
/* Spacing variables */
61
--spacing-xxs: 0.15rem;
@@ -80,6 +86,7 @@
86
.light-mode {
87
--color-background: var(--color-background-light);
88
--color-text: var(--color-text-light);
89
+ --color-text-muted: var(--color-text-muted-light);
90
--color-primary: var(--color-primary-light);
91
--color-secondary: var(--color-secondary-light);
92
--color-accent: var(--color-accent-light);
@@ -90,7 +97,9 @@
97
--color-input: var(--color-input-light);
98
--color-input-focus: var(--color-input-focus-light);
99
--color-background-hover: color-mix(in srgb, var(--color-border) 50%, transparent);
93
-}
100
+ --color-chat-background: var(--color-chat-background-light);
101
+ }
102
+
103
104
/* Reset and Base Styles */
105
body,
@@ -608,7 +617,7 @@ h4 {
617
618
.config-list li {
619
align-items: center;
611
- border-top: 1px solid var(--color-border);
620
+ /* border-top: 1px solid var(--color-border); */
621
display: -webkit-flex;
622
display: flex;
623
justify-content: space-between;
webui/index.js
+1
-1
@@ -10,7 +10,7 @@ import { store as inputStore } from "/components/chat/input/input-store.js";
10
import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
11
import { store as tasksStore } from "/components/sidebar/tasks/tasks-store.js";
12
import { store as chatTopStore } from "/components/chat/top-section/chat-top-store.js";
13
-import { store as tooltipsStore } from "/components/tooltips/tooltip-store.js";
13
+import { store as _tooltipsStore } from "/components/tooltips/tooltip-store.js";
14
15
globalThis.fetchApi = api.fetchApi; // TODO - backward compatibility for non-modular scripts, remove once refactored to alpine
16
webui/js/messages.js
+1
-1
@@ -1203,7 +1203,7 @@ function createProcessGroup(id) {
1203
<span class="status-badge status-gen status-active group-status">GEN</span>
1204
<span class="group-metrics">
1205
<span class="metric-time" title="Start time"><span class="material-symbols-outlined">schedule</span><span class="metric-value">--:--</span></span>
1206
- <span class="metric-steps" title="Steps"><span class="material-symbols-outlined">list_alt</span><span class="metric-value">0</span></span>
1206
+ <span class="metric-steps" title="Steps"><span class="material-symbols-outlined">footprint</span><span class="metric-value">0</span></span>
1207
<span class="metric-duration" title="Duration"><span class="material-symbols-outlined">timer</span><span class="metric-value">0s</span></span>
1208
</span>
1209
`;