Update stylesheet
Grouping, consistency and Italian taste
Alessandro committed
Sep 20, 2024 at 05:58 UTC
7f70cf0d0bae0dd394007c24269f3724d89222d4
1 file changed
+330
-184
webui/index.css
+330
-184
@@ -1,317 +1,435 @@
1
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
2
+:root {
3
+ /* Color variables */
4
+ --color-background: #1e1e1e;
5
+ --color-text: #e0e0e0;
6
+ --color-primary: #bb86fc;
7
+ --color-secondary: #3700b3;
8
+ --color-secondary-hover: #5c2bd1;
9
+ --color-panel: #2d2d2d;
10
+ --color-border: #444;
11
+ --color-input: #3d3d3d;
12
+ --color-input-focus: #4d4d4d;
13
+
14
+ /* Spacing variables */
15
+ --spacing-xs: 0.3125rem;
16
+ --spacing-sm: 0.625rem;
17
+ --spacing-md: 1.25rem;
18
+ --spacing-lg: 2rem;
19
+
20
+ /* Font sizes */
21
+ --font-size-small: 0.8rem;
22
+ --font-size-normal: 1rem;
23
+ --font-size-large: 1.2rem;
24
+
25
+ /* Other variables */
26
+ --border-radius: 1.125rem;
27
+ --transition-speed: 0.3s;
28
+}
29
+
30
+/* Reset and Base Styles */
31
body,
32
html {
33
+ background-color: var(--color-background);
34
+ color: var(--color-text);
35
+ font-family: 'Inter', Arial, Helvetica, sans-serif;
36
+ height: 100%;
37
margin: 0;
38
padding: 0;
5
- height: 100%;
6
- font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
7
- background-color: #1e1e1e;
8
- color: #e0e0e0;
39
}
40
+
41
+/* Layout */
42
.container {
43
display: flex;
44
height: 100%;
45
}
46
+
47
.panel {
48
height: 100%;
49
overflow: auto;
50
}
51
+
52
+/* Left Panel */
53
#left-panel {
19
- width: 300px;
20
- background-color: #2d2d2d;
21
- border-right: 0.0625em solid #444; /* 1px */
22
- padding: 1.25em; /* 20px */
54
+ background-color: var(--color-panel);
55
+ border-right: 1px solid var(--color-border);
56
box-sizing: border-box;
24
- flex-shrink: 0; /* Ensure the left panel does not shrink */
25
-}
26
-#right-panel {
27
- flex-grow: 1;
57
display: flex;
58
flex-direction: column;
59
+ flex-shrink: 0;
60
+ justify-content: space-between;
61
+ padding: var(--spacing-md);
62
+ transition: margin-left var(--transition-speed) ease-in-out;
63
+ width: 250px;
64
}
31
-.splitter {
32
- width: 0.625em; /* 10px */
33
- background-color: #444;
34
- cursor: col-resize;
35
- transition: background-color 0.3s;
36
- flex-shrink: 0; /* Prevents the splitter from shrinking */
37
-}
38
-.splitter:hover {
39
- background-color: #666;
40
-}
41
-h2,
42
-h3 {
43
- margin: 1.25em 0 0.625em; /* 20px 0 10px */
44
- color: #bb86fc;
45
-}
46
-h4 {
47
- margin: 0.2em;
65
+
66
+#left-panel.hidden {
67
+ margin-left: -250px;
68
}
49
-#chat-history {
50
- flex-grow: 1;
69
+
70
+.left-panel-top {
71
+ margin-top: 7.5rem;
72
overflow-y: auto;
52
- padding: 1.25em; /* 20px */
73
+}
74
+
75
+/* Right Panel */
76
+#right-panel {
77
display: flex;
78
flex-direction: column;
79
+ flex-grow: 1;
80
+ transition: margin-left var(--transition-speed) ease-in-out;
81
}
56
-.message-container {
57
- margin-bottom: 0.5em;
58
- animation: fadeIn 0.5s;
59
-}
60
-.message {
61
- padding: 0.625em 0.9375em; /* 10px 15px */
62
- border-radius: 1.125em; /* 18px */
63
-}
64
-@keyframes fadeIn {
65
- from {
66
- opacity: 0;
67
- transform: translateY(0.625em); /* 10px */
68
- }
69
- to {
70
- opacity: 1;
71
- transform: translateY(0);
72
- }
82
+
83
+#right-panel.expanded {
84
+ margin-left: 0;
85
}
74
-.user-container {
75
- align-self: flex-end;
76
- margin-top: 2em;
77
- margin-bottom: 1em;
86
+
87
+/* Time Display */
88
+#utc-time {
89
+ color: var(--color-text);
90
+ font-size: var(--font-size-normal);
91
+ margin-right: var(--spacing-md);
92
}
93
80
-.ai-container {
81
- align-self: flex-start;
94
+/* Logo Container */
95
+#logo-container {
96
+ align-items: center;
97
+ display: flex;
98
+ justify-content: space-between;
99
+ left: 0;
100
+ margin-left: var(--spacing-md);
101
+ position: sticky;
102
+ top: var(--spacing-md);
103
+ transition: margin-left var(--transition-speed) ease-in-out;
104
+ z-index: 1001;
105
}
106
84
-.message-user {
85
- background-color: #4a4a4a;
86
- border-bottom-right-radius: 0.3125em; /* 5px */
107
+#right-panel.expanded #logo-container {
108
+ margin-left: 5.5rem;
109
}
110
89
-.message-ai {
90
- border-bottom-left-radius: 0.3125em; /* 5px */
111
+#logo-container a {
112
+ color: inherit;
113
+ text-decoration: none;
114
}
115
93
-.message-fw{
94
- margin-left: 2em;
95
- border-radius: 1.125em; /* 18px */
96
- border-top-left-radius: 0.3125em; /* 5px */
116
+#logo-container img {
117
+ border-radius: var(--spacing-xs);
118
+ height: auto;
119
+ width: 3rem;
120
}
121
99
-.message-default {
100
- background-color: #002d3b;
122
+/* Typography */
123
+h2,
124
+h3 {
125
+ color: var(--color-primary);
126
+ margin-bottom: var(--spacing-sm);
127
+ margin-top: var(--spacing-lg);
128
+}
129
+h4 {
130
+ margin-top: 0.625rem;
131
}
132
103
-.message-agent {
104
- margin-top: 2em;
105
- background-color: #003444;
133
+#a0version {
134
+ color: #8a8a8a;
135
+ font-size: var(--font-size-small);
136
+ padding-top: 10px;
137
}
138
108
-.message-agent-response {
109
- background-color: #1f5327;
139
+/* Chat History */
140
+#chat-history {
141
+ display: flex;
142
+ flex-direction: column;
143
+ flex-grow: 1;
144
+ overflow-y: auto;
145
+ padding: var(--spacing-md);
146
}
147
112
-.message-agent-delegation {
113
- background-color: #1f534a;
148
+/* Message Styles */
149
+.message-container {
150
+ animation: fadeIn 0.5s;
151
+ margin-bottom: var(--spacing-sm);
152
}
153
116
-.message-tool {
117
- background-color: #001b4b;
154
+.message {
155
+ border-radius: var(--border-radius);
156
+ padding: var(--spacing-sm) var(--spacing-md);
157
}
158
120
-.message-code-exe {
121
- background-color: #2f1a60;
159
+.user-container {
160
+ align-self: flex-end;
161
+ margin-bottom: var(--spacing-md);
162
+ margin-top: var(--spacing-lg);
163
}
164
124
-.message-adhoc {
125
- background-color: #124850;
165
+.ai-container {
166
+ align-self: flex-start;
167
}
168
128
-.message-info {
129
- background-color: #2d2d2d;
169
+.message-user {
170
+ background-color: #4a4a4a;
171
+ border-bottom-right-radius: var(--spacing-xs);
172
}
173
132
-.message-warning {
133
- background-color: #826100;
174
+.message-ai {
175
+ border-bottom-left-radius: var(--spacing-xs);
176
}
177
136
-.message-error {
137
- background-color: #5e1212;
178
+/* Message Types */
179
+.message-fw {
180
+ border-radius: var(--border-radius);
181
+ border-top-left-radius: var(--spacing-xs);
182
+ margin-left: var(--spacing-lg);
183
}
184
185
+.message-default { background-color: #002d3b; }
186
+.message-agent { background-color: #003444; }
187
+.message-agent-response { background-color: #1f5327; }
188
+.message-agent-delegation { background-color: #1f534a; }
189
+.message-tool { background-color: #001b4b; }
190
+.message-code-exe { background-color: #2f1a60; }
191
+.message-adhoc { background-color: #124850; }
192
+.message-info { background-color: var(--color-panel); }
193
+.message-warning { background-color: #826100; }
194
+.message-error { background-color: #5e1212; }
195
+
196
+/* Agent and AI Info */
197
.agent-start {
141
- font-size: 0.8em;
142
- color: #ffffff;
143
- margin-bottom: 0.3125em; /* 5px */
198
+ color: var(--color-text);
199
+ font-size: var(--font-size-small);
200
+ margin-bottom: var(--spacing-xs);
201
opacity: 0.7;
202
}
203
+
204
.ai-info {
147
- font-size: 0.9em;
148
- margin-bottom: 0.625em; /* 10px */
205
border-collapse: collapse;
206
+ font-size: 0.9em;
207
+ margin-bottom: var(--spacing-sm);
208
width: 100%;
209
}
210
+
211
.ai-info th,
212
.ai-info td {
213
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
214
+ padding: 0.25rem;
215
text-align: left;
155
- padding: 0.25em; /* 4px */
156
- border-bottom: 0.0625em solid rgba(255, 255, 255, 0.1); /* 1px */
216
}
217
+
218
.ai-info th {
159
- color: #bb86fc;
219
+ color: var(--color-primary);
220
width: 40%;
221
}
222
+
223
+/* Message Actions */
224
.message-actions {
163
- margin-top: 0.3125em; /* 5px */
164
- font-size: 0.8em;
165
- color: #ffffff;
225
+ color: var(--color-text);
226
+ font-size: var(--font-size-small);
227
+ margin-top: var(--spacing-xs);
228
}
229
+
230
.message-action {
231
cursor: pointer;
232
opacity: 0.7;
170
- transition: opacity 0.3s;
233
+ transition: opacity var(--transition-speed);
234
}
235
+
236
.message-action:hover {
237
opacity: 1;
238
}
239
+
240
+/* Input Section */
241
#input-section {
242
+ background-color: var(--color-panel);
243
display: flex;
177
- padding: 1.25em; /* 20px */
178
- background-color: #2d2d2d;
244
+ padding: var(--spacing-md);
245
}
246
+
247
#chat-input {
248
+ background-color: var(--color-input);
249
+ border: none;
250
+ border-radius: var(--border-radius);
251
+ color: var(--color-text);
252
flex-grow: 1;
253
+ font-size: var(--font-size-normal);
254
+ max-height: 9.375rem;
255
+ padding: var(--spacing-sm) var(--spacing-md);
256
resize: none;
183
- /* min-height: 3.125em; 50px */
184
- max-height: 9.375em; /* 150px */
185
- padding: 0.625em 0.9375em; /* 10px 15px */
186
- border: none;
187
- border-radius: 1em; /* 25px */
188
- background-color: #3d3d3d;
189
- color: #e0e0e0;
190
- font-size: 1em; /* 16px */
191
- transition: background-color 0.3s;
257
+ transition: background-color var(--transition-speed);
258
}
259
+
260
#chat-input:focus {
261
+ background-color: var(--color-input-focus);
262
outline: none;
195
- background-color: #4d4d4d;
196
-}
197
-.chat-button {
198
- color: #1e1e1e;
199
- font-size: 1em;
200
- border: none;
201
- border-radius: 50%;
202
- width: 3.125em; /* 50px */
203
- height: 3.125em; /* 50px */
204
- margin-left: 0.625em; /* 10px */
205
- cursor: pointer;
206
- transition: background-color 0.3s, transform 0.1s;
207
-}
208
-.chat-button:active {
209
- transform: scale(0.95);
263
}
264
212
-.chat-list-button {
265
+/* Buttons */
266
+.toggle-sidebar-button {
267
+ background-color: var(--color-secondary);
268
+ border: none;
269
+ border-radius: var(--spacing-xs);
270
+ color: var(--color-text);
271
cursor: pointer;
214
- color: inherit; /* Keep the text color the same as the surrounding text */
215
- text-decoration: none; /* Remove underline by default */
272
+ left: var(--spacing-md);
273
+ padding: var(--spacing-sm) 0.75rem;
274
+ position: absolute;
275
+ top: var(--spacing-md);
276
+ transition: background-color var(--transition-speed);
277
+ z-index: 1000;
278
}
279
218
-.chat-list-button:hover {
219
- text-decoration: underline; /* Add underline on hover */
280
+.toggle-sidebar-button:hover {
281
+ background-color: var(--color-secondary-hover);
282
}
283
222
-#send-button {
223
- background-color: #bb86fc;
224
-}
225
-#send-button:hover {
226
- background-color: #c397ff;
284
+/* Config Section */
285
+.config-section > h4 {
286
+ margin-top: 0;
287
}
288
229
-.pause-button{
230
- background-color: #3270e2;
231
-}
232
-.pause-button:hover{
233
- background-color: #3270e2;
289
+.pref-section > ul {
290
+ margin-bottom: 10px;
291
+ margin-top: 0;
292
}
293
236
-.config-section {
237
- margin-bottom: 1.25em; /* 20px */
238
-}
294
.config-button {
240
- background-color: #3700b3;
241
- color: #ffffff;
295
+ background-color: var(--color-secondary);
296
border: none;
243
- padding: 0.5em 0.75em; /* 8px 12px */
244
- margin: 0.3125em; /* 5px */
245
- border-radius: 0.3125em; /* 5px */
297
+ border-radius: var(--spacing-xs);
298
+ color: var(--color-text);
299
cursor: pointer;
247
- transition: background-color 0.3s;
300
+ display: inline;
301
+ font-family: 'Inter', Arial, Helvetica, sans-serif;
302
+ font-size: var(--font-size-small);
303
+ margin-top: 0;
304
+ padding: var(--spacing-sm) 0.75rem;
305
+ text-wrap: nowrap;
306
+ transition: background-color var(--transition-speed);
307
+ width: 48%;
308
}
309
+
310
.config-button:hover {
250
- background-color: #5c2bd1;
311
+ background-color: var(--color-secondary-hover);
312
}
313
+
314
.config-list {
315
list-style-type: none;
316
+ margin: 0;
317
padding: 0;
318
}
319
+
320
.config-list li {
321
+ align-items: center;
322
+ border-bottom: 1px solid var(--color-border);
323
display: flex;
324
justify-content: space-between;
259
- align-items: center;
260
- padding: 0.3125em 0; /* 5px 0 */
261
- border-bottom: 0.0625em solid #444; /* 1px */
325
+ padding: 0.4rem 0;
326
}
327
+
328
.edit-button {
329
background-color: transparent;
265
- color: #bb86fc;
266
- border: 0.0625em solid #bb86fc; /* 1px */
267
- padding: 0.125em 0.5em; /* 2px 8px */
268
- border-radius: 0.1875em; /* 3px */
330
+ border: 1px solid var(--color-primary);
331
+ border-radius: 0.1875rem;
332
+ color: var(--color-primary);
333
cursor: pointer;
270
- transition: background-color 0.3s;
334
+ padding: 0.125rem 0.5rem;
335
+ transition: background-color var(--transition-speed);
336
}
337
+
338
.edit-button:hover {
339
background-color: rgba(187, 134, 252, 0.2);
340
}
341
+
342
+/* Toggle Switch */
343
.switch {
276
- position: relative;
344
display: inline-block;
278
- width: 3.125em; /* 50px */
279
- height: 1.5em; /* 24px */
345
+ height: 1.5rem;
346
+ position: relative;
347
+ width: 3.125rem;
348
}
349
+
350
.switch input {
351
+ float: right;
352
+ height: 0;
353
opacity: 0;
354
width: 0;
284
- height: 0;
355
}
356
+
357
.slider {
287
- position: absolute;
358
+ background-color: #4a4a4a;
359
+ border-radius: 1.5rem;
360
+ bottom: 0;
361
cursor: pointer;
289
- top: 0;
362
left: 0;
363
+ position: absolute;
364
right: 0;
292
- bottom: 0;
293
- background-color: #4a4a4a;
365
+ top: 0;
366
transition: 0.4s;
295
- border-radius: 1.5em; /* 24px */
367
}
368
+
369
.slider:before {
298
- position: absolute;
299
- content: "";
300
- height: 1em; /* 16px */
301
- width: 1em; /* 16px */
302
- left: 0.25em; /* 4px */
303
- bottom: 0.25em; /* 4px */
370
background-color: white;
305
- transition: 0.4s;
371
border-radius: 50%;
372
+ bottom: 0.25rem;
373
+ content: "";
374
+ height: 1rem;
375
+ left: 0.25rem;
376
+ position: absolute;
377
+ transition: 0.4s;
378
+ width: 1rem;
379
}
380
+
381
input:checked + .slider {
309
- background-color: #bb86fc;
382
+ background-color: var(--color-primary);
383
}
384
+
385
input:checked + .slider:before {
312
- transform: translateX(1.625em); /* 26px */
386
+ transform: translateX(1.625rem);
387
}
388
389
+/* Chat List Button */
390
+.chat-list-button {
391
+ color: inherit;
392
+ cursor: pointer;
393
+ text-decoration: none;
394
+}
395
+
396
+.chat-list-button:hover {
397
+ text-decoration: underline;
398
+}
399
+
400
+.chat-button {
401
+ border: none;
402
+ border-radius: 50%;
403
+ color: var(--color-background);
404
+ cursor: pointer;
405
+ font-size: var(--font-size-normal);
406
+ height: 3.125rem;
407
+ margin-left: var(--spacing-sm);
408
+ transition: background-color var(--transition-speed), transform 0.1s;
409
+ width: 3.125rem;
410
+}
411
+
412
+.chat-button:active {
413
+ transform: scale(0.95);
414
+}
415
+
416
+#send-button {
417
+ background-color: var(--color-primary);
418
+}
419
+
420
+#send-button:hover {
421
+ background-color: #c397ff;
422
+}
423
+
424
+.pause-button {
425
+ background-color: #3270e2;
426
+}
427
+
428
+.pause-button:hover {
429
+ background-color: #4382e8;
430
+}
431
+
432
+/* Utility Classes */
433
.kvps-key {
434
font-weight: bold;
435
}
@@ -320,21 +438,49 @@ input:checked + .slider:before {
438
white-space: pre-wrap;
439
}
440
323
-.msg-json{
324
- display:none;
325
-}
326
-
327
-.msg-thoughts{
441
+.msg-json {
442
+ display: none;
443
}
444
330
-.connected{
331
-color: #6ec583;
445
+.connected {
446
+ color: #6ec583;
447
}
448
334
-.disconnected{
449
+.disconnected {
450
color: #d87979;
451
}
452
338
-.font-bold{
453
+.font-bold {
454
font-weight: bold;
340
-}
\ No newline at end of file
455
+}
456
+
457
+/* Animations */
458
+@keyframes fadeIn {
459
+ from {
460
+ opacity: 0;
461
+ transform: translateY(var(--spacing-sm));
462
+ }
463
+ to {
464
+ opacity: 1;
465
+ transform: translateY(0);
466
+ }
467
+}
468
+
469
+/* Media Queries */
470
+@media (max-width: 768px) {
471
+ #left-panel {
472
+ width: 200px;
473
+ }
474
+
475
+ #left-panel.hidden {
476
+ margin-left: -200px;
477
+ }
478
+
479
+ .config-button {
480
+ font-size: var(--font-size-small);
481
+ }
482
+
483
+ #chat-input {
484
+ font-size: var(--font-size-small);
485
+ }
486
+}