24. Sept. 2024, 19:21

_res/_custom.css

@@ -39,11 +39,13 @@ body>gradio-app {
 body>gradio-app::before {
     position: absolute;
     content: "";
-    background: var(--primary-950);
+    background: var(--primary-800);
     width: 100%;
     height: 355px;
     top: 0;
     z-index: 0;
+    transition: filter 0.4s ease-out;
+    filter: blur(var(--blur-value));
 }
 
 body>gradio-app.has-bg-image::before {
@@ -260,21 +262,45 @@ span.has-info+div {
 
 }
 
+
+div.gradio-container.blur-container {
+    filter: blur(12px);
+    pointer-events: none;
+}
+
+/* MARK: Range Input */
 input[type=range].svelte-pc1gm4 {
-    background: var(--neutral-700);
+    accent-color: var(--slider-color);
+    background: var(--neutral-700) !important;
+    background-image: linear-gradient(var(--slider-color), var(--slider-color)) !important;
+    background-size: 0% 100%;
+}
 
-    &::-webkit-slider-thumb {
-        border-color: var(--button-primary-background-fill);
-        background-color: var(--button-primary-background-fill);
-    }
+input[type=range].svelte-pc1gm4::-webkit-slider-thumb {
+    background-color: var(--primary-600);
+    border-width: 0;
+}
 
-    &::-webkit-slider-thumb:hover {
-        border-color: var(--button-primary-background-fill-hover);
-        background-color: var(--button-primary-background-fill-hover);
-    }
+input[type=range].svelte-pc1gm4::-webkit-slider-thumb:hover {
+    background-color: var(--primary-500);
+}
+
+/* MARK: Text-Color Override */
+label.svelte-1b6s6s,
+label.svelte-9gxdi0,
+span.svelte-1gfkn6j,
+span.svelte-1gfkn6j,
+.primary.svelte-cmf5ev,
+label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2 {
+    color: var(--text-color-by-luminance) !important;
+}
+
+.md-header h1,
+.md-header p {
+    color: var(--primary-950) !important;
 }
 
-/* Hide Progress */
+/* MARK: Hide Progress */
 .hide-progress:has(.wrap.default.full) {
     pointer-events: none;
 }

_res/_custom.js

@@ -1,6 +1,7 @@
 function gradioCustomJS() {
 	console.log("gradioCustomJS Started")
 
+	// MARK: DOM Change Detection
 	function onDomChange(callback) {
 		const observer = new MutationObserver(callback)
 		observer.observe(document.querySelector("#dominant_image_color"), {