Hugging Face's logo

Spaces:
Sebastiankay
/
bilder-builder
Running

App Files Community
1
Sebastiankay commited on
Commit
32ecc03
·
verified ·
1 Parent(s): 1065ee2

Update _res/_custom.css

Browse files
Files changed (1) hide show
  1. _res/_custom.css +523 -523
_res/_custom.css CHANGED
@@ -1,524 +1,524 @@
1
- :root {
2
- --name: soft;
3
- --primary-50: #fdf2f8;
4
- --primary-100: #fce7f3;
5
- --primary-200: #fbcfe8;
6
- --primary-300: #f9a8d4;
7
- --primary-400: #f472b6;
8
- --primary-500: #ec4899;
9
- --primary-600: #db2777;
10
- --primary-700: #be185d;
11
- --primary-800: #9d174d;
12
- --primary-900: #831843;
13
- --primary-950: #6e1a3d;
14
- --secondary-50: #eef2ff;
15
- --secondary-100: #e0e7ff;
16
- --secondary-200: #c7d2fe;
17
- --secondary-300: #a5b4fc;
18
- --secondary-400: #818cf8;
19
- --secondary-500: #6366f1;
20
- --secondary-600: #4f46e5;
21
- --secondary-700: #4338ca;
22
- --secondary-800: #3730a3;
23
- --secondary-900: #312e81;
24
- --secondary-950: #2b2c5e;
25
- --neutral-50: #f9fafb;
26
- --neutral-100: #f3f4f6;
27
- --neutral-200: #e5e7eb;
28
- --neutral-300: #d1d5db;
29
- --neutral-400: #9ca3af;
30
- --neutral-500: #6b7280;
31
- --neutral-600: #4b5563;
32
- --neutral-700: #374151;
33
- --neutral-800: #1f2937;
34
- --neutral-900: #111827;
35
- --neutral-950: #0b0f19;
36
- --spacing-xxs: 1px;
37
- --spacing-xs: 2px;
38
- --spacing-sm: 4px;
39
- --spacing-md: 6px;
40
- --spacing-lg: 8px;
41
- --spacing-xl: 10px;
42
- --spacing-xxl: 16px;
43
- --radius-xxs: 1px;
44
- --radius-xs: 1px;
45
- --radius-sm: 2px;
46
- --radius-md: 4px;
47
- --radius-lg: 6px;
48
- --radius-xl: 8px;
49
- --radius-xxl: 12px;
50
- --text-xxs: 9px;
51
- --text-xs: 10px;
52
- --text-sm: 12px;
53
- --text-md: 14px;
54
- --text-lg: 16px;
55
- --text-xl: 22px;
56
- --text-xxl: 26px;
57
- --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif;
58
- --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
59
- --body-background-fill: var(--background-fill-primary);
60
- --body-text-color: var(--neutral-800);
61
- --body-text-size: var(--text-md);
62
- --body-text-weight: 400;
63
- --embed-radius: var(--radius-lg);
64
- --color-accent: var(--primary-500);
65
- --color-accent-soft: var(--primary-50);
66
- --background-fill-primary: var(--neutral-50);
67
- --background-fill-secondary: var(--neutral-50);
68
- --border-color-accent: var(--primary-300);
69
- --border-color-primary: var(--neutral-200);
70
- --link-text-color: var(--secondary-600);
71
- --link-text-color-active: var(--secondary-600);
72
- --link-text-color-hover: var(--secondary-700);
73
- --link-text-color-visited: var(--secondary-500);
74
- --body-text-color-subdued: var(--neutral-400);
75
- --accordion-text-color: var(--body-text-color);
76
- --table-text-color: var(--body-text-color);
77
- --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1);
78
- --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1);
79
- --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
80
- --shadow-spread: 6px;
81
- --block-background-fill: white;
82
- --block-border-color: var(--border-color-primary);
83
- --block-border-width: 0px;
84
- --block-info-text-color: var(--body-text-color-subdued);
85
- --block-info-text-size: var(--text-sm);
86
- --block-info-text-weight: 400;
87
- --block-label-background-fill: var(--primary-100);
88
- --block-label-border-color: var(--border-color-primary);
89
- --block-label-border-width: 1px;
90
- --block-label-shadow: var(--block-shadow);
91
- --block-label-text-color: var(--primary-500);
92
- --block-label-margin: var(--spacing-md);
93
- --block-label-padding: var(--spacing-sm) var(--spacing-md);
94
- --block-label-radius: var(--radius-md);
95
- --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
96
- --block-label-text-size: var(--text-md);
97
- --block-label-text-weight: 600;
98
- --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
99
- --block-radius: var(--radius-lg);
100
- --block-shadow: none;
101
- --block-title-background-fill: var(--block-label-background-fill);
102
- --block-title-border-color: none;
103
- --block-title-border-width: 0px;
104
- --block-title-text-color: var(--primary-500);
105
- --block-title-padding: var(--block-label-padding);
106
- --block-title-radius: var(--block-label-radius);
107
- --block-title-text-size: var(--text-md);
108
- --block-title-text-weight: 600;
109
- --container-radius: var(--radius-lg);
110
- --form-gap-width: 0px;
111
- --layout-gap: var(--spacing-xxl);
112
- --panel-background-fill: var(--background-fill-secondary);
113
- --panel-border-color: var(--border-color-primary);
114
- --panel-border-width: 1px;
115
- --section-header-text-size: var(--text-md);
116
- --section-header-text-weight: 400;
117
- --border-color-accent-subdued: var(--border-color-accent);
118
- --code-background-fill: var(--neutral-100);
119
- --checkbox-background-color: var(--background-fill-primary);
120
- --checkbox-background-color-focus: var(--checkbox-background-color);
121
- --checkbox-background-color-hover: var(--checkbox-background-color);
122
- --checkbox-background-color-selected: var(--primary-600);
123
- --checkbox-border-color: var(--neutral-100);
124
- --checkbox-border-color-focus: var(--primary-500);
125
- --checkbox-border-color-hover: var(--neutral-300);
126
- --checkbox-border-color-selected: var(--primary-600);
127
- --checkbox-border-radius: var(--radius-sm);
128
- --checkbox-border-width: 1px;
129
- --checkbox-label-background-fill: var(--button-secondary-background-fill);
130
- --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
131
- --checkbox-label-background-fill-selected: var(--primary-500);
132
- --checkbox-label-border-color: var(--border-color-primary);
133
- --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
134
- --checkbox-label-border-width: var(--input-border-width);
135
- --checkbox-label-gap: var(--spacing-lg);
136
- --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
137
- --checkbox-label-shadow: var(--shadow-drop-lg);
138
- --checkbox-label-text-size: var(--text-md);
139
- --checkbox-label-text-weight: 400;
140
- --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
141
- --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
142
- --checkbox-shadow: none;
143
- --checkbox-label-text-color: var(--body-text-color);
144
- --checkbox-label-text-color-selected: white;
145
- --error-background-fill: #fef2f2;
146
- --error-border-color: #b91c1c;
147
- --error-border-width: 1px;
148
- --error-text-color: #b91c1c;
149
- --error-icon-color: #b91c1c;
150
- --input-background-fill: white;
151
- --input-background-fill-focus: var(--secondary-500);
152
- --input-background-fill-hover: var(--input-background-fill);
153
- --input-border-color: var(--neutral-50);
154
- --input-border-color-focus: var(--secondary-300);
155
- --input-border-color-hover: var(--input-border-color);
156
- --input-border-width: 0px;
157
- --input-padding: var(--spacing-xl);
158
- --input-placeholder-color: var(--neutral-400);
159
- --input-radius: var(--radius-lg);
160
- --input-shadow: var(--shadow-drop);
161
- --input-shadow-focus: var(--shadow-drop-lg);
162
- --input-text-size: var(--text-md);
163
- --input-text-weight: 400;
164
- --loader-color: var(--color-accent);
165
- --prose-text-size: var(--text-md);
166
- --prose-text-weight: 400;
167
- --prose-header-text-weight: 600;
168
- --slider-color: var(--primary-500);
169
- --stat-background-fill: var(--primary-300);
170
- --table-border-color: var(--neutral-300);
171
- --table-even-background-fill: white;
172
- --table-odd-background-fill: var(--neutral-50);
173
- --table-radius: var(--radius-lg);
174
- --table-row-focus: var(--color-accent-soft);
175
- --button-border-width: var(--input-border-width);
176
- --button-cancel-background-fill: var(--button-secondary-background-fill);
177
- --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover);
178
- --button-cancel-border-color: var(--button-secondary-border-color);
179
- --button-cancel-border-color-hover: var(--button-cancel-border-color);
180
- --button-cancel-text-color: var(--button-secondary-text-color);
181
- --button-cancel-text-color-hover: var(--button-cancel-text-color);
182
- --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
183
- --button-large-radius: var(--radius-lg);
184
- --button-large-text-size: var(--text-lg);
185
- --button-large-text-weight: 600;
186
- --button-primary-background-fill: var(--primary-500);
187
- --button-primary-background-fill-hover: var(--primary-400);
188
- --button-primary-border-color: var(--primary-200);
189
- --button-primary-border-color-hover: var(--button-primary-border-color);
190
- --button-primary-text-color: white;
191
- --button-primary-text-color-hover: var(--button-primary-text-color);
192
- --button-secondary-background-fill: white;
193
- --button-secondary-background-fill-hover: var(--neutral-100);
194
- --button-secondary-border-color: var(--neutral-200);
195
- --button-secondary-border-color-hover: var(--button-secondary-border-color);
196
- --button-secondary-text-color: var(--neutral-800);
197
- --button-secondary-text-color-hover: var(--button-secondary-text-color);
198
- --button-shadow: var(--shadow-drop-lg);
199
- --button-shadow-active: var(--shadow-inset);
200
- --button-shadow-hover: var(--shadow-drop-lg);
201
- --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
202
- --button-small-radius: var(--radius-lg);
203
- --button-small-text-size: var(--text-md);
204
- --button-small-text-weight: 400;
205
- --button-transition: background-color 0.2s ease;
206
- }
207
-
208
- .dark {
209
- --body-background-fill: var(--background-fill-primary);
210
- --body-text-color: var(--neutral-100);
211
- --color-accent-soft: var(--neutral-700);
212
- --background-fill-primary: var(--neutral-950);
213
- --background-fill-secondary: var(--neutral-900);
214
- --border-color-accent: var(--neutral-600);
215
- --border-color-primary: var(--neutral-700);
216
- --link-text-color-active: var(--secondary-500);
217
- --link-text-color: var(--secondary-500);
218
- --link-text-color-hover: var(--secondary-400);
219
- --link-text-color-visited: var(--secondary-600);
220
- --body-text-color-subdued: var(--neutral-400);
221
- --accordion-text-color: var(--body-text-color);
222
- --table-text-color: var(--body-text-color);
223
- --shadow-spread: 1px;
224
- --block-background-fill: var(--neutral-800);
225
- --block-border-color: var(--border-color-primary);
226
- --block_border_width: None;
227
- --block-info-text-color: var(--body-text-color-subdued);
228
- --block-label-background-fill: var(--primary-600);
229
- --block-label-border-color: var(--border-color-primary);
230
- --block_label_border_width: None;
231
- --block-label-text-color: white;
232
- --block_shadow: None;
233
- --block_title_background_fill: None;
234
- --block_title_border_color: None;
235
- --block_title_border_width: None;
236
- --block-title-text-color: white;
237
- --panel-background-fill: var(--background-fill-secondary);
238
- --panel-border-color: var(--border-color-primary);
239
- --panel_border_width: None;
240
- --border-color-accent-subdued: var(--border-color-accent);
241
- --code-background-fill: var(--neutral-800);
242
- --checkbox-background-color: var(--neutral-800);
243
- --checkbox-background-color-focus: var(--checkbox-background-color);
244
- --checkbox-background-color-hover: var(--checkbox-background-color);
245
- --checkbox-background-color-selected: var(--primary-700);
246
- --checkbox-border-color: var(--neutral-600);
247
- --checkbox-border-color-focus: var(--primary-600);
248
- --checkbox-border-color-hover: var(--neutral-600);
249
- --checkbox-border-color-selected: var(--primary-700);
250
- --checkbox-border-width: var(--input-border-width);
251
- --checkbox-label-background-fill: var(--button-secondary-background-fill);
252
- --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
253
- --checkbox-label-background-fill-selected: var(--primary-600);
254
- --checkbox-label-border-color: var(--border-color-primary);
255
- --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
256
- --checkbox-label-border-width: var(--input-border-width);
257
- --checkbox-label-text-color: var(--body-text-color);
258
- --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
259
- --error-background-fill: var(--background-fill-primary);
260
- --error-border-color: #ef4444;
261
- --error_border_width: None;
262
- --error-text-color: #fef2f2;
263
- --error-icon-color: #ef4444;
264
- --input-background-fill: var(--neutral-700);
265
- --input-background-fill-focus: var(--secondary-600);
266
- --input-background-fill-hover: var(--input-background-fill);
267
- --input-border-color: var(--border-color-primary);
268
- --input-border-color-focus: var(--neutral-700);
269
- --input-border-color-hover: var(--input-border-color);
270
- --input_border_width: None;
271
- --input-placeholder-color: var(--neutral-500);
272
- --input_shadow: None;
273
- --input_shadow_focus: None;
274
- --loader_color: None;
275
- --slider-color: var(--primary-600);
276
- --stat-background-fill: var(--primary-500);
277
- --table-border-color: var(--neutral-700);
278
- --table-even-background-fill: var(--neutral-950);
279
- --table-odd-background-fill: var(--neutral-900);
280
- --table-row-focus: var(--color-accent-soft);
281
- --button-border-width: var(--input-border-width);
282
- --button-cancel-background-fill: var(--button-secondary-background-fill);
283
- --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover);
284
- --button-cancel-border-color: var(--button-secondary-border-color);
285
- --button-cancel-border-color-hover: var(--button-cancel-border-color);
286
- --button-cancel-text-color: var(--button-secondary-text-color);
287
- --button-cancel-text-color-hover: var(--button-cancel-text-color);
288
- --button-primary-background-fill: var(--primary-700);
289
- --button-primary-background-fill-hover: var(--primary-500);
290
- --button-primary-border-color: var(--primary-600);
291
- --button-primary-border-color-hover: var(--button-primary-border-color);
292
- --button-primary-text-color: white;
293
- --button-primary-text-color-hover: var(--button-primary-text-color);
294
- --button-secondary-background-fill: var(--neutral-600);
295
- --button-secondary-background-fill-hover: var(--primary-500);
296
- --button-secondary-border-color: var(--neutral-600);
297
- --button-secondary-border-color-hover: var(--button-secondary-border-color);
298
- --button-secondary-text-color: white;
299
- --button-secondary-text-color-hover: var(--button-secondary-text-color);
300
- --name: soft;
301
- --primary-50: #fdf2f8;
302
- --primary-100: #fce7f3;
303
- --primary-200: #fbcfe8;
304
- --primary-300: #f9a8d4;
305
- --primary-400: #f472b6;
306
- --primary-500: #ec4899;
307
- --primary-600: #db2777;
308
- --primary-700: #be185d;
309
- --primary-800: #9d174d;
310
- --primary-900: #831843;
311
- --primary-950: #6e1a3d;
312
- --secondary-50: #eef2ff;
313
- --secondary-100: #e0e7ff;
314
- --secondary-200: #c7d2fe;
315
- --secondary-300: #a5b4fc;
316
- --secondary-400: #818cf8;
317
- --secondary-500: #6366f1;
318
- --secondary-600: #4f46e5;
319
- --secondary-700: #4338ca;
320
- --secondary-800: #3730a3;
321
- --secondary-900: #312e81;
322
- --secondary-950: #2b2c5e;
323
- --neutral-50: #f9fafb;
324
- --neutral-100: #f3f4f6;
325
- --neutral-200: #e5e7eb;
326
- --neutral-300: #d1d5db;
327
- --neutral-400: #9ca3af;
328
- --neutral-500: #6b7280;
329
- --neutral-600: #4b5563;
330
- --neutral-700: #374151;
331
- --neutral-800: #1f2937;
332
- --neutral-900: #111827;
333
- --neutral-950: #0b0f19;
334
- --spacing-xxs: 1px;
335
- --spacing-xs: 2px;
336
- --spacing-sm: 4px;
337
- --spacing-md: 6px;
338
- --spacing-lg: 8px;
339
- --spacing-xl: 10px;
340
- --spacing-xxl: 16px;
341
- --radius-xxs: 1px;
342
- --radius-xs: 1px;
343
- --radius-sm: 2px;
344
- --radius-md: 4px;
345
- --radius-lg: 6px;
346
- --radius-xl: 8px;
347
- --radius-xxl: 12px;
348
- --text-xxs: 9px;
349
- --text-xs: 10px;
350
- --text-sm: 12px;
351
- --text-md: 14px;
352
- --text-lg: 16px;
353
- --text-xl: 22px;
354
- --text-xxl: 26px;
355
- --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif;
356
- --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
357
- --body-text-size: var(--text-md);
358
- --body-text-weight: 400;
359
- --embed-radius: var(--radius-lg);
360
- --color-accent: var(--primary-500);
361
- --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1);
362
- --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1);
363
- --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
364
- --block-border-width: 0px;
365
- --block-info-text-size: var(--text-sm);
366
- --block-info-text-weight: 400;
367
- --block-label-border-width: 1px;
368
- --block-label-shadow: var(--block-shadow);
369
- --block-label-margin: var(--spacing-md);
370
- --block-label-padding: var(--spacing-sm) var(--spacing-md);
371
- --block-label-radius: var(--radius-md);
372
- --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
373
- --block-label-text-size: var(--text-md);
374
- --block-label-text-weight: 600;
375
- --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
376
- --block-radius: var(--radius-lg);
377
- --block-shadow: none;
378
- --block-title-background-fill: var(--block-label-background-fill);
379
- --block-title-border-color: none;
380
- --block-title-border-width: 0px;
381
- --block-title-padding: var(--block-label-padding);
382
- --block-title-radius: var(--block-label-radius);
383
- --block-title-text-size: var(--text-md);
384
- --block-title-text-weight: 600;
385
- --container-radius: var(--radius-lg);
386
- --form-gap-width: 0px;
387
- --layout-gap: var(--spacing-xxl);
388
- --panel-border-width: 1px;
389
- --section-header-text-size: var(--text-md);
390
- --section-header-text-weight: 400;
391
- --checkbox-border-radius: var(--radius-sm);
392
- --checkbox-label-gap: var(--spacing-lg);
393
- --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
394
- --checkbox-label-shadow: var(--shadow-drop-lg);
395
- --checkbox-label-text-size: var(--text-md);
396
- --checkbox-label-text-weight: 400;
397
- --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
398
- --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
399
- --checkbox-shadow: none;
400
- --error-border-width: 1px;
401
- --input-border-width: 0px;
402
- --input-padding: var(--spacing-xl);
403
- --input-radius: var(--radius-lg);
404
- --input-shadow: var(--shadow-drop);
405
- --input-shadow-focus: var(--shadow-drop-lg);
406
- --input-text-size: var(--text-md);
407
- --input-text-weight: 400;
408
- --loader-color: var(--color-accent);
409
- --prose-text-size: var(--text-md);
410
- --prose-text-weight: 400;
411
- --prose-header-text-weight: 600;
412
- --table-radius: var(--radius-lg);
413
- --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
414
- --button-large-radius: var(--radius-lg);
415
- --button-large-text-size: var(--text-lg);
416
- --button-large-text-weight: 600;
417
- --button-shadow: var(--shadow-drop-lg);
418
- --button-shadow-active: var(--shadow-inset);
419
- --button-shadow-hover: var(--shadow-drop-lg);
420
- --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
421
- --button-small-radius: var(--radius-lg);
422
- --button-small-text-size: var(--text-md);
423
- --button-small-text-weight: 400;
424
- --button-transition: background-color 0.2s ease;
425
- }
426
-
427
- body>gradio-app {
428
- background: var(--primary-950);
429
- background: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important;
430
- padding-top: 120px;
431
- min-widh: 900px;
432
- }
433
-
434
- gradio-app .gradio-container {
435
- max-width: 80% !important;
436
- }
437
-
438
- div.tabs>div.tab-nav>button.selected {
439
- border-width: 0 !important;
440
- background: var(--primary-600) !important;
441
- color: var(--neutral-950);
442
- font-weight: 600;
443
- }
444
-
445
- div.tabs>div.tab-nav {
446
- border-bottom: none !important;
447
- padding: 0 0.25rem 0 0.25rem !important;
448
- }
449
-
450
- div.tabs div.tabitem {
451
- background-color: var(--neutral-900) !important;
452
- border-width: 0 !important;
453
- border-top: 8px solid var(--primary-600) !important;
454
- border-radius: var(--container-radius) !important;
455
- }
456
-
457
- .top-description h1 {
458
- color: var(--neutral-400);
459
- font-size: 2rem;
460
- }
461
-
462
- .prompt-input textarea {
463
- font-size: 1.2rem;
464
- color: var(--neutral-300);
465
- }
466
-
467
- .ratio_buttons_wrapper {
468
- display: flex !important;
469
- flex-grow: 0 !important;
470
- min-width: min(48px, 30%) !important;
471
- flex: 1 1 0%;
472
- flex-wrap: nowrap;
473
- }
474
-
475
- .image_size_selctor_wrapper {
476
- flex-grow: 2 !important;
477
- min-width: min(120px, 10%) !important;
478
- }
479
-
480
- .info-text-wrapper {
481
- padding: calc(var(--spacing-xl) / 2) calc(var(--spacing-xl) + 2px);
482
- }
483
-
484
- span.info-text {
485
- margin-bottom: var(--spacing-lg);
486
- color: var(--block-info-text-color);
487
- font-weight: var(--block-info-text-weight);
488
- font-size: var(--block-info-text-size);
489
- line-height: var(--line-sm);
490
- }
491
-
492
- .image-input-read-exfi {
493
- max-height: 120px;
494
- }
495
-
496
- .image-input-read-exfi>button {
497
- transform: scale(.8);
498
- }
499
-
500
- .image-ratio-buttons {
501
- & label input {
502
- display: none;
503
- }
504
-
505
- &label span {
506
- margin-left: 0;
507
- }
508
- }
509
-
510
- .switch-ratio-btn {
511
- max-width: 38px;
512
- min-width: 38px !important;
513
- height: 33px;
514
- }
515
-
516
- /* .image-height-selector {
517
- & div.head {
518
- justify-content: end;
519
- }
520
-
521
- & label {
522
- display: none;
523
- }
524
  } */
 
1
+ /* :root {
2
+ --name: soft;
3
+ --primary-50: #fdf2f8;
4
+ --primary-100: #fce7f3;
5
+ --primary-200: #fbcfe8;
6
+ --primary-300: #f9a8d4;
7
+ --primary-400: #f472b6;
8
+ --primary-500: #ec4899;
9
+ --primary-600: #db2777;
10
+ --primary-700: #be185d;
11
+ --primary-800: #9d174d;
12
+ --primary-900: #831843;
13
+ --primary-950: #6e1a3d;
14
+ --secondary-50: #eef2ff;
15
+ --secondary-100: #e0e7ff;
16
+ --secondary-200: #c7d2fe;
17
+ --secondary-300: #a5b4fc;
18
+ --secondary-400: #818cf8;
19
+ --secondary-500: #6366f1;
20
+ --secondary-600: #4f46e5;
21
+ --secondary-700: #4338ca;
22
+ --secondary-800: #3730a3;
23
+ --secondary-900: #312e81;
24
+ --secondary-950: #2b2c5e;
25
+ --neutral-50: #f9fafb;
26
+ --neutral-100: #f3f4f6;
27
+ --neutral-200: #e5e7eb;
28
+ --neutral-300: #d1d5db;
29
+ --neutral-400: #9ca3af;
30
+ --neutral-500: #6b7280;
31
+ --neutral-600: #4b5563;
32
+ --neutral-700: #374151;
33
+ --neutral-800: #1f2937;
34
+ --neutral-900: #111827;
35
+ --neutral-950: #0b0f19;
36
+ --spacing-xxs: 1px;
37
+ --spacing-xs: 2px;
38
+ --spacing-sm: 4px;
39
+ --spacing-md: 6px;
40
+ --spacing-lg: 8px;
41
+ --spacing-xl: 10px;
42
+ --spacing-xxl: 16px;
43
+ --radius-xxs: 1px;
44
+ --radius-xs: 1px;
45
+ --radius-sm: 2px;
46
+ --radius-md: 4px;
47
+ --radius-lg: 6px;
48
+ --radius-xl: 8px;
49
+ --radius-xxl: 12px;
50
+ --text-xxs: 9px;
51
+ --text-xs: 10px;
52
+ --text-sm: 12px;
53
+ --text-md: 14px;
54
+ --text-lg: 16px;
55
+ --text-xl: 22px;
56
+ --text-xxl: 26px;
57
+ --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif;
58
+ --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
59
+ --body-background-fill: var(--background-fill-primary);
60
+ --body-text-color: var(--neutral-800);
61
+ --body-text-size: var(--text-md);
62
+ --body-text-weight: 400;
63
+ --embed-radius: var(--radius-lg);
64
+ --color-accent: var(--primary-500);
65
+ --color-accent-soft: var(--primary-50);
66
+ --background-fill-primary: var(--neutral-50);
67
+ --background-fill-secondary: var(--neutral-50);
68
+ --border-color-accent: var(--primary-300);
69
+ --border-color-primary: var(--neutral-200);
70
+ --link-text-color: var(--secondary-600);
71
+ --link-text-color-active: var(--secondary-600);
72
+ --link-text-color-hover: var(--secondary-700);
73
+ --link-text-color-visited: var(--secondary-500);
74
+ --body-text-color-subdued: var(--neutral-400);
75
+ --accordion-text-color: var(--body-text-color);
76
+ --table-text-color: var(--body-text-color);
77
+ --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1);
78
+ --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1);
79
+ --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
80
+ --shadow-spread: 6px;
81
+ --block-background-fill: white;
82
+ --block-border-color: var(--border-color-primary);
83
+ --block-border-width: 0px;
84
+ --block-info-text-color: var(--body-text-color-subdued);
85
+ --block-info-text-size: var(--text-sm);
86
+ --block-info-text-weight: 400;
87
+ --block-label-background-fill: var(--primary-100);
88
+ --block-label-border-color: var(--border-color-primary);
89
+ --block-label-border-width: 1px;
90
+ --block-label-shadow: var(--block-shadow);
91
+ --block-label-text-color: var(--primary-500);
92
+ --block-label-margin: var(--spacing-md);
93
+ --block-label-padding: var(--spacing-sm) var(--spacing-md);
94
+ --block-label-radius: var(--radius-md);
95
+ --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
96
+ --block-label-text-size: var(--text-md);
97
+ --block-label-text-weight: 600;
98
+ --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
99
+ --block-radius: var(--radius-lg);
100
+ --block-shadow: none;
101
+ --block-title-background-fill: var(--block-label-background-fill);
102
+ --block-title-border-color: none;
103
+ --block-title-border-width: 0px;
104
+ --block-title-text-color: var(--primary-500);
105
+ --block-title-padding: var(--block-label-padding);
106
+ --block-title-radius: var(--block-label-radius);
107
+ --block-title-text-size: var(--text-md);
108
+ --block-title-text-weight: 600;
109
+ --container-radius: var(--radius-lg);
110
+ --form-gap-width: 0px;
111
+ --layout-gap: var(--spacing-xxl);
112
+ --panel-background-fill: var(--background-fill-secondary);
113
+ --panel-border-color: var(--border-color-primary);
114
+ --panel-border-width: 1px;
115
+ --section-header-text-size: var(--text-md);
116
+ --section-header-text-weight: 400;
117
+ --border-color-accent-subdued: var(--border-color-accent);
118
+ --code-background-fill: var(--neutral-100);
119
+ --checkbox-background-color: var(--background-fill-primary);
120
+ --checkbox-background-color-focus: var(--checkbox-background-color);
121
+ --checkbox-background-color-hover: var(--checkbox-background-color);
122
+ --checkbox-background-color-selected: var(--primary-600);
123
+ --checkbox-border-color: var(--neutral-100);
124
+ --checkbox-border-color-focus: var(--primary-500);
125
+ --checkbox-border-color-hover: var(--neutral-300);
126
+ --checkbox-border-color-selected: var(--primary-600);
127
+ --checkbox-border-radius: var(--radius-sm);
128
+ --checkbox-border-width: 1px;
129
+ --checkbox-label-background-fill: var(--button-secondary-background-fill);
130
+ --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
131
+ --checkbox-label-background-fill-selected: var(--primary-500);
132
+ --checkbox-label-border-color: var(--border-color-primary);
133
+ --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
134
+ --checkbox-label-border-width: var(--input-border-width);
135
+ --checkbox-label-gap: var(--spacing-lg);
136
+ --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
137
+ --checkbox-label-shadow: var(--shadow-drop-lg);
138
+ --checkbox-label-text-size: var(--text-md);
139
+ --checkbox-label-text-weight: 400;
140
+ --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
141
+ --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
142
+ --checkbox-shadow: none;
143
+ --checkbox-label-text-color: var(--body-text-color);
144
+ --checkbox-label-text-color-selected: white;
145
+ --error-background-fill: #fef2f2;
146
+ --error-border-color: #b91c1c;
147
+ --error-border-width: 1px;
148
+ --error-text-color: #b91c1c;
149
+ --error-icon-color: #b91c1c;
150
+ --input-background-fill: white;
151
+ --input-background-fill-focus: var(--secondary-500);
152
+ --input-background-fill-hover: var(--input-background-fill);
153
+ --input-border-color: var(--neutral-50);
154
+ --input-border-color-focus: var(--secondary-300);
155
+ --input-border-color-hover: var(--input-border-color);
156
+ --input-border-width: 0px;
157
+ --input-padding: var(--spacing-xl);
158
+ --input-placeholder-color: var(--neutral-400);
159
+ --input-radius: var(--radius-lg);
160
+ --input-shadow: var(--shadow-drop);
161
+ --input-shadow-focus: var(--shadow-drop-lg);
162
+ --input-text-size: var(--text-md);
163
+ --input-text-weight: 400;
164
+ --loader-color: var(--color-accent);
165
+ --prose-text-size: var(--text-md);
166
+ --prose-text-weight: 400;
167
+ --prose-header-text-weight: 600;
168
+ --slider-color: var(--primary-500);
169
+ --stat-background-fill: var(--primary-300);
170
+ --table-border-color: var(--neutral-300);
171
+ --table-even-background-fill: white;
172
+ --table-odd-background-fill: var(--neutral-50);
173
+ --table-radius: var(--radius-lg);
174
+ --table-row-focus: var(--color-accent-soft);
175
+ --button-border-width: var(--input-border-width);
176
+ --button-cancel-background-fill: var(--button-secondary-background-fill);
177
+ --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover);
178
+ --button-cancel-border-color: var(--button-secondary-border-color);
179
+ --button-cancel-border-color-hover: var(--button-cancel-border-color);
180
+ --button-cancel-text-color: var(--button-secondary-text-color);
181
+ --button-cancel-text-color-hover: var(--button-cancel-text-color);
182
+ --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
183
+ --button-large-radius: var(--radius-lg);
184
+ --button-large-text-size: var(--text-lg);
185
+ --button-large-text-weight: 600;
186
+ --button-primary-background-fill: var(--primary-500);
187
+ --button-primary-background-fill-hover: var(--primary-400);
188
+ --button-primary-border-color: var(--primary-200);
189
+ --button-primary-border-color-hover: var(--button-primary-border-color);
190
+ --button-primary-text-color: white;
191
+ --button-primary-text-color-hover: var(--button-primary-text-color);
192
+ --button-secondary-background-fill: white;
193
+ --button-secondary-background-fill-hover: var(--neutral-100);
194
+ --button-secondary-border-color: var(--neutral-200);
195
+ --button-secondary-border-color-hover: var(--button-secondary-border-color);
196
+ --button-secondary-text-color: var(--neutral-800);
197
+ --button-secondary-text-color-hover: var(--button-secondary-text-color);
198
+ --button-shadow: var(--shadow-drop-lg);
199
+ --button-shadow-active: var(--shadow-inset);
200
+ --button-shadow-hover: var(--shadow-drop-lg);
201
+ --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
202
+ --button-small-radius: var(--radius-lg);
203
+ --button-small-text-size: var(--text-md);
204
+ --button-small-text-weight: 400;
205
+ --button-transition: background-color 0.2s ease;
206
+ }
207
+
208
+ .dark {
209
+ --body-background-fill: var(--background-fill-primary);
210
+ --body-text-color: var(--neutral-100);
211
+ --color-accent-soft: var(--neutral-700);
212
+ --background-fill-primary: var(--neutral-950);
213
+ --background-fill-secondary: var(--neutral-900);
214
+ --border-color-accent: var(--neutral-600);
215
+ --border-color-primary: var(--neutral-700);
216
+ --link-text-color-active: var(--secondary-500);
217
+ --link-text-color: var(--secondary-500);
218
+ --link-text-color-hover: var(--secondary-400);
219
+ --link-text-color-visited: var(--secondary-600);
220
+ --body-text-color-subdued: var(--neutral-400);
221
+ --accordion-text-color: var(--body-text-color);
222
+ --table-text-color: var(--body-text-color);
223
+ --shadow-spread: 1px;
224
+ --block-background-fill: var(--neutral-800);
225
+ --block-border-color: var(--border-color-primary);
226
+ --block_border_width: None;
227
+ --block-info-text-color: var(--body-text-color-subdued);
228
+ --block-label-background-fill: var(--primary-600);
229
+ --block-label-border-color: var(--border-color-primary);
230
+ --block_label_border_width: None;
231
+ --block-label-text-color: white;
232
+ --block_shadow: None;
233
+ --block_title_background_fill: None;
234
+ --block_title_border_color: None;
235
+ --block_title_border_width: None;
236
+ --block-title-text-color: white;
237
+ --panel-background-fill: var(--background-fill-secondary);
238
+ --panel-border-color: var(--border-color-primary);
239
+ --panel_border_width: None;
240
+ --border-color-accent-subdued: var(--border-color-accent);
241
+ --code-background-fill: var(--neutral-800);
242
+ --checkbox-background-color: var(--neutral-800);
243
+ --checkbox-background-color-focus: var(--checkbox-background-color);
244
+ --checkbox-background-color-hover: var(--checkbox-background-color);
245
+ --checkbox-background-color-selected: var(--primary-700);
246
+ --checkbox-border-color: var(--neutral-600);
247
+ --checkbox-border-color-focus: var(--primary-600);
248
+ --checkbox-border-color-hover: var(--neutral-600);
249
+ --checkbox-border-color-selected: var(--primary-700);
250
+ --checkbox-border-width: var(--input-border-width);
251
+ --checkbox-label-background-fill: var(--button-secondary-background-fill);
252
+ --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
253
+ --checkbox-label-background-fill-selected: var(--primary-600);
254
+ --checkbox-label-border-color: var(--border-color-primary);
255
+ --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
256
+ --checkbox-label-border-width: var(--input-border-width);
257
+ --checkbox-label-text-color: var(--body-text-color);
258
+ --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
259
+ --error-background-fill: var(--background-fill-primary);
260
+ --error-border-color: #ef4444;
261
+ --error_border_width: None;
262
+ --error-text-color: #fef2f2;
263
+ --error-icon-color: #ef4444;
264
+ --input-background-fill: var(--neutral-700);
265
+ --input-background-fill-focus: var(--secondary-600);
266
+ --input-background-fill-hover: var(--input-background-fill);
267
+ --input-border-color: var(--border-color-primary);
268
+ --input-border-color-focus: var(--neutral-700);
269
+ --input-border-color-hover: var(--input-border-color);
270
+ --input_border_width: None;
271
+ --input-placeholder-color: var(--neutral-500);
272
+ --input_shadow: None;
273
+ --input_shadow_focus: None;
274
+ --loader_color: None;
275
+ --slider-color: var(--primary-600);
276
+ --stat-background-fill: var(--primary-500);
277
+ --table-border-color: var(--neutral-700);
278
+ --table-even-background-fill: var(--neutral-950);
279
+ --table-odd-background-fill: var(--neutral-900);
280
+ --table-row-focus: var(--color-accent-soft);
281
+ --button-border-width: var(--input-border-width);
282
+ --button-cancel-background-fill: var(--button-secondary-background-fill);
283
+ --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover);
284
+ --button-cancel-border-color: var(--button-secondary-border-color);
285
+ --button-cancel-border-color-hover: var(--button-cancel-border-color);
286
+ --button-cancel-text-color: var(--button-secondary-text-color);
287
+ --button-cancel-text-color-hover: var(--button-cancel-text-color);
288
+ --button-primary-background-fill: var(--primary-700);
289
+ --button-primary-background-fill-hover: var(--primary-500);
290
+ --button-primary-border-color: var(--primary-600);
291
+ --button-primary-border-color-hover: var(--button-primary-border-color);
292
+ --button-primary-text-color: white;
293
+ --button-primary-text-color-hover: var(--button-primary-text-color);
294
+ --button-secondary-background-fill: var(--neutral-600);
295
+ --button-secondary-background-fill-hover: var(--primary-500);
296
+ --button-secondary-border-color: var(--neutral-600);
297
+ --button-secondary-border-color-hover: var(--button-secondary-border-color);
298
+ --button-secondary-text-color: white;
299
+ --button-secondary-text-color-hover: var(--button-secondary-text-color);
300
+ --name: soft;
301
+ --primary-50: #fdf2f8;
302
+ --primary-100: #fce7f3;
303
+ --primary-200: #fbcfe8;
304
+ --primary-300: #f9a8d4;
305
+ --primary-400: #f472b6;
306
+ --primary-500: #ec4899;
307
+ --primary-600: #db2777;
308
+ --primary-700: #be185d;
309
+ --primary-800: #9d174d;
310
+ --primary-900: #831843;
311
+ --primary-950: #6e1a3d;
312
+ --secondary-50: #eef2ff;
313
+ --secondary-100: #e0e7ff;
314
+ --secondary-200: #c7d2fe;
315
+ --secondary-300: #a5b4fc;
316
+ --secondary-400: #818cf8;
317
+ --secondary-500: #6366f1;
318
+ --secondary-600: #4f46e5;
319
+ --secondary-700: #4338ca;
320
+ --secondary-800: #3730a3;
321
+ --secondary-900: #312e81;
322
+ --secondary-950: #2b2c5e;
323
+ --neutral-50: #f9fafb;
324
+ --neutral-100: #f3f4f6;
325
+ --neutral-200: #e5e7eb;
326
+ --neutral-300: #d1d5db;
327
+ --neutral-400: #9ca3af;
328
+ --neutral-500: #6b7280;
329
+ --neutral-600: #4b5563;
330
+ --neutral-700: #374151;
331
+ --neutral-800: #1f2937;
332
+ --neutral-900: #111827;
333
+ --neutral-950: #0b0f19;
334
+ --spacing-xxs: 1px;
335
+ --spacing-xs: 2px;
336
+ --spacing-sm: 4px;
337
+ --spacing-md: 6px;
338
+ --spacing-lg: 8px;
339
+ --spacing-xl: 10px;
340
+ --spacing-xxl: 16px;
341
+ --radius-xxs: 1px;
342
+ --radius-xs: 1px;
343
+ --radius-sm: 2px;
344
+ --radius-md: 4px;
345
+ --radius-lg: 6px;
346
+ --radius-xl: 8px;
347
+ --radius-xxl: 12px;
348
+ --text-xxs: 9px;
349
+ --text-xs: 10px;
350
+ --text-sm: 12px;
351
+ --text-md: 14px;
352
+ --text-lg: 16px;
353
+ --text-xl: 22px;
354
+ --text-xxl: 26px;
355
+ --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif;
356
+ --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
357
+ --body-text-size: var(--text-md);
358
+ --body-text-weight: 400;
359
+ --embed-radius: var(--radius-lg);
360
+ --color-accent: var(--primary-500);
361
+ --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1);
362
+ --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1);
363
+ --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
364
+ --block-border-width: 0px;
365
+ --block-info-text-size: var(--text-sm);
366
+ --block-info-text-weight: 400;
367
+ --block-label-border-width: 1px;
368
+ --block-label-shadow: var(--block-shadow);
369
+ --block-label-margin: var(--spacing-md);
370
+ --block-label-padding: var(--spacing-sm) var(--spacing-md);
371
+ --block-label-radius: var(--radius-md);
372
+ --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
373
+ --block-label-text-size: var(--text-md);
374
+ --block-label-text-weight: 600;
375
+ --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
376
+ --block-radius: var(--radius-lg);
377
+ --block-shadow: none;
378
+ --block-title-background-fill: var(--block-label-background-fill);
379
+ --block-title-border-color: none;
380
+ --block-title-border-width: 0px;
381
+ --block-title-padding: var(--block-label-padding);
382
+ --block-title-radius: var(--block-label-radius);
383
+ --block-title-text-size: var(--text-md);
384
+ --block-title-text-weight: 600;
385
+ --container-radius: var(--radius-lg);
386
+ --form-gap-width: 0px;
387
+ --layout-gap: var(--spacing-xxl);
388
+ --panel-border-width: 1px;
389
+ --section-header-text-size: var(--text-md);
390
+ --section-header-text-weight: 400;
391
+ --checkbox-border-radius: var(--radius-sm);
392
+ --checkbox-label-gap: var(--spacing-lg);
393
+ --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
394
+ --checkbox-label-shadow: var(--shadow-drop-lg);
395
+ --checkbox-label-text-size: var(--text-md);
396
+ --checkbox-label-text-weight: 400;
397
+ --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
398
+ --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
399
+ --checkbox-shadow: none;
400
+ --error-border-width: 1px;
401
+ --input-border-width: 0px;
402
+ --input-padding: var(--spacing-xl);
403
+ --input-radius: var(--radius-lg);
404
+ --input-shadow: var(--shadow-drop);
405
+ --input-shadow-focus: var(--shadow-drop-lg);
406
+ --input-text-size: var(--text-md);
407
+ --input-text-weight: 400;
408
+ --loader-color: var(--color-accent);
409
+ --prose-text-size: var(--text-md);
410
+ --prose-text-weight: 400;
411
+ --prose-header-text-weight: 600;
412
+ --table-radius: var(--radius-lg);
413
+ --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
414
+ --button-large-radius: var(--radius-lg);
415
+ --button-large-text-size: var(--text-lg);
416
+ --button-large-text-weight: 600;
417
+ --button-shadow: var(--shadow-drop-lg);
418
+ --button-shadow-active: var(--shadow-inset);
419
+ --button-shadow-hover: var(--shadow-drop-lg);
420
+ --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
421
+ --button-small-radius: var(--radius-lg);
422
+ --button-small-text-size: var(--text-md);
423
+ --button-small-text-weight: 400;
424
+ --button-transition: background-color 0.2s ease;
425
+ } */
426
+
427
+ body>gradio-app {
428
+ background: var(--primary-950);
429
+ background: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important;
430
+ padding-top: 120px;
431
+ min-widh: 900px;
432
+ }
433
+
434
+ gradio-app .gradio-container {
435
+ max-width: 80% !important;
436
+ }
437
+
438
+ div.tabs>div.tab-nav>button.selected {
439
+ border-width: 0 !important;
440
+ background: var(--primary-600) !important;
441
+ color: var(--neutral-950);
442
+ font-weight: 600;
443
+ }
444
+
445
+ div.tabs>div.tab-nav {
446
+ border-bottom: none !important;
447
+ padding: 0 0.25rem 0 0.25rem !important;
448
+ }
449
+
450
+ div.tabs div.tabitem {
451
+ background-color: var(--neutral-900) !important;
452
+ border-width: 0 !important;
453
+ border-top: 8px solid var(--primary-600) !important;
454
+ border-radius: var(--container-radius) !important;
455
+ }
456
+
457
+ .top-description h1 {
458
+ color: var(--neutral-400);
459
+ font-size: 2rem;
460
+ }
461
+
462
+ .prompt-input textarea {
463
+ font-size: 1.2rem;
464
+ color: var(--neutral-300);
465
+ }
466
+
467
+ .ratio_buttons_wrapper {
468
+ display: flex !important;
469
+ flex-grow: 0 !important;
470
+ min-width: min(48px, 30%) !important;
471
+ flex: 1 1 0%;
472
+ flex-wrap: nowrap;
473
+ }
474
+
475
+ .image_size_selctor_wrapper {
476
+ flex-grow: 2 !important;
477
+ min-width: min(120px, 10%) !important;
478
+ }
479
+
480
+ .info-text-wrapper {
481
+ padding: calc(var(--spacing-xl) / 2) calc(var(--spacing-xl) + 2px);
482
+ }
483
+
484
+ span.info-text {
485
+ margin-bottom: var(--spacing-lg);
486
+ color: var(--block-info-text-color);
487
+ font-weight: var(--block-info-text-weight);
488
+ font-size: var(--block-info-text-size);
489
+ line-height: var(--line-sm);
490
+ }
491
+
492
+ .image-input-read-exfi {
493
+ max-height: 120px;
494
+ }
495
+
496
+ .image-input-read-exfi>button {
497
+ transform: scale(.8);
498
+ }
499
+
500
+ .image-ratio-buttons {
501
+ & label input {
502
+ display: none;
503
+ }
504
+
505
+ &label span {
506
+ margin-left: 0;
507
+ }
508
+ }
509
+
510
+ .switch-ratio-btn {
511
+ max-width: 38px;
512
+ min-width: 38px !important;
513
+ height: 33px;
514
+ }
515
+
516
+ /* .image-height-selector {
517
+ & div.head {
518
+ justify-content: end;
519
+ }
520
+
521
+ & label {
522
+ display: none;
523
+ }
524
  } */