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).
Alessandro committed
Nov 27, 2024 at 12:51 UTC
e626817332661f48ec97da1d4ab42479ca40b50f
6 files changed
+317
-332
webui/css/file_browser.css
+6
-105
@@ -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
- border-bottom: 1px solid var(--color-border);
27
- display: grid;
28
- grid-template-columns: 1fr 10fr 1fr;
29
- align-items: center;
30
- justify-content:space-between;
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%;
@@ -151,9 +73,6 @@ h2 {
73
}
74
75
/* Light mode adjustments */
154
-.light-mode .modal-container {
155
- background-color: var(--color-panel-light);
156
-}
76
77
.light-mode .file-item:hover {
78
background-color: var(--color-secondary-light);
@@ -221,7 +140,7 @@ transition: background-color 0.2s;
140
}
141
142
.btn-upload {
224
- background: #3270e2;
143
+ background: #4248f1;
144
color: white;
145
display: flex;
146
transition: background 0.3s ease-in-out;
@@ -236,7 +155,11 @@ transition: background-color 0.2s;
155
}
156
157
.upload-button:hover {
239
-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,10 +210,6 @@ background-color: var(--color-primary-dark);
210
background-color: #c6d4de;
211
}
212
290
-.button-section {
291
- gap: 1rem;
292
-}
293
-
213
@media (max-width: 768px) {
214
.file-header {
215
display: grid;
@@ -346,22 +265,4 @@ background-color: var(--color-primary-dark);
265
.file-date {
266
display: none;
267
}
349
-
350
- #buttons-container {
351
- max-height: 50px;
352
- }
353
-
354
- .btn {
355
- text-wrap: wrap;
356
- }
357
-
358
- .btn-upload {
359
- margin: 0 auto;
360
- gap: 0.5rem;
361
- align-items:center;
362
- }
363
-
364
- .btn-upload > svg {
365
- width: 20px;
366
- }
268
}
\ No newline at end of file
webui/css/history.css
+25
@@ -2,4 +2,29 @@
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
+2
-212
@@ -1,119 +1,3 @@
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
-.modal-header > svg {
46
- max-height: 30px !important;
47
-}
48
-
49
-#settings-title {
50
- padding: 0.75rem 1.3rem 0.5rem 2rem;
51
- background-color: var(--color-background);
52
-}
53
-
54
-#settings-title > svg {
55
- gap: 10rem;
56
-}
57
-
58
-.modal-content {
59
- padding: var(--spacing-sm);
60
- overflow-y: auto;
61
- flex-grow: 1;
62
- background-clip: border-box;
63
- border: 6px solid transparent;
64
- transition: all 0.3s ease;
65
- margin-bottom: 0;
66
- padding-bottom: 0;
67
-}
68
-
69
-.modal-content::-webkit-scrollbar {
70
- width: 6px;
71
- height: 6px;
72
-}
73
-
74
-.modal-content::-webkit-scrollbar-track {
75
- background: transparent;
76
- margin: 4px 0;
77
- border-radius: 6px;
78
-}
79
-
80
-.modal-content::-webkit-scrollbar-thumb {
81
- background-color: rgba(155, 155, 155, 0.5);
82
- border-radius: 6px;
83
- transition: background-color 0.2s ease;
84
-}
85
-
86
-.modal-content::-webkit-scrollbar-thumb:hover {
87
- background-color: rgba(155, 155, 155, 0.7);
88
-}
89
-
90
-.modal-footer {
91
- padding: var(--spacing-sm);
92
- border-top: 1px solid var(--color-border);
93
- display: flex;
94
- justify-content: flex-end;
95
- gap: 1rem;
96
- background: var(--color-background);
97
-}
98
-
99
-.section {
100
- margin-bottom: 2rem;
101
- padding: 1rem;
102
- border: 1px solid var(--color-border);
103
- border-radius: 0.5rem;
104
-}
105
-
106
-.section-title {
107
- font-size: 1.25rem;
108
- font-weight: bold;
109
- margin-bottom: 0.5rem;
110
-}
111
-
112
-.section-description {
113
- color: #666;
114
- margin-bottom: 1rem;
115
-}
116
-
1
.field {
2
display: grid;
3
margin-block-start: 1rem;
@@ -259,63 +143,6 @@ input[type="range"] {
143
text-align: right;
144
}
145
262
-#buttons-container {
263
- display: flex;
264
- gap: 0.875rem;
265
-}
266
-
267
-.btn {
268
- padding: 0.7rem 1.5rem;
269
- border-radius: 0.25rem;
270
- cursor: pointer;
271
- border: none;
272
- font-size: 0.875rem;
273
- font-family: "Rubik", Arial, Helvetica, sans-serif;
274
-}
275
-
276
-.btn-ok {
277
- background: #3270e2;
278
- color: white;
279
- transition: background 0.3s ease-in-out;
280
-}
281
-
282
-.btn-ok > svg {
283
- max-width: 20px;
284
-}
285
-
286
-.btn-ok:hover {
287
- background: #3265c0;
288
-}
289
-
290
-.btn-ok:active {
291
- background: #345693;
292
-}
293
-
294
-.btn-cancel {
295
- background: #ddd;
296
- color: #333;
297
- transition: background 0.3s ease-in-out;
298
-}
299
-
300
-.btn-cancel:hover {
301
- background: #a6a6a6;
302
-}
303
-
304
-.btn-cancel:active {
305
- background: #808080;
306
-}
307
-
308
-.btn-field {
309
- background: #2196f3;
310
- color: white;
311
- width: fit-content;
312
-}
313
-
314
-.btn-field:disabled {
315
- background: #ccc;
316
- cursor: not-allowed;
317
-}
318
-
146
select {
147
width: 100%;
148
padding: 0.5rem;
@@ -327,6 +154,7 @@ select {
154
cursor: pointer;
155
font-family: "Rubik", Arial, Helvetica, sans-serif;
156
outline: none;
157
+ transition: none;
158
}
159
160
select:disabled {
@@ -391,41 +219,7 @@ nav ul li a img {
219
background-color: var(--color-secondary-light);
220
}
221
394
-
222
@media (max-width: 768px) {
396
- .modal-header {
397
- padding: var(--spacing-sm);
398
- border-bottom: 1px solid var(--color-border);
399
- }
400
-
401
- .modal-header h2 {
402
- font-size: 1.25rem;
403
- margin: 0;
404
- }
405
-
406
- .modal-content {
407
- padding: 1rem;
408
- overflow-y: auto;
409
- flex-grow: 1;
410
- }
411
-
412
- .modal-footer {
413
- padding: var(--spacing-sm);
414
- }
415
-
416
- #buttons-container {
417
- display: flex;
418
- gap: 1rem;
419
- margin: 0 auto;
420
- }
421
-
422
- .section {
423
- margin-bottom: 1.5rem;
424
- padding: 1rem;
425
- border: 1px solid var(--color-border);
426
- border-radius: 0.5rem;
427
- }
428
-
223
.field-control {
224
width: 100%;
225
}
@@ -440,11 +234,7 @@ nav ul li a img {
234
}
235
}
236
443
-@media (max-width: 480px) {
444
- #settings-title {
445
- display: flex;
446
- text-wrap: nowrap;
447
- }
237
+@media (max-width: 480px) {
238
nav ul {
239
grid-template-columns: repeat(2, 1.2fr);
240
}
webui/index.css
+13
-6
@@ -1069,8 +1069,9 @@ font-size: var(--font-size-small)
1069
}
1070
1071
.text-button {
1072
- 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;
@@ -1099,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;
@@ -1559,10 +1565,15 @@ input:checked + .slider:before {
1565
@media (max-width: 480px) {
1566
.text-buttons-row {
1567
display: table;
1568
+ gap: 0.1rem !important;
1569
}
1570
1571
.text-button {
1565
- max-height: 20px;
1572
+ max-height: 25px;
1573
+ }
1574
+
1575
+ .text-button p{
1576
+ display: none;
1577
}
1578
}
1579
@@ -1644,10 +1655,6 @@ input:checked + .slider:before {
1655
white-space: pre-wrap;
1656
}
1657
1647
- .text-button {
1648
- text-align: left;
1649
- }
1650
-
1658
.text-button svg {
1659
width: 18px;
1660
height: 18px;
webui/index.html
+14
-9
@@ -9,6 +9,7 @@
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
@@ -348,24 +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>
351
- </svg>Import knowledge</button>
352
+ </svg><p>Import knowledge</p></button>
353
<button class="text-button" id="work_dir_browser" @click="fileBrowserModalProxy.openModal()">
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>
356
- </svg>work_dir Browser</button>
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>
361
- </svg>History</button>
362
+ </svg><p>History</p></button>
363
364
<button class="text-button" id="ctx_window" @click="window.openCtxWindowModal()">
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>
368
- </svg>Context</button>
369
+ </svg><p>Context</p></button>
370
371
</div>
372
</div>
@@ -375,7 +376,7 @@
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">
378
- <div class="modal-header" id="settings-title">
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>
@@ -498,10 +499,10 @@
499
<template x-teleport="body">
500
<div x-show="isOpen" class="modal-overlay" @click.self="handleClose()" @keydown.escape.window="handleClose()" x-transition>
501
<div class="modal-container">
501
- <div class="modal-header" id="settings-title">
502
+ <div class="modal-header">
503
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
503
- <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="#7a7a7a" stroke-width="0"/>
504
- <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="#7a7a7a" stroke-width="0"/>
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>
@@ -612,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>
619
- <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">