💄 style: better tool button

src/components/Sidebar/index.tsx

@@ -9,49 +9,6 @@ const SidebarView = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
   height: -webkit-fill-available;
-
-  #quicksettings {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: stretch;
-
-    > div > div > div > label {
-      max-width: 80%;
-    }
-
-    input[type='color'] {
-      width: 100%;
-    }
-
-    input[type='number'],
-    textarea {
-      height: 20px !important;
-      padding: 4px;
-    }
-
-    > * {
-      flex: 1;
-      max-width: unset !important;
-      min-width: unset !important;
-      width: 100%;
-      margin: 0;
-      padding: 0;
-    }
-
-    span {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-    }
-
-    .dropdown-arrow {
-      min-width: 16px;
-      min-height: 16px;
-    }
-  }
 `
 
 interface SidebarProps {

src/theme/components/button.less

@@ -4,6 +4,30 @@
   min-height: 36px;
   overflow: hidden;
   text-overflow: ellipsis;
+  &.tool {
+    padding: 0 !important;
+    max-width: 36px !important;
+    width: 36px !important;
+    min-width: 36px !important;
+    height: 36px !important;
+    min-height: 36px !important;
+    max-height: 36px !important;
+    font-size: 14px !important;
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: end;
+    line-height: 1;
+    border: var(--button-border-width) solid var(--button-secondary-border-color);
+    background: var(--button-secondary-background-fill);
+    color: var(--button-secondary-text-color);
+  }
+
+  &.secondary-down,
+  &.secondary-down:hover {
+    box-shadow: var(--box-shadow-secondary) !important;
+  }
 }
 
 #txt2img_interrupt,
@@ -35,11 +59,6 @@
   }
 }
 
-.gradio-button.secondary-down,
-.gradio-button.secondary-down:hover {
-  box-shadow: var(--box-shadow-secondary) !important;
-}
-
 #interrogate,
 #deepbooru {
   display: block !important;

src/theme/components/quicksetting.less

@@ -0,0 +1,46 @@
+#quicksettings {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+
+  > * {
+    flex: 1;
+    max-width: unset !important;
+    min-width: unset !important;
+    width: -webkit-fill-available !important;
+    margin: 0;
+    padding: 0;
+  }
+
+  .head > label {
+    min-width: 60%;
+    max-width: 60%;
+    margin-right: 12px;
+  }
+
+  input[type='color'] {
+    width: 100%;
+  }
+
+  input[type='number'],
+  textarea {
+    height: 28px !important;
+    padding: 4px !important;
+    width: -webkit-fill-available;
+    box-sizing: border-box;
+  }
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+
+  .dropdown-arrow {
+    min-width: 16px;
+    min-height: 16px;
+  }
+}

src/theme/extensions/aspect-ratio.less

@@ -33,18 +33,8 @@
     display: flex !important;
   }
   button {
-    align-items: center !important;
-    justify-content: center !important;
-    border: var(--button-border-width) solid var(--button-secondary-border-color) !important;
-    border-radius: var(--input-radius) !important;
-    background: var(--button-secondary-background-fill) !important;
     position: relative !important;
-    font-weight: var(--input-text-weight) !important;
-    font-size: 12px !important;
-    line-height: var(--line-sm) !important;
-    padding: 4px 8px !important;
-    cursor: pointer;
     flex: 1 1 0% !important;
-    min-height: 32px !important;
+    margin: 0 !important;
   }
 }

src/theme/style.less

@@ -15,7 +15,7 @@
 @import 'components/table';
 @import 'components/prompt-textarea';
 @import 'components/gallery';
-
+@import 'components/quicksetting';
 @import 'components/extra-network';
 @import 'components/footer';
 

src/theme/tabs/tab-to-img.less

@@ -63,7 +63,6 @@
   [id$='_settings'] {
     div.svelte-15lo0d8 > *,
     div.svelte-15lo0d8 > .form > * {
-      min-width: unset !important;
       flex: 1;
     }
   }