Merge pull request #495 from kaalibro/dev

💄 style: Minor UI fixes

src/features/Content/style.ts

@@ -279,7 +279,6 @@ export const useStyles = createStyles(
 
           > div:not([id$='_script_container'], .gradio-tabs):has(div),
           > fieldset {
-            flex-flow: row wrap;
             gap: 12px;
 
             margin: 0 !important;
@@ -290,7 +289,7 @@ export const useStyles = createStyles(
           }
 
           .gradio-tabitem:has(.gradio-image) {
-            background: ${token.colorFillTertiary} !important;
+            background: ${token.colorFillQuaternary};
           }
 
           [id$='_script_container'] {

src/styles/components/extensions.ts

@@ -71,6 +71,7 @@ export default (token: Theme) => {
       }
 
       /* ControlNet */
+      [id$='img_controlnet'] {
         .cnet-badge.primary {
           font-size: var(--text-xs);
           line-height: 1.3;
@@ -85,6 +86,13 @@ export default (token: Theme) => {
           }
         }
 
+        .tabitem {
+          .controlnet_image_controls {
+            margin-top: 8px;
+          }
+        }
+      }
+
       /* Aspect Ratio selector */
       [id$='2img_container_aspect_ratio'] {
         padding: 16px;
@@ -155,10 +163,6 @@ export default (token: Theme) => {
       .gr-group:has([id^='extra_options_']) {
         background: transparent;
 
-        .styler {
-          flex-grow: 1;
-        }
-
         [id^='extra_options_'] {
           &.gradio-accordion {
             background-color: ${token.colorBgContainer};
@@ -166,8 +170,6 @@ export default (token: Theme) => {
 
           &.gradio-group {
             padding: 16px;
-            background-color: ${token.colorBgContainer};
-            border-radius: ${token.borderRadius}px;
           }
 
           .styler,
@@ -177,6 +179,22 @@ export default (token: Theme) => {
           }
         }
       }
+
+      /* WebUI Soft inpainting */
+      .gr-group:has(#soft_inpainting_enabled) {
+        padding: 0 !important;
+        background: transparent;
+
+        #soft_inpainting_enabled {
+          &.gradio-accordion {
+            background-color: ${token.colorBgContainer};
+          }
+
+          .styler {
+            gap: 16px;
+          }
+        }
+      }
     }
   `;
 };