Spaces:
Running
Running
Sebastiankay
commited on
Commit
•
68c0a18
1
Parent(s):
fa18eeb
24. Sept. 2024, 19:21
Browse files- _res/_custom.css +37 -11
- _res/_custom.js +1 -0
_res/_custom.css
CHANGED
@@ -39,11 +39,13 @@ body>gradio-app {
|
|
39 |
body>gradio-app::before {
|
40 |
position: absolute;
|
41 |
content: "";
|
42 |
-
background: var(--primary-
|
43 |
width: 100%;
|
44 |
height: 355px;
|
45 |
top: 0;
|
46 |
z-index: 0;
|
|
|
|
|
47 |
}
|
48 |
|
49 |
body>gradio-app.has-bg-image::before {
|
@@ -260,21 +262,45 @@ span.has-info+div {
|
|
260 |
|
261 |
}
|
262 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
263 |
input[type=range].svelte-pc1gm4 {
|
264 |
-
|
|
|
|
|
|
|
|
|
265 |
|
266 |
-
|
267 |
-
|
268 |
-
|
269 |
-
|
270 |
|
271 |
-
|
272 |
-
|
273 |
-
|
274 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
275 |
}
|
276 |
|
277 |
-
/* Hide Progress */
|
278 |
.hide-progress:has(.wrap.default.full) {
|
279 |
pointer-events: none;
|
280 |
}
|
|
|
39 |
body>gradio-app::before {
|
40 |
position: absolute;
|
41 |
content: "";
|
42 |
+
background: var(--primary-800);
|
43 |
width: 100%;
|
44 |
height: 355px;
|
45 |
top: 0;
|
46 |
z-index: 0;
|
47 |
+
transition: filter 0.4s ease-out;
|
48 |
+
filter: blur(var(--blur-value));
|
49 |
}
|
50 |
|
51 |
body>gradio-app.has-bg-image::before {
|
|
|
262 |
|
263 |
}
|
264 |
|
265 |
+
|
266 |
+
div.gradio-container.blur-container {
|
267 |
+
filter: blur(12px);
|
268 |
+
pointer-events: none;
|
269 |
+
}
|
270 |
+
|
271 |
+
/* MARK: Range Input */
|
272 |
input[type=range].svelte-pc1gm4 {
|
273 |
+
accent-color: var(--slider-color);
|
274 |
+
background: var(--neutral-700) !important;
|
275 |
+
background-image: linear-gradient(var(--slider-color), var(--slider-color)) !important;
|
276 |
+
background-size: 0% 100%;
|
277 |
+
}
|
278 |
|
279 |
+
input[type=range].svelte-pc1gm4::-webkit-slider-thumb {
|
280 |
+
background-color: var(--primary-600);
|
281 |
+
border-width: 0;
|
282 |
+
}
|
283 |
|
284 |
+
input[type=range].svelte-pc1gm4::-webkit-slider-thumb:hover {
|
285 |
+
background-color: var(--primary-500);
|
286 |
+
}
|
287 |
+
|
288 |
+
/* MARK: Text-Color Override */
|
289 |
+
label.svelte-1b6s6s,
|
290 |
+
label.svelte-9gxdi0,
|
291 |
+
span.svelte-1gfkn6j,
|
292 |
+
span.svelte-1gfkn6j,
|
293 |
+
.primary.svelte-cmf5ev,
|
294 |
+
label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2 {
|
295 |
+
color: var(--text-color-by-luminance) !important;
|
296 |
+
}
|
297 |
+
|
298 |
+
.md-header h1,
|
299 |
+
.md-header p {
|
300 |
+
color: var(--primary-950) !important;
|
301 |
}
|
302 |
|
303 |
+
/* MARK: Hide Progress */
|
304 |
.hide-progress:has(.wrap.default.full) {
|
305 |
pointer-events: none;
|
306 |
}
|
_res/_custom.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1 |
function gradioCustomJS() {
|
2 |
console.log("gradioCustomJS Started")
|
3 |
|
|
|
4 |
function onDomChange(callback) {
|
5 |
const observer = new MutationObserver(callback)
|
6 |
observer.observe(document.querySelector("#dominant_image_color"), {
|
|
|
1 |
function gradioCustomJS() {
|
2 |
console.log("gradioCustomJS Started")
|
3 |
|
4 |
+
// MARK: DOM Change Detection
|
5 |
function onDomChange(callback) {
|
6 |
const observer = new MutationObserver(callback)
|
7 |
observer.observe(document.querySelector("#dominant_image_color"), {
|