💄 style: update

src/pages/Content/index.tsx

@@ -32,6 +32,11 @@ const Content = memo<DivProps>(({ className, ...props }) => {
         className,
       )}
       ref={mainReference}
+      style={{
+        maxWidth: `min( calc(100vw - ${
+          setting.sidebarWidth + setting.extraNetworkSidebarWidth
+        }px), 100%)`,
+      }}
       {...props}
     >
       <div className={styles.background} />

src/pages/Content/style.ts

@@ -1,4 +1,5 @@
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 
 const MIN_HEIGHT = 88;
 const GALLERY_LIGHT =
@@ -77,6 +78,12 @@ export const useStyles = createStyles(
         }
       `,
       gallery: css`
+        .livePreview {
+          position: absolute;
+          top: 4px;
+          left: 4px;
+        }
+
         .livePreview,
         .gradio-gallery,
         .gradio-image,
@@ -104,6 +111,14 @@ export const useStyles = createStyles(
             ${galleryBackground}
           }
         }
+
+        button.thumbnail-item {
+          background: ${token.colorBgContainer} !important;
+        }
+
+        div.preview.fixed-height {
+          background: ${rgba(token.colorBgLayout, 0.5)};
+        }
       `,
       img2img: css`
         #img2img_column_batch {

src/pages/ExtraNetworkSidebar/style.ts

@@ -111,6 +111,7 @@ export const useStyles = createStyles(
           }
 
           .additional {
+            position: absolute;
             display: none;
 
             > ul {

src/pages/Header/index.tsx

@@ -1,8 +1,8 @@
-import { Header as H } from '@lobehub/ui';
+import { Header as H, Logo } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { Logo } from '@/components';
 import { useAppStore } from '@/store';
 import { DivProps } from '@/types/index';
 
@@ -11,6 +11,7 @@ import Nav from './Nav';
 
 const Header = memo<DivProps>(({ children }) => {
   const themeMode = useAppStore((st) => st.themeMode, shallow);
+  const theme = useTheme();
 
   return (
     <H
@@ -20,9 +21,10 @@ const Header = memo<DivProps>(({ children }) => {
         <a
           href="https://github.com/canisminor1990/sd-webui-kitchen-theme"
           rel="noreferrer"
+          style={{ color: theme.colorText }}
           target="_blank"
         >
-          <Logo themeMode={themeMode} />
+          <Logo extra="SD" type="combine" />
         </a>
       }
       nav={

src/pages/QuickSettingSidebar/style.ts

@@ -54,6 +54,7 @@ export const useStyles = createStyles(
 
           input[type='number'],
           textarea {
+            resize: none;
             box-sizing: border-box;
             height: 28px !important;
             padding: 4px !important;

src/pages/index.tsx

@@ -28,12 +28,16 @@ const Index = memo(() => {
         <Header />
       </LayoutHeader>
       <LayoutMain>
-        <LayoutSidebar className={styles.sidebar} headerHeight={HEADER_HEIGHT}>
+        <LayoutSidebar className={styles.sidebar} headerHeight={HEADER_HEIGHT} style={{ flex: 0 }}>
           <QuickSettingSidebar headerHeight={HEADER_HEIGHT} />
         </LayoutSidebar>
         <Content />
         {setting?.enableExtraNetworkSidebar && (
-          <LayoutSidebar className={styles.sidebar} headerHeight={HEADER_HEIGHT}>
+          <LayoutSidebar
+            className={styles.sidebar}
+            headerHeight={HEADER_HEIGHT}
+            style={{ flex: 0 }}
+          >
             <ExtraNetworkSidebar headerHeight={HEADER_HEIGHT} />
           </LayoutSidebar>
         )}

src/slots/Loading/index.tsx

@@ -1,22 +1,17 @@
-import { Icon } from '@lobehub/ui';
+import { Icon, Logo } from '@lobehub/ui';
 import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { Logo } from '@/components';
-import { useAppStore } from '@/store';
 
 import { useStyles } from './style';
 
 const Loading = memo(() => {
-  const themeMode = useAppStore((st) => st.themeMode, shallow);
   const { styles } = useStyles();
 
   return (
     <section className={styles.container}>
       <div className={styles.canvas} />
       <div className={styles.inner}>
-        <Logo size={36} themeMode={themeMode} />
+        <Logo extra="SD" size={48} type="combine" />
         <Icon icon={Loader2} size={{ fontSize: 32 }} spin />
       </div>
     </section>

src/slots/Loading/style.ts

@@ -13,7 +13,7 @@ export const useStyles = createStyles(({ css, stylish, cx, token }) => ({
       left: 50%;
       transform: translateX(-50%) scale(1.5);
 
-      width: 100vw;
+      width: 75vw;
       height: 400px;
 
       opacity: 0.2;

src/styles/components/container.ts

@@ -1,86 +1,107 @@
 import { Theme, css } from 'antd-style';
 
-export default (token: Theme) => css`
-  .block.gradio-html:has(div.prose) {
-    display: block;
+export default (token: Theme) => {
+  return css`
+    .block.gradio-html:has(div.prose) {
+      display: block;
 
-    p {
-      color: ${token.cyan8};
+      p {
+        color: ${token.cyan8};
 
-      b {
-        color: ${token.cyan9};
+        b {
+          color: ${token.cyan9};
+        }
       }
     }
-  }
-
-  div[id$='img_settings'],
-  .gradio-column.compact {
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 12px !important;
 
-    .gradio-column:has(button) {
-      min-width: min(36px, 100%) !important;
+    div.gradio-box.block.padded:not(.gradio-accordion) {
+      padding: 16px !important;
     }
 
-    > div:not([id$='_script_container'], .gradio-tabs):has(div),
-    > fieldset,
-    > .gradio-row {
-      flex-flow: row wrap;
-      gap: 12px;
+    div.block.padded.gradio-box:not(.hidden):has(div),
+    div.block.padded.gradio-accordion:not(.hidden):has(div) {
+      display: flex;
+      flex-direction: column;
 
       margin: 0 !important;
       padding: 16px !important;
 
-      background-color: ${token.colorBgContainer}!important;
+      background-color: ${token.colorBgContainer} !important;
+      border: 1px solid ${token.colorBorderSecondary} !important;
       border-radius: ${token.borderRadius}px !important;
+      box-shadow: none;
     }
 
-    .gradio-tabitem,
-    .gradio-group {
-      background: ${token.colorFillTertiary} !important;
-    }
+    div[id$='img_settings'],
+    .gradio-column.compact {
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 12px !important;
 
-    .gradio-accordion {
-      box-shadow: none;
-    }
+      .gradio-column:has(button) {
+        min-width: min(36px, 100%) !important;
+      }
 
-    div[id$='_script_container'] {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
+      > div:not([id$='_script_container'], .gradio-tabs):has(div),
+      > fieldset,
+      > .gradio-row {
+        flex-flow: row wrap;
+        gap: 12px;
+
+        margin: 0 !important;
+        padding: 16px !important;
+
+        background-color: ${token.colorBgContainer}!important;
+        border-radius: ${token.borderRadius}px !important;
+      }
+
+      .gradio-tabitem {
+        background: ${token.colorFillTertiary} !important;
+      }
 
-      .gradio-group:not(.hidden):has(div),
-      #script_list {
+      div[id$='_script_container'] {
         display: flex;
         flex-direction: column;
+        gap: 12px;
 
-        margin: 0;
-        padding: 16px;
-
-        background-color: ${token.colorBgContainer};
-        border: 1px solid ${token.colorBorderSecondary} !important;
-        border-radius: ${token.borderRadius}px !important;
+        #script_list,
+        .gradio-group:not(.hidden):has(div) {
+          display: flex;
+          flex-direction: column;
 
-        > div {
+          margin: 0;
           padding: 0;
-          border: none !important;
+
+          background-color: ${token.colorBgContainer};
+          border: 1px solid ${token.colorBorderSecondary} !important;
+          border-radius: ${token.borderRadius}px !important;
+          box-shadow: none;
+
+          > div {
+            padding: 0;
+            border: none !important;
+          }
         }
-      }
 
-      #script_list {
-        padding: 8px 16px 12px !important;
+        #script_list {
+          padding: 8px 16px 12px !important;
+        }
       }
     }
-  }
-
-  div.compact,
-  .wrap {
-    gap: 8px !important;
-  }
-
-  #tabs > div {
-    padding: unset;
-    border: none;
-  }
-`;
+
+    div.compact,
+    .wrap {
+      gap: 8px !important;
+    }
+
+    #tabs > div {
+      padding: unset;
+      border: none;
+    }
+
+    #system_info {
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+  `;
+};

src/styles/components/input.ts

@@ -21,8 +21,7 @@ export default (token: Theme) => {
       white-space: nowrap;
     }
 
-    input:not([type='range'], [type='checkbox'], [type='number'], [type='radio'], .border-none),
-    textarea.scroll-hide {
+    input:not([type='range'], [type='checkbox'], [type='number'], [type='radio'], .border-none) {
       resize: none;
       height: 36px !important;
       border-radius: ${token.borderRadius}px;

src/styles/components/progress.ts

@@ -14,4 +14,10 @@ export default (token: Theme) => css`
     border: 1px solid ${token.colorBorder};
     border-radius: ${token.borderRadius}px;
   }
+
+  .wrap.svelte-j1gjts:has(div) {
+    overflow: hidden;
+    background: ${token.colorBgContainer} !important;
+    border-radius: ${token.borderRadius}px;
+  }
 `;

src/styles/components/table.ts

@@ -2,45 +2,31 @@ import { Theme, css } from 'antd-style';
 
 export default (token: Theme) => css`
   table {
-    border-spacing: 0;
-    border-collapse: separate !important;
-
+    overflow: auto;
+    border-collapse: collapse;
     width: 100%;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-    padding: 8px;
-
-    border: 1px solid ${token.colorBorderSecondary} !important;
-    border-radius: ${token.borderRadius}px;
   }
 
   th,
   td {
-    padding-block-start: 10px !important;
-    padding-block-end: 10px !important;
-    padding-inline-start: 16px !important;
-    padding-inline-end: 16px !important;
+    padding: 12px !important;
+    border: 1px solid ${token.colorBorderSecondary} !important;
+  }
 
-    border: none !important;
+  th {
+    background: ${token.colorFillQuaternary};
+    border-bottom: 4px solid var(--color-border) !important;
   }
 
-  thead {
-    tr {
-      th {
-        background: ${token.colorFillTertiary};
+  tr:hover td {
+    background: ${token.colorFillSecondary};
+  }
 
-        &:first-of-type {
-          border-top-left-radius: ${token.borderRadius}px;
-          border-bottom-left-radius: ${token.borderRadius}px;
-        }
+  tr:nth-child(odd) td {
+    background: ${token.colorFillQuaternary};
+  }
 
-        &:last-child {
-          border-top-right-radius: ${token.borderRadius}px;
-          border-bottom-right-radius: ${token.borderRadius}px;
-        }
-      }
-    }
+  tr:nth-child(odd):hover td {
+    background: ${token.colorFillSecondary};
   }
 `;