KaTeX fix and mobile improvements
Alessandro committed
Nov 5, 2024 at 21:07 UTC
21933bce2f5e82ff46d606895d9caa3204694a41
3 files changed
+398
-363
webui/index.css
+62
-25
@@ -69,6 +69,8 @@ html {
69
font-family: "Rubik", Arial, Helvetica, sans-serif;
70
width: 100%;
71
height: 100%;
72
+ min-width: 320px !important;
73
+ min-height: 370px !important;
74
margin: 0;
75
padding: 0;
76
overflow: hidden;
@@ -736,17 +738,17 @@ pre {
738
padding: var(--spacing-sm) 0.75rem;
739
text-wrap: nowrap;
740
background-color: var(--color-secondary);
739
- width: 49%;
741
+ width: 48%;
742
-webkit-transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
743
transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
744
}
745
746
.config-button:hover {
745
- background-color: #2d2f31;
747
+ opacity: 1;
748
}
749
750
.config-button:active {
749
- background-color: #111;
751
+ opacity: 0.5;
752
}
753
754
.edit-button {
@@ -804,6 +806,10 @@ pre {
806
opacity: 1;
807
}
808
809
+.attachment-icon:active {
810
+ opacity: 0.5;
811
+}
812
+
813
/* Text input */
814
#chat-input {
815
flex-grow: 1;
@@ -813,6 +819,7 @@ pre {
819
border: 1px solid var(--color-border);
820
border-radius: 8px;
821
resize: none;
822
+ align-content: center;
823
}
824
825
.input-row {
@@ -826,7 +833,7 @@ pre {
833
display: flex;
834
padding-top: var(--spacing-xs);
835
gap: var(--spacing-xs);
829
- white-space: nowrap;
836
+ white-space: pre-wrap;
837
}
838
839
.text-button {
@@ -850,7 +857,11 @@ pre {
857
border-radius: 4px;
858
}
859
853
-.text-button > svg {
860
+.text-button:active {
861
+ opacity: 0.5;
862
+}
863
+
864
+.text-button svg {
865
width: 14px;
866
height: 14px;
867
flex-shrink: 0; /* prevents SVG from shrinking */
@@ -1270,7 +1281,8 @@ input:checked + .slider:before {
1281
/* Math (KaTeX) */
1282
.katex {
1283
font-family: Roboto Mono !important;
1273
- font-size: 0.75rem !important;
1284
+ line-height: 1rem !important;
1285
+ font-size: var(--font-size-normal) !important;
1286
}
1287
1288
/* Animations */
@@ -1297,6 +1309,24 @@ input:checked + .slider:before {
1309
}
1310
}
1311
1312
+
1313
+@media (max-width: 600px) {
1314
+ #chat-input {
1315
+ min-height: 5.3rem;
1316
+ align-content: start;
1317
+ }
1318
+
1319
+ #chat-buttons-wrapper {
1320
+ display: flex;
1321
+ gap: var(--spacing-xs);
1322
+ padding: 0;
1323
+ width: 3.5rem;
1324
+ flex-wrap: wrap;
1325
+ transition: all 0.3s ease;
1326
+ -webkit-transition: all 0.3s ease;
1327
+ }
1328
+}
1329
+
1330
@media (max-width: 768px) {
1331
#left-panel {
1332
position: fixed;
@@ -1329,18 +1359,25 @@ input:checked + .slider:before {
1359
#right-panel.expanded #logo-container {
1360
margin-left: 4.6rem;
1361
}
1332
-
1333
- #chat-buttons-wrapper {
1334
- display: inline;
1335
- }
1336
-
1362
+
1363
#input-section {
1364
align-items:start;
1365
}
1366
1341
- #chat-input {
1342
- min-height: 3rem;
1343
- align-content: center;
1367
+ .text-buttons-row {
1368
+ width: 100%;
1369
+ display: flex;
1370
+ padding-top: var(--spacing-xs);
1371
+ gap: var(--spacing-xs);
1372
+ white-space: pre-wrap;
1373
+ }
1374
+ .text-button {
1375
+ text-align: left;
1376
+ }
1377
+ .text-button svg {
1378
+ width: 18px;
1379
+ height: 18px;
1380
+ flex-shrink: 0; /* prevents SVG from shrinking */
1381
}
1382
}
1383
@@ -1353,16 +1390,6 @@ input:checked + .slider:before {
1390
}
1391
1392
@media (max-height: 600px) {
1356
- #chats-section {
1357
- min-height: 100%;
1358
- }
1359
-
1360
- .left-panel-top {
1361
- overflow-y: auto;
1362
- scroll-behavior: smooth;
1363
- -webkit-scroll-behavior: smooth;
1364
- }
1365
-
1393
/* consistent font sizing */
1394
html {
1395
-webkit-text-size-adjust: 100%;
@@ -1375,6 +1402,16 @@ input:checked + .slider:before {
1402
-webkit-font-smoothing: antialiased;
1403
-moz-osx-font-smoothing: grayscale;
1404
}
1405
+
1406
+ #chats-section {
1407
+ min-height: 100%;
1408
+ }
1409
+
1410
+ .left-panel-top {
1411
+ overflow-y: auto;
1412
+ scroll-behavior: smooth;
1413
+ -webkit-scroll-behavior: smooth;
1414
+ }
1415
}
1416
1417
@media screen and (orientation: landscape) {
@@ -1384,4 +1421,4 @@ input:checked + .slider:before {
1421
-webkit-text-size-adjust: none;
1422
text-size-adjust: none;
1423
}
1387
-}
1424
+}
\ No newline at end of file
webui/index.html
+4
-2
@@ -225,14 +225,15 @@
225
226
<!-- Text input -->
227
<textarea id="chat-input" placeholder="Type your message here..." rows="1"></textarea>
228
-
228
+
229
+ <div id="chat-buttons-wrapper">
230
<!-- Send button -->
231
<button class="chat-button" id="send-button" aria-label="Send message">
232
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
233
<path d="M25 20 L75 50 L25 80" fill="none" stroke="currentColor" stroke-width="15"></path>
234
</svg>
235
</button>
235
-
236
+
237
<!-- Microphone button -->
238
<button class="chat-button" id="microphone-button" aria-label="Start/Stop recording">
239
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
@@ -240,6 +241,7 @@
241
</svg>
242
</button>
243
</div>
244
+ </div>
245
246
<!-- Bottom row with text buttons -->
247
<div class="text-buttons-row">
webui/settings.css
+332
-336
@@ -1,340 +1,336 @@
1
-* {
2
- transition: all var(--transition-speed) ease-in-out;
3
-}
4
-
1
select {
6
- transition: none;
7
-}
8
-
9
-.modal-overlay {
10
- position: fixed;
11
- top: 0;
12
- left: 0;
13
- right: 0;
14
- bottom: 0;
15
- background: rgba(0, 0, 0, 0.5);
16
- display: flex;
17
- align-items: center;
18
- justify-content: center;
19
- z-index: 2001;
20
-}
21
-
22
-.modal-container {
23
- background: var(--color-panel);
24
- color: var(--color-primary);
25
- border-radius: 0.5rem;
26
- width: 90%;
27
- max-width: 800px;
28
- max-height: 90vh;
29
- display: flex;
30
- flex-direction: column;
31
-}
32
-
33
-.modal-header {
34
- padding: 0.875rem 2rem;
35
- border-bottom: 1px solid var(--color-border);
36
-}
37
-
38
-.modal-content {
39
- padding: 1.5rem;
40
- overflow-y: auto;
41
- flex-grow: 1;
42
- background-clip: border-box;
43
- border: 6px solid transparent;
44
- transition: all 0.3s ease;
45
- margin-bottom: 0;
46
- padding-bottom: 0;
47
-}
48
-
49
-.modal-content::-webkit-scrollbar {
50
- width: 6px;
51
- height: 6px;
52
-}
53
-
54
-.modal-content::-webkit-scrollbar-track {
55
- background: transparent;
56
- margin: 4px 0;
57
- border-radius: 6px;
58
-}
59
-
60
-.modal-content::-webkit-scrollbar-thumb {
61
- background-color: rgba(155, 155, 155, 0.5);
62
- border-radius: 6px;
63
- transition: background-color 0.2s ease;
64
-}
65
-
66
-.modal-content::-webkit-scrollbar-thumb:hover {
67
- background-color: rgba(155, 155, 155, 0.7);
68
-}
69
-
70
-.modal-footer {
71
- padding: 1.5rem 2rem;
72
- border-top: 1px solid var(--color-border);
73
- display: flex;
74
- justify-content: flex-end;
75
- gap: 1rem;
76
- background: var(--color-background);
77
-}
78
-
79
-.section {
80
- margin-bottom: 2rem;
81
- padding: 1rem;
82
- border: 1px solid var(--color-border);
83
- border-radius: 0.5rem;
84
-}
85
-
86
-.section-title {
87
- font-size: 1.25rem;
88
- font-weight: bold;
89
- margin-bottom: 0.5rem;
90
-}
91
-
92
-.section-description {
93
- color: #666;
94
- margin-bottom: 1rem;
95
-}
96
-
97
-.field {
98
- display: grid;
99
- margin-block-start: 1rem;
100
- grid-template-columns: 250px 1fr;
101
- align-items: center;
102
-}
103
-
104
-.field.field-full {
105
- grid-template-columns: 1fr;
106
-}
107
-
108
-.field-label {
109
- display: flex;
110
- flex-direction: column;
111
-}
112
-
113
-.field-title {
114
- font-weight: bold;
115
-}
116
-
117
-.field-description {
118
- color: #666;
119
- font-size: 0.875rem;
120
- margin-top: 0.25rem;
121
- margin-bottom: 0.5rem;
122
-}
123
-
124
-.field-control {
125
- width: 100%;
126
- display: flex;
127
- align-items: center;
128
-}
129
-
130
-input[type="text"] {
131
- width: 100%;
132
- padding: 0.5rem;
133
- border: 1px solid #ddd;
134
- border-radius: 0.25rem;
135
- font-family: Rubik;
136
-}
137
-
138
-textarea {
139
- width: 100%;
140
- min-height: 100px;
141
- padding: 0.5rem;
142
- border: 1px solid #ddd;
143
- border-radius: 0.25rem;
144
- font-family: Roboto Mono;
145
- scroll-behavior: smooth;
146
- resize: none;
147
- /*-/* scrollbar padding */
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: 0.875rem 2rem;
31
+ border-bottom: 1px solid var(--color-border);
32
+ }
33
+
34
+ .modal-content {
35
+ padding: 1.5rem;
36
+ overflow-y: auto;
37
+ flex-grow: 1;
38
background-clip: border-box;
39
border: 6px solid transparent;
40
transition: all 0.3s ease;
151
-}
152
-
153
-.toggle {
154
- position: relative;
155
- display: inline-block;
156
- width: 60px;
157
- height: 34px;
158
- margin: 0;
159
-}
160
-
161
-.toggle input {
162
- opacity: 0;
163
- width: 0;
164
- height: 0;
165
-}
166
-
167
-.toggler {
168
- position: absolute;
169
- cursor: pointer;
170
- top: 0;
171
- left: 0;
172
- right: 0;
173
- bottom: 0;
174
- background-color: #ccc;
175
- transition: .4s;
176
- border-radius: 34px;
177
-}
178
-
179
-.toggler:before {
180
- position: absolute;
181
- content: "";
182
- height: 26px;
183
- width: 26px;
184
- left: 4px;
185
- bottom: 4px;
186
- background-color: white;
187
- transition: .4s;
188
- border-radius: 50%;
189
-}
190
-
191
-input:checked+.toggler {
192
- background-color: #2196F3;
193
-}
194
-
195
-input:checked+.toggler:before {
196
- transform: translateX(26px);
197
-}
198
-
199
-input[type="range"] {
200
- width: 100%;
201
-}
202
-
203
-.range-value {
204
- min-width: 3em;
205
- text-align: right;
206
-}
207
-
208
-#buttons-container {
209
- display: flex;
210
- gap: 0.875rem;
211
- }
212
-
213
-.btn {
214
- padding: 0.7rem 1.5rem;
215
- border-radius: 0.25rem;
216
- cursor: pointer;
217
- border: none;
218
- font-size: 0.875rem;
219
- font-family: Rubik;
220
-}
221
-
222
-.btn-ok {
223
- background: #3270e2;
224
- color: white;
225
- transition: background 0.3s ease-in-out;
226
-}
227
-
228
-.btn-ok:hover{
229
- background: #3265c0;
230
-}
231
-
232
-.btn-ok:active{
233
- background: #345693;
234
-}
235
-
236
-.btn-cancel {
237
- background: #ddd;
238
- color: #333;
239
- transition: background 0.3s ease-in-out;
240
-}
241
-
242
-.btn-cancel:hover {
243
- background: #a6a6a6
244
-}
245
-
246
-.btn-cancel:active {
247
- background: #808080
248
-}
249
-
250
-.btn-field {
251
- background: #2196F3;
252
- color: white;
253
- width: fit-content;
254
-}
255
-
256
-.btn-field:disabled {
257
- background: #ccc;
258
- cursor: not-allowed;
259
-}
260
-
261
-select {
262
- width: 100%;
263
- padding: 0.5rem;
264
- border: 1px solid #ddd;
265
- border-radius: 0.25rem;
266
- background-color: white;
267
- font-size: inherit;
268
- cursor: pointer;
269
- font-family: Rubik;
270
- outline: none;
271
-}
272
-
273
-select:disabled {
274
- background-color: #f5f5f5;
275
- cursor: not-allowed;
276
-}
277
-
278
-/* Style for navigation links */
279
-nav ul {
280
- list-style-type: none;
281
- padding: 0;
282
-}
283
-
284
-nav ul li {
285
- display: inline;
286
- margin-right: 1rem;
287
-}
288
-
289
-nav ul li a {
290
- text-decoration: none;
291
- color: #2196F3;
292
- font-weight: bold;
293
-}
294
-
295
-nav ul li a:hover {
296
- text-decoration: underline;
297
-}
298
-
299
-@media (max-width: 768px) {
300
- .modal-header {
301
- padding: 0.7rem 2rem;
302
- border-bottom: 1px solid var(--color-border);
303
- }
304
-
305
- .modal-content {
306
- padding: 1rem;
307
- overflow-y: auto;
308
- flex-grow: 1;
309
- }
310
-
311
- .modal-footer {
312
- padding: 1.5rem;
313
- }
314
-
315
- #buttons-container {
316
- display: flex;
317
- gap: 1rem;
318
- margin: 0 auto;
319
- }
320
-
321
- .section {
322
- margin-bottom: 1.5rem;
323
- padding: 1rem;
324
- border: 1px solid var(--color-border);
325
- border-radius: 0.5rem;
326
- }
327
-
328
- .field-control {
329
- width: 100%;
330
- }
331
- .field-description {
332
- padding-bottom: var(--spacing-sm);
333
- }
334
- .field {
335
- padding-top: var(--spacing-xs);
336
- padding-bottom: var(--spacing-xs);
337
- display: block;
338
- align-items: center;
339
- }
340
-}
\ No newline at end of file
41
+ margin-bottom: 0;
42
+ padding-bottom: 0;
43
+ }
44
+
45
+ .modal-content::-webkit-scrollbar {
46
+ width: 6px;
47
+ height: 6px;
48
+ }
49
+
50
+ .modal-content::-webkit-scrollbar-track {
51
+ background: transparent;
52
+ margin: 4px 0;
53
+ border-radius: 6px;
54
+ }
55
+
56
+ .modal-content::-webkit-scrollbar-thumb {
57
+ background-color: rgba(155, 155, 155, 0.5);
58
+ border-radius: 6px;
59
+ transition: background-color 0.2s ease;
60
+ }
61
+
62
+ .modal-content::-webkit-scrollbar-thumb:hover {
63
+ background-color: rgba(155, 155, 155, 0.7);
64
+ }
65
+
66
+ .modal-footer {
67
+ padding: 1.5rem 2rem;
68
+ border-top: 1px solid var(--color-border);
69
+ display: flex;
70
+ justify-content: flex-end;
71
+ gap: 1rem;
72
+ background: var(--color-background);
73
+ }
74
+
75
+ .section {
76
+ margin-bottom: 2rem;
77
+ padding: 1rem;
78
+ border: 1px solid var(--color-border);
79
+ border-radius: 0.5rem;
80
+ }
81
+
82
+ .section-title {
83
+ font-size: 1.25rem;
84
+ font-weight: bold;
85
+ margin-bottom: 0.5rem;
86
+ }
87
+
88
+ .section-description {
89
+ color: #666;
90
+ margin-bottom: 1rem;
91
+ }
92
+
93
+ .field {
94
+ display: grid;
95
+ margin-block-start: 1rem;
96
+ grid-template-columns: 250px 1fr;
97
+ align-items: center;
98
+ }
99
+
100
+ .field.field-full {
101
+ grid-template-columns: 1fr;
102
+ }
103
+
104
+ .field-label {
105
+ display: flex;
106
+ flex-direction: column;
107
+ }
108
+
109
+ .field-title {
110
+ font-weight: bold;
111
+ }
112
+
113
+ .field-description {
114
+ color: #666;
115
+ font-size: 0.875rem;
116
+ margin-top: 0.25rem;
117
+ margin-bottom: 0.5rem;
118
+ }
119
+
120
+ .field-control {
121
+ width: 100%;
122
+ display: flex;
123
+ align-items: center;
124
+ }
125
+
126
+ input[type="text"] {
127
+ width: 100%;
128
+ padding: 0.5rem;
129
+ border: 1px solid #ddd;
130
+ border-radius: 0.25rem;
131
+ font-family: Rubik;
132
+ }
133
+
134
+ textarea {
135
+ width: 100%;
136
+ min-height: 100px;
137
+ padding: 0.5rem;
138
+ border: 1px solid #ddd;
139
+ border-radius: 0.25rem;
140
+ font-family: Roboto Mono;
141
+ scroll-behavior: smooth;
142
+ resize: none;
143
+ /*-/* scrollbar padding */
144
+ background-clip: border-box;
145
+ border: 6px solid transparent;
146
+ transition: all 0.3s ease;
147
+ }
148
+
149
+ .toggle {
150
+ position: relative;
151
+ display: inline-block;
152
+ width: 60px;
153
+ height: 34px;
154
+ margin: 0;
155
+ }
156
+
157
+ .toggle input {
158
+ opacity: 0;
159
+ width: 0;
160
+ height: 0;
161
+ }
162
+
163
+ .toggler {
164
+ position: absolute;
165
+ cursor: pointer;
166
+ top: 0;
167
+ left: 0;
168
+ right: 0;
169
+ bottom: 0;
170
+ background-color: #ccc;
171
+ transition: .4s;
172
+ border-radius: 34px;
173
+ }
174
+
175
+ .toggler:before {
176
+ position: absolute;
177
+ content: "";
178
+ height: 26px;
179
+ width: 26px;
180
+ left: 4px;
181
+ bottom: 4px;
182
+ background-color: white;
183
+ transition: .4s;
184
+ border-radius: 50%;
185
+ }
186
+
187
+ input:checked+.toggler {
188
+ background-color: #2196F3;
189
+ }
190
+
191
+ input:checked+.toggler:before {
192
+ transform: translateX(26px);
193
+ }
194
+
195
+ input[type="range"] {
196
+ width: 100%;
197
+ }
198
+
199
+ .range-value {
200
+ min-width: 3em;
201
+ text-align: right;
202
+ }
203
+
204
+ #buttons-container {
205
+ display: flex;
206
+ gap: 0.875rem;
207
+ }
208
+
209
+ .btn {
210
+ padding: 0.7rem 1.5rem;
211
+ border-radius: 0.25rem;
212
+ cursor: pointer;
213
+ border: none;
214
+ font-size: 0.875rem;
215
+ font-family: Rubik;
216
+ }
217
+
218
+ .btn-ok {
219
+ background: #3270e2;
220
+ color: white;
221
+ transition: background 0.3s ease-in-out;
222
+ }
223
+
224
+ .btn-ok:hover{
225
+ background: #3265c0;
226
+ }
227
+
228
+ .btn-ok:active{
229
+ background: #345693;
230
+ }
231
+
232
+ .btn-cancel {
233
+ background: #ddd;
234
+ color: #333;
235
+ transition: background 0.3s ease-in-out;
236
+ }
237
+
238
+ .btn-cancel:hover {
239
+ background: #a6a6a6
240
+ }
241
+
242
+ .btn-cancel:active {
243
+ background: #808080
244
+ }
245
+
246
+ .btn-field {
247
+ background: #2196F3;
248
+ color: white;
249
+ width: fit-content;
250
+ }
251
+
252
+ .btn-field:disabled {
253
+ background: #ccc;
254
+ cursor: not-allowed;
255
+ }
256
+
257
+ select {
258
+ width: 100%;
259
+ padding: 0.5rem;
260
+ border: 1px solid #ddd;
261
+ border-radius: 0.25rem;
262
+ background-color: white;
263
+ font-size: inherit;
264
+ cursor: pointer;
265
+ font-family: Rubik;
266
+ outline: none;
267
+ }
268
+
269
+ select:disabled {
270
+ background-color: #f5f5f5;
271
+ cursor: not-allowed;
272
+ }
273
+
274
+ /* Style for navigation links */
275
+ nav ul {
276
+ list-style-type: none;
277
+ padding: 0;
278
+ }
279
+
280
+ nav ul li {
281
+ display: inline;
282
+ margin-right: 1rem;
283
+ }
284
+
285
+ nav ul li a {
286
+ text-decoration: none;
287
+ color: #2196F3;
288
+ font-weight: bold;
289
+ }
290
+
291
+ nav ul li a:hover {
292
+ text-decoration: underline;
293
+ }
294
+
295
+ @media (max-width: 768px) {
296
+ .modal-header {
297
+ padding: 0.7rem 2rem;
298
+ border-bottom: 1px solid var(--color-border);
299
+ }
300
+
301
+ .modal-content {
302
+ padding: 1rem;
303
+ overflow-y: auto;
304
+ flex-grow: 1;
305
+ }
306
+
307
+ .modal-footer {
308
+ padding: 1.5rem;
309
+ }
310
+
311
+ #buttons-container {
312
+ display: flex;
313
+ gap: 1rem;
314
+ margin: 0 auto;
315
+ }
316
+
317
+ .section {
318
+ margin-bottom: 1.5rem;
319
+ padding: 1rem;
320
+ border: 1px solid var(--color-border);
321
+ border-radius: 0.5rem;
322
+ }
323
+
324
+ .field-control {
325
+ width: 100%;
326
+ }
327
+ .field-description {
328
+ padding-bottom: var(--spacing-sm);
329
+ }
330
+ .field {
331
+ padding-top: var(--spacing-xs);
332
+ padding-bottom: var(--spacing-xs);
333
+ display: block;
334
+ align-items: center;
335
+ }
336
+ }
\ No newline at end of file