💄 style: Update popup style

lobehub · Nov 28, 2023 · eda0dd4 · eda0dd4
1 parent 193ce95
commit eda0dd4
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 161 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
@@ -162,34 +162,6 @@ export const useStyles = createStyles(
             }
           }
         }
-
-        .global-popup-close {
-          background-color: var(--popup-overlay) !important;
-          background-image: var(--grain);
-          backdrop-filter: saturate(120%) blur(80px);
-        }
-
-        .global-popup-inner {
-          max-width: 80%;
-
-          .popup-metadata {
-            padding: 16px;
-
-            font-family: var(--font-mono);
-            color: ${token.colorText};
-            word-break: break-word;
-
-            background: ${token.colorBgLayout};
-            border-radius: ${token.borderRadius}px;
-            box-shadow: var(--lightbox-img-shadow);
-          }
-
-          .edit-user-metadata {
-            > div:not(.edit-user-metadata-buttons):not(:last-child) {
-              margin: 0 0 8px;
-            }
-          }
-        }
       `,
       splitView: css`
         #txt2img_toprow,

diff --git a/src/features/ExtraNetworkSidebar/Inner.tsx b/src/features/ExtraNetworkSidebar/Inner.tsx
@@ -83,18 +83,23 @@ const Inner = memo(() => {
       index2indexButton.click();
       setExtraLoading(false);
 
-      const civitaiText2ImgButton = document.querySelector('#txt2img_extra_refresh')
-        ?.nextSibling as HTMLButtonElement;
-      if (civitaiText2ImgButton) {
-        civitaiText2ImgButton.onclick = civitaiHelperFix;
-      }
-      const civitaiImg2ImgButton = document.querySelector('#img2img_extra_refresh')
-        ?.nextSibling as HTMLButtonElement;
-      if (civitaiImg2ImgButton) {
-        civitaiImg2ImgButton.onclick = civitaiHelperFix;
+      const isCivitaiHelper = !!document.querySelector('#txt2img_extra_refresh');
+
+      if (isCivitaiHelper) {
+        const civitaiText2ImgButton = document.querySelector('#txt2img_extra_refresh')
+          ?.nextSibling as HTMLButtonElement;
+        if (civitaiText2ImgButton) {
+          civitaiText2ImgButton.onclick = civitaiHelperFix;
+        }
+        const civitaiImg2ImgButton = document.querySelector('#img2img_extra_refresh')
+          ?.nextSibling as HTMLButtonElement;
+        if (civitaiImg2ImgButton) {
+          civitaiImg2ImgButton.onclick = civitaiHelperFix;
+        }
+
+        civitaiHelperFix();
       }
 
-      civitaiHelperFix();
       consola.success('🤯 [extranetwork] force reload');
     } catch (error) {
       consola.error('🤯 [extranetwork] force reload', error);

diff --git a/src/styles/components/container.ts b/src/styles/components/container.ts
@@ -72,5 +72,9 @@ export default (token: Theme) => {
         }
       }
     }
+
+    #tabs_extensions > .tabitem > .gap > .gradio-row {
+      overflow: auto;
+    }
   `;
 };
diff --git a/src/styles/components/lightboxModal.ts b/src/styles/components/lightboxModal.ts
@@ -3,41 +3,63 @@ import { Theme, css } from 'antd-style';
 export default (token: Theme) => css`
   #lightboxModal {
     background-color: var(--popup-overlay) !important;
-    background-image: var(--grain);
     backdrop-filter: saturate(120%) blur(80px);
     outline: none;
+
+    > img:not(.modalImageFullscreen) {
+      box-shadow: var(--lightbox-img-shadow);
+    }
   }
 
   .modalControls {
     transition: var(--button-transition) !important;
-  }
 
-  .modalControls:hover {
-    background-color: transparent !important;
-  }
+    &:hover {
+      background-color: transparent !important;
+    }
 
-  .modalControls span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    .cursor {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
 
-    width: 32px !important;
+      width: 32px !important;
+      height: 32px !important;
 
-    font-size: 35px !important;
-    color: ${token.colorTextDescription} !important;
-    text-align: center;
-    text-shadow: none !important;
+      background-color: ${token.colorFillTertiary};
+      backdrop-filter: saturate(120%) blur(80px);
+      border-radius: ${token.borderRadius}px;
 
-    transition: var(--button-transition);
-  }
+      > svg {
+        width: 20px !important;
+        height: 20px !important;
+      }
 
-  .modalControls span:hover,
-  .modalControls span:focus {
-    color: ${token.colorPrimary} !important;
-  }
+      &:hover {
+        color: ${token.colorPrimary} !important;
+        background-color: ${token.colorFillSecondary} !important;
+      }
+    }
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 32px !important;
 
-  #lightboxModal > img:not(.modalImageFullscreen) {
-    box-shadow: var(--lightbox-img-shadow);
+      font-size: 35px !important;
+      color: ${token.colorTextDescription} !important;
+      text-align: center;
+      text-shadow: none !important;
+
+      transition: var(--button-transition);
+
+      &:hover,
+      &:focus {
+        color: ${token.colorPrimary} !important;
+      }
+    }
   }
 
   .modalPrev,
@@ -49,7 +71,7 @@ export default (token: Theme) => css`
     align-items: center;
     justify-content: center;
 
-    width: 48px !important;
+    width: 44px !important;
     height: 50%;
     padding: 8px !important;
 
@@ -58,13 +80,18 @@ export default (token: Theme) => css`
     color: ${token.colorTextDescription} !important;
 
     background-color: ${token.colorFillTertiary};
-    border-radius: 0 16px 16px 0 !important;
+    border-radius: 0 ${token.borderRadius}px ${token.borderRadius}px 0 !important;
 
     transition: var(--button-transition) !important;
+
+    svg {
+      width: 20px !important;
+      height: 20px !important;
+    }
   }
 
   .modalNext {
-    border-radius: 16px 0 0 16px !important;
+    border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px !important;
   }
 
   .modalPrev:hover,

diff --git a/src/styles/components/popup.ts b/src/styles/components/popup.ts
@@ -0,0 +1,66 @@
+import { Theme, css } from 'antd-style';
+
+export default (token: Theme) => css`
+  .global-popup {
+    backdrop-filter: saturate(120%) blur(4px) !important;
+  }
+
+  .global-popup-close {
+    position: relative;
+    top: 16px !important;
+    right: 16px !important;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+
+    background-color: ${token.colorFillSecondary};
+    backdrop-filter: saturate(120%) blur(80px);
+    border-radius: ${token.borderRadius}px;
+
+    &::before {
+      font-size: 24px !important;
+      line-height: 24px !important;
+    }
+
+    &:hover {
+      color: ${token.colorPrimary} !important;
+      background-color: ${token.colorFillSecondary} !important;
+    }
+  }
+
+  .global-popup-inner {
+    max-width: 80%;
+
+    > div {
+      border-radius: ${token.borderRadiusLG}px !important;
+      box-shadow: ${token.boxShadow} !important;
+    }
+
+    .popup-metadata {
+      overflow: auto;
+
+      width: 75vw;
+      height: 75vh;
+      padding: 32px;
+
+      font-family: ${token.fontFamilyCode};
+      color: ${token.colorText};
+      word-break: break-word;
+
+      background: ${token.colorBgLayout};
+      border-radius: ${token.borderRadiusLG}px !important;
+      border-radius: ${token.borderRadius}px;
+      box-shadow: ${token.boxShadow} !important;
+    }
+
+    .edit-user-metadata {
+      > div:not(.edit-user-metadata-buttons):not(:last-child) {
+        margin: 0 0 8px;
+      }
+    }
+  }
+`;
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -10,6 +10,7 @@ import input from './components/input';
 import label from './components/label';
 import lightboxModal from './components/lightboxModal';
 import options from './components/options';
+import popup from './components/popup';
 import progress from './components/progress';
 import slider from './components/slider';
 import table from './components/table';
@@ -30,6 +31,7 @@ const GlobalStyle = createGlobalStyle(({ theme }) => [
   slider(theme),
   table(theme),
   tabs(theme),
+  popup(theme),
   extensions(theme),
   lightboxModal(theme),
 ]);

diff --git a/src/styles/tokens.ts b/src/styles/tokens.ts
@@ -200,23 +200,18 @@ export default (token: Theme) => {
       --button-small-radius: ${token.borderRadiusSM}px;
       --button-small-text-size: var(--text-md);
       --button-small-text-weight: 400;
-      --button-transition: all 0.12s cubic-bezier(0.35, 0.12, 0.17, 1);
+      --button-transition: all 0.12s ${token.motionEaseInOut};
       --button-lg-height: 44px;
       --button-lg-tool-height: 36px;
-      --popup-overlay: rgb(180 187 190 / 70%);
-      --thumbnail-shadow: 0 24px 16px -10px rgb(0 0 0 / 15%), 0 36px 40px -15px rgb(0 0 0 / 30%);
-      --lightbox-img-shadow: 0 70px 80px -10px rgb(0 0 0 / 10%), 0 30px 60px -15px rgb(0 0 0 / 10%),
-        0 50px 40px -30px rgb(0 0 0 / 8%);
+      --popup-overlay: ${token.colorBgMask};
+      --thumbnail-shadow: ${token.boxShadow};
+      --lightbox-img-shadow: ${token.boxShadowSecondary};
       --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
     }
 
     .dark {
       --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
       --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-      --popup-overlay: rgb(39 45 47 / 80%);
-      --thumbnail-shadow: 0 24px 16px -10px rgb(0 0 0 / 30%), 0 36px 40px -15px rgb(0 0 0 / 40%);
-      --lightbox-img-shadow: 0 70px 80px -10px rgb(0 0 0 / 30%), 0 30px 60px -15px rgb(0 0 0 / 20%),
-        0 50px 40px -30px rgb(0 0 0 / 30%);
     }
   `;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,5 +72,9 @@ export default (token: Theme) => { @@
             }
           }
         }
+        #tabs_extensions > .tabitem > .gap > .gradio-row {
+          overflow: auto;
+        }
       `;
     };