Update index.css
Law and order in the .css
Alessandro committed
Sep 23, 2024 at 22:56 UTC
432fe2b4b395e63ecfb8b66302afa40496ab77b0
1 file changed
+259
-209
webui/index.css
+259
-209
@@ -1,6 +1,7 @@
1
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
2
+
3
:root {
3
- /* Dark mode (updated) */
4
+ /* Dark mode */
5
--color-background-dark: #171717;
6
--color-text-dark: #E0E0E0;
7
--color-primary-dark: #86929d;
@@ -10,10 +11,10 @@
11
--color-message-text-dark: #E0E0E0;
12
--color-panel-dark: #1e1e1e;
13
--color-border-dark: #444;
13
- --color-input-dark: #222222;
14
- --color-input-focus-dark: #1c1c1c;
14
+ --color-input-dark: #222;
15
+ --color-input-focus-dark: #1b1b1b;
16
16
- /* Light mode (updated) */
17
+ /* Light mode */
18
--color-background-light: #F5F7FA;
19
--color-text-light: #333333;
20
--color-primary-light: #273b4d;
@@ -23,8 +24,8 @@
24
--color-message-text-light: #333333;
25
--color-panel-light: #FFFFFF;
26
--color-border-light: #E0E0E0;
26
- --color-input-light: #F0F0F0;
27
- --color-input-focus-light: #E8E8E8;
27
+ --color-input-light: #F1F1F1;
28
+ --color-input-focus-light: #ebeced;
29
30
/* Default to dark mode */
31
--color-background: var(--color-background-dark);
@@ -55,25 +56,6 @@
56
--transition-speed: 0.3s;
57
}
58
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
-
59
/* Reset and Base Styles */
60
body,
61
html {
@@ -85,6 +67,10 @@ html {
67
padding: 0;
68
}
69
70
+body, #left-panel, #chat-input, .message, .config-button, .switch-label {
71
+ transition: background-color 0.3s, color 0.3s, border-color 0.3s; color: var(--color-text);
72
+}
73
+
74
/* Layout */
75
.container {
76
display: flex;
@@ -106,9 +92,10 @@ html {
92
flex-shrink: 0;
93
justify-content: space-between;
94
padding: var(--spacing-md);
109
- transition: margin-left var(--transition-speed) ease-in-out;
95
+ transition: all var(--transition-speed) ease-in-out;
96
width: 250px;
97
color: var(--color-text);
98
+ box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3);
99
}
100
101
#left-panel.hidden {
@@ -116,28 +103,44 @@ html {
103
}
104
105
.left-panel-top {
119
- margin-top: 7.5rem;
120
- overflow-y: hidden;
106
+ margin-top: 35%;
107
+ overflow-y: auto;
108
}
109
123
-/* Apply the custom scrollbar style here */
124
-.left-panel-top::-webkit-scrollbar-track {
125
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
126
- border-radius: 10px;
110
+/* Apply the custom scrollbar style */
111
+.left-panel-top::-webkit-scrollbar {
112
+ width: 0px;
113
}
114
129
-.left-panel-top::-webkit-scrollbar {
130
- width: 6px;
115
+.toggle-sidebar-button {
116
+ background-color: var(--color-secondary);
117
+ border: none;
118
+ border-radius: var(--spacing-xs);
119
+ color: var(--color-text);
120
+ cursor: pointer;
121
+ left: var(--spacing-md);
122
+ padding: var(--spacing-sm) 0.75rem;
123
+ position: absolute;
124
+ top: var(--spacing-md);
125
+ transition: all var(--transition-speed) ease-in-out;
126
+ z-index: 1000;
127
}
128
133
-.left-panel-top::-webkit-scrollbar-thumb {
134
- border-radius: 10px;
135
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
136
- background-color: #555;
129
+.toggle-sidebar-button:hover {
130
+ background-color: #313131;
131
+}
132
+
133
+.toggle-sidebar-button:active {
134
+ background-color: #111;
135
}
136
139
-.switch-label { /* Style for the switch label */
140
- margin-right: 0.5rem; /* Add some space between label and switch */
137
+#sidebar-hamburger-svg {
138
+ height: 24px;
139
+ width: 24px;
140
+}
141
+
142
+.switch-label {
143
+ margin-right: 0.5rem;
144
}
145
/* Right Panel */
146
#right-panel {
@@ -151,13 +154,19 @@ html {
154
margin-left: 0;
155
}
156
154
-/* Time Display */
155
-#utc-time {
157
+#time-date {
158
color: var(--color-text);
159
font-size: var(--font-size-normal);
160
+ text-align: right;
161
+ line-height: 1.2;
162
margin-right: var(--spacing-md);
163
}
164
165
+#user-date {
166
+ font-size: var(--font-size-small);
167
+ opacity: 0.6;
168
+}
169
+
170
/* Logo Container */
171
#logo-container {
172
align-items: center;
@@ -171,10 +180,6 @@ html {
180
z-index: 1001;
181
}
182
174
-#right-panel.expanded #logo-container {
175
- margin-left: 5.5rem;
176
-}
177
-
183
#logo-container a {
184
color: inherit;
185
text-decoration: none;
@@ -184,6 +189,12 @@ html {
189
border-radius: var(--spacing-xs);
190
height: auto;
191
width: 3rem;
192
+ filter: none;
193
+ transition: filter 0.3s ease;
194
+}
195
+
196
+#right-panel.expanded #logo-container {
197
+ margin-left: 5.5rem;
198
}
199
200
/* Typography */
@@ -200,8 +211,7 @@ h4 {
211
#a0version {
212
color: var(--color-text);
213
opacity: 0.7;
203
- font-size: var(--font-size-small);
204
- padding-top: 10px;
214
+ font-size: 0.7rem;
215
}
216
217
/* Chat History */
@@ -210,29 +220,33 @@ h4 {
220
flex-direction: column;
221
flex-grow: 1;
222
overflow-y: auto;
223
+ overflow-x: hidden;
224
padding: var(--spacing-md);
225
}
226
227
/* Apply the custom scrollbar style here */
217
-#chat-history::-webkit-scrollbar-track {
218
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
219
- border-radius: 10px;
228
+#chat-history::-webkit-scrollbar {
229
+ width: 5px;
230
}
231
222
-#chat-history::-webkit-scrollbar {
223
- width: 6px;
232
+#chat-history::-webkit-scrollbar-track {
233
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
234
+ border-radius: 3px;
235
}
236
237
#chat-history::-webkit-scrollbar-thumb {
227
- border-radius: 10px;
228
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
229
- --color-background: var(--color-background-light);
230
- transition: background-color 0.3s ease; /* Adjust duration and easing as needed */
238
+ border-radius: 3px;
239
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
240
+ background-color: #555;
241
+ transition: background-color var(--transition-speed) ease-in-out;
242
}
243
244
#chat-history::-webkit-scrollbar-thumb:hover {
234
- background-color: #555;
235
- transition: background-color 0.3s ease; /* Adjust duration and easing as needed */
245
+ background-color: #666;
246
+}
247
+
248
+#chat-history::-webkit-scrollbar-thumb:active {
249
+ background-color: #888;
250
}
251
252
/* Message Styles */
@@ -285,92 +299,6 @@ h4 {
299
.message-warning { background-color: #c2771b; color: #E0E0E0; }
300
.message-error { background-color: #ab1313; color: #E0E0E0; }
301
288
-
289
-/* Adjust other elements for dark mode */
290
-#left-panel {
291
- box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3);
292
-}
293
-
294
-.config-button {
295
- background-color: var(--color-secondary);
296
- color: var(--color-text);
297
-}
298
-
299
-.config-button:hover {
300
- background-color: #2d2f31;
301
-}
302
-
303
-.edit-button {
304
- border-color: var(--color-primary);
305
- color: var(--color-primary);
306
-}
307
-
308
-.edit-button:hover {
309
- background-color: #313131;
310
-}
311
-
312
-.slider {
313
- background-color: #242424;
314
-}
315
-
316
-input:checked + .slider {
317
- background-color: var(--color-primary);
318
-}
319
-
320
-.light-mode .message-default { background-color: #E3F2FD; color: #1A242F; }
321
-.light-mode .message-agent { background-color: #e9ebf3; color: #2C3E50; }
322
-.light-mode .message-agent-response { background-color: #E1E6F2; color: #002b54; }
323
-.light-mode .message-agent-delegation { background-color: #E0F2F1; color: #00695C; }
324
-.light-mode .message-tool { background-color: #EDE7F6; color: #5D4C6A; }
325
-.light-mode .message-code-exe { background-color: #FCE4EC; color: #3a147c; }
326
-.light-mode .message-adhoc { background-color: #FFF3E0; color: #cf7b0e; }
327
-.light-mode .message-info { background-color: #E8EAF6; color: var(--color-panel); }
328
-.light-mode .message-warning { background-color: #FFF3E0; color: #c2771b; }
329
-.light-mode .message-error { background-color: #FFEBEE; color: #ab1313; }
330
-.light-mode .message-user {
331
- background-color: #eaeaea;
332
- color: #4e4e4e;
333
-}
334
-
335
-.light-mode .connected {
336
- color: #4CAF50;
337
-}
338
-
339
-.light-mode .disconnected {
340
- color: #F44336;
341
-}
342
-
343
-/* Adjust other elements for light mode */
344
-.light-mode #left-panel {
345
- box-shadow: 1px 0 25px rgba(0, 0, 0, 0.05);
346
-}
347
-
348
-.light-mode .config-button {
349
- background-color: var(--color-secondary);
350
- color: #333333;
351
-}
352
-
353
-.light-mode .config-button:hover {
354
- background-color: #d6dae8;
355
-}
356
-
357
-.light-mode .edit-button {
358
- border-color: var(--color-primary-light);
359
- color: var(--color-primary-light);
360
-}
361
-
362
-.light-mode .edit-button:hover {
363
- background-color: #e4e7f0;
364
-}
365
-
366
-.light-mode .slider {
367
- background-color: #BDBDBD;
368
-}
369
-
370
-.light-mode input:checked + .slider {
371
- background-color: var(--color-primary-light);
372
-}
373
-
302
/* Agent and AI Info */
303
.agent-start {
304
color: var(--color-text);
@@ -408,7 +336,7 @@ input:checked + .slider {
336
.message-action {
337
cursor: pointer;
338
opacity: 0.7;
411
- transition: opacity var(--transition-speed);
339
+ transition: opacity var(--transition-speed) ease-in-out;
340
}
341
342
.message-action:hover {
@@ -419,7 +347,9 @@ input:checked + .slider {
347
#input-section {
348
background-color: var(--color-panel);
349
display: flex;
422
- padding: var(--spacing-md);
350
+ padding: var(--spacing-sm) var(--spacing-md);
351
+ align-items: center;
352
+ flex-shrink: 0;
353
}
354
355
#chat-input {
@@ -428,53 +358,38 @@ input:checked + .slider {
358
border-radius: var(--border-radius);
359
color: var(--color-text);
360
flex-grow: 1;
431
- font-size: var(--font-size-normal);
432
- max-height: 9.375rem;
433
- padding: var(--spacing-sm) var(--spacing-md);
361
+ font-size: 0.7rem;
362
+ max-height: 9rem;
363
+ min-height: 20px;
364
resize: none;
435
- transition: background-color var(--transition-speed);
365
+ padding: var(--spacing-sm) var(--spacing-md);
366
+ transition: all var(--transition-speed) ease-in-out;
367
+ overflow: hidden;
368
}
369
370
#chat-input:focus {
371
background-color: var(--color-input-focus);
372
+ font-size: 0.8rem;
373
outline: none;
374
}
375
443
-/* Buttons */
444
-.toggle-sidebar-button {
445
- background-color: var(--color-secondary);
446
- border: none;
447
- border-radius: var(--spacing-xs);
448
- color: var(--color-text);
449
- cursor: pointer;
450
- left: var(--spacing-md);
451
- padding: var(--spacing-sm) 0.75rem;
452
- position: absolute;
453
- top: var(--spacing-md);
454
- transition: background-color var(--transition-speed);
455
- z-index: 1000;
456
-}
457
-
458
-.toggle-sidebar-button:hover {
459
- background-color: #313131;
460
-}
461
-
462
-.light-mode .toggle-sidebar-button:hover {
463
- background-color: #d6dae8;
464
-}
465
-
376
/* Config Section */
377
.config-section > h4 {
378
margin-top: 0;
379
}
380
471
-.pref-section > ul {
472
- margin-bottom: 10px;
473
- margin-top: 0;
381
+.config-list {
382
+ list-style-type: none;
383
+ margin: 0;
384
+ padding: 0;
385
}
386
476
-.pref-section {
477
- font-size: var(--font-size-small);
387
+.config-list li {
388
+ align-items: center;
389
+ border-bottom: 1px solid var(--color-border);
390
+ display: flex;
391
+ justify-content: space-between;
392
+ padding: 0.35rem 0;
393
}
394
395
.config-button {
@@ -487,22 +402,16 @@ input:checked + .slider {
402
margin-top: 0;
403
padding: var(--spacing-sm) 0.75rem;
404
text-wrap: nowrap;
490
- transition: background-color var(--transition-speed);
405
+ background-color: var(--color-secondary);
406
width: 48%;
407
}
408
494
-.config-list {
495
- list-style-type: none;
496
- margin: 0;
497
- padding: 0;
409
+.config-button:hover {
410
+ background-color: #2d2f31;
411
}
412
500
-.config-list li {
501
- align-items: center;
502
- border-bottom: 1px solid var(--color-border);
503
- display: flex;
504
- justify-content: space-between;
505
- padding: 0.4rem 0;
413
+.config-button:active {
414
+ background-color: #111;
415
}
416
417
.edit-button {
@@ -512,19 +421,33 @@ input:checked + .slider {
421
color: var(--color-primary);
422
cursor: pointer;
423
padding: 0.125rem 0.5rem;
515
- transition: background-color var(--transition-speed);
424
+ transition: all var(--transition-speed) ease-in-out;
425
}
426
427
.edit-button:hover {
428
background-color: #32455690;
429
}
430
431
+.edit-button:active {
432
+ background-color: #131a2090;
433
+ color:rgba(253, 253, 253, 0.35);
434
+}
435
+
436
+.pref-section {
437
+ font-size: var(--font-size-small);
438
+}
439
+
440
+.pref-section > ul {
441
+ margin-bottom: 15px;
442
+ margin-top: 0;
443
+}
444
+
445
/* Toggle Switch */
446
.switch {
447
display: inline-block;
525
- height: 1.5rem;
448
+ height: 1.15rem;
449
position: relative;
527
- width: 3.125rem;
450
+ width: 2.2rem;
451
}
452
453
.switch input {
@@ -536,34 +459,34 @@ input:checked + .slider {
459
460
.slider {
461
background-color: #4a4a4a;
539
- border-radius: 1.5rem;
462
+ border-radius: 1.15rem;
463
bottom: 0;
464
cursor: pointer;
465
left: 0;
466
position: absolute;
467
right: 0;
468
top: 0;
546
- transition: 0.4s;
469
+ transition: 0.4s ease-in-out;
470
}
471
472
.slider:before {
473
background-color: white;
474
border-radius: 50%;
552
- bottom: 0.25rem;
475
+ bottom: 0.15rem;
476
content: "";
554
- height: 1rem;
555
- left: 0.25rem;
477
+ height: 0.85rem;
478
+ left: 0.15rem;
479
position: absolute;
557
- transition: 0.4s;
558
- width: 1rem;
480
+ transition: 0.4s ease-in-out;
481
+ width: 0.85rem;
482
}
483
484
input:checked + .slider {
562
- background-color: var(--color-primary);
485
+ background-color: var(--color-primary-light);
486
}
487
488
input:checked + .slider:before {
566
- transform: translateX(1.625rem);
489
+ transform: translateX(1.05rem);
490
}
491
492
/* Chat List Button */
@@ -585,20 +508,31 @@ input:checked + .slider:before {
508
font-size: var(--font-size-normal);
509
height: 3.125rem;
510
margin-left: var(--spacing-sm);
588
- transition: background-color var(--transition-speed), transform 0.1s;
511
+ transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
512
width: 3.125rem;
513
+ flex-shrink: 0;
514
+ min-width: 3.125rem;
515
+ display: flex;
516
+ align-items: center;
517
+ justify-content: center;
518
+ padding:0;
519
}
520
521
.chat-button:active {
522
transform: scale(0.95);
523
}
524
525
+.chat-button svg {
526
+ width: 1.5rem;
527
+ height: 1.5rem;
528
+}
529
+
530
#send-button {
531
background-color: var(--color-primary);
532
}
533
534
#send-button:hover {
601
- background-color: #D1C4E9;
535
+ background-color: var(--color-primary-light);
536
}
537
538
.pause-button {
@@ -609,6 +543,112 @@ input:checked + .slider:before {
543
background-color: #4382e8;
544
}
545
546
+ /* Light mode class */
547
+.light-mode {
548
+ --color-background: var(--color-background-light);
549
+ --color-text: var(--color-text-light);
550
+ --color-primary: var(--color-primary-light);
551
+ --color-secondary: var(--color-secondary-light);
552
+ --color-accent: var(--color-accent-light);
553
+ --color-message-bg: var(--color-message-bg-light);
554
+ --color-message-text: var(--color-message-text-light);
555
+ --color-panel: var(--color-panel-light);
556
+ --color-border: var(--color-border-light);
557
+ --color-input: var(--color-input-light);
558
+ --color-input-focus: var(--color-input-focus-light);
559
+}
560
+
561
+.light-mode .message-default { background-color: #E3F2FD; color: #1A242F; }
562
+.light-mode .message-agent { background-color: #e9ebf3; color: #2C3E50; }
563
+.light-mode .message-agent-response { background-color: #E1E6F2; color: #002b54; }
564
+.light-mode .message-agent-delegation { background-color: #E0F2F1; color: #00695C; }
565
+.light-mode .message-tool { background-color: #EDE7F6; color: #5D4C6A; }
566
+.light-mode .message-code-exe { background-color: #FCE4EC; color: #3a147c; }
567
+.light-mode .message-adhoc { background-color: #FFF3E0; color: #cf7b0e; }
568
+.light-mode .message-info { background-color: #E8EAF6; color: var(--color-panel); }
569
+.light-mode .message-warning { background-color: #FFF3E0; color: #c2771b; }
570
+.light-mode .message-error { background-color: #FFEBEE; color: #ab1313; }
571
+.light-mode .message-user {
572
+ background-color: #eaeaea;
573
+ color: #4e4e4e;
574
+}
575
+
576
+.light-mode .connected {
577
+ color: #4CAF50;
578
+}
579
+
580
+.light-mode .disconnected {
581
+ color: #F44336;
582
+}
583
+
584
+/* Adjust other elements for light mode */
585
+.light-mode #left-panel {
586
+ box-shadow: 1px 0 25px rgba(0, 0, 0, 0.05);
587
+}
588
+
589
+.light-mode .config-button {
590
+ background-color: var(--color-secondary);
591
+ color: #333333;
592
+}
593
+
594
+.light-mode .config-button:hover {
595
+ background-color: #d6dae8;
596
+}
597
+
598
+.light-mode .config-button:active {
599
+ background-color: #bdc0cb;
600
+}
601
+
602
+.light-mode .edit-button {
603
+ border-color: var(--color-primary-light);
604
+ color: var(--color-primary-light);
605
+}
606
+
607
+.light-mode .edit-button:hover {
608
+ background-color: #e4e7f0;
609
+}
610
+
611
+.light-mode .edit-button:active {
612
+ background-color: #979fb9;
613
+ color:rgba(0, 0, 0, 0.35);
614
+}
615
+
616
+.light-mode #send-button {
617
+ background-color: var(--color-primary-light);
618
+}
619
+
620
+.light-mode #send-button:hover {
621
+ background-color: var(--color-primary-dark);
622
+}
623
+
624
+.light-mode .pause-button {
625
+ background-color: #4382e8;
626
+}
627
+
628
+.light-mode .pause-button:hover {
629
+ background-color: #3270e2;
630
+}
631
+
632
+.light-mode .slider {
633
+ background-color: #BDBDBD;
634
+}
635
+
636
+.light-mode input:checked + .slider {
637
+ background-color: var(--color-primary-dark);
638
+}
639
+
640
+.light-mode .toggle-sidebar-button:hover {
641
+ background-color: #d6dae8;
642
+}
643
+
644
+.light-mode .toggle-sidebar-button:active {
645
+ background-color: #bdc0cb;
646
+}
647
+
648
+.light-mode #logo-container img {
649
+ filter: invert(100%) grayscale(100%);
650
+}
651
+
652
/* Utility Classes */
653
.kvps-key {
654
font-weight: bold;
@@ -622,6 +662,10 @@ input:checked + .slider:before {
662
display: none;
663
}
664
665
+.msg-thoughts{
666
+ display: auto;
667
+}
668
+
669
/* Update connected/disconnected status colors for dark mode */
670
.connected {
671
color: #4CAF50;
@@ -646,10 +690,16 @@ input:checked + .slider:before {
690
transform: translateY(0);
691
}
692
}
649
-.config-button {
650
- font-size: var(--font-size-small);
651
-}
693
653
-#chat-input {
654
- font-size: var(--font-size-small);
694
+@media (max-width: 768px) {
695
+ #left-panel.expanded #chat-input {
696
+ display: none;
697
+ overflow: hidden;
698
+ flex-shrink: 0;
699
+ }
700
+
701
+ #left-panel.expanded #time-date {
702
+ flex-shrink: 0;
703
+ text-wrap: nowrap;
704
+ }
705
}