💄 style: update layout style

src/pages/Content/index.tsx

@@ -10,7 +10,6 @@ const Content = memo<DivProps>(({ className, ...props }) => {
  const mainReference = useRef<HTMLDivElement>(null);
  const setting = useAppStore((st) => st.setting, isEqual);
  const { cx, styles } = useStyles({
- isPrimaryColor: Boolean(setting.primaryColor),
  isPromptResizable: setting.promptTextarea === 'resizable',
  });
 
@@ -45,9 +44,7 @@ const Content = memo<DivProps>(({ className, ...props }) => {
  )}
  ref={mainReference}
  {...props}
- >
- <div className={styles.background} />
- </div>
+ />
  );
 });
 

src/pages/Content/style.ts

@@ -1,13 +1,9 @@
 import { createStyles } from 'antd-style';
-import { adjustHue } from 'polished';
 
 const MIN_HEIGHT = 88;
 
 export const useStyles = createStyles(
- (
- { cx, css, token, stylish, isDarkMode },
- { isPromptResizable, isPrimaryColor }: { isPrimaryColor: boolean; isPromptResizable: boolean },
- ) => {
+ ({ css, token, stylish, isDarkMode }, { isPromptResizable }: { isPromptResizable: boolean }) => {
  return {
  autocompleteResults: css`
  .autocompleteResults {
@@ -31,38 +27,10 @@ export const useStyles = createStyles(
  }
  }
  `,
- background: cx(
- stylish.gradientAnimation,
- isPrimaryColor &&
- css`
- background-image: linear-gradient(
- -45deg,
- ${token.colorPrimary},
- ${adjustHue(45, token.colorPrimary)},
- ${token.colorPrimary},
- ${adjustHue(-45, token.colorPrimary)}
- );
- `,
- css`
- pointer-events: none;
-
- position: absolute !important;
- z-index: 0;
- top: -100px;
- right: -20vw;
- transform: rotate(4deg);
-
- width: 60vw;
- height: 200px;
-
- opacity: 0.2;
- filter: blur(100px);
- `,
- ),
  container: css`
  position: relative;
  flex: 1;
- min-width: 0;
+ min-width: 200px;
 
  .app {
  padding: 0 !important;
@@ -222,11 +190,6 @@ export const useStyles = createStyles(
  }
  }
 
- #interrogate,
- #deepbooru {
- display: block !important;
- }
-
  #tab_extras > div > div {
  display: block !important;
  }

src/pages/ExtraNetworkSidebar/index.tsx

@@ -45,7 +45,7 @@ const ExtraNetworkSidebar = memo<ExtraNetworkSidebarProps>(({ headerHeight }) =>
  <DraggablePanel
  defaultSize={{ width: setting.extraNetworkSidebarWidth }}
  expand={expand}
- minWidth={setting.extraNetworkSidebarWidth}
+ minWidth={260}
  mode={mobile ? 'fixed' : pin ? 'fixed' : 'float'}
  onExpandChange={setExpand}
  pin={pin}

src/pages/Preview/index.tsx

@@ -1,4 +1,5 @@
 import { DraggablePanel, LayoutSidebarInner } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
 import { memo, useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
 
@@ -13,7 +14,8 @@ export interface PreviewProps extends DivProps {
 
 const Preview = memo<PreviewProps>(({ headerHeight }) => {
  const currentTab = useAppStore((st) => st.currentTab, shallow);
- const { styles } = useStyles({ headerHeight });
+ const setting = useAppStore((st) => st.setting, isEqual);
+ const { styles } = useStyles({ headerHeight, isPrimaryColor: Boolean(setting.primaryColor) });
  const txt2imgReference = useRef<HTMLDivElement>(null);
  const img2imgReference = useRef<HTMLDivElement>(null);
  const extras2imgReference = useRef<HTMLDivElement>(null);
@@ -43,7 +45,7 @@ const Preview = memo<PreviewProps>(({ headerHeight }) => {
  <DraggablePanel
  defaultSize={{ width: '30vw' }}
  expandable={false}
- minWidth={320}
+ minWidth={200}
  mode="fixed"
  pin
  placement="right"

src/pages/Preview/style.ts

@@ -1,84 +1,125 @@
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
+import { adjustHue, rgba } from 'polished';
 
 export const useStyles = createStyles(
- ({ css, token }, { headerHeight = 64 }: { headerHeight?: number; size?: number }) => ({
- container: css`
- height: calc(100vh - ${headerHeight}px);
- `,
- inner: css`
- display: flex;
- flex-direction: column;
- gap: 16px;
-
- height: 100%;
- padding: 16px;
-
- [id$='_results'] {
- flex: 1;
- padding: 0 !important;
- background: none !important;
-
- > div:not([id$='_gallery_container']) {
- flex-grow: 0 !important;
- }
+ (
+ { css, token, stylish },
+ { headerHeight = 64, isPrimaryColor }: { headerHeight?: number; isPrimaryColor?: boolean },
+ ) => {
+ const primaryGradient =
+ isPrimaryColor &&
+ css`
+ background-image: linear-gradient(
+ -45deg,
+ ${token.colorPrimary},
+ ${adjustHue(45, token.colorPrimary)},
+ ${token.colorPrimary},
+ ${adjustHue(-45, token.colorPrimary)}
+ );
+ `;
+ return {
+ container: css`
+ height: calc(100vh - ${headerHeight}px);
+ `,
+ inner: css`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ height: 100%;
+ padding: 16px;
+
+ button {
+ &.svelte-1p4r00v {
+ padding: 0;
+ }
 
- div[id$='_gallery_container'] {
- flex-grow: 1 !important;
- }
+ &[id$='_generate'] {
+ &::before {
+ ${stylish.gradientAnimation};
+ ${primaryGradient};
+ position: absolute;
+ z-index: 50;
+
+ padding: 2px;
+
+ overflow: hidden;
+
+ border-radius: inherit;
+
+ content: '';
+
+ inset: 0;
 
- [id$='img_gallery_container'] {
- div:not(.livePreview) {
- box-sizing: border-box;
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+
+ mask-composite: xor;
+ mask-composite: exclude;
+ }
  }
  }
 
- [id$='_gallery'] {
- height: 100%;
+ .progressDiv > .progress {
+ ${stylish.gradientAnimation};
+ ${primaryGradient};
  }
 
- .livePreview {
- top: 28px;
- left: 4px;
- background: ${token.colorBgElevated};
- }
+ [id$='_results'] {
+ flex: 1;
+ padding: 0 !important;
+ background: none !important;
 
- .preview {
- max-height: unset !important;
- background: ${rgba(token.colorBgLayout, 0.5)} !important;
- }
+ > div:not([id$='_gallery_container']) {
+ flex-grow: 0 !important;
+ }
 
- .empty {
- height: 100%;
+ [id$='_gallery_container'] {
+ flex-grow: 1 !important;
+ }
+
+ [id$='img_gallery_container'] {
+ div:not(.livePreview) {
+ box-sizing: border-box;
+ }
+ }
+
+ [id$='_gallery'] {
+ height: 100%;
+ }
+
+ .livePreview {
+ top: 28px;
+ left: 4px;
+ background: ${token.colorBgElevated};
+ }
+
+ .preview {
+ max-height: unset !important;
+ background: ${rgba(token.colorBgLayout, 0.5)} !important;
+ }
+
+ .empty {
+ height: 100%;
+ }
+
+ [id^='html_info_']:has(p) {
+ padding: 8px 12px;
+
+ font-family: ${token.fontFamilyCode};
+ font-size: 12px;
+ color: ${token.colorInfoText};
+
+ background: ${token.colorInfoBg};
+ border: 1px solid ${token.colorInfoBorder};
+ border-radius: ${token.borderRadius}px;
+ }
+
+ p {
+ margin: 0.2em 0;
+ text-align: unset;
+ }
  }
- }
-
- button[id$='_generate'] {
- height: 44px !important;
- min-height: 44px !important;
- max-height: 44px !important;
- }
-
- button.svelte-1p4r00v {
- padding: 0;
- }
-
- p {
- margin: 0.2em 0;
- text-align: unset;
- }
-
- [id^='html_info_']:has(p) {
- padding: 8px 12px;
-
- font-family: ${token.fontFamilyCode};
- font-size: 12px;
- color: ${token.colorInfoText};
-
- background: ${token.colorInfoBg};
- border: 1px solid ${token.colorInfoBorder};
- border-radius: ${token.borderRadius}px;
- }
- `,
- }),
+ `,
+ };
+ },
 );

src/pages/QuickSettingSidebar/index.tsx

@@ -28,7 +28,7 @@ const QuickSettingSidebar = memo<QuickSettingSidebarProps>(({ headerHeight }) =>
  <DraggablePanel
  defaultSize={{ width: setting.sidebarWidth }}
  expand={expand}
- minWidth={setting.sidebarWidth}
+ minWidth={200}
  mode={mobile ? 'fixed' : pin ? 'fixed' : 'float'}
  onExpandChange={setExpand}
  pin={pin}

src/pages/index.tsx

@@ -21,7 +21,10 @@ const Index = memo(() => {
  const currentTab = useAppStore((st) => st.currentTab, shallow);
  const setting = useAppStore((st) => st.setting, isEqual);
  const { mobile } = useResponsive();
- const { styles } = useStyles(HEADER_HEIGHT);
+ const { cx, styles } = useStyles({
+ headerHeight: HEADER_HEIGHT,
+ isPrimaryColor: Boolean(setting.primaryColor),
+ });
 
  useEffect(() => {
  if (setting.svgIcon) replaceIcon();
@@ -33,13 +36,14 @@ const Index = memo(() => {
  <Header />
  </LayoutHeader>
  <LayoutMain>
+ <div className={styles.background} />
  <LayoutSidebar className={styles.sidebar} headerHeight={HEADER_HEIGHT} style={{ flex: 0 }}>
  <QuickSettingSidebar headerHeight={HEADER_HEIGHT} />
  </LayoutSidebar>
  <Content />
  {mobile === false && (
  <LayoutSidebar
- className={styles.sidebar}
+ className={cx(styles.sidebar, styles.panel)}
  headerHeight={HEADER_HEIGHT}
  style={{
  display: ['tab_txt2img', 'tab_img2img', 'tab_extras'].includes(currentTab) ?