gradio-themer 0.1.0__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- gradio_themer/__init__.py +3 -0
- gradio_themer/generate_theme_template.py +169 -0
- gradio_themer/gradio_themer.py +336 -0
- gradio_themer/gradio_themer.pyi +490 -0
- gradio_themer/templates/component/index.js +1256 -0
- gradio_themer/templates/component/style.css +1 -0
- gradio_themer/templates/example/index.js +103 -0
- gradio_themer/templates/example/style.css +1 -0
- gradio_themer-0.1.0.dist-info/METADATA +405 -0
- gradio_themer-0.1.0.dist-info/RECORD +11 -0
- gradio_themer-0.1.0.dist-info/WHEEL +4 -0
|
@@ -0,0 +1,1256 @@
|
|
|
1
|
+
const { SvelteComponent: tt, init: ot, safe_not_equal: rt } = window.__gradio__svelte__internal, { createEventDispatcher: et, onMount: nt } = window.__gradio__svelte__internal;
|
|
2
|
+
function at(T, A, g) {
|
|
3
|
+
const $ = "", _ = [];
|
|
4
|
+
let { value: s = null } = A, { gradio: y = void 0 } = A;
|
|
5
|
+
const C = et(), Y = [
|
|
6
|
+
{
|
|
7
|
+
name: "Inter",
|
|
8
|
+
family: "Inter, sans-serif"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: "System",
|
|
12
|
+
family: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: "Roboto",
|
|
16
|
+
family: "Roboto, sans-serif"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
name: "Open Sans",
|
|
20
|
+
family: "'Open Sans', sans-serif"
|
|
21
|
+
},
|
|
22
|
+
{ name: "Lato", family: "Lato, sans-serif" },
|
|
23
|
+
{
|
|
24
|
+
name: "Poppins",
|
|
25
|
+
family: "Poppins, sans-serif"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
name: "Montserrat",
|
|
29
|
+
family: "Montserrat, sans-serif"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: "Source Sans Pro",
|
|
33
|
+
family: "'Source Sans Pro', sans-serif"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
name: "Ubuntu",
|
|
37
|
+
family: "Ubuntu, sans-serif"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
name: "Nunito",
|
|
41
|
+
family: "Nunito, sans-serif"
|
|
42
|
+
}
|
|
43
|
+
];
|
|
44
|
+
let f = "light", h = {}, v = [], I = !1;
|
|
45
|
+
function n(r, a) {
|
|
46
|
+
console.log(`[Gradio Themer] ${r}`, a || ""), y && y.dispatch("log", { message: r, data: a });
|
|
47
|
+
}
|
|
48
|
+
function j(r) {
|
|
49
|
+
n(`Loading Stable Font: ${r.name || r.family}`, r);
|
|
50
|
+
const a = r.family, i = r.name || a;
|
|
51
|
+
n(`Using stable font: ${a}`), V(a, i);
|
|
52
|
+
}
|
|
53
|
+
function V(r, a) {
|
|
54
|
+
n(`Applying stable system font: ${a}`), W();
|
|
55
|
+
const i = `
|
|
56
|
+
/* COMPLETE FONT OVERRIDE - NO GRADIO FONT LOADING */
|
|
57
|
+
|
|
58
|
+
/* Override all possible font CSS variables */
|
|
59
|
+
:root, html, body, .gradio-container {
|
|
60
|
+
--font: ${a}, sans-serif !important;
|
|
61
|
+
--font-family: ${a}, sans-serif !important;
|
|
62
|
+
--theme-font-family: ${a}, sans-serif !important;
|
|
63
|
+
--font-sans: ${a}, sans-serif !important;
|
|
64
|
+
--font-mono: monospace !important;
|
|
65
|
+
--body-font-family: ${a}, sans-serif !important;
|
|
66
|
+
--text-font-family: ${a}, sans-serif !important;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Block any @font-face rules */
|
|
70
|
+
@media all {
|
|
71
|
+
@font-face {
|
|
72
|
+
font-family: 'ui-sans-serif';
|
|
73
|
+
src: local('${a}');
|
|
74
|
+
}
|
|
75
|
+
@font-face {
|
|
76
|
+
font-family: 'system-ui';
|
|
77
|
+
src: local('${a}');
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Universal font application with maximum specificity */
|
|
82
|
+
html, body,
|
|
83
|
+
html *, body *,
|
|
84
|
+
.gradio-container,
|
|
85
|
+
.gradio-container *,
|
|
86
|
+
[class*="gr-"],
|
|
87
|
+
[class*="svelte-"],
|
|
88
|
+
input, button, textarea, select, label, span, div, p, h1, h2, h3, h4, h5, h6,
|
|
89
|
+
* {
|
|
90
|
+
font-family: ${a}, sans-serif !important;
|
|
91
|
+
font-size: inherit !important;
|
|
92
|
+
}
|
|
93
|
+
`, c = document.getElementById("gradio-font-stable");
|
|
94
|
+
c && c.remove();
|
|
95
|
+
const l = document.createElement("style");
|
|
96
|
+
l.id = "gradio-font-stable", l.textContent = i, document.head.appendChild(l), n(`✅ Stable system font ${a} applied (no font loading conflicts)`);
|
|
97
|
+
}
|
|
98
|
+
function W() {
|
|
99
|
+
if (document.querySelectorAll('link[href*="/static/fonts/"]').forEach((a) => a.remove()), !window.gradioFontBlocked) {
|
|
100
|
+
const a = document.head.appendChild;
|
|
101
|
+
document.head.appendChild = function(i) {
|
|
102
|
+
return i instanceof HTMLLinkElement && i.href && i.href.includes("/static/fonts/") ? (n(`🚫 BLOCKED Gradio font loading: ${i.href}`), i) : a.call(this, i);
|
|
103
|
+
}, window.gradioFontBlocked = !0, n("🚫 Gradio font loading blocked");
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
function M(r) {
|
|
107
|
+
if (n(`Switching to theme: ${r}`), g(4, f = r), h && h[r]) {
|
|
108
|
+
n(`Applying user theme: ${r}`, h[r]), z(h[r]);
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
n(`Applying basic theme: ${r} (no custom configuration found)`), K(r);
|
|
112
|
+
}
|
|
113
|
+
function z(r) {
|
|
114
|
+
n(`Applying theme colors for: ${r.name}`);
|
|
115
|
+
const a = document.getElementById("gradio-custom-theme");
|
|
116
|
+
a && a.remove(), r.font && j(r.font);
|
|
117
|
+
let i = `:root {
|
|
118
|
+
`;
|
|
119
|
+
for (const [p, b] of Object.entries(r.colors))
|
|
120
|
+
i += ` --color-${p}: ${b};
|
|
121
|
+
`;
|
|
122
|
+
if (r.font) {
|
|
123
|
+
const p = r.font.family, b = `"${p}", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`;
|
|
124
|
+
i += ` --font-family: ${b};
|
|
125
|
+
`, i += ` --font: ${b};
|
|
126
|
+
`, i += ` --theme-font-family: "${p}";
|
|
127
|
+
`, n(`Setting font CSS variables to: "${p}" with comprehensive fallbacks`);
|
|
128
|
+
} else
|
|
129
|
+
n("No font configuration found in theme config");
|
|
130
|
+
i += `}
|
|
131
|
+
`;
|
|
132
|
+
const c = i + `
|
|
133
|
+
/* ===== DYNAMIC THEME APPLICATION ===== */
|
|
134
|
+
|
|
135
|
+
/* ULTRA HIGH SPECIFICITY - FORCE THEME BACKGROUND */
|
|
136
|
+
html body,
|
|
137
|
+
html body .gradio-container,
|
|
138
|
+
html body .gradio-container .app,
|
|
139
|
+
html body .gradio-container #root,
|
|
140
|
+
html body .gradio-app,
|
|
141
|
+
html body .gradio-interface,
|
|
142
|
+
html body main,
|
|
143
|
+
body,
|
|
144
|
+
html,
|
|
145
|
+
#root,
|
|
146
|
+
.gradio-container,
|
|
147
|
+
.app,
|
|
148
|
+
.gradio-app,
|
|
149
|
+
.gradio-interface,
|
|
150
|
+
main {
|
|
151
|
+
background: ${r.background} !important;
|
|
152
|
+
background-color: ${r.background} !important;
|
|
153
|
+
color: var(--color-base-content) !important;
|
|
154
|
+
font-family: var(--theme-font-family, "Inter"), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* ULTRA HIGH SPECIFICITY TABS */
|
|
158
|
+
html body .gradio-container .gr-tab-nav,
|
|
159
|
+
html body .gradio-container [role="tablist"],
|
|
160
|
+
.gr-tab-nav,
|
|
161
|
+
[role="tablist"] {
|
|
162
|
+
background: var(--color-base-100) !important;
|
|
163
|
+
background-color: var(--color-base-100) !important;
|
|
164
|
+
border-radius: 12px !important;
|
|
165
|
+
padding: 0.5rem !important;
|
|
166
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
|
|
167
|
+
border: none !important;
|
|
168
|
+
margin-bottom: 0 !important;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
html body .gradio-container button[role="tab"],
|
|
172
|
+
html body button[role="tab"],
|
|
173
|
+
button[role="tab"] {
|
|
174
|
+
background: transparent !important;
|
|
175
|
+
background-color: transparent !important;
|
|
176
|
+
color: var(--color-base-content) !important;
|
|
177
|
+
border: none !important;
|
|
178
|
+
border-radius: 8px !important;
|
|
179
|
+
padding: 0.75rem 1.5rem !important;
|
|
180
|
+
margin: 0.25rem !important;
|
|
181
|
+
font-weight: 500 !important;
|
|
182
|
+
transition: all 0.2s ease !important;
|
|
183
|
+
opacity: 0.7 !important;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
html body .gradio-container button[role="tab"]:hover,
|
|
187
|
+
html body button[role="tab"]:hover,
|
|
188
|
+
button[role="tab"]:hover {
|
|
189
|
+
background: var(--color-base-200) !important;
|
|
190
|
+
background-color: var(--color-base-200) !important;
|
|
191
|
+
opacity: 1 !important;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
html body .gradio-container button[role="tab"][aria-selected="true"],
|
|
195
|
+
html body button[role="tab"][aria-selected="true"],
|
|
196
|
+
button[role="tab"][aria-selected="true"] {
|
|
197
|
+
background: var(--color-primary) !important;
|
|
198
|
+
background-color: var(--color-primary) !important;
|
|
199
|
+
color: var(--color-primary-content) !important;
|
|
200
|
+
opacity: 1 !important;
|
|
201
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* ULTRA HIGH SPECIFICITY CONTENT */
|
|
205
|
+
html body .gradio-container .gr-tabitem,
|
|
206
|
+
html body .gr-tabitem,
|
|
207
|
+
.gr-tabitem {
|
|
208
|
+
background: var(--color-base-100) !important;
|
|
209
|
+
background-color: var(--color-base-100) !important;
|
|
210
|
+
border-radius: 12px !important;
|
|
211
|
+
padding: 2rem !important;
|
|
212
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
|
|
213
|
+
border: none !important;
|
|
214
|
+
margin-top: 0 !important;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* ULTRA HIGH SPECIFICITY INPUTS */
|
|
218
|
+
html body .gradio-container input,
|
|
219
|
+
html body .gradio-container textarea,
|
|
220
|
+
html body .gradio-container select,
|
|
221
|
+
html body input,
|
|
222
|
+
html body textarea,
|
|
223
|
+
html body select,
|
|
224
|
+
input,
|
|
225
|
+
textarea,
|
|
226
|
+
select {
|
|
227
|
+
background: var(--color-base-100) !important;
|
|
228
|
+
background-color: var(--color-base-100) !important;
|
|
229
|
+
border: 1px solid var(--color-base-300) !important;
|
|
230
|
+
color: var(--color-base-content) !important;
|
|
231
|
+
border-radius: 8px !important;
|
|
232
|
+
padding: 0.75rem !important;
|
|
233
|
+
font-family: var(--theme-font-family, "Inter"), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
234
|
+
font-size: 14px !important;
|
|
235
|
+
transition: all 0.2s ease !important;
|
|
236
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* ULTRA HIGH SPECIFICITY BUTTONS */
|
|
240
|
+
html body .gradio-container button,
|
|
241
|
+
html body .gradio-container .gr-button,
|
|
242
|
+
html body button,
|
|
243
|
+
html body .gr-button,
|
|
244
|
+
button,
|
|
245
|
+
.gr-button {
|
|
246
|
+
background: var(--color-primary) !important;
|
|
247
|
+
background-color: var(--color-primary) !important;
|
|
248
|
+
color: var(--color-primary-content) !important;
|
|
249
|
+
border: none !important;
|
|
250
|
+
border-radius: 8px !important;
|
|
251
|
+
padding: 0.75rem 1.5rem !important;
|
|
252
|
+
font-family: var(--theme-font-family, "Inter"), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
253
|
+
font-weight: 500 !important;
|
|
254
|
+
font-size: 14px !important;
|
|
255
|
+
transition: all 0.2s ease !important;
|
|
256
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
|
|
257
|
+
cursor: pointer !important;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
html body .gradio-container button:hover,
|
|
261
|
+
html body .gradio-container .gr-button:hover,
|
|
262
|
+
html body button:hover,
|
|
263
|
+
html body .gr-button:hover,
|
|
264
|
+
button:hover,
|
|
265
|
+
.gr-button:hover {
|
|
266
|
+
background: var(--color-accent) !important;
|
|
267
|
+
background-color: var(--color-accent) !important;
|
|
268
|
+
transform: translateY(-1px) !important;
|
|
269
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* ULTRA HIGH SPECIFICITY HEADERS */
|
|
273
|
+
html body .gradio-container h1,
|
|
274
|
+
html body .gradio-container h2,
|
|
275
|
+
html body .gradio-container h3,
|
|
276
|
+
html body .gradio-container h4,
|
|
277
|
+
html body .gradio-container h5,
|
|
278
|
+
html body .gradio-container h6,
|
|
279
|
+
html body h1,
|
|
280
|
+
html body h2,
|
|
281
|
+
html body h3,
|
|
282
|
+
html body h4,
|
|
283
|
+
html body h5,
|
|
284
|
+
h6 {
|
|
285
|
+
color: var(--color-base-content) !important;
|
|
286
|
+
font-family: var(--theme-font-family, "Inter"), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
287
|
+
font-weight: 700 !important;
|
|
288
|
+
margin-bottom: 1rem !important;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* ULTRA HIGH SPECIFICITY - BLOCK CLASS ELEMENTS */
|
|
292
|
+
html body .gradio-container .block,
|
|
293
|
+
html body .block,
|
|
294
|
+
.block {
|
|
295
|
+
background: var(--color-base-100) !important;
|
|
296
|
+
background-color: var(--color-base-100) !important;
|
|
297
|
+
color: var(--color-base-content) !important;
|
|
298
|
+
border: 1px solid var(--color-base-300) !important;
|
|
299
|
+
border-radius: 8px !important;
|
|
300
|
+
padding: 1rem !important;
|
|
301
|
+
margin: 0.5rem 0 !important;
|
|
302
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* REMOVE MARKER HIGHLIGHTING */
|
|
306
|
+
html body ::marker,
|
|
307
|
+
::marker {
|
|
308
|
+
color: transparent !important;
|
|
309
|
+
background: transparent !important;
|
|
310
|
+
content: none !important;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/* REMOVE LIST MARKERS ENTIRELY */
|
|
314
|
+
html body ul,
|
|
315
|
+
html body ol,
|
|
316
|
+
html body li,
|
|
317
|
+
ul,
|
|
318
|
+
ol,
|
|
319
|
+
li {
|
|
320
|
+
list-style: none !important;
|
|
321
|
+
list-style-type: none !important;
|
|
322
|
+
list-style-image: none !important;
|
|
323
|
+
list-style-position: outside !important;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* ULTRA HIGH SPECIFICITY - FORM CLASS ELEMENTS */
|
|
327
|
+
html body .gradio-container .form,
|
|
328
|
+
html body .form,
|
|
329
|
+
.form {
|
|
330
|
+
background: var(--color-base-100) !important;
|
|
331
|
+
background-color: var(--color-base-100) !important;
|
|
332
|
+
color: var(--color-base-content) !important;
|
|
333
|
+
border: 1px solid var(--color-base-300) !important;
|
|
334
|
+
border-radius: 8px !important;
|
|
335
|
+
padding: 1rem !important;
|
|
336
|
+
margin: 0.5rem 0 !important;
|
|
337
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/* ULTRA HIGH SPECIFICITY - LABELS */
|
|
341
|
+
html body .gradio-container label,
|
|
342
|
+
html body .gradio-container [data-testid*="label"],
|
|
343
|
+
html body .gradio-container .label,
|
|
344
|
+
html body label,
|
|
345
|
+
html body [data-testid*="label"],
|
|
346
|
+
html body .label,
|
|
347
|
+
label,
|
|
348
|
+
[data-testid*="label"],
|
|
349
|
+
.label {
|
|
350
|
+
color: var(--color-base-content) !important;
|
|
351
|
+
background: transparent !important;
|
|
352
|
+
background-color: transparent !important;
|
|
353
|
+
font-family: var(--theme-font-family, "Inter"), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
354
|
+
font-weight: 500 !important;
|
|
355
|
+
margin-bottom: 0.5rem !important;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/* ULTRA HIGH SPECIFICITY - CODE ELEMENTS */
|
|
359
|
+
html body .gradio-container code,
|
|
360
|
+
html body .gradio-container pre,
|
|
361
|
+
html body .gradio-container .code,
|
|
362
|
+
html body code,
|
|
363
|
+
html body pre,
|
|
364
|
+
html body .code,
|
|
365
|
+
code,
|
|
366
|
+
pre,
|
|
367
|
+
.code {
|
|
368
|
+
background: var(--color-base-200) !important;
|
|
369
|
+
background-color: var(--color-base-200) !important;
|
|
370
|
+
color: var(--color-base-content) !important;
|
|
371
|
+
border: 1px solid var(--color-base-300) !important;
|
|
372
|
+
border-radius: 4px !important;
|
|
373
|
+
padding: 0.25rem 0.5rem !important;
|
|
374
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
|
|
375
|
+
font-size: 0.875rem !important;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/* ULTRA HIGH SPECIFICITY - STRONG/BOLD ELEMENTS */
|
|
379
|
+
html body .gradio-container strong,
|
|
380
|
+
html body .gradio-container b,
|
|
381
|
+
html body strong,
|
|
382
|
+
html body b,
|
|
383
|
+
strong,
|
|
384
|
+
b {
|
|
385
|
+
color: var(--color-base-content) !important;
|
|
386
|
+
font-weight: 700 !important;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
/* ULTRA HIGH SPECIFICITY - SPANS AND TEXT ELEMENTS */
|
|
390
|
+
html body .gradio-container span,
|
|
391
|
+
html body .gradio-container p,
|
|
392
|
+
html body .gradio-container div,
|
|
393
|
+
html body span,
|
|
394
|
+
html body p,
|
|
395
|
+
html body div,
|
|
396
|
+
span,
|
|
397
|
+
p,
|
|
398
|
+
div {
|
|
399
|
+
color: var(--color-base-content) !important;
|
|
400
|
+
font-family: var(--theme-font-family, "Inter"), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/* ULTRA HIGH SPECIFICITY - SVG ICONS */
|
|
404
|
+
html body .gradio-container svg,
|
|
405
|
+
html body svg,
|
|
406
|
+
svg {
|
|
407
|
+
color: var(--color-base-content) !important;
|
|
408
|
+
fill: currentColor !important;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* ULTRA HIGH SPECIFICITY - GRADIO SPECIFIC CLASSES */
|
|
412
|
+
html body .gradio-container .gr-textbox,
|
|
413
|
+
html body .gradio-container .gr-dropdown,
|
|
414
|
+
html body .gradio-container .gr-slider,
|
|
415
|
+
html body .gradio-container .gr-checkbox,
|
|
416
|
+
html body .gradio-container .gr-radio,
|
|
417
|
+
html body .gradio-container .gr-number,
|
|
418
|
+
html body .gradio-container .gr-file,
|
|
419
|
+
html body .gradio-container .gr-image,
|
|
420
|
+
html body .gradio-container .gr-audio,
|
|
421
|
+
html body .gradio-container .gr-video,
|
|
422
|
+
html body .gradio-container .gr-dataframe,
|
|
423
|
+
html body .gradio-container .gr-plot,
|
|
424
|
+
html body .gradio-container .gr-json,
|
|
425
|
+
html body .gradio-container .gr-html,
|
|
426
|
+
html body .gradio-container .gr-markdown,
|
|
427
|
+
html body .gradio-container .gr-code,
|
|
428
|
+
.gr-textbox,
|
|
429
|
+
.gr-dropdown,
|
|
430
|
+
.gr-slider,
|
|
431
|
+
.gr-checkbox,
|
|
432
|
+
.gr-radio,
|
|
433
|
+
.gr-number,
|
|
434
|
+
.gr-file,
|
|
435
|
+
.gr-image,
|
|
436
|
+
.gr-audio,
|
|
437
|
+
.gr-video,
|
|
438
|
+
.gr-dataframe,
|
|
439
|
+
.gr-plot,
|
|
440
|
+
.gr-json,
|
|
441
|
+
.gr-html,
|
|
442
|
+
.gr-markdown,
|
|
443
|
+
.gr-code {
|
|
444
|
+
background: var(--color-base-100) !important;
|
|
445
|
+
background-color: var(--color-base-100) !important;
|
|
446
|
+
color: var(--color-base-content) !important;
|
|
447
|
+
border: 1px solid var(--color-base-300) !important;
|
|
448
|
+
border-radius: 8px !important;
|
|
449
|
+
padding: 0.75rem !important;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
/* ULTRA HIGH SPECIFICITY - SVELTE COMPONENT WRAPPERS (EXCLUDE DROPDOWNS) */
|
|
453
|
+
html body .gradio-container .wrap:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
454
|
+
html body .gradio-container .wrap-inner:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
455
|
+
html body .gradio-container .secondary-wrap:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
456
|
+
html body .gradio-container .reference:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
457
|
+
html body .wrap:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
458
|
+
html body .wrap-inner:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
459
|
+
html body .secondary-wrap:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
460
|
+
html body .reference:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
461
|
+
.wrap:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
462
|
+
.wrap-inner:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
463
|
+
.secondary-wrap:not(.svelte-1hfxrpf):not([class*="dropdown"]),
|
|
464
|
+
.reference:not(.svelte-1hfxrpf):not([class*="dropdown"]) {
|
|
465
|
+
background: var(--color-base-100) !important;
|
|
466
|
+
background-color: var(--color-base-100) !important;
|
|
467
|
+
color: var(--color-base-content) !important;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
/* ULTRA HIGH SPECIFICITY - INPUT ELEMENTS IN DROPDOWNS */
|
|
471
|
+
html body .gradio-container input[role="listbox"],
|
|
472
|
+
html body .gradio-container input.border-none,
|
|
473
|
+
html body .gradio-container .wrap input,
|
|
474
|
+
html body .gradio-container .wrap-inner input,
|
|
475
|
+
html body .gradio-container .secondary-wrap input,
|
|
476
|
+
html body input[role="listbox"],
|
|
477
|
+
html body input.border-none,
|
|
478
|
+
html body .wrap input,
|
|
479
|
+
html body .wrap-inner input,
|
|
480
|
+
html body .secondary-wrap input,
|
|
481
|
+
input[role="listbox"],
|
|
482
|
+
input.border-none,
|
|
483
|
+
.wrap input,
|
|
484
|
+
.wrap-inner input,
|
|
485
|
+
.secondary-wrap input {
|
|
486
|
+
background: var(--color-base-100) !important;
|
|
487
|
+
background-color: var(--color-base-100) !important;
|
|
488
|
+
color: var(--color-base-content) !important;
|
|
489
|
+
border: 1px solid var(--color-base-300) !important;
|
|
490
|
+
border-radius: 8px !important;
|
|
491
|
+
padding: 0.75rem !important;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
/* ULTRA HIGH SPECIFICITY - ALL SVELTE GENERATED CLASSES */
|
|
495
|
+
html body .gradio-container [class*="svelte-"],
|
|
496
|
+
html body [class*="svelte-"],
|
|
497
|
+
[class*="svelte-"] {
|
|
498
|
+
color: var(--color-base-content) !important;
|
|
499
|
+
font-family: var(--theme-font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
/* ENSURE ALL GRADIO ELEMENTS GET THEME COLORS AND FONTS */
|
|
503
|
+
html body .gradio-container *,
|
|
504
|
+
html body .gr-form *,
|
|
505
|
+
html body .gradio-interface *,
|
|
506
|
+
.gradio-container *,
|
|
507
|
+
.gr-form *,
|
|
508
|
+
.gradio-interface * {
|
|
509
|
+
color: var(--color-base-content) !important;
|
|
510
|
+
font-family: var(--theme-font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
/* NUCLEAR OPTION - APPLY FONT TO EVERYTHING */
|
|
514
|
+
* {
|
|
515
|
+
font-family: var(--font-family, var(--font, var(--theme-font-family, "Inter"))), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
|
|
516
|
+
}
|
|
517
|
+
`, l = document.createElement("style");
|
|
518
|
+
if (l.id = "gradio-custom-theme", l.textContent = c, document.head.appendChild(l), r.font) {
|
|
519
|
+
const p = r.font.family, b = `"${p}", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`;
|
|
520
|
+
document.documentElement.style.setProperty("--font-family", b), document.documentElement.style.setProperty("--font", b), document.documentElement.style.setProperty("--theme-font-family", `"${p}"`), n(`Backup: Set comprehensive font CSS variables directly on document root: "${p}"`);
|
|
521
|
+
}
|
|
522
|
+
const d = document.documentElement, x = document.body;
|
|
523
|
+
d.setAttribute("data-theme", f), x.setAttribute("data-theme", f), setTimeout(
|
|
524
|
+
() => {
|
|
525
|
+
n("Applying inline styles with maximum priority"), document.querySelectorAll("body, html, .gradio-container, .app, #root, .gradio-app, .gradio-interface, main").forEach((t) => {
|
|
526
|
+
t && t instanceof HTMLElement && (t.style.setProperty("background", r.background, "important"), t.style.setProperty("background-color", r.background, "important"), t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("font-family", "var(--theme-font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "important"));
|
|
527
|
+
}), document.querySelectorAll(".block").forEach((t) => {
|
|
528
|
+
t && t instanceof HTMLElement && (t.closest(".svelte-1hfxrpf") || t.querySelector(".svelte-1hfxrpf") || t.querySelector('input[role="listbox"]') || t.closest('[class*="dropdown"]') || (t.style.setProperty("background", "var(--color-base-100)", "important"), t.style.setProperty("background-color", "var(--color-base-100)", "important"), t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("border", "1px solid var(--color-base-300)", "important"), t.style.setProperty("border-radius", "8px", "important"), t.style.setProperty("padding", "1rem", "important"), t.style.setProperty("margin", "0.5rem 0", "important"), t.style.setProperty("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)", "important")));
|
|
529
|
+
}), document.querySelectorAll(".form").forEach((t) => {
|
|
530
|
+
t && t instanceof HTMLElement && (t.closest(".svelte-1hfxrpf") || t.querySelector(".svelte-1hfxrpf") || t.querySelector('input[role="listbox"]') || t.closest('[class*="dropdown"]') || (t.style.setProperty("background", "var(--color-base-100)", "important"), t.style.setProperty("background-color", "var(--color-base-100)", "important"), t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("border", "1px solid var(--color-base-300)", "important"), t.style.setProperty("border-radius", "8px", "important"), t.style.setProperty("padding", "1rem", "important"), t.style.setProperty("margin", "0.5rem 0", "important"), t.style.setProperty("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)", "important")));
|
|
531
|
+
}), document.querySelectorAll("label, [data-testid*='label'], .label, span, p, div, strong, b, h1, h2, h3, h4, h5, h6").forEach((t) => {
|
|
532
|
+
t && t instanceof HTMLElement && (t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("font-family", "var(--theme-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "important"));
|
|
533
|
+
}), document.querySelectorAll("code, pre, .code").forEach((t) => {
|
|
534
|
+
t && t instanceof HTMLElement && (t.style.setProperty("background", "var(--color-base-200)", "important"), t.style.setProperty("background-color", "var(--color-base-200)", "important"), t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("border", "1px solid var(--color-base-300)", "important"), t.style.setProperty("border-radius", "4px", "important"), t.style.setProperty("padding", "0.25rem 0.5rem", "important"));
|
|
535
|
+
}), document.querySelectorAll("svg").forEach((t) => {
|
|
536
|
+
t && t instanceof HTMLElement && (t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("fill", "currentColor", "important"));
|
|
537
|
+
}), document.querySelectorAll("button, input, textarea, select").forEach((t) => {
|
|
538
|
+
t && t instanceof HTMLElement && t.style.setProperty("font-family", "var(--theme-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "important");
|
|
539
|
+
}), document.querySelectorAll(".gr-textbox, .gr-dropdown, .gr-slider, .gr-checkbox, .gr-radio, .gr-number, .gr-file, .gr-image, .gr-audio, .gr-video, .gr-dataframe, .gr-plot, .gr-json, .gr-html, .gr-markdown, .gr-code").forEach((t) => {
|
|
540
|
+
t && t instanceof HTMLElement && (t.closest(".svelte-1hfxrpf") || t.querySelector(".svelte-1hfxrpf") || t.querySelector('input[role="listbox"]') || t.closest('[class*="dropdown"]') || (t.style.setProperty("background", "var(--color-base-100)", "important"), t.style.setProperty("background-color", "var(--color-base-100)", "important"), t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("border", "1px solid var(--color-base-300)", "important"), t.style.setProperty("border-radius", "8px", "important")));
|
|
541
|
+
}), document.querySelectorAll(".wrap, .wrap-inner, .secondary-wrap, .reference").forEach((t) => {
|
|
542
|
+
t && t instanceof HTMLElement && (t.classList.contains("svelte-1hfxrpf") || t.closest(".svelte-1hfxrpf") || t.querySelector(".svelte-1hfxrpf") || t.querySelector('input[role="listbox"]') || t.closest('[class*="dropdown"]') || (t.style.setProperty("background", "var(--color-base-100)", "important"), t.style.setProperty("background-color", "var(--color-base-100)", "important"), t.style.setProperty("color", "var(--color-base-content)", "important")));
|
|
543
|
+
}), document.querySelectorAll("input[role='listbox'], input.border-none, .wrap input, .wrap-inner input, .secondary-wrap input").forEach((t) => {
|
|
544
|
+
t && t instanceof HTMLElement && (t.style.setProperty("background", "var(--color-base-100)", "important"), t.style.setProperty("background-color", "var(--color-base-100)", "important"), t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("border", "1px solid var(--color-base-300)", "important"), t.style.setProperty("border-radius", "8px", "important"), t.style.setProperty("padding", "0.75rem", "important"));
|
|
545
|
+
}), document.querySelectorAll("[class*='svelte-']").forEach((t) => {
|
|
546
|
+
t && t instanceof HTMLElement && (t.classList.contains("svelte-1hfxrpf") || t.closest(".svelte-1hfxrpf") || t.querySelector(".svelte-1hfxrpf") || t.querySelector('input[role="listbox"]') || t.closest('[class*="dropdown"]') || t.style.setProperty("color", "var(--color-base-content)", "important"));
|
|
547
|
+
}), document.querySelectorAll("ul, ol, li").forEach((t) => {
|
|
548
|
+
t && t instanceof HTMLElement && (t.style.setProperty("list-style", "none", "important"), t.style.setProperty("list-style-type", "none", "important"), t.style.setProperty("list-style-image", "none", "important"), t.style.setProperty("list-style-position", "outside", "important"));
|
|
549
|
+
}), document.querySelectorAll(".codemirror-wrapper, .cm-editor, .cm-content, .cm-focused").forEach((t) => {
|
|
550
|
+
t && t instanceof HTMLElement && (t.style.setProperty("background", "var(--color-base-100)", "important"), t.style.setProperty("background-color", "var(--color-base-100)", "important"), t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("border", "1px solid var(--color-base-300)", "important"), t.style.setProperty("border-radius", "8px", "important"));
|
|
551
|
+
}), document.querySelectorAll(".icon-button-wrapper, .top-panel, .hide-top-corner, [class*='svelte-9lsba8'], [class*='icon-button']").forEach((t) => {
|
|
552
|
+
t && t instanceof HTMLElement && (t.classList.contains("svelte-1hfxrpf") || t.closest(".svelte-1hfxrpf") || t.querySelector(".svelte-1hfxrpf") || t.querySelector('input[role="listbox"]') || t.closest('[class*="dropdown"]') || (t.style.setProperty("background", "var(--color-base-100)", "important"), t.style.setProperty("background-color", "var(--color-base-100)", "important"), t.style.setProperty("color", "var(--color-base-content)", "important"), t.style.setProperty("border", "1px solid var(--color-base-300)", "important")));
|
|
553
|
+
}), n("Inline styles applied with maximum priority"), setTimeout(
|
|
554
|
+
() => {
|
|
555
|
+
if (r.font) {
|
|
556
|
+
const u = {
|
|
557
|
+
Inter: '"Times New Roman", "Georgia", serif',
|
|
558
|
+
Poppins: '"Arial Black", "Impact", "Helvetica", sans-serif',
|
|
559
|
+
Roboto: '"Courier New", "Monaco", "Consolas", monospace',
|
|
560
|
+
"Open Sans": '"Comic Sans MS", "Trebuchet MS", cursive',
|
|
561
|
+
Lato: '"Palatino", "Book Antiqua", "Times", serif'
|
|
562
|
+
}[r.font.family] || '"Georgia", "Times New Roman", serif', S = `"${r.font.family}", ${u}`;
|
|
563
|
+
n(`Using VISUALLY DISTINCT font stack: ${S}`);
|
|
564
|
+
const e = document.querySelectorAll("*");
|
|
565
|
+
e.forEach((E) => {
|
|
566
|
+
E instanceof HTMLElement && (E.style.setProperty("font-family", S, "important"), E.style.fontWeight || E.style.setProperty("font-weight", "500", "important"));
|
|
567
|
+
});
|
|
568
|
+
const L = document.createElement("style");
|
|
569
|
+
L.id = "extreme-font-override", L.textContent = `
|
|
570
|
+
html * {
|
|
571
|
+
font-family: ${S} !important;
|
|
572
|
+
font-weight: 500 !important;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
html body * {
|
|
576
|
+
font-family: ${S} !important;
|
|
577
|
+
font-weight: 500 !important;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
html body .gradio-container * {
|
|
581
|
+
font-family: ${S} !important;
|
|
582
|
+
font-weight: 500 !important;
|
|
583
|
+
}
|
|
584
|
+
`;
|
|
585
|
+
const q = document.getElementById("extreme-font-override");
|
|
586
|
+
q && q.remove(), document.head.appendChild(L), n(`Nuclear font application: ${r.font.family} applied to ${e.length} elements`);
|
|
587
|
+
}
|
|
588
|
+
},
|
|
589
|
+
200
|
|
590
|
+
), new MutationObserver((t) => {
|
|
591
|
+
t.forEach((u) => {
|
|
592
|
+
u.addedNodes.forEach((S) => {
|
|
593
|
+
if (S.nodeType === Node.ELEMENT_NODE) {
|
|
594
|
+
const e = S;
|
|
595
|
+
if (e.classList.contains("svelte-1hfxrpf") || e.closest(".svelte-1hfxrpf") || e.querySelector(".svelte-1hfxrpf") || e.querySelector('input[role="listbox"]') || e.closest('[class*="dropdown"]'))
|
|
596
|
+
return;
|
|
597
|
+
e.classList.contains("block") && (e.style.setProperty("background", "var(--color-base-100)", "important"), e.style.setProperty("background-color", "var(--color-base-100)", "important"), e.style.setProperty("color", "var(--color-base-content)", "important"), e.style.setProperty("border", "1px solid var(--color-base-300)", "important"), e.style.setProperty("border-radius", "8px", "important"), e.style.setProperty("padding", "1rem", "important"), e.style.setProperty("margin", "0.5rem 0", "important"), e.style.setProperty("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)", "important")), e.querySelectorAll(".block").forEach((o) => {
|
|
598
|
+
o instanceof HTMLElement && (o.closest('[data-testid*="dropdown"]') || o.closest(".gr-dropdown") || o.querySelector('input[role="listbox"]') || o.classList.contains("svelte-1hfxrpf") || o.closest(".svelte-1hfxrpf") || o.querySelector(".svelte-1hfxrpf") || (o.style.setProperty("background", "var(--color-base-100)", "important"), o.style.setProperty("background-color", "var(--color-base-100)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("border", "1px solid var(--color-base-300)", "important"), o.style.setProperty("border-radius", "8px", "important"), o.style.setProperty("padding", "1rem", "important"), o.style.setProperty("margin", "0.5rem 0", "important"), o.style.setProperty("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)", "important")));
|
|
599
|
+
}), e.classList.contains("form") && (e.closest('[data-testid*="dropdown"]') || e.closest(".gr-dropdown") || e.querySelector('input[role="listbox"]') || e.classList.contains("svelte-1hfxrpf") || e.closest(".svelte-1hfxrpf") || e.querySelector(".svelte-1hfxrpf") || (e.style.setProperty("background", "var(--color-base-100)", "important"), e.style.setProperty("background-color", "var(--color-base-100)", "important"), e.style.setProperty("color", "var(--color-base-content)", "important"), e.style.setProperty("border", "1px solid var(--color-base-300)", "important"), e.style.setProperty("border-radius", "8px", "important"), e.style.setProperty("padding", "1rem", "important"), e.style.setProperty("margin", "0.5rem 0", "important"), e.style.setProperty("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)", "important"))), e.querySelectorAll(".form").forEach((o) => {
|
|
600
|
+
o instanceof HTMLElement && (o.closest('[data-testid*="dropdown"]') || o.closest(".gr-dropdown") || o.querySelector('input[role="listbox"]') || o.classList.contains("svelte-1hfxrpf") || o.closest(".svelte-1hfxrpf") || o.querySelector(".svelte-1hfxrpf") || (o.style.setProperty("background", "var(--color-base-100)", "important"), o.style.setProperty("background-color", "var(--color-base-100)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("border", "1px solid var(--color-base-300)", "important"), o.style.setProperty("border-radius", "8px", "important"), o.style.setProperty("padding", "1rem", "important"), o.style.setProperty("margin", "0.5rem 0", "important"), o.style.setProperty("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)", "important")));
|
|
601
|
+
}), e.classList.contains("column") && (e.style.setProperty("background", "var(--color-base-100)", "important"), e.style.setProperty("background-color", "var(--color-base-100)", "important"), e.style.setProperty("color", "var(--color-base-content)", "important")), e.querySelectorAll(".column, .gr-column, [data-testid*='column']").forEach((o) => {
|
|
602
|
+
o instanceof HTMLElement && (o.style.setProperty("background", "var(--color-base-100)", "important"), o.style.setProperty("background-color", "var(--color-base-100)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important"));
|
|
603
|
+
}), e.querySelectorAll("label, [data-testid*='label'], .label, span, p, div, strong, b, h1, h2, h3, h4, h5, h6").forEach((o) => {
|
|
604
|
+
o instanceof HTMLElement && (o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("font-family", "var(--theme-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "important"));
|
|
605
|
+
}), e.querySelectorAll("code, pre, .code").forEach((o) => {
|
|
606
|
+
o instanceof HTMLElement && (o.style.setProperty("background", "var(--color-base-200)", "important"), o.style.setProperty("background-color", "var(--color-base-200)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("border", "1px solid var(--color-base-300)", "important"), o.style.setProperty("border-radius", "4px", "important"), o.style.setProperty("padding", "0.25rem 0.5rem", "important"));
|
|
607
|
+
}), e.querySelectorAll("svg").forEach((o) => {
|
|
608
|
+
o instanceof HTMLElement && (o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("fill", "currentColor", "important"));
|
|
609
|
+
}), e.querySelectorAll("button, input, textarea, select").forEach((o) => {
|
|
610
|
+
o instanceof HTMLElement && o.style.setProperty("font-family", "var(--theme-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", "important");
|
|
611
|
+
}), e.querySelectorAll(".gr-textbox, .gr-dropdown, .gr-slider, .gr-checkbox, .gr-radio, .gr-number, .gr-file, .gr-image, .gr-audio, .gr-video, .gr-dataframe, .gr-plot, .gr-json, .gr-html, .gr-markdown, .gr-code").forEach((o) => {
|
|
612
|
+
o instanceof HTMLElement && (o.classList.contains("gr-dropdown") || o.closest(".svelte-1hfxrpf") || o.querySelector(".svelte-1hfxrpf") || o.querySelector('input[role="listbox"]') || (o.style.setProperty("background", "var(--color-base-100)", "important"), o.style.setProperty("background-color", "var(--color-base-100)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("border", "1px solid var(--color-base-300)", "important"), o.style.setProperty("border-radius", "8px", "important")));
|
|
613
|
+
}), e.querySelectorAll(".wrap, .wrap-inner, .secondary-wrap, .reference").forEach((o) => {
|
|
614
|
+
var w, N, D, B, G, O;
|
|
615
|
+
o instanceof HTMLElement && (o.closest('[data-testid*="dropdown"]') || o.closest(".gr-dropdown") || o.querySelector('input[role="listbox"]') || o.querySelector("select") || (w = o.parentElement) != null && w.classList.contains("gr-dropdown") || (B = (D = (N = o.parentElement) == null ? void 0 : N.dataset) == null ? void 0 : D.testid) != null && B.includes("dropdown") || o.classList.contains("svelte-1hfxrpf") || o.closest(".svelte-1hfxrpf") || (G = o.parentElement) != null && G.querySelector('input[role="listbox"]') || (O = o.closest(".container")) != null && O.querySelector('input[role="listbox"]') || (o.style.setProperty("background", "var(--color-base-100)", "important"), o.style.setProperty("background-color", "var(--color-base-100)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important")));
|
|
616
|
+
}), e.querySelectorAll("input[role='listbox'], input.border-none, .wrap input, .wrap-inner input, .secondary-wrap input").forEach((o) => {
|
|
617
|
+
o instanceof HTMLElement && (o.style.setProperty("background", "var(--color-base-100)", "important"), o.style.setProperty("background-color", "var(--color-base-100)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("border", "1px solid var(--color-base-300)", "important"), o.style.setProperty("border-radius", "8px", "important"), o.style.setProperty("padding", "0.75rem", "important"));
|
|
618
|
+
}), e.querySelectorAll(".codemirror-wrapper, .cm-editor, .cm-content, .cm-focused").forEach((o) => {
|
|
619
|
+
o instanceof HTMLElement && (o.style.setProperty("background", "var(--color-base-100)", "important"), o.style.setProperty("background-color", "var(--color-base-100)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("border", "1px solid var(--color-base-300)", "important"), o.style.setProperty("border-radius", "8px", "important"));
|
|
620
|
+
}), e.querySelectorAll(".icon-button-wrapper, .top-panel, .hide-top-corner, [class*='svelte-9lsba8'], [class*='icon-button'], .icon-wrap").forEach((o) => {
|
|
621
|
+
var w;
|
|
622
|
+
o instanceof HTMLElement && (o.closest(".svelte-1hfxrpf") || o.classList.contains("svelte-1hfxrpf") || o.closest('[data-testid*="dropdown"]') || o.querySelector('input[role="listbox"]') || (w = o.parentElement) != null && w.querySelector('input[role="listbox"]') || (o.style.setProperty("background", "var(--color-base-100)", "important"), o.style.setProperty("background-color", "var(--color-base-100)", "important"), o.style.setProperty("color", "var(--color-base-content)", "important"), o.style.setProperty("border", "1px solid var(--color-base-300)", "important")));
|
|
623
|
+
}), e.querySelectorAll("[class*='svelte-']").forEach((o) => {
|
|
624
|
+
o instanceof HTMLElement && o.style.setProperty("color", "var(--color-base-content)", "important");
|
|
625
|
+
}), e.querySelectorAll("ul, ol, li").forEach((o) => {
|
|
626
|
+
o instanceof HTMLElement && (o.style.setProperty("list-style", "none", "important"), o.style.setProperty("list-style-type", "none", "important"), o.style.setProperty("list-style-image", "none", "important"), o.style.setProperty("list-style-position", "outside", "important"));
|
|
627
|
+
});
|
|
628
|
+
}
|
|
629
|
+
});
|
|
630
|
+
});
|
|
631
|
+
}).observe(document.body, { childList: !0, subtree: !0 });
|
|
632
|
+
},
|
|
633
|
+
100
|
|
634
|
+
), document.querySelectorAll(".gradio-container, .app, #root, .gradio-app, .gradio-interface, main").forEach((p) => {
|
|
635
|
+
p.setAttribute("data-theme", f);
|
|
636
|
+
});
|
|
637
|
+
const k = {
|
|
638
|
+
currentTheme: f,
|
|
639
|
+
type: "builtin",
|
|
640
|
+
themeConfig: r
|
|
641
|
+
};
|
|
642
|
+
y && y.dispatch("change", k), C("change", k), n(`Theme ${r.name} applied successfully with maximum specificity + inline styles`), setTimeout(
|
|
643
|
+
() => {
|
|
644
|
+
var F, H;
|
|
645
|
+
const b = document.querySelectorAll("span, button, label, p, div")[0];
|
|
646
|
+
if (b) {
|
|
647
|
+
const R = window.getComputedStyle(b).fontFamily;
|
|
648
|
+
n(`DEBUG: Computed font on sample element: ${R}`), n(`DEBUG: Expected font: ${((F = r.font) == null ? void 0 : F.family) || "none"}`), n(`DEBUG: CSS variable --theme-font-family: ${getComputedStyle(document.documentElement).getPropertyValue("--theme-font-family")}`), n(`DEBUG: CSS variable --font-family: ${getComputedStyle(document.documentElement).getPropertyValue("--font-family")}`), n(`DEBUG: CSS variable --font: ${getComputedStyle(document.documentElement).getPropertyValue("--font")}`);
|
|
649
|
+
const P = (H = r.font) == null ? void 0 : H.family;
|
|
650
|
+
P && R.includes(P) ? n(`✅ SUCCESS: Font "${P}" is successfully applied and active!`) : P && n(`⚠️ WARNING: Font "${P}" not found in computed style, using fallback`);
|
|
651
|
+
}
|
|
652
|
+
},
|
|
653
|
+
500
|
|
654
|
+
);
|
|
655
|
+
}
|
|
656
|
+
function K(r) {
|
|
657
|
+
n(`Applying basic theme: ${r}`);
|
|
658
|
+
const a = document.documentElement, i = document.body;
|
|
659
|
+
a.setAttribute("data-theme", r), i.setAttribute("data-theme", r), document.querySelectorAll(".gradio-container, .app, #root, .gradio-app, .gradio-interface, main").forEach((d) => {
|
|
660
|
+
d.setAttribute("data-theme", r);
|
|
661
|
+
});
|
|
662
|
+
const l = { currentTheme: r, type: "builtin" };
|
|
663
|
+
y && y.dispatch("change", l), C("change", l);
|
|
664
|
+
}
|
|
665
|
+
function U(r) {
|
|
666
|
+
var c;
|
|
667
|
+
n(`Switching to font: ${r}`);
|
|
668
|
+
const a = ((c = Y.find((l) => l.name === r)) == null ? void 0 : c.family) || "Inter, sans-serif";
|
|
669
|
+
document.documentElement.style.setProperty("--theme-font-family", a), document.body.style.fontFamily = a;
|
|
670
|
+
}
|
|
671
|
+
nt(() => {
|
|
672
|
+
var r;
|
|
673
|
+
if (n("Gradio Themer component mounted"), n("onMount - Initial value object:", s), n("onMount - Available themes:", s == null ? void 0 : s.available_themes), X(), n("Initial theme application", s), (r = s == null ? void 0 : s.font) != null && r.family) {
|
|
674
|
+
n("Applying font", s.font.family);
|
|
675
|
+
const a = s.font.family.split(",")[0].replace(/['"]/g, "").trim();
|
|
676
|
+
U(a);
|
|
677
|
+
} else
|
|
678
|
+
U("Inter");
|
|
679
|
+
s != null && s.currentTheme ? (n("Applying currentTheme", s.currentTheme), M(s.currentTheme)) : s != null && s.themeInput ? (n("Applying themeInput", s.themeInput), Q(s.themeInput)) : n("No specific theme provided, will apply when themes load");
|
|
680
|
+
});
|
|
681
|
+
function X() {
|
|
682
|
+
if (document.getElementById("gradio-css-framework"))
|
|
683
|
+
return;
|
|
684
|
+
const r = [
|
|
685
|
+
"Inter:wght@400,500,600,700",
|
|
686
|
+
"Poppins:wght@300,400,500,600,700",
|
|
687
|
+
"Roboto:wght@300,400,500,700",
|
|
688
|
+
"Open+Sans:wght@300,400,500,600,700",
|
|
689
|
+
"Lato:wght@300,400,500,700",
|
|
690
|
+
"Quicksand:wght@300,400,500,600,700"
|
|
691
|
+
];
|
|
692
|
+
r.forEach((d, x) => {
|
|
693
|
+
const m = document.createElement("link");
|
|
694
|
+
m.id = `google-font-${x}`, m.rel = "preload", m.as = "style", m.href = `https://fonts.googleapis.com/css2?family=${d}&display=swap`, m.onload = function() {
|
|
695
|
+
this.rel = "stylesheet", n(`Google Font preloaded and activated: ${d}`);
|
|
696
|
+
}, document.head.appendChild(m);
|
|
697
|
+
});
|
|
698
|
+
const a = document.createElement("link");
|
|
699
|
+
a.id = "google-fonts-combined", a.rel = "stylesheet", a.href = `https://fonts.googleapis.com/css2?family=${r.join("&family=")}&display=swap`, document.head.appendChild(a);
|
|
700
|
+
const i = document.createElement("link");
|
|
701
|
+
i.id = "gradio-css-framework", i.rel = "stylesheet", i.href = "https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.css", document.head.appendChild(i);
|
|
702
|
+
const c = document.createElement("link");
|
|
703
|
+
c.id = "tailwind-global-css", c.rel = "stylesheet", c.href = "https://cdn.jsdelivr.net/npm/tailwindcss@3.4.4/base.min.css", document.head.appendChild(c);
|
|
704
|
+
const l = document.createElement("style");
|
|
705
|
+
l.id = "gradio-theme-override", l.textContent = `
|
|
706
|
+
/* COMPREHENSIVE GRADIO THEMING */
|
|
707
|
+
|
|
708
|
+
/* BLACK BORDER ARTIFACT REMOVAL */
|
|
709
|
+
.gradio-container,
|
|
710
|
+
.app,
|
|
711
|
+
#root,
|
|
712
|
+
.gradio-app,
|
|
713
|
+
.gradio-interface,
|
|
714
|
+
main,
|
|
715
|
+
.gr-form,
|
|
716
|
+
.gr-box,
|
|
717
|
+
.gr-panel,
|
|
718
|
+
.gr-group,
|
|
719
|
+
.gr-column,
|
|
720
|
+
.gr-row,
|
|
721
|
+
.gr-tabs,
|
|
722
|
+
.gr-tab-nav,
|
|
723
|
+
.contain,
|
|
724
|
+
.container,
|
|
725
|
+
[data-testid*="column"],
|
|
726
|
+
[data-testid*="row"],
|
|
727
|
+
[data-testid*="group"],
|
|
728
|
+
[data-testid*="form"],
|
|
729
|
+
[data-testid*="panel"] {
|
|
730
|
+
border: none !important;
|
|
731
|
+
box-shadow: none !important;
|
|
732
|
+
outline: none !important;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
/* Remove default Gradio black borders and artifacts */
|
|
736
|
+
* {
|
|
737
|
+
border: none !important;
|
|
738
|
+
box-shadow: none !important;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
/* Add back necessary borders only for form elements */
|
|
742
|
+
input, textarea, select,
|
|
743
|
+
.gr-textbox textarea,
|
|
744
|
+
.gr-textbox input,
|
|
745
|
+
.gr-number input,
|
|
746
|
+
.gr-dropdown select,
|
|
747
|
+
[data-testid*="textbox"] textarea,
|
|
748
|
+
[data-testid*="textbox"] input,
|
|
749
|
+
[data-testid*="number"] input,
|
|
750
|
+
[data-testid*="dropdown"] select {
|
|
751
|
+
border: 1px solid hsl(var(--b3)) !important;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
/* Force smooth transitions and font on everything */
|
|
755
|
+
* {
|
|
756
|
+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
|
|
757
|
+
font-family: var(--theme-font-family, Inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
/* Font styling for headings and text */
|
|
761
|
+
h1, h2, h3, h4, h5, h6 {
|
|
762
|
+
font-family: var(--theme-font-family, Inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
763
|
+
color: hsl(var(--bc)) !important;
|
|
764
|
+
font-weight: 600 !important;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
body, html {
|
|
768
|
+
font-family: var(--theme-font-family, Inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
|
769
|
+
font-size: 14px !important;
|
|
770
|
+
line-height: 1.5 !important;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
/* Main containers - apply base background */
|
|
774
|
+
.gradio-container,
|
|
775
|
+
.app,
|
|
776
|
+
#root,
|
|
777
|
+
.gradio-app,
|
|
778
|
+
.gradio-interface,
|
|
779
|
+
main,
|
|
780
|
+
body,
|
|
781
|
+
html {
|
|
782
|
+
background-color: hsl(var(--b1)) !important;
|
|
783
|
+
color: hsl(var(--bc)) !important;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
/* All input elements */
|
|
787
|
+
input[type="text"],
|
|
788
|
+
input[type="number"],
|
|
789
|
+
input[type="email"],
|
|
790
|
+
input[type="password"],
|
|
791
|
+
textarea,
|
|
792
|
+
select,
|
|
793
|
+
.gr-textbox textarea,
|
|
794
|
+
.gr-textbox input,
|
|
795
|
+
.gr-number input,
|
|
796
|
+
.gr-dropdown select,
|
|
797
|
+
[data-testid*="textbox"] textarea,
|
|
798
|
+
[data-testid*="textbox"] input,
|
|
799
|
+
[data-testid*="number"] input,
|
|
800
|
+
[data-testid*="dropdown"] select {
|
|
801
|
+
background-color: hsl(var(--b1)) !important;
|
|
802
|
+
color: hsl(var(--bc)) !important;
|
|
803
|
+
border: 1px solid hsl(var(--b3)) !important;
|
|
804
|
+
border-radius: 0.5rem !important;
|
|
805
|
+
padding: 0.75rem !important;
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
/* Input focus states */
|
|
809
|
+
input:focus,
|
|
810
|
+
textarea:focus,
|
|
811
|
+
select:focus {
|
|
812
|
+
border-color: hsl(var(--p)) !important;
|
|
813
|
+
outline: 2px solid hsl(var(--p) / 0.2) !important;
|
|
814
|
+
outline-offset: -1px !important;
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
/* All buttons */
|
|
818
|
+
button,
|
|
819
|
+
.gr-button,
|
|
820
|
+
[data-testid*="button"],
|
|
821
|
+
input[type="submit"] {
|
|
822
|
+
background-color: hsl(var(--p)) !important;
|
|
823
|
+
color: hsl(var(--pc)) !important;
|
|
824
|
+
border: none !important;
|
|
825
|
+
border-radius: 0.5rem !important;
|
|
826
|
+
padding: 0.75rem 1.5rem !important;
|
|
827
|
+
font-weight: 500 !important;
|
|
828
|
+
font-size: 0.875rem !important;
|
|
829
|
+
cursor: pointer !important;
|
|
830
|
+
transition: all 0.2s ease !important;
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
button:hover,
|
|
834
|
+
.gr-button:hover {
|
|
835
|
+
background-color: hsl(var(--pf)) !important;
|
|
836
|
+
transform: translateY(-1px) !important;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
/* Secondary button variants */
|
|
840
|
+
button[variant="secondary"],
|
|
841
|
+
.gr-button.secondary {
|
|
842
|
+
background-color: hsl(var(--s)) !important;
|
|
843
|
+
color: hsl(var(--sc)) !important;
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
/* Stop/danger buttons */
|
|
847
|
+
button[variant="stop"],
|
|
848
|
+
.gr-button.stop {
|
|
849
|
+
background-color: hsl(var(--er)) !important;
|
|
850
|
+
color: hsl(var(--erc)) !important;
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
/* Disabled buttons */
|
|
854
|
+
button:disabled,
|
|
855
|
+
.gr-button:disabled {
|
|
856
|
+
background-color: hsl(var(--b3)) !important;
|
|
857
|
+
color: hsl(var(--bc) / 0.5) !important;
|
|
858
|
+
cursor: not-allowed !important;
|
|
859
|
+
transform: none !important;
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
/* Component containers and panels */
|
|
863
|
+
.gr-form,
|
|
864
|
+
.gr-box,
|
|
865
|
+
.gr-panel,
|
|
866
|
+
.gr-group,
|
|
867
|
+
.gr-column,
|
|
868
|
+
.gr-row,
|
|
869
|
+
.gr-tab-nav,
|
|
870
|
+
.gr-tabs,
|
|
871
|
+
[data-testid*="column"],
|
|
872
|
+
[data-testid*="row"],
|
|
873
|
+
[data-testid*="group"] {
|
|
874
|
+
background-color: hsl(var(--b1)) !important;
|
|
875
|
+
color: hsl(var(--bc)) !important;
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
/* Specific targeting for .column class (including without gr- prefix) - MAXIMUM SPECIFICITY */
|
|
879
|
+
html body .gradio-container .column,
|
|
880
|
+
html body .gradio-container div.column,
|
|
881
|
+
html body .gradio-container [class="column"],
|
|
882
|
+
html body .gradio-container [class*=" column"],
|
|
883
|
+
html body .gradio-container [class*="column "],
|
|
884
|
+
.column,
|
|
885
|
+
div.column,
|
|
886
|
+
[class="column"],
|
|
887
|
+
[class*=" column"],
|
|
888
|
+
[class*="column "] {
|
|
889
|
+
background-color: hsl(var(--b1)) !important;
|
|
890
|
+
background: hsl(var(--b1)) !important;
|
|
891
|
+
color: hsl(var(--bc)) !important;
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
/* Cards and elevated surfaces */
|
|
895
|
+
.gr-card,
|
|
896
|
+
.gr-interface,
|
|
897
|
+
[class*="border"],
|
|
898
|
+
[class*="shadow"] {
|
|
899
|
+
background-color: hsl(var(--b2)) !important;
|
|
900
|
+
border-color: hsl(var(--b3)) !important;
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
/* Tab navigation - comprehensive targeting */
|
|
904
|
+
.gr-tab-nav,
|
|
905
|
+
.gr-tabs,
|
|
906
|
+
[data-testid*="tab"],
|
|
907
|
+
.tablist,
|
|
908
|
+
[role="tablist"] {
|
|
909
|
+
background-color: hsl(var(--b1)) !important;
|
|
910
|
+
border-bottom: 1px solid hsl(var(--b3)) !important;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.gr-tab-nav button,
|
|
914
|
+
.gr-tabs button,
|
|
915
|
+
[data-testid*="tab"] button,
|
|
916
|
+
.tablist button,
|
|
917
|
+
[role="tab"] {
|
|
918
|
+
background-color: hsl(var(--b2)) !important;
|
|
919
|
+
color: hsl(var(--bc)) !important;
|
|
920
|
+
border: 1px solid hsl(var(--b3)) !important;
|
|
921
|
+
border-bottom: 2px solid transparent !important;
|
|
922
|
+
border-radius: 0.5rem 0.5rem 0 0 !important;
|
|
923
|
+
padding: 0.75rem 1.5rem !important;
|
|
924
|
+
font-weight: 500 !important;
|
|
925
|
+
transition: all 0.2s ease !important;
|
|
926
|
+
margin-right: 2px !important;
|
|
927
|
+
}
|
|
928
|
+
|
|
929
|
+
.gr-tab-nav button:hover,
|
|
930
|
+
.gr-tabs button:hover,
|
|
931
|
+
[data-testid*="tab"] button:hover,
|
|
932
|
+
[role="tab"]:hover {
|
|
933
|
+
background-color: hsl(var(--b3)) !important;
|
|
934
|
+
color: hsl(var(--p)) !important;
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
.gr-tab-nav button.selected,
|
|
938
|
+
.gr-tab-nav button[aria-selected="true"],
|
|
939
|
+
.gr-tabs button.selected,
|
|
940
|
+
[data-testid*="tab"] button.selected,
|
|
941
|
+
[role="tab"][aria-selected="true"] {
|
|
942
|
+
background-color: hsl(var(--b1)) !important;
|
|
943
|
+
border-bottom-color: hsl(var(--p)) !important;
|
|
944
|
+
border-bottom-width: 3px !important;
|
|
945
|
+
color: hsl(var(--p)) !important;
|
|
946
|
+
font-weight: 600 !important;
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
/* Tab content areas */
|
|
950
|
+
.gr-tab-item,
|
|
951
|
+
.gr-tabitem,
|
|
952
|
+
[data-testid*="tabitem"],
|
|
953
|
+
[role="tabpanel"] {
|
|
954
|
+
background-color: hsl(var(--b1)) !important;
|
|
955
|
+
color: hsl(var(--bc)) !important;
|
|
956
|
+
padding: 1.5rem !important;
|
|
957
|
+
border: 1px solid hsl(var(--b3)) !important;
|
|
958
|
+
border-top: none !important;
|
|
959
|
+
border-radius: 0 0 0.5rem 0.5rem !important;
|
|
960
|
+
}
|
|
961
|
+
|
|
962
|
+
/* Markdown content */
|
|
963
|
+
.markdown,
|
|
964
|
+
.gr-markdown,
|
|
965
|
+
[data-testid*="markdown"] {
|
|
966
|
+
color: hsl(var(--bc)) !important;
|
|
967
|
+
background-color: transparent !important;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
|
|
971
|
+
color: hsl(var(--bc)) !important;
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
.markdown code {
|
|
975
|
+
background-color: hsl(var(--b2)) !important;
|
|
976
|
+
color: hsl(var(--bc)) !important;
|
|
977
|
+
padding: 0.125rem 0.25rem !important;
|
|
978
|
+
border-radius: 0.25rem !important;
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
.markdown pre {
|
|
982
|
+
background-color: hsl(var(--b2)) !important;
|
|
983
|
+
border: 1px solid hsl(var(--b3)) !important;
|
|
984
|
+
border-radius: 0.5rem !important;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
/* File upload areas */
|
|
988
|
+
.gr-file,
|
|
989
|
+
[data-testid*="file"] {
|
|
990
|
+
background-color: hsl(var(--b2)) !important;
|
|
991
|
+
border: 2px dashed hsl(var(--b3)) !important;
|
|
992
|
+
border-radius: 0.5rem !important;
|
|
993
|
+
color: hsl(var(--bc)) !important;
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
/* Dropdowns and selects */
|
|
997
|
+
.gr-dropdown,
|
|
998
|
+
[data-testid*="dropdown"] {
|
|
999
|
+
background-color: hsl(var(--b1)) !important;
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
/* Prevent ALL elements inside dropdowns from getting background styling */
|
|
1003
|
+
.gr-dropdown .wrap,
|
|
1004
|
+
.gr-dropdown .wrap-inner,
|
|
1005
|
+
.gr-dropdown .secondary-wrap,
|
|
1006
|
+
.gr-dropdown .block,
|
|
1007
|
+
.gr-dropdown .form,
|
|
1008
|
+
.gr-dropdown .container,
|
|
1009
|
+
.gr-dropdown .icon-wrap,
|
|
1010
|
+
.gr-dropdown .reference,
|
|
1011
|
+
[data-testid*="dropdown"] .wrap,
|
|
1012
|
+
[data-testid*="dropdown"] .wrap-inner,
|
|
1013
|
+
[data-testid*="dropdown"] .secondary-wrap,
|
|
1014
|
+
[data-testid*="dropdown"] .block,
|
|
1015
|
+
[data-testid*="dropdown"] .form,
|
|
1016
|
+
[data-testid*="dropdown"] .container,
|
|
1017
|
+
[data-testid*="dropdown"] .icon-wrap,
|
|
1018
|
+
[data-testid*="dropdown"] .reference,
|
|
1019
|
+
.svelte-1hfxrpf.wrap,
|
|
1020
|
+
.svelte-1hfxrpf.wrap-inner,
|
|
1021
|
+
.svelte-1hfxrpf.secondary-wrap,
|
|
1022
|
+
.svelte-1hfxrpf.block,
|
|
1023
|
+
.svelte-1hfxrpf.form,
|
|
1024
|
+
.svelte-1hfxrpf.container,
|
|
1025
|
+
.svelte-1hfxrpf.icon-wrap,
|
|
1026
|
+
.svelte-1hfxrpf.reference,
|
|
1027
|
+
.svelte-1hfxrpf .wrap,
|
|
1028
|
+
.svelte-1hfxrpf .wrap-inner,
|
|
1029
|
+
.svelte-1hfxrpf .secondary-wrap,
|
|
1030
|
+
.svelte-1hfxrpf .block,
|
|
1031
|
+
.svelte-1hfxrpf .form,
|
|
1032
|
+
.svelte-1hfxrpf .container,
|
|
1033
|
+
.svelte-1hfxrpf .icon-wrap,
|
|
1034
|
+
.svelte-1hfxrpf .reference,
|
|
1035
|
+
.wrap.svelte-1hfxrpf,
|
|
1036
|
+
.wrap-inner.svelte-1hfxrpf,
|
|
1037
|
+
.secondary-wrap.svelte-1hfxrpf,
|
|
1038
|
+
.block.svelte-1hfxrpf,
|
|
1039
|
+
.form.svelte-1hfxrpf,
|
|
1040
|
+
.container.svelte-1hfxrpf,
|
|
1041
|
+
.icon-wrap.svelte-1hfxrpf,
|
|
1042
|
+
.reference.svelte-1hfxrpf {
|
|
1043
|
+
background: transparent !important;
|
|
1044
|
+
background-color: transparent !important;
|
|
1045
|
+
border: none !important;
|
|
1046
|
+
padding: 0 !important;
|
|
1047
|
+
margin: 0 !important;
|
|
1048
|
+
box-shadow: none !important;
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
/* Sliders */
|
|
1052
|
+
.gr-slider input,
|
|
1053
|
+
[data-testid*="slider"] input {
|
|
1054
|
+
accent-color: hsl(var(--p)) !important;
|
|
1055
|
+
}
|
|
1056
|
+
|
|
1057
|
+
/* Checkboxes and radio buttons */
|
|
1058
|
+
input[type="checkbox"],
|
|
1059
|
+
input[type="radio"] {
|
|
1060
|
+
accent-color: hsl(var(--p)) !important;
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
/* Progress bars */
|
|
1064
|
+
progress,
|
|
1065
|
+
.progress {
|
|
1066
|
+
accent-color: hsl(var(--p)) !important;
|
|
1067
|
+
background-color: hsl(var(--b3)) !important;
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
/* Scrollbars */
|
|
1071
|
+
::-webkit-scrollbar {
|
|
1072
|
+
width: 8px !important;
|
|
1073
|
+
height: 8px !important;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
::-webkit-scrollbar-track {
|
|
1077
|
+
background: hsl(var(--b2)) !important;
|
|
1078
|
+
border-radius: 4px !important;
|
|
1079
|
+
}
|
|
1080
|
+
|
|
1081
|
+
::-webkit-scrollbar-thumb {
|
|
1082
|
+
background: hsl(var(--b3)) !important;
|
|
1083
|
+
border-radius: 4px !important;
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
::-webkit-scrollbar-thumb:hover {
|
|
1087
|
+
background: hsl(var(--bc) / 0.3) !important;
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
/* Labels and helper text */
|
|
1091
|
+
label,
|
|
1092
|
+
.gr-label,
|
|
1093
|
+
[data-testid*="label"] {
|
|
1094
|
+
color: hsl(var(--bc)) !important;
|
|
1095
|
+
font-weight: 500 !important;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
/* Error and success states */
|
|
1099
|
+
.error,
|
|
1100
|
+
.gr-error {
|
|
1101
|
+
color: hsl(var(--er)) !important;
|
|
1102
|
+
background-color: hsl(var(--er) / 0.1) !important;
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
.success,
|
|
1106
|
+
.gr-success {
|
|
1107
|
+
color: hsl(var(--su)) !important;
|
|
1108
|
+
background-color: hsl(var(--su) / 0.1) !important;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
/* Force inheritance for nested elements */
|
|
1112
|
+
.gradio-container * {
|
|
1113
|
+
color: inherit !important;
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
/* NUCLEAR OPTION: Force column backgrounds with maximum CSS specificity */
|
|
1117
|
+
html[data-theme] body .gradio-container .column,
|
|
1118
|
+
html body .gradio-container div[class*="column"],
|
|
1119
|
+
html body .gradio-container *[class*="column"],
|
|
1120
|
+
html body .gradio-container *[class="column"] {
|
|
1121
|
+
background-color: hsl(var(--b1)) !important;
|
|
1122
|
+
background: hsl(var(--b1)) !important;
|
|
1123
|
+
color: hsl(var(--bc)) !important;
|
|
1124
|
+
}
|
|
1125
|
+
`, document.head.appendChild(l), n("Global CSS framework injected successfully");
|
|
1126
|
+
}
|
|
1127
|
+
function Q(r) {
|
|
1128
|
+
n("Applying theme CSS directly", r);
|
|
1129
|
+
const a = document.getElementById("gradio-custom-theme");
|
|
1130
|
+
a && a.remove();
|
|
1131
|
+
const i = document.createElement("style");
|
|
1132
|
+
i.id = "gradio-custom-theme";
|
|
1133
|
+
const c = J(r);
|
|
1134
|
+
i.textContent = c, document.head.appendChild(i);
|
|
1135
|
+
const l = r.match(/name:\s*"([^"]+)"/), d = l ? l[1] : "custom";
|
|
1136
|
+
g(4, f = d);
|
|
1137
|
+
const x = document.documentElement, m = document.body;
|
|
1138
|
+
x.setAttribute("data-theme", d), m.setAttribute("data-theme", d), document.querySelectorAll(".gradio-container, .app, #root, .gradio-app, .gradio-interface, main").forEach((b) => {
|
|
1139
|
+
b.setAttribute("data-theme", d);
|
|
1140
|
+
});
|
|
1141
|
+
const p = {
|
|
1142
|
+
currentTheme: d,
|
|
1143
|
+
type: "theme-css",
|
|
1144
|
+
css: c,
|
|
1145
|
+
original: r
|
|
1146
|
+
};
|
|
1147
|
+
y && y.dispatch("change", p), C("change", p);
|
|
1148
|
+
}
|
|
1149
|
+
function J(r) {
|
|
1150
|
+
n("Converting theme CSS", r);
|
|
1151
|
+
const a = "corporate", i = {
|
|
1152
|
+
"color-base-100": "b1",
|
|
1153
|
+
"color-base-200": "b2",
|
|
1154
|
+
"color-base-300": "b3",
|
|
1155
|
+
"color-base-content": "bc",
|
|
1156
|
+
"color-primary": "p",
|
|
1157
|
+
"color-primary-content": "pc",
|
|
1158
|
+
"color-secondary": "s",
|
|
1159
|
+
"color-secondary-content": "sc",
|
|
1160
|
+
"color-accent": "a",
|
|
1161
|
+
"color-accent-content": "ac",
|
|
1162
|
+
"color-neutral": "n",
|
|
1163
|
+
"color-neutral-content": "nc",
|
|
1164
|
+
"color-info": "in",
|
|
1165
|
+
"color-info-content": "inc",
|
|
1166
|
+
"color-success": "su",
|
|
1167
|
+
"color-success-content": "suc",
|
|
1168
|
+
"color-warning": "wa",
|
|
1169
|
+
"color-warning-content": "wac",
|
|
1170
|
+
"color-error": "er",
|
|
1171
|
+
"color-error-content": "erc"
|
|
1172
|
+
}, c = /--([^:]+):\s*([^;]+);?/g;
|
|
1173
|
+
let l, d = "";
|
|
1174
|
+
for (; (l = c.exec(r)) !== null; ) {
|
|
1175
|
+
const m = l[1].trim(), k = l[2].trim();
|
|
1176
|
+
n(`Found CSS variable: --${m}: ${k}`);
|
|
1177
|
+
const p = i[m] || m.replace("color-", "");
|
|
1178
|
+
i[m] && (d += ` --${p}: ${k};
|
|
1179
|
+
`), d += ` --${m}: ${k};
|
|
1180
|
+
`;
|
|
1181
|
+
}
|
|
1182
|
+
const x = `[data-theme="${a}"], :root[data-theme="${a}"] {
|
|
1183
|
+
${d}}
|
|
1184
|
+
|
|
1185
|
+
/* Force theme application */
|
|
1186
|
+
* {
|
|
1187
|
+
color-scheme: light;
|
|
1188
|
+
}`;
|
|
1189
|
+
return n("Generated CSS", x), x;
|
|
1190
|
+
}
|
|
1191
|
+
return T.$$set = (r) => {
|
|
1192
|
+
"value" in r && g(2, s = r.value), "gradio" in r && g(3, y = r.gradio);
|
|
1193
|
+
}, T.$$.update = () => {
|
|
1194
|
+
if (T.$$.dirty[0] & /*value, themeColors, availableThemes, initialThemeApplied, currentTheme*/
|
|
1195
|
+
244 && s)
|
|
1196
|
+
if (n("Value received from backend", s), n("Available themes in value:", s == null ? void 0 : s.available_themes), s != null && s.available_themes) {
|
|
1197
|
+
g(5, h = s.available_themes), g(6, v = Object.keys(h)), n("Loaded user themes", {
|
|
1198
|
+
count: v.length,
|
|
1199
|
+
themes: v,
|
|
1200
|
+
themeColors: h
|
|
1201
|
+
});
|
|
1202
|
+
const r = s == null ? void 0 : s.currentTheme;
|
|
1203
|
+
if (!I || r && v.includes(r)) {
|
|
1204
|
+
if (r && v.includes(r))
|
|
1205
|
+
n("Applying theme from backend", r), M(r), g(7, I = !0);
|
|
1206
|
+
else if (!I && v.length > 0 && (!f || f === "light")) {
|
|
1207
|
+
const i = v[0];
|
|
1208
|
+
n("Applying default theme from loaded themes", i), M(i), g(7, I = !0);
|
|
1209
|
+
}
|
|
1210
|
+
} else
|
|
1211
|
+
n("Theme unchanged, not overriding user selection");
|
|
1212
|
+
} else
|
|
1213
|
+
n("No available_themes in value object", {
|
|
1214
|
+
value: s,
|
|
1215
|
+
available_themes: s == null ? void 0 : s.available_themes,
|
|
1216
|
+
keys: Object.keys(s || {})
|
|
1217
|
+
});
|
|
1218
|
+
}, [
|
|
1219
|
+
$,
|
|
1220
|
+
_,
|
|
1221
|
+
s,
|
|
1222
|
+
y,
|
|
1223
|
+
f,
|
|
1224
|
+
h,
|
|
1225
|
+
v,
|
|
1226
|
+
I
|
|
1227
|
+
];
|
|
1228
|
+
}
|
|
1229
|
+
class Et extends tt {
|
|
1230
|
+
constructor(A) {
|
|
1231
|
+
super(), ot(
|
|
1232
|
+
this,
|
|
1233
|
+
A,
|
|
1234
|
+
at,
|
|
1235
|
+
null,
|
|
1236
|
+
rt,
|
|
1237
|
+
{
|
|
1238
|
+
elem_id: 0,
|
|
1239
|
+
elem_classes: 1,
|
|
1240
|
+
value: 2,
|
|
1241
|
+
gradio: 3
|
|
1242
|
+
},
|
|
1243
|
+
null,
|
|
1244
|
+
[-1, -1]
|
|
1245
|
+
);
|
|
1246
|
+
}
|
|
1247
|
+
get elem_id() {
|
|
1248
|
+
return this.$$.ctx[0];
|
|
1249
|
+
}
|
|
1250
|
+
get elem_classes() {
|
|
1251
|
+
return this.$$.ctx[1];
|
|
1252
|
+
}
|
|
1253
|
+
}
|
|
1254
|
+
export {
|
|
1255
|
+
Et as default
|
|
1256
|
+
};
|