Sebastiankay commited on
Commit
68c0a18
1 Parent(s): fa18eeb

24. Sept. 2024, 19:21

Browse files
Files changed (2) hide show
  1. _res/_custom.css +37 -11
  2. _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-950);
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
- background: var(--neutral-700);
 
 
 
 
265
 
266
- &::-webkit-slider-thumb {
267
- border-color: var(--button-primary-background-fill);
268
- background-color: var(--button-primary-background-fill);
269
- }
270
 
271
- &::-webkit-slider-thumb:hover {
272
- border-color: var(--button-primary-background-fill-hover);
273
- background-color: var(--button-primary-background-fill-hover);
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"), {