Mobile and UX update
Alessandro committed
Nov 4, 2024 at 20:58 UTC
e6ac772a2ed6ed76fa843a6edc31218c54e955eb
2 files changed
+27
-21
webui/index.css
+5
-2
@@ -588,12 +588,13 @@ pre {
588
font-optical-sizing: auto;
589
font-size: 0.875rem;
590
max-height: 7rem;
591
- min-height: 1.9rem;
591
+ min-height: 1.5rem;
592
padding: var(--spacing-xs) var(--spacing-sm);
593
overflow-y: auto;
594
scroll-behavior: smooth;
595
resize: none;
596
- /* scrollbar padding */
596
+ align-content: space-around;
597
+ /* scrollbar padding */
598
background-clip: border-box;
599
border: 6px solid transparent;
600
transition: all 0.3s ease;
@@ -1042,6 +1043,8 @@ input:checked + .slider:before {
1043
1044
#chat-input {
1045
min-height: 4.2rem;
1046
+ padding-top: 0.7rem;
1047
+ align-content:baseline;
1048
}
1049
}
1050
webui/settings.css
+22
-19
@@ -8,7 +8,7 @@
8
display: flex;
9
align-items: center;
10
justify-content: center;
11
- z-index: 1001;
11
+ z-index: 2001;
12
}
13
14
.modal-container {
@@ -28,7 +28,7 @@
28
}
29
30
.modal-content {
31
- padding: 2rem;
31
+ padding: 1.5rem;
32
overflow-y: auto;
33
flex-grow: 1;
34
background-clip: border-box;
@@ -59,7 +59,7 @@
59
60
.modal-footer {
61
padding: 1.5rem 2rem;
62
- border-top: 1px solid #eee;
62
+ border-top: 1px solid var(--color-border);
63
display: flex;
64
justify-content: flex-end;
65
gap: 1rem;
@@ -69,7 +69,7 @@
69
.section {
70
margin-bottom: 2rem;
71
padding: 1rem;
72
- border: 1px solid #eee;
72
+ border: 1px solid var(--color-border);
73
border-radius: 0.5rem;
74
}
75
@@ -85,10 +85,9 @@
85
}
86
87
.field {
88
- margin-bottom: 1.5rem;
88
display: grid;
90
- grid-template-columns: 200px 1fr;
91
- gap: 1rem;
89
+ margin-block-start: 1rem;
90
+ grid-template-columns: 250px 1fr;
91
align-items: center;
92
}
93
@@ -109,12 +108,13 @@
108
color: #666;
109
font-size: 0.875rem;
110
margin-top: 0.25rem;
111
+ margin-bottom: 0.5rem;
112
}
113
114
.field-control {
115
+ width: 100%;
116
display: flex;
117
align-items: center;
117
- gap: 0.5rem;
118
}
119
120
input[type="text"] {
@@ -131,7 +131,6 @@ textarea {
131
padding: 0.5rem;
132
border: 1px solid #ddd;
133
border-radius: 0.25rem;
134
- margin-top: 1rem;
134
font-family: Roboto Mono;
135
scroll-behavior: smooth;
136
resize: none;
@@ -211,15 +210,23 @@ input[type="range"] {
210
}
211
212
.btn-ok {
214
- background: #2196F3;
213
+ background: #3270e2;
214
color: white;
215
}
216
217
+.btn-ok:hover{
218
+ background: #274170;
219
+}
220
+
221
.btn-cancel {
222
background: #ddd;
223
color: #333;
224
}
225
226
+.btn-cancel:hover {
227
+ background: #222
228
+}
229
+
230
.btn-field {
231
background: #2196F3;
232
color: white;
@@ -270,8 +277,8 @@ nav ul li a:hover {
277
278
@media (max-width: 768px) {
279
.modal-header {
273
- padding: 1.5rem 2rem;
274
- border-bottom: 1px solid #eee;
280
+ padding: 0.7rem 2rem;
281
+ border-bottom: 1px solid var(--color-border);
282
}
283
284
.modal-content {
@@ -291,9 +298,9 @@ nav ul li a:hover {
298
}
299
300
.section {
294
- margin-bottom: 2rem;
301
+ margin-bottom: 1.5rem;
302
padding: 1rem;
296
- border: 1px solid #eee;
303
+ border: 1px solid var(--color-border);
304
border-radius: 0.5rem;
305
}
306
@@ -301,7 +308,7 @@ nav ul li a:hover {
308
width: 100%;
309
}
310
.field-description {
304
- padding-bottom: var(--spacing-xs);
311
+ padding-bottom: var(--spacing-sm);
312
}
313
.field {
314
padding-top: var(--spacing-xs);
@@ -309,8 +316,4 @@ nav ul li a:hover {
316
display: block;
317
align-items: center;
318
}
312
- .select {
313
- margin-top: 100px !important;
314
- padding-bottom: 1rem;
315
- }
319
}
\ No newline at end of file