Squashed commit of the following:
commit e626817332661f48ec97da1d4ab42479ca40b50f Author: Alessandro <155005371+3clyp50@users.noreply.github.com> Date: Wed Nov 27 12:51:22 2024 +0100 refactor: modals css Modals now get the base styles from modals.css, with any spec in the individual files (settings.css, file_manager.css, ecc). commit 306db0ca395a9f5691e558c7a18a02c9cecabaa3 Author: Alessandro <155005371+3clyp50@users.noreply.github.com> Date: Wed Nov 27 03:17:20 2024 +0100 style: new action buttons + ghost buttons Updated styles for buttons, switches, and overall UI graphic improvement commit c95a379bb590e695f5350bc9a964e4d599756a3a Author: Alessandro <real.eclypso@gmail.com> Date: Tue Nov 26 20:17:18 2024 +0100 fix: status-icon commit eddafa8798507e7800606b6216554ad107b74655 Author: Alessandro <155005371+3clyp50@users.noreply.github.com> Date: Fri Nov 22 01:28:04 2024 +0100 cleanup: webui folder cleanup (history) cleanup: webui sidebar, icons, modals
frdel committed
Nov 27, 2024 at 17:30 UTC
f2057d390178a760b7a857f918a8bb4dee586194
28 files changed
+853
-674
webui/css/file_browser.css
renamed
+12
-107
@@ -1,81 +1,3 @@
1
-/* Work Directory Modal Styles */
2
-.modal-overlay {
3
- position: fixed;
4
- top: 0;
5
- left: 0;
6
- right: 0;
7
- bottom: 0;
8
- background-color: rgba(0, 0, 0, 0.75);
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- z-index: 2002;
13
-}
14
-
15
-.modal-container {
16
- background-color: var(--color-panel);
17
- border-radius: 12px;
18
- width: 90%;
19
- max-width: 800px;
20
- max-height: 80vh;
21
- overflow: hidden;
22
- box-shadow: 0 4px 23px 0 rgba(0, 0, 0, 0.2);
23
-}
24
-
25
-.modal-header {
26
- padding: 1rem 2rem;
27
- border-bottom: 1px solid var(--color-border);
28
- display: flex;
29
- justify-content: space-between;
30
- align-items: center;
31
-}
32
-
33
-.modal-subheader {
34
- padding: 0.7rem 1.5rem;
35
- display: inline;
36
- justify-content: space-between;
37
- align-items: center;
38
-}
39
-
40
-.modal-title {
41
- font-size: 1.25rem;
42
- font-weight: 500;
43
- color: var(--color-text);
44
-}
45
-
46
-.modal-close {
47
- background: none;
48
- font-size: xx-large;
49
- border: none;
50
- color: var(--color-text);
51
- opacity: 0.7;
52
- cursor: pointer;
53
- padding: 0.5rem;
54
- transition: opacity 0.2s;
55
-}
56
-
57
-.modal-close:hover {
58
- opacity: 1;
59
-}
60
-
61
-.modal-content {
62
- padding: 0.5rem 1.5rem 0rem 1.5rem;
63
- overflow-y: auto;
64
- max-height: calc(80vh - 4rem);
65
-}
66
-
67
-.modal-footer {
68
- padding: var(--spacing-md);
69
- border-top: 1px solid var(--color-border);
70
- display: flex;
71
- justify-content: flex-end;
72
- background: var(--color-background);
73
-}
74
-
75
-h2 {
76
- color: var(--color-primary);
77
-}
78
-
1
/* File Browser Styles */
2
.files-list {
3
width: 100%;
@@ -102,6 +24,7 @@ h2 {
24
grid-template-columns: 2fr 0.6fr 1.0fr 80px;
25
align-items: center;
26
padding: 8px 0;
27
+ font-size: 0.875rem;
28
border-top: 1px solid var(--color-border);
29
transition: background-color 0.2s;
30
white-space: nowrap;
@@ -109,7 +32,7 @@ h2 {
32
}
33
34
.file-item:hover {
112
- background-color: var(--hover-bg);
35
+ background-color: var(--color-secondary);
36
cursor: pointer;
37
}
38
@@ -150,13 +73,6 @@ h2 {
73
}
74
75
/* Light mode adjustments */
153
-.light-mode .modal-container {
154
- background-color: var(--color-panel-light);
155
-}
156
-
157
-.light-mode .file-item {
158
- background-color: var(--color-background-light);
159
-}
76
77
.light-mode .file-item:hover {
78
background-color: var(--color-secondary-light);
@@ -199,7 +115,6 @@ h2 {
115
}
116
117
.current-path {
202
- color: var(--color-text);
118
font-family: monospace;
119
}
120
@@ -209,7 +124,7 @@ h2 {
124
}
125
126
.file-item[data-is-dir="true"]:hover {
212
- background-color: var(--hover-bg);
127
+ background-color: var(--color-secondary);
128
}
129
130
/* Button Section */
@@ -225,7 +140,7 @@ transition: background-color 0.2s;
140
}
141
142
.btn-upload {
228
- background: #3270e2;
143
+ background: #4248f1;
144
color: white;
145
display: flex;
146
transition: background 0.3s ease-in-out;
@@ -240,7 +155,11 @@ transition: background-color 0.2s;
155
}
156
157
.upload-button:hover {
243
-background-color: var(--color-primary-dark);
158
+background-color: #353bc5;
159
+}
160
+
161
+.upload-button:active {
162
+background-color: #2b309c;
163
}
164
165
/* Delete Button */
@@ -287,8 +206,8 @@ background-color: var(--color-primary-dark);
206
background-color: var(--color-primary-light);
207
}
208
290
-.button-section {
291
- gap: 1rem;
209
+.light-mode .download-button:hover {
210
+ background-color: #c6d4de;
211
}
212
213
@media (max-width: 768px) {
@@ -297,6 +216,7 @@ background-color: var(--color-primary-dark);
216
grid-template-columns: 1fr 0.5fr 80px;
217
background: var(--secondary-bg);
218
padding: 8px 0;
219
+ align-items:center;
220
font-weight: bold;
221
border-bottom: 1px solid var(--border-color);
222
}
@@ -345,19 +265,4 @@ background-color: var(--color-primary-dark);
265
.file-date {
266
display: none;
267
}
348
-
349
- #buttons-container {
350
- max-height: 50px;
351
- }
352
-
353
- .btn-upload {
354
- margin: 0 auto;
355
- text-wrap: wrap;
356
- gap: 0.5rem;
357
- align-items:center;
358
- }
359
-
360
- .btn-upload > svg {
361
- width: 20px;
362
- }
268
}
\ No newline at end of file
webui/css/history.css
new
+30
@@ -0,0 +1,30 @@
1
+#json-viewer-container{
2
+ width: 100%;
3
+ height: 60vh;
4
+ overflow: auto;
5
+}
6
+
7
+#json-viewer-container::-webkit-scrollbar {
8
+ width: 6px;
9
+ height: 6px;
10
+}
11
+
12
+#json-viewer-container::-webkit-scrollbar-track {
13
+ background: transparent;
14
+ margin: 4px 0;
15
+ border-radius: 6px;
16
+}
17
+
18
+#json-viewer-container::-webkit-scrollbar-thumb {
19
+ background-color: rgba(155, 155, 155, 0.5);
20
+ border-radius: 6px;
21
+ transition: background-color 0.2s ease;
22
+}
23
+
24
+#json-viewer-container::-webkit-scrollbar-thumb:hover {
25
+ background-color: rgba(155, 155, 155, 0.7);
26
+}
27
+
28
+#viewer {
29
+ overflow: hidden;
30
+}
\ No newline at end of file
webui/css/modals.css
new
+257
@@ -0,0 +1,257 @@
1
+/* Standard Modal Styles */
2
+.modal-overlay {
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ right: 0;
7
+ bottom: 0;
8
+ background: rgba(0, 0, 0, 0.5);
9
+ display: flex;
10
+ align-items: center;
11
+ justify-content: center;
12
+ z-index: 2001;
13
+}
14
+
15
+.modal-container {
16
+ background-color: var(--color-panel);
17
+ border-radius: 12px;
18
+ width: 90%;
19
+ max-width: 800px;
20
+ max-height: 80vh;
21
+ display: flex;
22
+ flex-direction: column;
23
+ overflow: hidden;
24
+ box-shadow: 0 4px 23px 0 rgba(0, 0, 0, 0.2);
25
+}
26
+
27
+.light-mode .modal-container {
28
+ background-color: var(--color-panel-light);
29
+}
30
+
31
+.modal-header {
32
+ border-bottom: 1px solid var(--color-border);
33
+ background-color: var(--color-background);
34
+ color: var(--color-primary);
35
+ display: grid;
36
+ grid-template-columns: 1fr 10fr 1fr;
37
+ padding: 0.75rem 1.3rem 0.5rem 2rem;
38
+ align-items: center;
39
+ justify-content:space-between;
40
+}
41
+
42
+.modal-header h2 {
43
+ color: var(--color-primary);
44
+ font-size: var(--font-size-large);
45
+ margin: 0;
46
+}
47
+
48
+.modal-header > svg {
49
+ fill: var(--color-primary);
50
+ max-height: 30px !important;
51
+}
52
+
53
+.modal-subheader {
54
+ padding: 0.7rem 1.5rem;
55
+ display: inline;
56
+ justify-content: space-between;
57
+ align-items: center;
58
+}
59
+
60
+.modal-title {
61
+ font-size: 1.25rem;
62
+ font-weight: 500;
63
+ color: var(--color-text);
64
+}
65
+
66
+.modal-close {
67
+ background: none;
68
+ font-size: xx-large;
69
+ border: none;
70
+ color: var(--color-text);
71
+ opacity: 0.7;
72
+ cursor: pointer;
73
+ padding: 0.5rem 0rem 0.7rem 1rem;
74
+ transition: opacity 0.2s;
75
+}
76
+
77
+.modal-close:hover {
78
+ opacity: 1;
79
+}
80
+
81
+.modal-description {
82
+ background-color: var(--color-background);
83
+ padding: 1rem 1.5rem 1rem 1.5rem;
84
+ flex-grow: 1;
85
+ transition: all 0.3s ease;
86
+}
87
+
88
+.modal-content {
89
+ padding: 0.5rem 1.5rem 0rem 1.5rem;
90
+ overflow-y: auto;
91
+ max-height: calc(80vh - 4rem);
92
+ flex-grow: 1;
93
+ background-clip: border-box;
94
+ border: 6px solid transparent;
95
+ transition: all 0.3s ease;
96
+ margin-bottom: 0;
97
+ padding-bottom: 0;
98
+}
99
+
100
+.modal-content::-webkit-scrollbar {
101
+ width: 6px;
102
+ height: 6px;
103
+}
104
+
105
+.modal-content::-webkit-scrollbar-track {
106
+ background: transparent;
107
+ margin: 4px 0;
108
+ border-radius: 6px;
109
+}
110
+
111
+.modal-content::-webkit-scrollbar-thumb {
112
+ background-color: rgba(155, 155, 155, 0.5);
113
+ border-radius: 6px;
114
+ transition: background-color 0.2s ease;
115
+}
116
+
117
+.modal-content::-webkit-scrollbar-thumb:hover {
118
+ background-color: rgba(155, 155, 155, 0.7);
119
+}
120
+
121
+.modal-footer {
122
+ padding: var(--spacing-md) 0 var(--spacing-md) 0;
123
+ border-top: 1px solid var(--color-border);
124
+ display: flex;
125
+ justify-content: flex-end;
126
+ background: var(--color-background);
127
+ gap: 1rem;
128
+}
129
+
130
+.section {
131
+ margin-bottom: 2rem;
132
+ padding: 1rem;
133
+ border: 1px solid var(--color-border);
134
+ border-radius: 0.5rem;
135
+}
136
+
137
+.section-title {
138
+ font-size: 1.25rem;
139
+ font-weight: bold;
140
+ margin-bottom: 0.5rem;
141
+}
142
+
143
+.section-description {
144
+ color: #666;
145
+ margin-bottom: 1rem;
146
+}
147
+
148
+#buttons-container {
149
+ padding-right: 2rem;
150
+ display: flex;
151
+ align-content:flex-end;
152
+ gap: 0.875rem;
153
+}
154
+
155
+.btn {
156
+ padding: 0.7rem 1.5rem;
157
+ border-radius: 0.25rem;
158
+ cursor: pointer;
159
+ border: none;
160
+ font-size: 0.875rem;
161
+ font-family: "Rubik", Arial, Helvetica, sans-serif;
162
+}
163
+
164
+.btn-ok {
165
+ background: #4248f1;
166
+ color: white;
167
+ transition: background 0.3s ease-in-out;
168
+}
169
+
170
+.btn-ok > svg {
171
+ max-width: 20px;
172
+}
173
+
174
+.btn-ok:hover {
175
+ background: #353bc5;
176
+}
177
+
178
+.btn-ok:active {
179
+ background: #2b309c;
180
+}
181
+
182
+.btn-cancel {
183
+ background: #ddd;
184
+ color: #333;
185
+ transition: background 0.3s ease-in-out;
186
+}
187
+
188
+.btn-cancel:hover {
189
+ background: #a6a6a6;
190
+}
191
+
192
+.btn-cancel:active {
193
+ background: #808080;
194
+}
195
+
196
+.btn-field {
197
+ background: #2196f3;
198
+ color: white;
199
+ width: fit-content;
200
+}
201
+
202
+.btn-field:disabled {
203
+ background: #ccc;
204
+ cursor: not-allowed;
205
+}
206
+
207
+h2 {
208
+ color: var(--color-primary);
209
+}
210
+
211
+.ace_scrollbar-v {
212
+ overflow-y: auto;
213
+ scroll-behavior: smooth;
214
+}
215
+
216
+@media (max-width: 768px) {
217
+ .modal-header h2 {
218
+ margin: 0;
219
+ }
220
+ .modal-content {
221
+ padding: 1rem;
222
+ overflow-y: auto;
223
+ flex-grow: 1;
224
+ }
225
+ .section {
226
+ margin-bottom: 1.5rem;
227
+ padding: 1rem;
228
+ border: 1px solid var(--color-border);
229
+ border-radius: 0.5rem;
230
+ }
231
+}
232
+
233
+@media (max-width: 540px) {
234
+ .modal-header {
235
+ display: flex;
236
+ text-wrap: nowrap;
237
+ }
238
+ #buttons-container {
239
+ display: flex;
240
+ gap: 0.5rem !important;
241
+ max-height: 50px;
242
+ padding-right: 0;
243
+ display: flex;
244
+ margin: 0 auto !important;
245
+ }
246
+ .btn {
247
+ text-wrap: wrap;
248
+ }
249
+ .btn-upload {
250
+ margin: 0 auto;
251
+ gap: 0.5rem;
252
+ align-items:center;
253
+ }
254
+ .btn-upload > svg {
255
+ width: 20px;
256
+ }
257
+}
webui/css/settings.css
new
+260
@@ -0,0 +1,260 @@
1
+.field {
2
+ display: grid;
3
+ margin-block-start: 1rem;
4
+ grid-template-columns: 60% 1fr;
5
+ align-items: center;
6
+}
7
+
8
+.field.field-full {
9
+ grid-template-columns: 1fr;
10
+}
11
+
12
+.field-label {
13
+ display: flex;
14
+ flex-direction: column;
15
+ padding-right: 0.5em;
16
+}
17
+
18
+.field-title {
19
+ font-weight: bold;
20
+}
21
+
22
+.field-description {
23
+ color: #666;
24
+ font-size: 0.875rem;
25
+ margin-top: 0.25rem;
26
+ margin-bottom: 0.5rem;
27
+}
28
+
29
+.field-control {
30
+ width: 100%;
31
+ display: flex;
32
+ align-items: center;
33
+}
34
+
35
+input[type="text"] {
36
+ width: 100%;
37
+ padding: 0.5rem;
38
+ border: 1px solid var(--color-secondary);
39
+ border-radius: 0.25rem;
40
+ background-color: var(--color-background);
41
+ outline: none;
42
+ opacity: 0.7;
43
+ color: var(--color-text);
44
+ font-family: "Rubik", Arial, Helvetica, sans-serif;
45
+ transition: all 0.3s ease;
46
+}
47
+
48
+input[type="text"]:focus {
49
+ opacity: 1;
50
+}
51
+
52
+input[type="password"] {
53
+ width: 100%;
54
+ padding: 0.5rem;
55
+ border: 1px solid var(--color-secondary);
56
+ border-radius: 0.25rem;
57
+ background-color: var(--color-background);
58
+ outline: none;
59
+ opacity: 0.7;
60
+ color: var(--color-text);
61
+ font-family: "Rubik", Arial, Helvetica, sans-serif;
62
+ transition: all 0.3s ease;
63
+}
64
+
65
+input[type="password"]:focus {
66
+ opacity: 1;
67
+}
68
+
69
+textarea {
70
+ width: 100%;
71
+ min-height: 100px;
72
+ padding: 0.5rem;
73
+ border: 1px solid var(--color-secondary);
74
+ border-radius: 0.25rem;
75
+ font-family: Roboto Mono;
76
+ background-color: var(--color-background);
77
+ color: var(--color-text);
78
+ scroll-behavior: smooth;
79
+ resize: none;
80
+ outline: none;
81
+ /* scrollbar padding */
82
+ background-clip: border-box;
83
+ border: 6px solid transparent;
84
+ transition: all 0.3s ease;
85
+}
86
+
87
+textarea:focus {
88
+ background-color: #151515;
89
+}
90
+
91
+.toggle {
92
+ position: relative;
93
+ display: inline-block;
94
+ width: 60px;
95
+ height: 34px;
96
+ margin: 0;
97
+}
98
+
99
+.toggle input {
100
+ opacity: 0;
101
+ width: 0;
102
+ height: 0;
103
+}
104
+
105
+.toggler {
106
+ position: absolute;
107
+ cursor: pointer;
108
+ top: 0;
109
+ left: 0;
110
+ right: 0;
111
+ bottom: 0;
112
+ background-color: #ccc;
113
+ transition: 0.4s;
114
+ border-radius: 34px;
115
+}
116
+
117
+.toggler:before {
118
+ position: absolute;
119
+ content: "";
120
+ height: 26px;
121
+ width: 26px;
122
+ left: 4px;
123
+ bottom: 4px;
124
+ background-color: white;
125
+ transition: 0.4s;
126
+ border-radius: 50%;
127
+}
128
+
129
+input:checked + .toggler {
130
+ background-color: #2196f3;
131
+}
132
+
133
+input:checked + .toggler:before {
134
+ transform: translateX(26px);
135
+}
136
+
137
+input[type="range"] {
138
+ width: 100%;
139
+}
140
+
141
+.range-value {
142
+ min-width: 3em;
143
+ text-align: right;
144
+}
145
+
146
+select {
147
+ width: 100%;
148
+ padding: 0.5rem;
149
+ border: 1px solid var(--color-secondary);
150
+ border-radius: 0.25rem;
151
+ background-color: var(--color-background);
152
+ color: var(--color-primary);
153
+ font-size: inherit;
154
+ cursor: pointer;
155
+ font-family: "Rubik", Arial, Helvetica, sans-serif;
156
+ outline: none;
157
+ transition: none;
158
+}
159
+
160
+select:disabled {
161
+ background-color: #f5f5f5;
162
+ cursor: not-allowed;
163
+}
164
+
165
+/* Styles for navigation links */
166
+
167
+#settings-sections {
168
+ padding-bottom: 1rem;
169
+}
170
+
171
+nav ul {
172
+ list-style: none;
173
+ padding: 0;
174
+ margin: 0;
175
+ display: grid;
176
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
177
+ gap: 1rem;
178
+}
179
+
180
+nav ul li {
181
+ display: flex;
182
+}
183
+
184
+nav ul li a {
185
+ display: flex;
186
+ flex-direction: column;
187
+ align-items: center;
188
+ text-align: center;
189
+ text-decoration: none;
190
+ color: var(--color-primary);
191
+ background-color: var(--color-panel);
192
+ border: 1px solid var(--color-border);
193
+ border-radius: 8px;
194
+ padding: 1rem;
195
+ width: 100%;
196
+ transition: all 0.2s ease-in-out;
197
+}
198
+
199
+nav ul li a:hover {
200
+ transform: translateY(-2px);
201
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
202
+ text-decoration: none;
203
+ background-color: var(--color-secondary);
204
+}
205
+
206
+nav ul li a img {
207
+ width: 50px;
208
+ height: 50px;
209
+ margin-bottom: 0.5rem;
210
+ filter: var(--svg-filter);
211
+}
212
+
213
+/* Light mode adjustments */
214
+.light-mode nav ul li a {
215
+ background-color: var(--color-panel-light);
216
+}
217
+
218
+.light-mode nav ul li a:hover {
219
+ background-color: var(--color-secondary-light);
220
+}
221
+
222
+@media (max-width: 768px) {
223
+ .field-control {
224
+ width: 100%;
225
+ }
226
+ .field-description {
227
+ padding-bottom: var(--spacing-sm);
228
+ }
229
+ .field {
230
+ padding-top: var(--spacing-xs);
231
+ padding-bottom: var(--spacing-xs);
232
+ display: block;
233
+ align-items: center;
234
+ }
235
+}
236
+
237
+@media (max-width: 480px) {
238
+ nav ul {
239
+ grid-template-columns: repeat(2, 1.2fr);
240
+ }
241
+}
242
+
243
+@media (max-width: 380px) {
244
+ nav ul {
245
+ grid-template-columns: 1fr;
246
+ }
247
+
248
+ nav ul li a {
249
+ flex-direction: row;
250
+ justify-content: flex-start;
251
+ gap: 1rem;
252
+ padding: 0.75rem 1rem;
253
+ }
254
+
255
+ nav ul li a img {
256
+ margin-bottom: 0;
257
+ width: 30px;
258
+ height: 30px;
259
+ }
260
+}
\ No newline at end of file
webui/css/speech.css
renamed
+13
-2
@@ -1,9 +1,19 @@
1
/* MIC BUTTON */
2
-#microphone-button {
3
-
2
+#microphone-button {
3
}
4
5
#microphone-button:hover {
6
+ background-color: #636363;
7
+ transform: scale(1.05);
8
+ -webkit-transform: scale(1.05);
9
+ transform-origin: center;
10
+}
11
+
12
+#microphone-button:active {
13
+ background-color: #444444;
14
+ transform: scale(1);
15
+ -webkit-transform: scale(1);
16
+ transform-origin: center;
17
}
18
19
#microphone-button.recording {
@@ -52,4 +62,5 @@
62
.mic-processing {
63
background-color: darkcyan;
64
animation: pulse 0.8s infinite;
65
+ transform-origin: center;
66
}
\ No newline at end of file
webui/css/toast.css
renamed
webui/history.css
deleted
-5
@@ -1,5 +0,0 @@
1
-#json-viewer-container{
2
- width: 100%;
3
- height: 60vh;
4
- overflow: auto;
5
-}
\ No newline at end of file
webui/index.css
+156
-107
@@ -22,7 +22,7 @@
22
/* Light mode */
23
--color-background-light: #e8e9e9;
24
--color-text-light: #333333;
25
- --color-primary-light: #273b4d;
25
+ --color-primary-light: #324d66;
26
--color-secondary-light: #e8eaf6;
27
--color-accent-light: #b00020;
28
--color-message-bg-light: #ffffff;
@@ -59,6 +59,8 @@
59
/* Other variables */
60
--border-radius: 1.125rem;
61
--transition-speed: 0.3s;
62
+ --svg-filter: brightness(0) saturate(100%) var(--color-primary-filter);
63
+ --color-primary-filter: invert(70%) sepia(12%) saturate(368%) hue-rotate(177deg) brightness(87%) contrast(85%);
64
}
65
66
/* Reset and Base Styles */
@@ -179,10 +181,11 @@ body,
181
.toggle-sidebar-button {
182
height: 2.6rem;
183
width: 2.6rem;
182
- background-color: var(--color-secondary);
183
- border: none;
184
+ background-color: var(--color-background);
185
+ border: 0.1rem solid var(--color-border);
186
border-radius: var(--spacing-xs);
187
color: var(--color-text);
188
+ opacity: 0.8;
189
cursor: pointer;
190
left: var(--spacing-md);
191
padding: 0.47rem 0.56rem;
@@ -194,11 +197,12 @@ body,
197
}
198
199
.toggle-sidebar-button:hover {
197
- background-color: #313131;
200
+ background-color: var(--color-secondary);
201
+ opacity: 1;
202
}
203
204
.toggle-sidebar-button:active {
201
- background-color: #111;
205
+ opacity: 0.5;
206
}
207
208
#sidebar-hamburger-svg {
@@ -320,21 +324,27 @@ body,
324
margin-left: 0;
325
}
326
323
-#time-date {
324
- color: var(--color-text);
327
+#time-date-container {
328
position: fixed;
329
right: 0;
327
- font-size: var(--font-size-normal);
328
- text-align: right;
329
- line-height: 1.2;
330
+ display: flex;
331
+ align-items: center;
332
+ gap: var(--spacing-sm);
333
margin-right: var(--spacing-md);
334
margin-top: var(--spacing-md);
332
-}
333
-
334
-#user-date {
335
+ }
336
+
337
+ #time-date {
338
+ color: var(--color-text);
339
+ font-size: var(--font-size-normal);
340
+ text-align: right;
341
+ line-height: 1.1;
342
+ }
343
+
344
+ #user-date {
345
font-size: var(--font-size-small);
346
opacity: 0.6;
337
-}
347
+ }
348
349
/* Typography */
350
h2 {
@@ -489,12 +499,6 @@ pre {
499
animation: shine 1s linear infinite;
500
}
501
492
-@keyframes shine {
493
- to {
494
- background-position: -200% center;
495
- }
496
-}
497
-
502
#right-panel.expanded #logo-container {
503
margin-left: 4.6rem;
504
}
@@ -756,24 +760,32 @@ font-size: var(--font-size-small)
760
border-top: 0px;
761
}
762
763
+#pref-list li {
764
+ opacity: 0.8;
765
+}
766
+
767
.config-button {
760
- border: none;
768
+ background-color: var(--color-background);
769
+ border: 0.1rem solid var(--color-border);
770
border-radius: var(--spacing-xs);
771
cursor: pointer;
772
display: inline;
773
font-family: "Rubik", Arial, Helvetica, sans-serif;
774
font-size: var(--font-size-small);
775
+ opacity: 0.8;
776
margin-top: 0;
777
margin-bottom: var(--spacing-xs);
778
padding: var(--spacing-sm) 0.75rem;
779
text-wrap: nowrap;
770
- background-color: var(--color-secondary);
780
width: 48%;
772
- -webkit-transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
773
- transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
781
+ max-height: 2.3rem;
782
+ -webkit-transition: all var(--transition-speed), transform 0.1s ease-in-out;
783
+ transition: all var(--transition-speed), transform 0.1s ease-in-out;
784
}
785
786
.config-button:hover {
787
+ background-color: var(--color-secondary);
788
+ border: 0.1rem solid var(--color-border);
789
opacity: 1;
790
}
791
@@ -781,9 +793,14 @@ font-size: var(--font-size-small)
793
opacity: 0.5;
794
}
795
796
+#settings {
797
+ display: flex;
798
+ align-items: center;
799
+}
800
+
801
.edit-button {
802
background-color: transparent;
786
- border: 1px solid var(--color-primary);
803
+ border: 1px solid var(--color-border);
804
border-radius: 0.1875rem;
805
color: var(--color-primary);
806
cursor: pointer;
@@ -793,6 +810,7 @@ font-size: var(--font-size-small)
810
}
811
812
.edit-button:hover {
813
+ border: 1px solid var(--color-primary);
814
background-color: #32455690;
815
}
816
@@ -934,10 +952,6 @@ font-size: var(--font-size-small)
952
transition: background-color 0.2s ease;
953
}
954
937
-.preview-item:hover {
938
- background: var(--color-secondary-dark);
939
-}
940
-
955
.preview-item.image-preview img {
956
max-height: 100px;
957
object-fit: cover;
@@ -976,7 +990,6 @@ font-size: var(--font-size-small)
990
top: -6px;
991
right: -6px;
992
background-color: var(--color-primary);
979
- /* opacity: 0.6; */
993
color: white;
994
border: none;
995
border-radius: 50%;
@@ -1047,19 +1060,18 @@ font-size: var(--font-size-small)
1060
white-space: nowrap;
1061
}
1062
1050
-/* Bottom row with text buttons */
1063
+/* with text buttons */
1064
.text-buttons-row {
1065
width: 100%;
1066
display: flex;
1067
padding-top: var(--spacing-xs);
1068
margin-left: 0.7rem;
1056
- gap: var(--spacing-xs);
1057
- white-space: pre-wrap;
1069
}
1070
1071
.text-button {
1061
- background: none;
1072
+ background-color: transparent;
1073
border: none;
1074
+ border-radius: 5px;
1075
color: var(--color-text);
1076
font-family: "Rubik", Arial, Helvetica, sans-serif;
1077
font-size: 0.7rem;
@@ -1069,7 +1081,7 @@ font-size: var(--font-size-small)
1081
transition: all 0.3s;
1082
display: flex;
1083
align-items: center;
1072
- gap: var(--spacing-xs); /* Adds space between icon and text */
1084
+ gap: var(--spacing-xs); /* space between icon and text */
1085
}
1086
1087
.text-button:hover {
@@ -1088,6 +1100,11 @@ font-size: var(--font-size-small)
1100
flex-shrink: 0; /* prevents SVG from shrinking */
1101
}
1102
1103
+.text-button p {
1104
+ margin-block-start: 0em;
1105
+ margin-block-end: 0em;
1106
+}
1107
+
1108
/* Chat buttons (Send and Mic) */
1109
.chat-button {
1110
border: none;
@@ -1201,7 +1218,7 @@ font-size: var(--font-size-small)
1218
}
1219
1220
.slider {
1204
- background-color: #4a4a4a;
1221
+ background-color: #272727;
1222
border-radius: 1.15rem;
1223
bottom: 0;
1224
cursor: pointer;
@@ -1214,7 +1231,7 @@ font-size: var(--font-size-small)
1231
}
1232
1233
.slider:before {
1217
- background-color: white;
1234
+ background-color: #b6b6b6;
1235
border-radius: 50%;
1236
bottom: 0.15rem;
1237
content: "";
@@ -1227,7 +1244,7 @@ font-size: var(--font-size-small)
1244
}
1245
1246
input:checked + .slider {
1230
- background-color: var(--color-primary-light);
1247
+ background-color: #3a3a3a;
1248
}
1249
1250
input:checked + .slider:before {
@@ -1261,9 +1278,8 @@ input:checked + .slider:before {
1278
height: 2.525rem;
1279
margin-left: var(--spacing-xs);
1280
margin-right: 0.18rem;
1264
- transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
1265
- transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
1266
- -webkit-transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
1281
+ transition: all var(--transition-speed), transform 0.1s ease-in-out;
1282
+ -webkit-transition: all var(--transition-speed), transform 0.1s ease-in-out;
1283
width: 2.525rem;
1284
flex-shrink: 0;
1285
flex-grow: 0;
@@ -1275,30 +1291,22 @@ input:checked + .slider:before {
1291
padding: 0;
1292
}
1293
1278
-.chat-button:active {
1279
- transform: scale(0.95);
1280
- -webkit-transform: scale(0.95);
1281
-}
1282
-
1283
-.chat-button svg {
1284
- width: 1.5rem;
1285
- height: 1.5rem;
1286
-}
1287
-
1294
#send-button {
1289
- background-color: var(--color-primary);
1295
+ background-color: #4248f1;
1296
}
1297
1298
#send-button:hover {
1293
- background-color: var(--color-primary-light);
1299
+ transform: scale(1.05);
1300
+ -webkit-transform: scale(1.05);
1301
+ transform-origin: center;
1302
+ background-color: #353bc5;
1303
}
1304
1296
-.pause-button {
1297
- background-color: #3270e2;
1298
-}
1299
-
1300
-.pause-button:hover {
1301
- background-color: #4382e8;
1305
+#send-button:active {
1306
+ transform: scale(1);
1307
+ -webkit-transform: scale(1);
1308
+ transform-origin: center;
1309
+ background-color: #2b309c;
1310
}
1311
1312
/* Light mode class */
@@ -1375,7 +1383,7 @@ input:checked + .slider:before {
1383
}
1384
1385
.light-mode .config-button {
1378
- background-color: var(--color-secondary);
1386
+ background-color: var(--color-background);
1387
color: #333333;
1388
}
1389
@@ -1401,36 +1409,21 @@ input:checked + .slider:before {
1409
color: rgba(0, 0, 0, 0.35);
1410
}
1411
1404
-.light-mode #send-button {
1405
- background-color: var(--color-primary-light);
1406
-}
1407
-
1408
-.light-mode #send-button:hover {
1409
- background-color: var(--color-primary-dark);
1410
-}
1411
-
1412
-.light-mode .pause-button {
1413
- background-color: #4382e8;
1414
-}
1415
-
1416
-.light-mode .pause-button:hover {
1417
- background-color: #3270e2;
1412
+.light-mode #progress-bar-i {
1413
+ color: var(--color-border-dark);
1414
+ opacity: 0.5
1415
}
1416
1417
.light-mode .slider {
1421
- background-color: #bdbdbd;
1418
+ background-color: #f1f1f1;
1419
}
1420
1424
-.light-mode input:checked + .slider {
1425
- background-color: var(--color-primary-dark);
1421
+.light-mode .slider:before {
1422
+ background-color: #838383;
1423
}
1424
1428
-.light-mode .toggle-sidebar-button:hover {
1429
- background-color: #d6dae8;
1430
-}
1431
-
1432
-.light-mode .toggle-sidebar-button:active {
1433
- background-color: #bdc0cb;
1425
+.light-mode input:checked + .slider {
1426
+ background-color: #e6e6e6;
1427
}
1428
1429
.light-mode #logo-container img {
@@ -1478,19 +1471,39 @@ input:checked + .slider:before {
1471
display: block; /* or any style you want for visibility */
1472
}
1473
1481
-/* Update connected/disconnected status colors for dark mode */
1474
+.status-icon {
1475
+ display: flex;
1476
+ justify-content: center;
1477
+ align-items: center;
1478
+}
1479
+
1480
+.status-icon svg {
1481
+ width: 18px;
1482
+ height: 18px;
1483
+}
1484
+
1485
+.connected-circle, .disconnected-circle {
1486
+ transition: all 0.3s ease;
1487
+}
1488
+
1489
+.connected-circle {
1490
+ animation: heartbeat 1.5s ease-in-out infinite;
1491
+ transform-origin: center;
1492
+}
1493
+
1494
.connected {
1483
- color: #4caf50;
1495
+ color: #00c340;
1496
}
1497
1498
.disconnected {
1487
- color: #f44336;
1499
+ color: #e40138;
1500
}
1501
1502
.font-bold {
1503
font-weight: bold;
1504
}
1505
1506
+
1507
/* Math (KaTeX) */
1508
.katex {
1509
font-family: Roboto Mono !important;
@@ -1522,13 +1535,52 @@ input:checked + .slider:before {
1535
}
1536
}
1537
1538
+@keyframes shine {
1539
+ to {
1540
+ background-position: -200% center;
1541
+ }
1542
+}
1543
+
1544
+@keyframes heartbeat {
1545
+ 0% {
1546
+ transform: scale(1);
1547
+ }
1548
+ 14% {
1549
+ transform: scale(1.1);
1550
+ }
1551
+ 28% {
1552
+ transform: scale(1);
1553
+ }
1554
+ 42% {
1555
+ transform: scale(1.08);
1556
+ }
1557
+ 70% {
1558
+ transform: scale(1);
1559
+ }
1560
+ 100% {
1561
+ transform: scale(1);
1562
+ }
1563
+}
1564
+
1565
+@media (max-width: 480px) {
1566
+ .text-buttons-row {
1567
+ display: table;
1568
+ gap: 0.1rem !important;
1569
+ }
1570
+
1571
+ .text-button {
1572
+ max-height: 25px;
1573
+ }
1574
+
1575
+ .text-button p{
1576
+ display: none;
1577
+ }
1578
+}
1579
1580
@media (max-width: 600px) {
1581
#chat-input {
1582
min-height: 5.3rem;
1583
align-content: start;
1530
-
1531
-
1584
}
1585
1586
#chat-buttons-wrapper {
@@ -1540,24 +1592,23 @@ input:checked + .slider:before {
1592
transition: all 0.3s ease;
1593
-webkit-transition: all 0.3s ease;
1594
}
1543
-}
1595
1545
-.sidebar-overlay {
1546
- display: none;
1547
- position: fixed;
1548
- top: 0;
1549
- left: 0;
1550
- right: 0;
1551
- bottom: 0;
1552
- background-color: rgba(0, 0, 0, 0);
1553
- opacity: 0;
1554
- z-index: 999;
1555
-}
1596
+ .sidebar-overlay {
1597
+ display: none;
1598
+ position: fixed;
1599
+ top: 0;
1600
+ left: 0;
1601
+ right: 0;
1602
+ bottom: 0;
1603
+ background-color: rgba(0, 0, 0, 0);
1604
+ opacity: 0;
1605
+ z-index: 999;
1606
+ }
1607
1557
-.sidebar-overlay.visible {
1558
- display: block;
1559
-}
1560
-
1608
+ .sidebar-overlay.visible {
1609
+ display: block;
1610
+ }
1611
+}
1612
1613
@media (max-width: 768px) {
1614
#left-panel {
@@ -1603,9 +1654,7 @@ input:checked + .slider:before {
1654
gap: var(--spacing-xs);
1655
white-space: pre-wrap;
1656
}
1606
- .text-button {
1607
- text-align: left;
1608
- }
1657
+
1658
.text-button svg {
1659
width: 18px;
1660
height: 18px;
webui/index.html
+82
-65
@@ -6,11 +6,12 @@
6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7
<title>Agent Zero</title>
8
<link rel="stylesheet" href="index.css">
9
- <link rel="stylesheet" href="toast.css">
10
- <link rel="stylesheet" href="settings.css">
11
- <link rel="stylesheet" href="file_browser.css">
12
- <link rel="stylesheet" href="speech.css">
13
- <link rel="stylesheet" href="history.css">
9
+ <link rel="stylesheet" href="css/toast.css">
10
+ <link rel="stylesheet" href="css/settings.css">
11
+ <link rel="stylesheet" href="css/file_browser.css">
12
+ <link rel="stylesheet" href="css/modals.css">
13
+ <link rel="stylesheet" href="css/speech.css">
14
+ <link rel="stylesheet" href="css/history.css">
15
16
<script>
17
window.safeCall = function (name, ...args) {
@@ -31,11 +32,11 @@
32
33
34
<script type="module" src="index.js"></script>
34
- <script type="text/javascript" src="settings.js"></script>
35
- <script type="text/javascript" src="file_browser.js"></script>
36
- <script type="text/javascript" src="modal.js"></script>
37
- <script type="module" src="speech.js"></script>
38
- <script type="module" src="history.js"></script>
35
+ <script type="text/javascript" src="js/settings.js"></script>
36
+ <script type="text/javascript" src="js/file_browser.js"></script>
37
+ <script type="text/javascript" src="js/modal.js"></script>
38
+ <script type="module" src="js/speech.js"></script>
39
+ <script type="module" src="js/history.js"></script>
40
41
</head>
42
@@ -57,7 +58,7 @@
58
59
<div id="logo-container">
60
<a href="https://github.com/frdel/agent-zero" target="_blank" rel="noopener noreferrer">
60
- <img src="splash.jpg" alt="a0" width="22" height="22">
61
+ <img src="./public/splash.jpg" alt="a0" width="22" height="22">
62
</a>
63
</div>
64
</div>
@@ -65,12 +66,6 @@
66
<div id="left-panel" class="panel">
67
<!--Sidebar upper elements-->
68
<div class="left-panel-top">
68
- <div class="config-section" id="status-section" x-data="{ connected: true }">
69
- <h3>Status</h3>
70
- <h4 class="connected" x-show="connected">✔ Connected</h4>
71
- <h4 class="disconnected" x-show="!connected">✘ Disconnected</h4>
72
- </div>
73
-
69
<div class="config-section" x-data="{ showQuickActions: true }">
70
<h3>Quick Actions</h3>
71
<button class="config-button" id="resetChat" @click="resetChat()">Reset Chat</button>
@@ -78,7 +73,10 @@
73
<button class="config-button" id="loadChats" @click="loadChats()">Load Chat</button>
74
<button class="config-button" id="loadChat" @click="saveChat()">Save Chat</button>
75
<button class="config-button" id="settings"
81
- @click="settingsModalProxy.openModal()">Settings</button>
76
+ @click="settingsModalProxy.openModal()"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -17.0 110.0 135.0" fill="currentColor" width="24" height="24">
77
+ <path d="m52.301 90.102h-4.1016c-3 0-5 0-6.8984-1.3984-1.8984-1.3984-2.5-3.3008-3.5-6.1016l-1.1016-3.6016c-0.19922-0.60156-0.69922-1.1992-1.3984-1.6016l-1.1016-0.60156c-0.60156-0.30078-1.5-0.39844-2.3008-0.19922l-4.3008 1.1992c-3.1016 0.89844-5.1016 1.5-7.3984 0.5-2.3008-0.89844-3.3984-2.8008-5-5.6016l-1.8008-3.1016c-1.5-2.5-2.5-4.3008-2.3008-6.6992 0.19922-2.3984 1.6016-3.8008 3.6016-6.1016l3.8008-4.1992c0.19922-0.19922 0.60156-1.3984 0.60156-2.6016 0-1.1016-0.5-2.3008-0.80078-2.6992l-3.6016-4c-2-2.1992-3.3008-3.6992-3.6016-6.1016-0.19922-2.3984 0.80078-4.1992 2.3008-6.6992l1.8008-3.1016c1.6016-2.8008 2.6992-4.6016 5-5.6016 2.3008-0.89844 4.3008-0.39844 7.3984 0.5l4.3984 1.1992c0.69922 0.10156 1.5 0 2.3008-0.30078l1.1016-0.60156c0.5-0.30078 1-0.89844 1.3008-1.6992l1.1992-3.5c0.89844-2.8008 1.6016-4.6992 3.5-6.1016 1.8984-1.3984 3.8984-1.3984 6.8984-1.3984h4.1016c3 0 5 0 6.8984 1.3984 1.8984 1.3984 2.5 3.1992 3.5 6.1016l1.1992 3.6016c0.19922 0.60156 0.69922 1.1992 1.3984 1.6016l1.1016 0.60156c0.60156 0.30078 1.5 0.39844 2.3008 0.19922l4.3008-1.1992c3.1016-0.89844 5.1016-1.5 7.3984-0.5 2.3008 0.89844 3.3984 2.8008 5 5.5l1.8008 3.1016c1.3984 2.5 2.5 4.3008 2.3008 6.6992-0.19922 2.3984-1.6016 3.8008-3.6016 6.1016l-3.9961 4.4062c-0.19922 0.19922-0.60156 1.3984-0.60156 2.6016 0 1.1016 0.5 2.3008 0.80078 2.6992l3.6016 4c2 2.1992 3.3008 3.6992 3.6016 6.1016 0.19922 2.3984-0.80078 4.1992-2.3008 6.6992l-1.8008 3.1016c-1.6016 2.8008-2.6992 4.6016-5 5.6016-2.3008 0.89844-4.3984 0.39844-7.3984-0.5l-4.3984-1.1992c-0.69922-0.10156-1.5 0-2.3008 0.30078l-1.1016 0.60156c-0.5 0.30078-1 0.89844-1.3008 1.6992l-1.1992 3.5c-0.89844 2.8008-1.6016 4.6992-3.5 6.1016-1.8008 1.293-3.8008 1.293-6.8008 1.293zm-6.6016-7.3008c0.5 0.10156 1.6016 0.10156 2.6016 0.10156h4.1016c1 0 2 0 2.6016-0.10156 0.19922-0.5 0.60156-1.5 0.89844-2.3984l1.1992-3.6016c0.89844-2.3008 2.3984-4.1992 4.3984-5.3984l1.3984-0.80078c2.3984-1.3008 5.1016-1.6016 7.6016-1l4.6016 1.3008c1 0.30078 2.1016 0.60156 2.6992 0.69922 0.30078-0.5 0.89844-1.5 1.3984-2.3984l1.8008-3.1016c0.5-0.80078 1-1.8008 1.1992-2.3008-0.30078-0.39844-1-1.1992-1.6992-2l-3.8008-4.1992c-1.6016-2-2.5-4.8008-2.5-7.3984 0-2.6016 0.89844-5.3984 2.3008-7.3008l3.8984-4.3984c0.69922-0.69922 1.3984-1.5 1.6992-2-0.19922-0.5-0.80078-1.3984-1.1992-2.3008l-1.8984-3.1016c-0.5-0.89844-1.1016-1.8984-1.3984-2.3984-0.60156 0.10156-1.6992 0.39844-2.6992 0.69922l-4.3984 1.3008c-2.6992 0.60156-5.3008 0.30078-7.6016-0.89844l-1.4023-0.80469c-2.1016-1.3984-3.6016-3.1992-4.3984-5.3984l-1.3008-3.8008c-0.30078-0.89844-0.60156-1.8984-0.89844-2.3984-0.5-0.10156-1.6016-0.10156-2.6016-0.10156h-4.1016c-1 0-2 0-2.6016 0.10156-0.19922 0.5-0.60156 1.5-0.89844 2.3984l-1.1992 3.6016c-0.89844 2.3008-2.3984 4.1992-4.3984 5.3984l-1.3984 0.80078c-2.3984 1.3008-5.1016 1.6016-7.6016 1l-4.6016-1.3008c-1-0.30078-2.1016-0.60156-2.6992-0.69922-0.30078 0.5-0.89844 1.5-1.3984 2.3984l-1.8008 3.1016c-0.5 0.80078-1 1.8008-1.1992 2.3008 0.30078 0.39844 1 1.1992 1.6992 2l3.8008 4.1992c1.6016 2 2.5 4.8008 2.5 7.3984 0 2.6016-0.89844 5.3984-2.3008 7.3008l-3.8984 4.3984c-0.69922 0.69922-1.3984 1.5-1.6992 2 0.19922 0.5 0.80078 1.3984 1.1992 2.3008l1.8008 3.1016c0.5 0.89844 1.1016 1.8984 1.3984 2.3984 0.60156-0.10156 1.6992-0.39844 2.6992-0.69922l4.3984-1.1992c2.6992-0.60156 5.3008-0.30078 7.6016 0.89844l1.3984 0.80078c2.1016 1.3008 3.6016 3.1992 4.3984 5.3984l1.3008 3.8008c0.5 0.80078 0.80078 1.8008 1 2.3008z"></path>
78
+ <path d="m50.301 66.5c-9 0-16.398-7.3008-16.398-16.398 0-9.1016 7.3008-16.398 16.398-16.398 9.1016 0 16.398 7.3008 16.398 16.398 0 9.0977-7.3984 16.398-16.398 16.398zm0-25.5c-5 0-9.1016 4.1016-9.1016 9.1016s4.1016 9.1016 9.1016 9.1016 9.1016-4.1016 9.1016-9.1016c-0.003906-5-4.1016-9.1016-9.1016-9.1016z"></path>
79
+ </svg>Settings</button>
80
</div>
81
<!-- Chats List -->
82
<div class="config-section" id="chats-section" x-data="{ contexts: [], selected: '' }"
@@ -112,7 +110,7 @@
110
<path d="M8 4l8 8-8 8" />
111
</svg>
112
</h3>
115
- <ul class="config-list" x-show="prefOpen" x-collapse x-transition>
113
+ <ul class="config-list" id="pref-list" x-show="prefOpen" x-collapse x-transition>
114
<!-- Preferences Items -->
115
<li x-data="{ autoScroll: true }">
116
<span>Autoscroll</span>
@@ -173,7 +171,26 @@
171
</div>
172
<div id="right-panel" class="panel">
173
<!--Chat-->
176
- <div id="time-date"></div>
174
+ <div id="time-date-container">
175
+ <div id="time-date"></div>
176
+ <div class="status-icon" x-data="{ connected: true }">
177
+ <svg viewBox="0 0 30 30">
178
+ <!-- Connected State (filled circle) -->
179
+ <circle class="connected-circle"
180
+ cx="15" cy="15" r="8"
181
+ x-bind:fill="connected ? '#00c340' : 'none'"
182
+ x-bind:opacity="connected ? 1 : 0"/>
183
+
184
+ <!-- Disconnected State (outline circle) -->
185
+ <circle class="disconnected-circle"
186
+ cx="15" cy="15" r="12"
187
+ fill="none"
188
+ stroke="#e40138"
189
+ stroke-width="3"
190
+ x-bind:opacity="connected ? 0 : 1"/>
191
+ </svg>
192
+ </div>
193
+ </div>
194
<div id="chat-history">
195
</div>
196
<div id="toast" class="toast">
@@ -296,8 +313,7 @@
313
<!-- Microphone button -->
314
<button class="chat-button mic-inactive" id="microphone-button"
315
aria-label="Start/Stop recording">
299
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18" fill="currentColor" width="24"
300
- height="24">
316
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18" fill="currentColor">
317
<path
318
d="m8,12c1.66,0,3-1.34,3-3V3c0-1.66-1.34-3-3-3s-3,1.34-3,3v6c0,1.66,1.34,3,3,3Zm-1,1.9c-2.7-.4-4.8-2.6-5-5.4H0c.2,3.8,3.1,6.9,7,7.5v2h2v-2c3.9-.6,6.8-3.7,7-7.5h-2c-.2,2.8-2.3,5-5,5.4h-2Z" />
319
</svg>
@@ -320,7 +336,7 @@
336
</template>
337
<template x-if="paused">
338
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
323
- stroke-width="1.5" stroke="currentColor" width="14" height="14">
339
+ stroke-width="1.8" stroke="currentColor" width="14" height="14">
340
<path d="M8 5v14l11-7z"></path>
341
</svg>
342
</template>
@@ -333,36 +349,24 @@
349
<path stroke-linecap="round" stroke-linejoin="round"
350
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5">
351
</path>
336
- </svg>Import knowledge</button>
352
+ </svg><p>Import knowledge</p></button>
353
<button class="text-button" id="work_dir_browser" @click="fileBrowserModalProxy.openModal()">
338
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.37 92.59">
339
- <path
340
- d="m5.72,11.5l-3.93,8.73h119.77s-3.96-8.73-3.96-8.73h-60.03c-1.59,0-2.88-1.29-2.88-2.88V1.75H13.72v6.87c0,1.59-1.29,2.88-2.88,2.88h-5.12Z"
341
- fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="5"></path>
342
- <path
343
- d="m6.38,20.23H1.75l7.03,67.03c.11,1.07.55,2.02,1.2,2.69.55.55,1.28.89,2.11.89h97.1c.82,0,1.51-.33,2.05-.87.68-.68,1.13-1.67,1.28-2.79l9.1-66.94H6.38Z"
344
- fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="5"></path>
345
- </svg>work_dir Browser</button>
346
-
347
- <button class="text-button" id="history_inspect" @click="window.openHistoryModal()">
348
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.37 92.59">
349
- <path
350
- d="m5.72,11.5l-3.93,8.73h119.77s-3.96-8.73-3.96-8.73h-60.03c-1.59,0-2.88-1.29-2.88-2.88V1.75H13.72v6.87c0,1.59-1.29,2.88-2.88,2.88h-5.12Z"
351
- fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="5"></path>
352
- <path
353
- d="m6.38,20.23H1.75l7.03,67.03c.11,1.07.55,2.02,1.2,2.69.55.55,1.28.89,2.11.89h97.1c.82,0,1.51-.33,2.05-.87.68-.68,1.13-1.67,1.28-2.79l9.1-66.94H6.38Z"
354
- fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="5"></path>
355
- </svg>History</button>
354
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.37 92.59">
355
+ <path d="m5.72,11.5l-3.93,8.73h119.77s-3.96-8.73-3.96-8.73h-60.03c-1.59,0-2.88-1.29-2.88-2.88V1.75H13.72v6.87c0,1.59-1.29,2.88-2.88,2.88h-5.12Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="7"></path>
356
+ <path d="m6.38,20.23H1.75l7.03,67.03c.11,1.07.55,2.02,1.2,2.69.55.55,1.28.89,2.11.89h97.1c.82,0,1.51-.33,2.05-.87.68-.68,1.13-1.67,1.28-2.79l9.1-66.94H6.38Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="8"></path>
357
+ </svg><p>work_dir Browser</p></button>
358
+
359
+ <button class="text-button" id="history_inspect" @click="window.openHistoryModal()">
360
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="5 10 85 85">
361
+ <path fill="currentColor" d="m59.572,57.949c-.41,0-.826-.105-1.207-.325l-9.574-5.528c-.749-.432-1.21-1.231-1.21-2.095v-14.923c0-1.336,1.083-2.419,2.419-2.419s2.419,1.083,2.419,2.419v13.526l8.364,4.829c1.157.668,1.554,2.148.886,3.305-.448.776-1.261,1.21-2.097,1.21Zm30.427-7.947c0,10.684-4.161,20.728-11.716,28.283-6.593,6.59-15.325,10.69-24.59,11.544-1.223.113-2.448.169-3.669.169-7.492,0-14.878-2.102-21.22-6.068l-15.356,5.733c-.888.331-1.887.114-2.557-.556s-.887-1.669-.556-2.557l5.733-15.351c-4.613-7.377-6.704-16.165-5.899-24.891.854-9.266,4.954-17.998,11.544-24.588,7.555-7.555,17.6-11.716,28.285-11.716s20.73,4.161,28.285,11.716c7.555,7.555,11.716,17.599,11.716,28.283Zm-15.137-24.861c-13.71-13.71-36.018-13.71-49.728,0-11.846,11.846-13.682,30.526-4.365,44.417.434.647.53,1.464.257,2.194l-4.303,11.523,11.528-4.304c.274-.102.561-.153.846-.153.474,0,.944.139,1.348.41,13.888,9.315,32.568,7.479,44.417-4.365,13.707-13.708,13.706-36.014,0-49.723Zm-24.861-4.13c-15.989,0-28.996,13.006-28.996,28.992s13.008,28.992,28.996,28.992c1.336,0,2.419-1.083,2.419-2.419s-1.083-2.419-2.419-2.419c-13.32,0-24.157-10.835-24.157-24.153s10.837-24.153,24.157-24.153,24.153,10.835,24.153,24.153c0,1.336,1.083,2.419,2.419,2.419s2.419-1.083,2.419-2.419c0-15.986-13.006-28.992-28.992-28.992Zm25.041,33.531c-1.294.347-2.057,1.673-1.71,2.963.343,1.289,1.669,2.057,2.963,1.71,1.289-.343,2.053-1.669,1.71-2.963-.347-1.289-1.673-2.057-2.963-1.71Zm-2.03,6.328c-1.335,0-2.419,1.084-2.419,2.419s1.084,2.419,2.419,2.419,2.419-1.084,2.419-2.419-1.084-2.419-2.419-2.419Zm-3.598,5.587c-1.289-.347-2.615.416-2.963,1.71-.343,1.289.421,2.615,1.71,2.963,1.294.347,2.62-.421,2.963-1.71.347-1.294-.416-2.62-1.71-2.963Zm-4.919,4.462c-1.157-.667-2.638-.27-3.306.887-.667,1.157-.27,2.638.887,3.305,1.157.668,2.638.27,3.306-.887.667-1.157.27-2.638-.887-3.306Zm-9.327,3.04c-.946.946-.946,2.478,0,3.42.942.946,2.473.946,3.42,0,.946-.942.946-2.473,0-3.42-.946-.946-2.478-.946-3.42,0Z"></path>
362
+ </svg><p>History</p></button>
363
364
<button class="text-button" id="ctx_window" @click="window.openCtxWindowModal()">
358
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.37 92.59">
359
- <path
360
- d="m5.72,11.5l-3.93,8.73h119.77s-3.96-8.73-3.96-8.73h-60.03c-1.59,0-2.88-1.29-2.88-2.88V1.75H13.72v6.87c0,1.59-1.29,2.88-2.88,2.88h-5.12Z"
361
- fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="5"></path>
362
- <path
363
- d="m6.38,20.23H1.75l7.03,67.03c.11,1.07.55,2.02,1.2,2.69.55.55,1.28.89,2.11.89h97.1c.82,0,1.51-.33,2.05-.87.68-.68,1.13-1.67,1.28-2.79l9.1-66.94H6.38Z"
364
- fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="5"></path>
365
- </svg>Context</button>
365
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="17 15 70 70" fill="currentColor">
366
+ <path d="m63 25c1.1016 0 2-0.89844 2-2s-0.89844-2-2-2h-26c-1.1016 0-2 0.89844-2 2s0.89844 2 2 2z"></path>
367
+ <path d="m63 79c1.1016 0 2-0.89844 2-2s-0.89844-2-2-2h-26c-1.1016 0-2 0.89844-2 2s0.89844 2 2 2z"></path>
368
+ <path d="m68 39h-36c-6.0703 0-11 4.9297-11 11s4.9297 11 11 11h36c6.0703 0 11-4.9297 11-11s-4.9297-11-11-11zm0 18h-36c-3.8594 0-7-3.1406-7-7s3.1406-7 7-7h36c3.8594 0 7 3.1406 7 7s-3.1406 7-7 7z"></path>
369
+ </svg><p>Context</p></button>
370
371
</div>
372
</div>
@@ -372,25 +376,30 @@
376
<template x-teleport="body">
377
<div x-show="isOpen" class="modal-overlay" @click.self="handleCancel()" @keydown.escape.window="handleClose()" x-transition>
378
<div class="modal-container">
375
- <div class="modal-header" id="settings-title">
376
- <h2 x-text="settings.title"></h2>
379
+ <div class="modal-header">
380
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
381
+ <path d="m717.77,788.27c-78.78-135.38-157.9-271.35-238.62-410.05-79.86,138.37-158.57,274.73-237.16,410.9h-121.99C239.91,581.87,479.49,170.89,479.49,170.89h0s240.63,410.03,360.51,617.38h-122.23Z" fill="currentColor" stroke-width="0"></path>
382
+ <path d="m633.08,788.85h-309.54c20.61-35.84,40.55-70.52,60.34-104.92h190.22c19.28,34.3,38.47,68.43,58.98,104.92Z" fill="currentColor" stroke-width="0"></path>
383
+ </svg>
384
+ <h2 x-text="settings.title"></h2>
385
<button class="modal-close" @click="handleCancel()">×</button>
386
</div>
379
- <div id="settings-sections">
380
- <!-- Dynamically generated navigation -->
381
- <nav>
382
- <ul>
383
- <!-- Loop over sections to generate links dynamically -->
384
- <template x-for="(section, index) in settings.sections" :key="index">
387
+
388
+ <div class="modal-content">
389
+ <div id="settings-sections">
390
+ <nav>
391
+ <ul>
392
+ <template x-for="(section, index) in settings.sections" :key="section.title">
393
<li>
386
- <a :href="'#section' + (index + 1)" x-text="section.title"></a>
394
+ <a :href="'#section' + (index + 1)">
395
+ <img :src="'/public/' + getIconName(section.title) + '.svg'" :alt="section.title">
396
+ <span x-text="section.title"></span>
397
+ </a>
398
</li>
399
</template>
389
- </ul>
390
- </nav>
391
- </div>
392
-
393
- <div class="modal-content">
400
+ </ul>
401
+ </nav>
402
+ </div>
403
<template x-for="(section, sectionIndex) in settings.sections" :key="sectionIndex">
404
<div :id="'section' + (sectionIndex + 1)" class="section">
405
<div class="section-title" x-text="section.title"></div>
@@ -491,6 +500,10 @@
500
<div x-show="isOpen" class="modal-overlay" @click.self="handleClose()" @keydown.escape.window="handleClose()" x-transition>
501
<div class="modal-container">
502
<div class="modal-header">
503
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
504
+ <path d="m717.77,788.27c-78.78-135.38-157.9-271.35-238.62-410.05-79.86,138.37-158.57,274.73-237.16,410.9h-121.99C239.91,581.87,479.49,170.89,479.49,170.89h0s240.63,410.03,360.51,617.38h-122.23Z" fill="currentColor" stroke-width="0"/>
505
+ <path d="m633.08,788.85h-309.54c20.61-35.84,40.55-70.52,60.34-104.92h190.22c19.28,34.3,38.47,68.43,58.98,104.92Z" fill="currentColor" stroke-width="0"/>
506
+ </svg>
507
<h2 class="modal-title" x-text="browser.title"></h2>
508
<button class="modal-close" @click="handleClose()">×</button>
509
</div>
@@ -600,11 +613,15 @@
613
<div x-show="isOpen" class="modal-overlay" @click.self="handleClose()" @keydown.escape.window="handleClose()" x-transition>
614
<div class="modal-container">
615
<div class="modal-header">
616
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
617
+ <path d="m717.77,788.27c-78.78-135.38-157.9-271.35-238.62-410.05-79.86,138.37-158.57,274.73-237.16,410.9h-121.99C239.91,581.87,479.49,170.89,479.49,170.89h0s240.63,410.03,360.51,617.38h-122.23Z" fill="currentColor" stroke-width="0"></path>
618
+ <path d="m633.08,788.85h-309.54c20.61-35.84,40.55-70.52,60.34-104.92h190.22c19.28,34.3,38.47,68.43,58.98,104.92Z" fill="currentColor" stroke-width="0"></path>
619
+ </svg>
620
<h2 class="modal-title" x-text="title"></h2>
621
<button class="modal-close" @click="handleClose()">×</button>
622
</div>
623
<div class="modal-description" x-text="description"></div>
607
- <div class="modal-content">
624
+ <div class="modal-content" id="viewer">
625
<div class="html-pre" x-html="html"></div>
626
</div>
627
<!-- <div class="modal-footer">
webui/index.js
+15
-6
@@ -1,5 +1,5 @@
1
-import * as msgs from "./messages.js";
2
-import { speech } from "./speech.js";
1
+import * as msgs from "./js/messages.js";
2
+import { speech } from "./js/speech.js";
3
4
const leftPanel = document.getElementById('left-panel');
5
const rightPanel = document.getElementById('right-panel');
@@ -334,8 +334,14 @@ async function poll() {
334
//set ui model vars from backend
335
const inputAD = Alpine.$data(inputSection);
336
inputAD.paused = response.paused;
337
- const statusAD = Alpine.$data(statusSection);
338
- statusAD.connected = true;
337
+
338
+ // Update status icon state
339
+ const timeDate = document.getElementById('time-date-container');
340
+ if (timeDate) {
341
+ const statusIcon = Alpine.$data(timeDate.querySelector('.status-icon'));
342
+ statusIcon.connected = true;
343
+ }
344
+
345
const chatsAD = Alpine.$data(chatsSection);
346
chatsAD.contexts = response.contexts;
347
@@ -344,8 +350,11 @@ async function poll() {
350
351
} catch (error) {
352
console.error('Error:', error);
347
- const statusAD = Alpine.$data(statusSection);
348
- statusAD.connected = false;
353
+ const timeDate = document.getElementById('time-date-container');
354
+ if (timeDate) {
355
+ const statusIcon = Alpine.$data(timeDate.querySelector('.status-icon'));
356
+ statusIcon.connected = false;
357
+ }
358
}
359
360
return updated
webui/js/file_browser.js
renamed
webui/js/history.js
renamed
+1
-1
@@ -1,4 +1,4 @@
1
-import { getContext } from "./index.js";
1
+import { getContext } from "../index.js";
2
3
export async function openHistoryModal() {
4
const hist = await window.sendJsonData("/history_get", { context: getContext() });
webui/js/messages.js
renamed
webui/js/modal.js
renamed
webui/js/settings.js
renamed
+13
@@ -85,3 +85,16 @@ const settingsModalProxy = {
85
// Alpine.store('settingsModal', initSettingsModal());
86
// });
87
88
+function getIconName(title) {
89
+ const iconMap = {
90
+ 'Agent Config': 'agentconfig',
91
+ 'Chat Model': 'chat-model',
92
+ 'Utility model': 'utility-model',
93
+ 'Embedding Model': 'embed-model',
94
+ 'API Keys': 'api-keys',
95
+ 'Authentication': 'auth',
96
+ 'Development': 'dev'
97
+ };
98
+ return iconMap[title] || 'default';
99
+}
100
+
webui/js/speech.js
renamed
+2
-2
@@ -1,5 +1,5 @@
1
-// import { pipeline, read_audio } from './transformers@3.0.2.js';
2
-import { updateChatInput, sendMessage } from './index.js';
1
+// import { pipeline, read_audio } from '../transformers@3.0.2.js';
2
+import { updateChatInput, sendMessage } from '../index.js';
3
4
const microphoneButton = document.getElementById('microphone-button');
5
let microphoneInput = null;
webui/js/speech_browser.js
renamed
+1
-1
@@ -1,5 +1,5 @@
1
import { pipeline, read_audio } from './transformers@3.0.2.js';
2
-import { updateChatInput, sendMessage } from './index.js';
2
+import { updateChatInput, sendMessage } from '../index.js';
3
4
const microphoneButton = document.getElementById('microphone-button');
5
let microphoneInput = null;
webui/js/transformers@3.0.2.js
renamed
webui/public/agentconfig.svg
new
+1
@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 17.82 22.6"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".35" data-name="Layer 1"><path d="M12.33 7.81c-.34.32-.8.52-1.3.52H6.78c-.5 0-.96-.2-1.3-.52-.36-.34-.59-.83-.59-1.37V4.06c0-.48.18-.92.48-1.26.35-.39.85-.63 1.41-.63h4.25c.56 0 1.06.24 1.41.63.3.33.48.77.48 1.26v2.38c0 .54-.23 1.02-.59 1.37Z"/><rect width="6.49" height="4.52" x="5.66" y="2.99" rx="1.39" ry="1.39"/><path d="M12.92 6.41h.35c.2 0 .36-.16.36-.36V4.46c0-.2-.16-.36-.36-.36h-.35M12.44 3.11V1.06M12.82.68a.38.38 0 1 1-.76 0 .38.38 0 0 1 .76 0ZM5.37 3.11V1.06M4.99.68a.38.38 0 1 0 .76 0 .38.38 0 0 0-.76 0ZM4.9 4.1h-.35c-.2 0-.36.16-.36.36v1.59c0 .2.16.36.36.36h.35M12.16 7.77l.18.04 1.03.23c.37.08.63.41.63.78v.51M5.66 7.77l-.18.04-1.03.23c-.37.08-.63.41-.63.78v.51M7.09 19.96H3.51c-1.78 0-3.22-1.44-3.22-3.22v-4.06c0-1.78 1.44-3.22 3.22-3.22h10.78c1.78 0 3.22 1.44 3.22 3.22v4.06c0 1.78-1.44 3.22-3.22 3.22h-3.57M7.09 22.3v-2.34h3.63v2.34M11.57 22.3H6.24"/><circle cx="8.91" cy="14.72" r=".92"/><path d="M11.65 15.1v-.77l-.6-.06a2.3 2.3 0 0 0-.31-.76l.39-.47-.55-.55-.47.39c-.23-.15-.48-.26-.76-.31l-.06-.6h-.77l-.06.6a2.3 2.3 0 0 0-.76.31l-.47-.39-.55.55.39.47c-.15.23-.26.48-.31.76l-.6.06v.77l.6.06c.06.27.16.53.31.76l-.39.47.55.55.47-.39c.23.15.48.26.76.31l.06.6h.77l.06-.6c.27-.06.53-.16.76-.31l.47.39.55-.55-.39-.47c.15-.23.26-.48.31-.76z"/></g></svg>
\ No newline at end of file
webui/public/api-keys.svg
new
+1
@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 16.62 18.76"><path d="M8.9 10.3c0-.42.17-.8.44-1.07s.65-.44 1.07-.44.8.17 1.07.44.44.65.44 1.07-.17.8-.44 1.07-.65.44-1.07.44-.8-.17-1.07-.44-.44-.65-.44-1.07m-7.24.43c-.12 0-.21-.1-.21-.21s.1-.21.21-.21h4.45c.12 0 .21.1.21.21s-.1.21-.21.21H1.65Zm10.83 7.95-8.65.08c-.44 0-.78-.09-1.01-.29-.24-.21-.36-.52-.35-.94V15.2c0-.84 0-1.68-.02-2.3 0-.12.09-.21.21-.22.12 0 .21.09.22.21 0 .62.01 1.46.02 2.3v2.33c0 .28.07.49.21.61.15.13.39.19.72.19 2.89 0 5.78-.07 8.66-.08h2.91q.42-.015.6-.21c.12-.13.18-.32.18-.58l-.17-12.94-2.66.04c-.43 0-.77-.1-1.01-.29-.22-.18-.36-.43-.42-.76a.3.3 0 0 1-.02-.09V.43H3.65c-.23.03-.44.12-.58.26-.13.12-.21.3-.22.51-.03.91-.04 1.91-.05 2.93-.01 1.21 0 2.44 0 3.54 0 .12-.09.21-.21.21s-.21-.09-.21-.21V4.12c0-1.02.03-2.03.05-2.94 0-.34.14-.61.34-.81.22-.2.52-.33.85-.37h8.51c.06 0 .12.03.16.07l4.09 4.07s.06.1.06.16l.17 13.14c0 .38-.1.68-.3.89s-.5.32-.89.34h-2.95Zm3.24-14.59L12.35.73v2.6c.02.27.11.46.27.59.17.13.41.2.74.2l2.36-.03Zm-8.19 7.57H1.57s-.08 0-.11-.02a.24.24 0 0 1-.09-.06S.1 10.48.1 10.48l-.02-.02a.24.24 0 0 1-.06-.09v-.02c-.01-.04-.02-.07-.02-.11s.01-.09.03-.13.05-.07.08-.1L1.37 9s.06-.04.09-.05h.02c.03 0 .05-.01.08-.01h5.97c.16-.33.37-.63.63-.89.58-.58 1.37-.93 2.25-.93s1.68.36 2.25.93c.58.58.93 1.37.93 2.25s-.36 1.68-.93 2.25c-.58.58-1.37.93-2.25.93a3.18 3.18 0 0 1-2.88-1.82Zm-.17-2.29H1.61l-1.11.89 1.12.97h5.75a3.17 3.17 0 0 1 0-1.86m2.28.16c-.2.2-.32.47-.32.77s.12.57.32.77.47.32.77.32.57-.12.77-.32.32-.47.32-.77-.12-.57-.32-.77-.47-.32-.77-.32-.57.12-.77.32M8.47 8.35a2.75 2.75 0 0 0 0 3.9 2.75 2.75 0 0 0 3.9 0 2.75 2.75 0 0 0 0-3.9 2.75 2.75 0 0 0-3.9 0" data-name="Layer 1"/></svg>
\ No newline at end of file
webui/public/auth.svg
new
+1
@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 22.6 17.51"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".35" data-name="Layer 1"><path d="m10.64 14.09-.04.04M12.6 7.01l2.56 2.56-.75.75-1.05 1.04-1.04 1.05-1.04 1.04-.64.64M5.5 11.25l-.31-.31a.573.573 0 0 1 0-.82l.35-.35 1.04-1.04 1.04-1.04 1.04-1.04L9.7 5.61l.76-.76.77.77M5.03.38l3.65 3.65-.28.29-1.04 1.04-.71.7-.33.34-1.04 1.04-.21.2-.83.84-.29.28L.3 5.11M8.4 4.32l1.16 1.16M7.36 5.36l1.16 1.16M6.32 6.4l1.16 1.16M5.28 7.44l1.16 1.17M4.24 8.48 5.4 9.65"/><path d="M14.4 10.32h.01l.84.85M13.36 11.36l.85.85M12.32 12.4v.01l.85.84M11.28 13.44v.01l.85.84M4.45 2.14h.01l1.99 2-.36 1.35.56.57M2.68 3.91l1.11 1.11-.18 1.16 1.46 1.46M22.3 4.54l-6.08 6.08M18.07.3l-4.83 4.83-1.72.21-.29.29-1.8 1.8-.07 3.24c.13.03.26.05.38.05.79 0 1.48-.64 1.49-1.48v-.87l1.37-1.36.4-.4M6.51 12.9c-.22.22-.57.22-.79 0l-.54-.55a.555.555 0 0 1 0-.79l.32-.32 1.15-1.15 1.33 1.33"/><path d="M7.84 14.23c-.22.22-.57.22-.79 0l-.54-.54a.555.555 0 0 1 0-.79l1.47-1.47 1.33 1.33"/><path d="m10.65 14.09-1.47 1.47s-.04.04-.07.06a.55.55 0 0 1-.72-.06l-.54-.55a.555.555 0 0 1 0-.79l1.47-1.47 1.32 1.32"/><path d="m11.16 16.22-.66.66c-.22.22-.57.22-.79 0l-.54-.54a.55.55 0 0 1-.06-.72c.02-.02.04-.05.06-.07l1.47-1.47v.01l1.32 1.32-.81.81Z"/><path d="M13.21 15.6c.37.37.37.96 0 1.33s-.96.37-1.33 0l-.72-.72M11.66 14.75l.35-.35M14.81 14.54c.22.22.22.57 0 .79l-.54.54c-.22.22-.57.22-.79 0l-.27-.27-1.2-1.2.12-.12 1.04-1.04.18-.18"/><path d="M16.14 13.21c.22.22.22.57 0 .79l-.54.54c-.22.22-.57.22-.79 0l-1.47-1.47.87-.86.47-.47M16.22 10.62l1.26 1.26c.22.22.22.57 0 .79l-.54.54c-.22.22-.57.22-.79 0l-1.47-1.47.57-.57.76-.76zM4.62 1.76c0 .15-.06.29-.16.39a.552.552 0 0 1-.94-.39c0-.31.24-.55.55-.55s.55.24.55.55ZM2.89 3.48c0 .3-.24.55-.55.55s-.55-.24-.55-.55.24-.55.55-.55.55.24.55.55Z"/></g></svg>
\ No newline at end of file
webui/public/chat-model.svg
new
+1
@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 22.6 21.17"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".35" data-name="Layer 1"><path d="M17.13 2.96h1.77a2.394 2.394 0 0 1 2.39 2.39v3.97a2.39 2.39 0 0 1-2.39 2.39h-6.62a2.39 2.39 0 0 1-2.39-2.39V5.35c0-.65.26-1.24.68-1.67.43-.45 1.04-.72 1.71-.72h1.77"/><rect width="9.22" height="6.43" x="10.98" y="4.12" rx="1.76" ry="1.76"/><path d="M21.29 8.98h.5c.28 0 .51-.23.51-.51V6.21c0-.28-.23-.51-.51-.51h-.5M20.61 4.29V1.38M21.16.84c0 .3-.24.54-.54.54s-.54-.24-.54-.54.24-.54.54-.54.54.24.54.54ZM10.57 4.29V1.38M10.03.84c0 .3.24.54.54.54s.54-.24.54-.54-.24-.54-.54-.54-.54.24-.54.54ZM9.89 5.69h-.5c-.28 0-.51.23-.51.51v2.26c0 .28.23.51.51.51h.5M14.06 1.86h3.07v1.1h-3.07z"/><path d="M13.79 11.71v3.97c0 .44-.36.8-.8.8h-8.4l-2.64 2.18v-2.18h-.84c-.44 0-.8-.36-.8-.8V7.42c0-.45.36-.81.8-.81h7.78"/><path d="M18.85 11.59V18c0 .42-.34.76-.75.76h-.79v2.05l-2.48-2.05H6.96A.76.76 0 0 1 6.2 18v-1.51M4.2 11.71c0 .08-.06.14-.14.14s-.14-.06-.14-.14.06-.14.14-.14.14.06.14.14Z"/><circle cx="6.05" cy="11.71" r=".14"/><circle cx="8.04" cy="11.71" r=".14"/><circle cx="10.04" cy="11.71" r=".14"/></g></svg>
\ No newline at end of file
webui/public/dev.svg
new
+1
@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 22.25 22.6"><g fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".35" data-name="Layer 1"><path d="m.3 1.8 2.55 1.5L5.4 1.8"/><path d="M2.85.3.3 1.8v3l2.55 1.5L5.4 4.8v-3L2.85.3M2.85 3.3v3M21.95 1.8 19.4 3.3l-2.55-1.5"/><path d="m19.4.3 2.55 1.5v3L19.4 6.3l-2.55-1.5v-3L19.4.3M19.4 3.3v3M.3 17.8l2.55 1.5 2.55-1.5"/><path d="M2.85 16.3.3 17.8v3l2.55 1.5 2.55-1.5v-3l-2.55-1.5M2.85 19.3v3M21.95 17.8l-2.55 1.5-2.55-1.5"/><path d="m19.4 16.3 2.55 1.5v3l-2.55 1.5-2.55-1.5v-3l2.55-1.5M19.4 19.3v3M8.13 6.28a5.855 5.855 0 0 1 5.98 0c1.01.6 1.83 1.51 2.32 2.59.34.74.53 1.56.53 2.43s-.19 1.69-.53 2.43a5.9 5.9 0 0 1-2.33 2.59 5.855 5.855 0 0 1-5.98 0 5.96 5.96 0 0 1-2.33-2.59c-.34-.74-.53-1.56-.53-2.43s.19-1.69.53-2.43c.5-1.08 1.31-1.99 2.32-2.59"/><path d="M14.11 6.28V3.45h2.74M8.13 6.28h0V3.45H5.4M5.77 8.85H2.85V6.3M5.77 13.75H2.85v2.55M16.48 8.85h2.92V6.3M16.48 13.75h2.92v2.55M14.11 16.32h0v2.84h2.74M8.13 16.32h0v2.84H5.4M9.29 9.31 7.17 11.3l2.03 2.07M13.05 13.37l2.12-1.99-2.03-2.07M10.28 13.47l1.7-4.34"/></g></svg>
\ No newline at end of file
webui/public/embed-model.svg
new
+1
@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 19.13 22.6"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".35" data-name="Layer 1"><path d="M18.61 17.15V20l-7.87 2.3v-9.84l4.87-1.43 3-.88v4.01M.52 17.16V20l7.88 2.3v-9.84h-.01l-4.86-1.43-3.01-.88v4.01M8.39 12.46h2.3499999999999996M8.51 22.3h2.12M13.88 9.28c-.32.35-.77.56-1.28.56H6.53c-.51 0-.96-.22-1.28-.56-.28-.31-.45-.72-.45-1.17V4.26a1.739 1.739 0 0 1 1.74-1.73h6.07a1.74 1.74 0 0 1 1.74 1.73v3.85c0 .45-.17.86-.45 1.17Z"/><rect width="7.71" height="5.37" x="5.71" y="3.5" rx="1.27" ry="1.27"/><path d="M14.33 7.55h.42c.24 0 .43-.19.43-.43V5.23c0-.24-.19-.43-.43-.43h-.42M13.77 3.64V1.21M14.22.75c0 .25-.2.45-.45.45s-.45-.2-.45-.45.2-.45.45-.45.45.2.45.45ZM5.37 3.64V1.21"/><circle cx="5.37" cy=".75" r=".45"/><path d="M4.8 4.81h-.42c-.23 0-.42.19-.42.43v1.89c0 .24.19.43.42.43h.42M18.61 14.16l-1.08.47s-.06.05-.06.1v2.76c0 .08.08.13.15.1l1-.44.15-.07s.06-.05.06-.1v-2.76c0-.08-.08-.13-.15-.1l-.07.03ZM.52 14.16l1.08.47s.06.05.06.1v2.76c0 .08-.08.13-.15.1l-1-.44-.16-.07s-.06-.05-.06-.1v-2.76c0-.08.08-.13.15-.1l.07.03ZM12.9 13.5l3.55-1.04M12.9 14.91l3.55-1.04M2.68 13.87l3.55 1.04M9.57 12.46v1.04M13.31 9.15l.57.13.98.22c.44.1.74.48.74.93v.6M5.82 9.15l-.57.13-.98.22c-.44.1-.74.48-.74.93v.6"/></g></svg>
\ No newline at end of file
webui/public/settings.svg
new
+4
@@ -0,0 +1,4 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -10.0 110.0 135.0" fill="#e0e0e0">
2
+ <path d="m52.301 90.102h-4.1016c-3 0-5 0-6.8984-1.3984-1.8984-1.3984-2.5-3.3008-3.5-6.1016l-1.1016-3.6016c-0.19922-0.60156-0.69922-1.1992-1.3984-1.6016l-1.1016-0.60156c-0.60156-0.30078-1.5-0.39844-2.3008-0.19922l-4.3008 1.1992c-3.1016 0.89844-5.1016 1.5-7.3984 0.5-2.3008-0.89844-3.3984-2.8008-5-5.6016l-1.8008-3.1016c-1.5-2.5-2.5-4.3008-2.3008-6.6992 0.19922-2.3984 1.6016-3.8008 3.6016-6.1016l3.8008-4.1992c0.19922-0.19922 0.60156-1.3984 0.60156-2.6016 0-1.1016-0.5-2.3008-0.80078-2.6992l-3.6016-4c-2-2.1992-3.3008-3.6992-3.6016-6.1016-0.19922-2.3984 0.80078-4.1992 2.3008-6.6992l1.8008-3.1016c1.6016-2.8008 2.6992-4.6016 5-5.6016 2.3008-0.89844 4.3008-0.39844 7.3984 0.5l4.3984 1.1992c0.69922 0.10156 1.5 0 2.3008-0.30078l1.1016-0.60156c0.5-0.30078 1-0.89844 1.3008-1.6992l1.1992-3.5c0.89844-2.8008 1.6016-4.6992 3.5-6.1016 1.8984-1.3984 3.8984-1.3984 6.8984-1.3984h4.1016c3 0 5 0 6.8984 1.3984 1.8984 1.3984 2.5 3.1992 3.5 6.1016l1.1992 3.6016c0.19922 0.60156 0.69922 1.1992 1.3984 1.6016l1.1016 0.60156c0.60156 0.30078 1.5 0.39844 2.3008 0.19922l4.3008-1.1992c3.1016-0.89844 5.1016-1.5 7.3984-0.5 2.3008 0.89844 3.3984 2.8008 5 5.5l1.8008 3.1016c1.3984 2.5 2.5 4.3008 2.3008 6.6992-0.19922 2.3984-1.6016 3.8008-3.6016 6.1016l-3.9961 4.4062c-0.19922 0.19922-0.60156 1.3984-0.60156 2.6016 0 1.1016 0.5 2.3008 0.80078 2.6992l3.6016 4c2 2.1992 3.3008 3.6992 3.6016 6.1016 0.19922 2.3984-0.80078 4.1992-2.3008 6.6992l-1.8008 3.1016c-1.6016 2.8008-2.6992 4.6016-5 5.6016-2.3008 0.89844-4.3984 0.39844-7.3984-0.5l-4.3984-1.1992c-0.69922-0.10156-1.5 0-2.3008 0.30078l-1.1016 0.60156c-0.5 0.30078-1 0.89844-1.3008 1.6992l-1.1992 3.5c-0.89844 2.8008-1.6016 4.6992-3.5 6.1016-1.8008 1.293-3.8008 1.293-6.8008 1.293zm-6.6016-7.3008c0.5 0.10156 1.6016 0.10156 2.6016 0.10156h4.1016c1 0 2 0 2.6016-0.10156 0.19922-0.5 0.60156-1.5 0.89844-2.3984l1.1992-3.6016c0.89844-2.3008 2.3984-4.1992 4.3984-5.3984l1.3984-0.80078c2.3984-1.3008 5.1016-1.6016 7.6016-1l4.6016 1.3008c1 0.30078 2.1016 0.60156 2.6992 0.69922 0.30078-0.5 0.89844-1.5 1.3984-2.3984l1.8008-3.1016c0.5-0.80078 1-1.8008 1.1992-2.3008-0.30078-0.39844-1-1.1992-1.6992-2l-3.8008-4.1992c-1.6016-2-2.5-4.8008-2.5-7.3984 0-2.6016 0.89844-5.3984 2.3008-7.3008l3.8984-4.3984c0.69922-0.69922 1.3984-1.5 1.6992-2-0.19922-0.5-0.80078-1.3984-1.1992-2.3008l-1.8984-3.1016c-0.5-0.89844-1.1016-1.8984-1.3984-2.3984-0.60156 0.10156-1.6992 0.39844-2.6992 0.69922l-4.3984 1.3008c-2.6992 0.60156-5.3008 0.30078-7.6016-0.89844l-1.4023-0.80469c-2.1016-1.3984-3.6016-3.1992-4.3984-5.3984l-1.3008-3.8008c-0.30078-0.89844-0.60156-1.8984-0.89844-2.3984-0.5-0.10156-1.6016-0.10156-2.6016-0.10156h-4.1016c-1 0-2 0-2.6016 0.10156-0.19922 0.5-0.60156 1.5-0.89844 2.3984l-1.1992 3.6016c-0.89844 2.3008-2.3984 4.1992-4.3984 5.3984l-1.3984 0.80078c-2.3984 1.3008-5.1016 1.6016-7.6016 1l-4.6016-1.3008c-1-0.30078-2.1016-0.60156-2.6992-0.69922-0.30078 0.5-0.89844 1.5-1.3984 2.3984l-1.8008 3.1016c-0.5 0.80078-1 1.8008-1.1992 2.3008 0.30078 0.39844 1 1.1992 1.6992 2l3.8008 4.1992c1.6016 2 2.5 4.8008 2.5 7.3984 0 2.6016-0.89844 5.3984-2.3008 7.3008l-3.8984 4.3984c-0.69922 0.69922-1.3984 1.5-1.6992 2 0.19922 0.5 0.80078 1.3984 1.1992 2.3008l1.8008 3.1016c0.5 0.89844 1.1016 1.8984 1.3984 2.3984 0.60156-0.10156 1.6992-0.39844 2.6992-0.69922l4.3984-1.1992c2.6992-0.60156 5.3008-0.30078 7.6016 0.89844l1.3984 0.80078c2.1016 1.3008 3.6016 3.1992 4.3984 5.3984l1.3008 3.8008c0.5 0.80078 0.80078 1.8008 1 2.3008z"></path>
3
+ <path d="m50.301 66.5c-9 0-16.398-7.3008-16.398-16.398 0-9.1016 7.3008-16.398 16.398-16.398 9.1016 0 16.398 7.3008 16.398 16.398 0 9.0977-7.3984 16.398-16.398 16.398zm0-25.5c-5 0-9.1016 4.1016-9.1016 9.1016s4.1016 9.1016 9.1016 9.1016 9.1016-4.1016 9.1016-9.1016c-0.003906-5-4.1016-9.1016-9.1016-9.1016z"></path>
4
+</svg>
\ No newline at end of file
webui/public/splash.jpg
renamed
webui/public/utility-model.svg
new
+1
@@ -0,0 +1 @@
1
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 22.15 22.6"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".35" data-name="Layer 1"><path d="M8.89 13.97c.93.14 1.65.94 1.65 1.91v5.1"/><path d="M3.88 20.98v-5.1c0-.63.3-1.19.77-1.54.32-.25.73-.39 1.17-.39h2.79c.1 0 .19 0 .29.02M1.35 22.3v-1.32h18.07v1.32"/><path d="M8.99 17.21c0 .98-.8 1.78-1.78 1.78s-1.78-.8-1.78-1.78.8-1.78 1.78-1.78 1.78.8 1.78 1.78ZM7.78 16.64l-1.14 1.14M4.15 3.88a2.08 2.08 0 0 1 1.04 2.24c0 .02-.01.05-.02.07a2.08 2.08 0 0 1-2.02 1.59c-.22 0-.43-.03-.63-.1A2.07 2.07 0 0 1 1.08 5.7a2.078 2.078 0 0 1 3.08-1.82M2.48 5.04l1.33 1.33M8.89 13.97 5.17 6.19M4.6 14.29 2.48 7.78"/><path d="m5.19 6.12 7.42-2.26-.08-.27-.56-1.81-.08-.26-7.74 2.36M15.34 2.73l-2.81.86M14.77.93l-2.8.85M16.94 2.26c-.23.35-.62.59-1.07.59-.18 0-.34-.04-.5-.1-.01 0-.02 0-.03-.01a1.272 1.272 0 0 1-.57-1.81 1.272 1.272 0 1 1 2.17 1.33ZM16.27 1.17l-.81.81"/><path d="m15.36 2.82.4 1.83.25-.05 1.21-.25.24-.06-.51-2.02"/><path d="m17.22 4.35.84.97-.2 1.66M16.01 4.6l-.34 1.35.69 1.1M20.47 22.3H.3"/><rect width="7.77" height="5.96" x="13.52" y="7.04" rx="1.73" ry="1.73"/><path d="M21.29 11.14h.34c.19 0 .35-.15.35-.35V9.25c0-.19-.15-.35-.35-.35h-.34M20.83 7.68V6.64"/><circle cx="20.83" cy="6.27" r=".37"/><path d="M13.98 7.68V6.64"/><circle cx="13.98" cy="6.27" r=".37"/><path d="M13.52 8.91h-.34c-.19 0-.35.15-.35.35v1.54c0 .19.15.35.35.35h.34"/></g></svg>
\ No newline at end of file
webui/settings.css
deleted
-378
@@ -1,378 +0,0 @@
1
-select {
2
- transition: none;
3
-}
4
-
5
-.modal-overlay {
6
- position: fixed;
7
- top: 0;
8
- left: 0;
9
- right: 0;
10
- bottom: 0;
11
- background: rgba(0, 0, 0, 0.5);
12
- display: flex;
13
- align-items: center;
14
- justify-content: center;
15
- z-index: 2001;
16
-}
17
-
18
-.modal-container {
19
- background: var(--color-panel);
20
- color: var(--color-primary);
21
- border-radius: 0.5rem;
22
- width: 90%;
23
- max-width: 800px;
24
- max-height: 90vh;
25
- display: flex;
26
- flex-direction: column;
27
-}
28
-
29
-.modal-header {
30
- padding: 1em 1em;
31
- border-bottom: 1px solid var(--color-border);
32
-}
33
-
34
-.modal-header h2 {
35
- color: var(--color-primary);
36
- font-size: 1.25rem;
37
- margin: 0;
38
-}
39
-
40
-.modal-header ul {
41
- margin-bottom: 0;
42
- line-height: 2em;
43
-}
44
-
45
-#settings-title {
46
- padding: 0.5rem 2rem 0.5rem 2rem;
47
-}
48
-
49
-.modal-content {
50
- padding: var(--spacing-sm);
51
- overflow-y: auto;
52
- flex-grow: 1;
53
- background-clip: border-box;
54
- border: 6px solid transparent;
55
- transition: all 0.3s ease;
56
- margin-bottom: 0;
57
- padding-bottom: 0;
58
-}
59
-
60
-.modal-content::-webkit-scrollbar {
61
- width: 6px;
62
- height: 6px;
63
-}
64
-
65
-.modal-content::-webkit-scrollbar-track {
66
- background: transparent;
67
- margin: 4px 0;
68
- border-radius: 6px;
69
-}
70
-
71
-.modal-content::-webkit-scrollbar-thumb {
72
- background-color: rgba(155, 155, 155, 0.5);
73
- border-radius: 6px;
74
- transition: background-color 0.2s ease;
75
-}
76
-
77
-.modal-content::-webkit-scrollbar-thumb:hover {
78
- background-color: rgba(155, 155, 155, 0.7);
79
-}
80
-
81
-.modal-footer {
82
- padding: var(--spacing-sm);
83
- border-top: 1px solid var(--color-border);
84
- display: flex;
85
- justify-content: flex-end;
86
- gap: 1rem;
87
- background: var(--color-background);
88
-}
89
-
90
-.section {
91
- margin-bottom: 2rem;
92
- padding: 1rem;
93
- border: 1px solid var(--color-border);
94
- border-radius: 0.5rem;
95
-}
96
-
97
-.section-title {
98
- font-size: 1.25rem;
99
- font-weight: bold;
100
- margin-bottom: 0.5rem;
101
-}
102
-
103
-.section-description {
104
- color: #666;
105
- margin-bottom: 1rem;
106
-}
107
-
108
-.field {
109
- display: grid;
110
- margin-block-start: 1rem;
111
- grid-template-columns: 60% 1fr;
112
- align-items: center;
113
-}
114
-
115
-.field.field-full {
116
- grid-template-columns: 1fr;
117
-}
118
-
119
-.field-label {
120
- display: flex;
121
- flex-direction: column;
122
- padding-right: 0.5em;
123
-}
124
-
125
-.field-title {
126
- font-weight: bold;
127
-}
128
-
129
-.field-description {
130
- color: #666;
131
- font-size: 0.875rem;
132
- margin-top: 0.25rem;
133
- margin-bottom: 0.5rem;
134
-}
135
-
136
-.field-control {
137
- width: 100%;
138
- display: flex;
139
- align-items: center;
140
-}
141
-
142
-input[type="text"] {
143
- width: 100%;
144
- padding: 0.5rem;
145
- border: 1px solid #ddd;
146
- border-radius: 0.25rem;
147
- font-family: "Rubik", Arial, Helvetica, sans-serif;
148
-}
149
-
150
-input[type="password"] {
151
- width: 100%;
152
- padding: 0.5rem;
153
- border: 1px solid #ddd;
154
- border-radius: 0.25rem;
155
- font-family: "Rubik", Arial, Helvetica, sans-serif;
156
-}
157
-
158
-textarea {
159
- width: 100%;
160
- min-height: 100px;
161
- padding: 0.5rem;
162
- border: 1px solid #ddd;
163
- border-radius: 0.25rem;
164
- font-family: Roboto Mono;
165
- scroll-behavior: smooth;
166
- resize: none;
167
- /*-/* scrollbar padding */
168
- background-clip: border-box;
169
- border: 6px solid transparent;
170
- transition: all 0.3s ease;
171
-}
172
-
173
-.toggle {
174
- position: relative;
175
- display: inline-block;
176
- width: 60px;
177
- height: 34px;
178
- margin: 0;
179
-}
180
-
181
-.toggle input {
182
- opacity: 0;
183
- width: 0;
184
- height: 0;
185
-}
186
-
187
-.toggler {
188
- position: absolute;
189
- cursor: pointer;
190
- top: 0;
191
- left: 0;
192
- right: 0;
193
- bottom: 0;
194
- background-color: #ccc;
195
- transition: 0.4s;
196
- border-radius: 34px;
197
-}
198
-
199
-.toggler:before {
200
- position: absolute;
201
- content: "";
202
- height: 26px;
203
- width: 26px;
204
- left: 4px;
205
- bottom: 4px;
206
- background-color: white;
207
- transition: 0.4s;
208
- border-radius: 50%;
209
-}
210
-
211
-input:checked + .toggler {
212
- background-color: #2196f3;
213
-}
214
-
215
-input:checked + .toggler:before {
216
- transform: translateX(26px);
217
-}
218
-
219
-input[type="range"] {
220
- width: 100%;
221
-}
222
-
223
-.range-value {
224
- min-width: 3em;
225
- text-align: right;
226
-}
227
-
228
-#buttons-container {
229
- display: flex;
230
- gap: 0.875rem;
231
-}
232
-
233
-.btn {
234
- padding: 0.7rem 1.5rem;
235
- border-radius: 0.25rem;
236
- cursor: pointer;
237
- border: none;
238
- font-size: 0.875rem;
239
- font-family: "Rubik", Arial, Helvetica, sans-serif;
240
-}
241
-
242
-.btn-ok {
243
- background: #3270e2;
244
- color: white;
245
- transition: background 0.3s ease-in-out;
246
-}
247
-
248
-.btn-ok > svg {
249
- max-width: 20px;
250
-}
251
-
252
-.btn-ok:hover {
253
- background: #3265c0;
254
-}
255
-
256
-.btn-ok:active {
257
- background: #345693;
258
-}
259
-
260
-.btn-cancel {
261
- background: #ddd;
262
- color: #333;
263
- transition: background 0.3s ease-in-out;
264
-}
265
-
266
-.btn-cancel:hover {
267
- background: #a6a6a6;
268
-}
269
-
270
-.btn-cancel:active {
271
- background: #808080;
272
-}
273
-
274
-.btn-field {
275
- background: #2196f3;
276
- color: white;
277
- width: fit-content;
278
-}
279
-
280
-.btn-field:disabled {
281
- background: #ccc;
282
- cursor: not-allowed;
283
-}
284
-
285
-select {
286
- width: 100%;
287
- padding: 0.5rem;
288
- border: 1px solid #ddd;
289
- border-radius: 0.25rem;
290
- background-color: white;
291
- font-size: inherit;
292
- cursor: pointer;
293
- font-family: "Rubik", Arial, Helvetica, sans-serif;
294
- outline: none;
295
-}
296
-
297
-select:disabled {
298
- background-color: #f5f5f5;
299
- cursor: not-allowed;
300
-}
301
-
302
-/* Style for navigation links */
303
-nav ul {
304
- list-style-type: none;
305
- padding: 0;
306
-}
307
-
308
-nav ul li {
309
- display: inline;
310
- margin-right: 1rem;
311
-}
312
-
313
-nav ul li a {
314
- text-decoration: none;
315
- color: #2196f3;
316
- font-weight: bold;
317
-}
318
-
319
-nav ul li a:hover {
320
- text-decoration: underline;
321
-}
322
-
323
-#settings-sections {
324
- background-color: var(--color-secondary);
325
- padding: 0.3rem 2rem;
326
- line-height: 1.6rem;
327
- font-size: var(--font-size-normal);
328
- border-bottom: 1px solid var(--color-border);
329
-}
330
-
331
-
332
-@media (max-width: 768px) {
333
- .modal-header {
334
- padding: var(--spacing-sm);
335
- border-bottom: 1px solid var(--color-border);
336
- }
337
-
338
- .modal-header h2 {
339
- font-size: 1.25rem;
340
- margin: 0;
341
- }
342
-
343
- .modal-content {
344
- padding: 1rem;
345
- overflow-y: auto;
346
- flex-grow: 1;
347
- }
348
-
349
- .modal-footer {
350
- padding: var(--spacing-sm);
351
- }
352
-
353
- #buttons-container {
354
- display: flex;
355
- gap: 1rem;
356
- margin: 0 auto;
357
- }
358
-
359
- .section {
360
- margin-bottom: 1.5rem;
361
- padding: 1rem;
362
- border: 1px solid var(--color-border);
363
- border-radius: 0.5rem;
364
- }
365
-
366
- .field-control {
367
- width: 100%;
368
- }
369
- .field-description {
370
- padding-bottom: var(--spacing-sm);
371
- }
372
- .field {
373
- padding-top: var(--spacing-xs);
374
- padding-bottom: var(--spacing-xs);
375
- display: block;
376
- align-items: center;
377
- }
378
-}