Update _res/_custom.css

_res/_custom.css

@@ -119,7 +119,6 @@ body>gradio-app.has-bg-image::before {
 div.tabs>div.tab-nav>button.selected {
     border-width: 0 !important;
     background: var(--primary-600) !important;
-    color: var(--neutral-950);
     font-weight: 600;
 }
 
@@ -208,27 +207,70 @@ span.has-info+div {
     height: 33px; */
     --icon-ratio: 3/2;
     aspect-ratio: 1;
-    min-width: 40px;
+    min-width: 120px;
     max-width: 120px;
+    display: flex;
+	justify-content: center;
+	align-items: center;
 
-    & svg {
+    /*
+    & div#switch_width_height_inner {
         fill: var(--text-color-by-luminance);
         width: 70%;
         transition: transform 0.2s ease-in-out;
     }
 
-    & svg.portrait {
+    & div#switch_width_height_inner.portrait {
         transform: rotate(90deg) rotateX(180deg);
     }
+    */
+
+    & #switch_width_height_inner {
+        width: 100px;
+        height: 100px;
+        transition: transform 0.2s ease-in-out, width 0.3s ease-in-out, height 0.38s ease-in-out 0.1s;
+        border-radius: 0.4rem;
+        border: 4px solid var(--text-color-by-luminance);
+        background: transparent;
+    }
+
+    [data-aspect-ratio="16-9"] {
+        width: 90px !important;
+        height: 51px !important;
+    }
+    [data-aspect-ratio="9-16"] {
+        width: 51px !important;
+        height: 90px !important;
+    }
+    [data-aspect-ratio="4-3"] {
+        width: 90px !important;
+        height: 60px !important;
+    }
+    [data-aspect-ratio="3-4"] {
+        width: 60px !important;
+        height: 90px !important;
+    }
+    [data-aspect-ratio="3-2"] {
+        width: 90px !important;
+        height: 67px !important;
+    }
+    [data-aspect-ratio="2-3"] {
+        width: 67px !important;
+        height: 90px !important;
+    }
+    [data-aspect-ratio="1-1"] {
+        width: 70px !important;
+        height: 70px !important;
+    }
 }
 
 .switch-ratio-btn:hover {
-    & svg {
+    & #switch_width_height_inner.querformat {
         transform: rotate(40deg);
     }
 
-    & svg.portrait {
-        transform: rotate(40deg) rotateX(180deg);
+    & #switch_width_height_inner.hochformat {
+        transform: rotate(-40deg) !important;
     }
 }
 
@@ -338,6 +380,25 @@ div.gradio-container.blur-container {
     pointer-events: none;
 }
 
+#image_seed:has(input[disabled].svelte-pc1gm4) {
+    position: relative;
+}
+
+#image_seed:has(input[disabled].svelte-pc1gm4)::after {
+	position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+	border-radius: var(--block-radius);
+	background: var(--block-background-fill);
+    opacity: 0.5;
+    cursor: not-allowed;
+    z-index: var(--layer-5);
+}
+
 /* MARK: Range Input */
 input[type=range].svelte-pc1gm4 {
     accent-color: var(--slider-color);
@@ -362,7 +423,8 @@ span.svelte-1gfkn6j,
 span.svelte-1gfkn6j,
 .primary.svelte-cmf5ev,
 label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2,
-label.selected.svelte-1mhtq7j.svelte-1mhtq7j.svelte-1mhtq7j {
+label.selected.svelte-1mhtq7j.svelte-1mhtq7j.svelte-1mhtq7j,
+div.tabs>div.tab-nav>button {
     color: var(--text-color-by-luminance) !important;
 }