Fix CSS for search

Author: pwizla

docusaurus/src/scss/custom-search-bar.scss

@@ -17,155 +17,86 @@
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.04);
   font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; 
 
-  .DocSearch.DocSearch-Button:hover {
-    box-shadow: none;
-  }
-
-  .DocSearch.DocSearch-Button,
-  .kapa-widget-button {
+  // Base style for both buttons
+  > div,
+  > button {
     font-size: var(--strapi-font-size-sm);
-    line-height: var(--strapi-font-size-sm);
+    line-height: var(--strapi-line-height-sm);
     flex: 1 1 50%;
     height: 34px !important;
-  }
-
-  .DocSearch.DocSearch-Button {
     background-color: transparent;
-    width: 65%;
     border: none;
-    justify-content: flex-start;
+    cursor: pointer;
+    padding: 0 12px;
     margin: 0;
-    border-radius: 4px 0 0 4px;
-    position: relative;
-    padding-left: 12px;
-    padding-right: 0;
-    border-right: solid 1px var(--strapi-neutral-200);
-
+    color: var(--strapi-neutral-400);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    
     &:hover {
       color: var(--strapi-primary-600);
-      border-radius: 4px 0 0 4px;
-
-      .DocSearch-Button-Placeholder::before {
-        content:'\E30C';
-        color: var(--strapi-neutral-500) !important;
-      }
     }
   }
 
-  .DocSearch-Button-Placeholder {
-    font-size: var(--strapi-font-size-sm);
-    line-height: var(--strapi-line-height-sm);
-    padding-left: 0;
-    color: var(--strapi-neutral-400);
-    font-weight: 500;
-    // left: -16px;
-    position: relative;
+  // Specific search button (div with DocSearch classes)
+  .DocSearch.DocSearch-Button {
+    border-right: solid 1px var(--strapi-neutral-200);
+    border-radius: 4px 0 0 4px;
+    justify-content: flex-start;
 
-    &::before {
-      content: '\E30C';
-      font-family: "Phosphor";
-      color: var(--strapi-neutral-500);
-      margin-right: 6px;
-      font-size: 16px;
-      position: relative;
-      top: 2px;
+    .DocSearch-Button-Container {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .DocSearch-Button-Placeholder {
+        font-size: var(--strapi-font-size-sm);
+        line-height: var(--strapi-line-height-sm);
+        color: inherit;
+        position: relative;
+
+        &::before {
+          content: '\E30C';
+          font-family: "Phosphor";
+          color: var(--strapi-neutral-500);
+          margin-right: 6px;
+          font-size: 16px;
+          position: relative;
+          top: 2px;
+        }
+      }
     }
 
     &:hover {
-      color: var(--strapi-primary-600);
+      .DocSearch-Button-Placeholder::before {
+        color: var(--strapi-primary-600);
+      }
     }
   }
 
-  .DocSearch-Search-Icon {
-    display: none;
-  }
-
-  .DocSearch-Button-Keys {
-    display: none;
-    // min-width: 30px;
-    // position: relative;
-    // top: 1px;
-    // font-size: 1rem;
-
-    // .DocSearch-Button-Key {
-    //   color: var(--strapi-neutral-500);
-    //   box-shadow: none;
-    //   background: none;
-    //   border-radius: 0;
-    //   padding: 0;
-    //   margin-right: 0;
-    //   width: 10px;
-    // }
-  }
-
-
   button.kapa-widget-button {
-    border: none;
-    padding: 0 0 0 12px;
-    width: 100%;
-    height: 36px;
-    overflow: visible;
-    cursor: pointer;
-    position: relative;
-    border-radius: 0 6px 6px 0;
-    background: transparent;
-    text-align: left;
-
-    /* inherit font & color from ancestor */
-    color: var(--strapi-neutral-400);
-    font: inherit;
-    font-size: .95rem;
-    font-weight: 500;
-
-    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-    line-height: normal;
-
-    /* Corrects font smoothing for webkit */
-    -webkit-font-smoothing: inherit;
-    -moz-osx-font-smoothing: inherit;
-
-    /* Corrects inability to style clickable `input` types in iOS */
-    -webkit-appearance: none;
-    /* Remove excess padding and border in Firefox 4+ */
-    &::-moz-focus-inner {
-      border: 0;
-      padding: 0;
-    }
-
-    svg {
-      position: relative;
-      left: 6px;
-      top: 3px;
-      width: 18px;
-      height: 18px;
-      fill: var(--strapi-neutral-500);
-    }
-
+    border-radius: 0 4px 4px 0;
+    
     .kapa-widget-button-text {
-      position: relative;
+      display: flex;
+      align-items: center;
       font-size: var(--strapi-font-size-sm);
       line-height: var(--strapi-line-height-sm);
-      top: 1px;
+      color: inherit;
 
       i {
         margin-right: 6px;
         color: var(--strapi-neutral-500) !important;
-      }
-
-      @media screen and (max-width: 996px){
-        left: 12px;
+        font-size: 16px;
+        position: relative;
+        top: 1px;
       }
     }
 
-    &:hover,
-    &:active {
-      .kapa-widget-button-text {
-        color: var(--strapi-primary-600);
-      }
-      button {
-        svg {
-          fill: var(--strapi-primary-600);
-        }
+    &:hover {
+      .kapa-widget-button-text i {
+        color: var(--strapi-primary-600) !important;
       }
     }
   }
@@ -187,7 +118,7 @@
     .kapa-widget-button-text {
       display: none;
     }
-    .kapa-widget-button {
+    button.kapa-widget-button {
       border-radius: 50%;
       padding: 0;
       padding-right: 4px;
@@ -201,4 +132,4 @@
     border: var(--strapi-input-border);
     color: var(--strapi-dark-100);
   }
-}
+}