💄 style: Style fixes

Remove some conflicting '!important' CSS flags. Make commas in Prompt Highlighter more prominent. Add txt2img/img2img Extra options group/accordion styling. Aspect Ratio extension style fixes. Popup max-height fix.
lobehub · Dec 16, 2023 · 75b009d · 75b009d
1 parent 52c0897
commit 75b009d
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 107 deletions.
diff --git a/javascript/main.js b/javascript/main.js
diff --git a/src/features/Content/style.ts b/src/features/Content/style.ts
@@ -285,8 +285,8 @@ export const useStyles = createStyles(
             margin: 0 !important;
             padding: 16px !important;
 
-            background-color: ${token.colorBgContainer}!important;
-            border-radius: ${token.borderRadius}px !important;
+            background-color: ${token.colorBgContainer};
+            border-radius: ${token.borderRadius}px;
           }
 
           .gradio-tabitem:has(.gradio-image) {
@@ -360,7 +360,12 @@ export const useStyles = createStyles(
           background: transparent !important;
 
           > div {
-            background-color: ${token.colorBgContainer}!important;
+            background-color: ${token.colorBgContainer};
+            border-radius: ${token.borderRadius}px !important;
+          }
+
+          span.icon {
+            margin-right: 0;
           }
         }
 

diff --git a/src/modules/PromptHighlight/features/promptTheme.ts b/src/modules/PromptHighlight/features/promptTheme.ts
@@ -19,7 +19,7 @@ export const themeConfig: any = (isDarkMode: ThemeAppearance) => {
       {
         scope: 'comma',
         settings: {
-          foreground: colorScales.gray[type][6],
+          foreground: colorScales.gray[type][11],
         },
       },
       {

diff --git a/src/styles/components/extensions.ts b/src/styles/components/extensions.ts
@@ -87,9 +87,10 @@ export default (token: Theme) => {
 
       /* Aspect Ratio selector */
       [id$='2img_container_aspect_ratio'] {
-        padding: var(--block-padding);
+        padding: 16px;
+        background-color: ${token.colorBgContainer};
         border: 1px solid var(--block-border-color);
-        border-radius: 8px;
+        border-radius: ${token.borderRadius}px;
 
         #arc_empty_space {
           display: none;
@@ -106,10 +107,12 @@ export default (token: Theme) => {
           font-weight: 500;
 
           border: none;
-          border-radius: 0.5em;
+          border-radius: ${token.borderRadius}px;
         }
 
         #arc_panel {
+          padding: 8px 0 0 !important;
+
           .block.gradio-markdown.padded.hide-container {
             .hide,
             .pending {
@@ -139,6 +142,41 @@ export default (token: Theme) => {
           align-self: end;
         }
       }
+
+      /* WebUI txt2img/img2img Extra options */
+      .gr-group:has([id^='extra_options_'].gradio-accordion) {
+        padding: 4px 0 !important;
+      }
+
+      .gr-group:has([id^='extra_options_'].gradio-group) {
+        padding: 0 0 4px !important;
+      }
+
+      .gr-group:has([id^='extra_options_']) {
+        background: transparent;
+
+        .styler {
+          flex-grow: 1;
+        }
+
+        [id^='extra_options_'] {
+          &.gradio-accordion {
+            background-color: ${token.colorBgContainer};
+          }
+
+          &.gradio-group {
+            padding: 16px;
+            background-color: ${token.colorBgContainer};
+            border-radius: ${token.borderRadius}px;
+          }
+
+          .styler,
+          .gap,
+          .form {
+            gap: 16px;
+          }
+        }
+      }
     }
   `;
 };
diff --git a/src/styles/components/input.ts b/src/styles/components/input.ts
@@ -6,6 +6,12 @@ export default (token: Theme) => {
       margin: 0 !important;
     }
 
+    .block.gradio-slider {
+      input[type='number'] {
+        margin-left: 12px;
+      }
+    }
+
     label:has(input[type='radio']),
     label:has(input[type='checkbox']) {
       border-radius: ${token.borderRadius}px !important;

diff --git a/src/styles/components/popup.ts b/src/styles/components/popup.ts
@@ -1,59 +1,63 @@
 import { Theme, css } from 'antd-style';
 
 export default (token: Theme) => css`
-  .global-popup-close {
-    background-color: ${token.colorBgMask} !important;
-    backdrop-filter: blur(4px);
-
-    &::before {
-      font-size: 24px !important;
-      line-height: 24px !important;
+  .global-popup {
+    .global-popup-close {
+      background-color: ${token.colorBgMask} !important;
+      backdrop-filter: blur(4px);
+
+      &::before {
+        font-size: 24px !important;
+        line-height: 24px !important;
+      }
     }
-  }
 
-  .global-popup-inner {
-    > div {
-      border-radius: ${token.borderRadiusLG}px !important;
-      box-shadow: ${token.boxShadow} !important;
-    }
+    .global-popup-inner {
+      max-height: unset;
 
-    .popup-metadata {
-      overflow: auto;
+      > div {
+        border-radius: ${token.borderRadiusLG}px !important;
+        box-shadow: ${token.boxShadow} !important;
+      }
 
-      width: 75vw;
-      max-height: 85vh;
-      padding: 32px;
+      .popup-metadata {
+        overflow: auto;
 
-      font-family: ${token.fontFamilyCode};
-      color: ${token.colorText};
-      word-break: break-word;
+        width: 75vw;
+        max-height: 85vh;
+        padding: 32px;
 
-      background: ${token.colorBgLayout};
-      border-radius: ${token.borderRadiusLG}px !important;
-      border-radius: ${token.borderRadius}px;
-      box-shadow: ${token.boxShadow} !important;
-    }
+        font-family: ${token.fontFamilyCode};
+        color: ${token.colorText};
+        word-break: break-word;
 
-    .edit-user-metadata {
-      > div:not(.edit-user-metadata-buttons):not(:last-child) {
-        margin: 0 0 8px;
+        background: ${token.colorBgLayout};
+        border-radius: ${token.borderRadiusLG}px !important;
+        border-radius: ${token.borderRadius}px;
+        box-shadow: ${token.boxShadow} !important;
       }
 
-      .standalone-card-preview {
-        cursor: default;
-        display: contents;
-        width: 100%;
-        height: auto;
+      .edit-user-metadata {
+        > div:not(.edit-user-metadata-buttons):not(:last-child) {
+          margin: 0 0 8px;
+        }
+
+        .standalone-card-preview {
+          cursor: default;
+          display: contents;
+          width: 100%;
+          height: auto;
 
-        > img {
-          position: relative;
+          > img {
+            position: relative;
+          }
         }
       }
-    }
 
-    .popup-dialog,
-    .edit-user-metadata {
-      width: 50vw !important;
+      .popup-dialog,
+      .edit-user-metadata {
+        width: 50vw !important;
+      }
     }
   }
 `;