fix: bigger modals
Alessandro committed
Nov 27, 2024 at 20:41 UTC
6a83e79d5a42fb44bfcac88c5ade3fda85ba2b28
3 files changed
+36
-49
webui/css/file_browser.css
+2
-1
@@ -41,6 +41,7 @@
41
width: 1.8rem;
42
height: 1.8rem;
43
vertical-align: middle;
44
+ margin-left: 0.7rem;
45
margin-right: 1rem;
46
}
47
@@ -203,7 +204,7 @@ background-color: #2b309c;
204
}
205
206
.download-button:hover {
206
- background-color: var(--color-primary-light);
207
+ background-color: var(--color-border);
208
}
209
210
.light-mode .download-button:hover {
webui/css/modals.css
+34
-36
@@ -17,7 +17,7 @@
17
border-radius: 12px;
18
width: 90%;
19
max-width: 800px;
20
- max-height: 80vh;
20
+ max-height: 90vh;
21
display: flex;
22
flex-direction: column;
23
overflow: hidden;
@@ -33,8 +33,8 @@
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;
36
+ grid-template-columns: 40fr 0.5fr;
37
+ padding: 0.5rem 1.5rem 0.5rem 2rem;
38
align-items: center;
39
justify-content:space-between;
40
}
@@ -57,12 +57,6 @@
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
-
60
.modal-close {
61
background: none;
62
font-size: xx-large;
@@ -70,7 +64,7 @@
64
color: var(--color-text);
65
opacity: 0.7;
66
cursor: pointer;
73
- padding: 0.5rem 0rem 0.7rem 1rem;
67
+ padding: 0;
68
transition: opacity 0.2s;
69
}
70
@@ -80,7 +74,7 @@
74
75
.modal-description {
76
background-color: var(--color-background);
83
- padding: 1rem 1.5rem 1rem 1.5rem;
77
+ padding: 1rem 2rem 1rem 2rem;
78
flex-grow: 1;
79
transition: all 0.3s ease;
80
}
@@ -118,8 +112,13 @@
112
background-color: rgba(155, 155, 155, 0.7);
113
}
114
115
+#buttons-container {
116
+ display: flex;
117
+ gap: 0.5rem !important;
118
+}
119
+
120
.modal-footer {
122
- padding: var(--spacing-md) 0 var(--spacing-md) 0;
121
+ padding: 0.6rem 2rem 0.6rem 0;
122
border-top: 1px solid var(--color-border);
123
display: flex;
124
justify-content: flex-end;
@@ -146,14 +145,13 @@
145
}
146
147
#buttons-container {
149
- padding-right: 2rem;
148
display: flex;
151
- align-content:flex-end;
149
gap: 0.875rem;
150
}
151
152
.btn {
156
- padding: 0.7rem 1.5rem;
153
+ font-weight: 500;
154
+ padding: 0.5rem 1.5rem;
155
border-radius: 0.25rem;
156
cursor: pointer;
157
border: none;
@@ -180,17 +178,20 @@
178
}
179
180
.btn-cancel {
183
- background: #ddd;
184
- color: #333;
181
+ background: transparent;
182
+ color: var(--color-accent);
183
+ border: 0.15rem solid var(--color-accent);
184
transition: background 0.3s ease-in-out;
185
}
186
187
.btn-cancel:hover {
189
- background: #a6a6a6;
188
+ background: var(--color-accent);
189
+ color: var(--color-text);
190
}
191
192
.btn-cancel:active {
193
- background: #808080;
193
+ background: #a94658;
194
+ color: var(--color-text);
195
}
196
197
.btn-field {
@@ -214,44 +215,41 @@ h2 {
215
}
216
217
@media (max-width: 768px) {
217
- .modal-header h2 {
218
- margin: 0;
219
- }
218
.modal-content {
219
padding: 1rem;
220
overflow-y: auto;
221
flex-grow: 1;
222
}
223
+ .modal-footer {
224
+ padding: var(--spacing-md) 0rem var(--spacing-md) 0 !important;
225
+ }
226
.section {
227
margin-bottom: 1.5rem;
228
padding: 1rem;
229
border: 1px solid var(--color-border);
230
border-radius: 0.5rem;
231
}
232
+ #buttons-container {
233
+ margin: 0 auto;
234
+ }
235
}
236
237
@media (max-width: 540px) {
238
.modal-header {
235
- display: flex;
236
- text-wrap: nowrap;
239
+ text-wrap: nowrap;
240
}
241
#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;
242
+ max-height: 50px;
243
}
244
.btn {
247
- text-wrap: wrap;
245
+ text-wrap: wrap;
246
}
247
.btn-upload {
250
- margin: 0 auto;
251
- gap: 0.5rem;
252
- align-items:center;
248
+ margin: 0 auto;
249
+ gap: 0.5rem;
250
+ align-items:center;
251
}
252
.btn-upload > svg {
255
- width: 20px;
253
+ width: 20px;
254
}
257
-}
255
+}
\ No newline at end of file
webui/index.html
-12
@@ -377,10 +377,6 @@
377
<div x-show="isOpen" class="modal-overlay" @click.self="handleCancel()" @keydown.escape.window="handleClose()" x-transition>
378
<div class="modal-container">
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>
380
<h2 x-text="settings.title"></h2>
381
<button class="modal-close" @click="handleCancel()">×</button>
382
</div>
@@ -500,10 +496,6 @@
496
<div x-show="isOpen" class="modal-overlay" @click.self="handleClose()" @keydown.escape.window="handleClose()" x-transition>
497
<div class="modal-container">
498
<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>
499
<h2 class="modal-title" x-text="browser.title"></h2>
500
<button class="modal-close" @click="handleClose()">×</button>
501
</div>
@@ -613,10 +605,6 @@
605
<div x-show="isOpen" class="modal-overlay" @click.self="handleClose()" @keydown.escape.window="handleClose()" x-transition>
606
<div class="modal-container">
607
<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>
608
<h2 class="modal-title" x-text="title"></h2>
609
<button class="modal-close" @click="handleClose()">×</button>
610
</div>