Update index.css
• Light/Dark mode • New colour scheme
Alessandro committed
Sep 21, 2024 at 04:25 UTC
fd1ea75c66540a919a0b5e175779ba0f499cc6ea
1 file changed
+195
-64
webui/index.css
+195
-64
@@ -1,30 +1,77 @@
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');
1
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..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;
3
+ /* Dark mode (updated) */
4
+ --color-background-dark: #171717;
5
+ --color-text-dark: #E0E0E0;
6
+ --color-primary-dark: #86929d;
7
+ --color-secondary-dark: #3f3f3f;
8
+ --color-accent-dark: #CF6679;
9
+ --color-message-bg-dark: #2D2D2D;
10
+ --color-message-text-dark: #E0E0E0;
11
+ --color-panel-dark: #1e1e1e;
12
+ --color-border-dark: #444;
13
+ --color-input-dark: #222222;
14
+ --color-input-focus-dark: #1c1c1c;
15
14
- /* Spacing variables */
15
- --spacing-xs: 0.3125rem;
16
- --spacing-sm: 0.625rem;
17
- --spacing-md: 1.25rem;
18
- --spacing-lg: 2rem;
16
+ /* Light mode (updated) */
17
+ --color-background-light: #F5F7FA;
18
+ --color-text-light: #333333;
19
+ --color-primary-light: #273b4d;
20
+ --color-secondary-light: #e8eaf6;
21
+ --color-accent-light: #B00020;
22
+ --color-message-bg-light: #FFFFFF;
23
+ --color-message-text-light: #333333;
24
+ --color-panel-light: #FFFFFF;
25
+ --color-border-light: #E0E0E0;
26
+ --color-input-light: #F0F0F0;
27
+ --color-input-focus-light: #E8E8E8;
28
20
- /* Font sizes */
21
- --font-size-small: 0.8rem;
22
- --font-size-normal: 1rem;
23
- --font-size-large: 1.2rem;
29
+ /* Default to dark mode */
30
+ --color-background: var(--color-background-dark);
31
+ --color-text: var(--color-text-dark);
32
+ --color-primary: var(--color-primary-dark);
33
+ --color-secondary: var(--color-secondary-dark);
34
+ --color-accent: var(--color-accent-dark);
35
+ --color-message-bg: var(--color-message-bg-dark);
36
+ --color-message-text: var(--color-message-text-dark);
37
+ --color-panel: var(--color-panel-dark);
38
+ --color-border: var(--color-border-dark);
39
+ --color-input: var(--color-input-dark);
40
+ --color-input-focus: var(--color-input-focus-dark);
41
25
- /* Other variables */
26
- --border-radius: 1.125rem;
27
- --transition-speed: 0.3s;
42
+ /* Spacing variables */
43
+ --spacing-xs: 0.3125rem;
44
+ --spacing-sm: 0.625rem;
45
+ --spacing-md: 1.25rem;
46
+ --spacing-lg: 2rem;
47
+
48
+ /* Font sizes */
49
+ --font-size-small: 0.8rem;
50
+ --font-size-normal: 1rem;
51
+ --font-size-large: 1.2rem;
52
+
53
+ /* Other variables */
54
+ --border-radius: 1.125rem;
55
+ --transition-speed: 0.3s;
56
+ }
57
+
58
+ /* Light mode class */
59
+ .light-mode {
60
+ --color-background: var(--color-background-light);
61
+ --color-text: var(--color-text-light);
62
+ --color-primary: var(--color-primary-light);
63
+ --color-secondary: var(--color-secondary-light);
64
+ --color-accent: var(--color-accent-light);
65
+ --color-message-bg: var(--color-message-bg-light);
66
+ --color-message-text: var(--color-message-text-light);
67
+ --color-panel: var(--color-panel-light);
68
+ --color-border: var(--color-border-light);
69
+ --color-input: var(--color-input-light);
70
+ --color-input-focus: var(--color-input-focus-light);
71
+}
72
+
73
+body, #left-panel, #chat-input, .message, .config-button, .switch-label {
74
+ transition: background-color 0.3s, color 0.3s, border-color 0.3s; color: var(--color-text);
75
}
76
77
/* Reset and Base Styles */
@@ -32,7 +79,7 @@ body,
79
html {
80
background-color: var(--color-background);
81
color: var(--color-text);
35
- font-family: 'Inter', Arial, Helvetica, sans-serif;
82
+ font-family: 'Rubik', Arial, Helvetica, sans-serif;
83
height: 100%;
84
margin: 0;
85
padding: 0;
@@ -61,6 +108,7 @@ html {
108
padding: var(--spacing-md);
109
transition: margin-left var(--transition-speed) ease-in-out;
110
width: 250px;
111
+ color: var(--color-text);
112
}
113
114
#left-panel.hidden {
@@ -72,6 +120,9 @@ html {
120
overflow-y: auto;
121
}
122
123
+.switch-label { /* Style for the switch label */
124
+ margin-right: 0.5rem; /* Add some space between label and switch */
125
+}
126
/* Right Panel */
127
#right-panel {
128
display: flex;
@@ -131,7 +182,8 @@ h4 {
182
}
183
184
#a0version {
134
- color: #8a8a8a;
185
+ color: var(--color-text);
186
+ opacity: 0.7;
187
font-size: var(--font-size-small);
188
padding-top: 10px;
189
}
@@ -152,6 +204,7 @@ h4 {
204
}
205
206
.message {
207
+ background-color: var(--color-message-bg);
208
border-radius: var(--border-radius);
209
padding: var(--spacing-sm) var(--spacing-md);
210
}
@@ -182,16 +235,103 @@ h4 {
235
margin-left: var(--spacing-lg);
236
}
237
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; }
238
+/* Update message types for dark mode */
239
+.message-default { background-color: #1A242F; color: #E0E0E0; }
240
+.message-agent { background-color: #2C3E50; color: #E0E0E0; }
241
+.message-agent-response { background-color: #002b54; color: #E0E0E0; }
242
+.message-agent-delegation { background-color: #00695C; color: #E0E0E0; }
243
+.message-tool { background-color: #5D4C6A; color: #E0E0E0; }
244
+.message-code-exe { background-color: #3a147c; color: #E0E0E0; }
245
+.message-adhoc { background-color: #cf7b0e; color: #E0E0E0; }
246
+.message-info { background-color: var(--color-panel); color: #E0E0E0; }
247
+.message-warning { background-color: #c2771b; color: #E0E0E0; }
248
+.message-error { background-color: #ab1313; color: #E0E0E0; }
249
+
250
+
251
+/* Adjust other elements for dark mode */
252
+#left-panel {
253
+ box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3);
254
+}
255
+
256
+.config-button {
257
+ background-color: var(--color-secondary);
258
+ color: var(--color-text);
259
+}
260
+
261
+.config-button:hover {
262
+ background-color: #2d2f31;
263
+}
264
+
265
+.edit-button {
266
+ border-color: var(--color-primary);
267
+ color: var(--color-primary);
268
+}
269
+
270
+.edit-button:hover {
271
+ background-color: #313131;
272
+}
273
+
274
+.slider {
275
+ background-color: #242424;
276
+}
277
+
278
+input:checked + .slider {
279
+ background-color: var(--color-primary);
280
+}
281
+
282
+.light-mode .message-default { background-color: #E3F2FD; color: #1A242F; }
283
+.light-mode .message-agent { background-color: #e9ebf3; color: #2C3E50; }
284
+.light-mode .message-agent-response { background-color: #E1E6F2; color: #002b54; }
285
+.light-mode .message-agent-delegation { background-color: #E0F2F1; color: #00695C; }
286
+.light-mode .message-tool { background-color: #EDE7F6; color: #5D4C6A; }
287
+.light-mode .message-code-exe { background-color: #FCE4EC; color: #3a147c; }
288
+.light-mode .message-adhoc { background-color: #FFF3E0; color: #cf7b0e; }
289
+.light-mode .message-info { background-color: #E8EAF6; color: var(--color-panel); }
290
+.light-mode .message-warning { background-color: #FFF3E0; color: #c2771b; }
291
+.light-mode .message-error { background-color: #FFEBEE; color: #ab1313; }
292
+.light-mode .message-user {
293
+ background-color: #eaeaea;
294
+ color: #4e4e4e;
295
+}
296
+
297
+.light-mode .connected {
298
+ color: #4CAF50;
299
+}
300
+
301
+.light-mode .disconnected {
302
+ color: #F44336;
303
+}
304
+
305
+/* Adjust other elements for light mode */
306
+.light-mode #left-panel {
307
+ box-shadow: 1px 0 25px rgba(0, 0, 0, 0.05);
308
+}
309
+
310
+.light-mode .config-button {
311
+ background-color: var(--color-secondary);
312
+ color: #333333;
313
+}
314
+
315
+.light-mode .config-button:hover {
316
+ background-color: #d6dae8;
317
+}
318
+
319
+.light-mode .edit-button {
320
+ border-color: var(--color-primary-light);
321
+ color: var(--color-primary-light);
322
+}
323
+
324
+.light-mode .edit-button:hover {
325
+ background-color: #e4e7f0;
326
+}
327
+
328
+.light-mode .slider {
329
+ background-color: #BDBDBD;
330
+}
331
+
332
+.light-mode input:checked + .slider {
333
+ background-color: var(--color-primary-light);
334
+}
335
336
/* Agent and AI Info */
337
.agent-start {
@@ -278,7 +418,11 @@ h4 {
418
}
419
420
.toggle-sidebar-button:hover {
281
- background-color: var(--color-secondary-hover);
421
+ background-color: #313131;
422
+}
423
+
424
+.light-mode .toggle-sidebar-button:hover {
425
+ background-color: #d6dae8;
426
}
427
428
/* Config Section */
@@ -291,14 +435,16 @@ h4 {
435
margin-top: 0;
436
}
437
438
+.pref-section {
439
+ font-size: var(--font-size-small);
440
+}
441
+
442
.config-button {
295
- background-color: var(--color-secondary);
443
border: none;
444
border-radius: var(--spacing-xs);
298
- color: var(--color-text);
445
cursor: pointer;
446
display: inline;
301
- font-family: 'Inter', Arial, Helvetica, sans-serif;
447
+ font-family: 'Rubik', Arial, Helvetica, sans-serif;
448
font-size: var(--font-size-small);
449
margin-top: 0;
450
padding: var(--spacing-sm) 0.75rem;
@@ -307,10 +453,6 @@ h4 {
453
width: 48%;
454
}
455
310
-.config-button:hover {
311
- background-color: var(--color-secondary-hover);
312
-}
313
-
456
.config-list {
457
list-style-type: none;
458
margin: 0;
@@ -336,7 +478,7 @@ h4 {
478
}
479
480
.edit-button:hover {
339
- background-color: rgba(187, 134, 252, 0.2);
481
+ background-color: #32455690;
482
}
483
484
/* Toggle Switch */
@@ -418,7 +560,7 @@ input:checked + .slider:before {
560
}
561
562
#send-button:hover {
421
- background-color: #c397ff;
563
+ background-color: #D1C4E9;
564
}
565
566
.pause-button {
@@ -442,12 +584,13 @@ input:checked + .slider:before {
584
display: none;
585
}
586
587
+/* Update connected/disconnected status colors for dark mode */
588
.connected {
446
- color: #6ec583;
589
+ color: #4CAF50;
590
}
591
592
.disconnected {
450
- color: #d87979;
593
+ color: #F44336;
594
}
595
596
.font-bold {
@@ -465,22 +608,10 @@ input:checked + .slider:before {
608
transform: translateY(0);
609
}
610
}
611
+.config-button {
612
+ font-size: var(--font-size-small);
613
+}
614
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
- }
615
+#chat-input {
616
+ font-size: var(--font-size-small);
617
}