[Docs] "Use Experimental AI" button disturbing header theme (#22329)

* 'Use Experimental AI' button disturbing header theme on particular screen resolutions * Adjust CSS as per priority * Fixes for other screen resolutions * fix css override * Fix on tablet screen * adjust on one more screen
yugabyte · May 14, 2024 · a3354d6 · a3354d6
1 parent bb385ab
commit a3354d6
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 5 deletions.
diff --git a/docs/assets/scss/_nav.scss b/docs/assets/scss/_nav.scss
@@ -111,11 +111,11 @@ body {
               @media (max-width: 1229px){
                 width: 300px !important;
               }
-              
+
               @media (max-width: 1129px){
                 width: 180px !important;
               }
-              
+
               @media (max-width: 991px){
                 width: 350px !important;
               }
@@ -163,7 +163,7 @@ body {
               &:last-child {
                 margin-right: 0;
               }
-              
+
               @media(max-width:1129px) {
                 margin-right: 10px;
               }
@@ -1124,3 +1124,23 @@ body {
     background: #fff;
   }
 }
+
+body>header .td-navbar.navbar-expand .page-header .navbar-nav form .td-search-input::-webkit-input-placeholder, 
+body>header .td-navbar.navbar-expand .top-nav .navbar-nav form .td-search-input::-webkit-input-placeholder{
+	width:98%
+}
+@media (max-width: 1129px) {
+    body>header .td-navbar.navbar-expand .page-header .navbar-nav form .td-search-input, 
+	body>header .td-navbar.navbar-expand .top-nav .navbar-nav form .td-search-input {
+        width: 185px !important;
+		text-indent: 33px;
+    }
+}
+@media(max-width:1042px) AND (min-width:992px){
+    body>header .td-navbar.navbar-expand .page-header .navbar-nav.right-nav li, 
+	body>header .td-navbar.navbar-expand .top-nav .navbar-nav.right-nav li {
+        margin-right: 0px;
+    }
+	body .tritiery-btn:not(.btn-priority) { padding: 0 8px 0 5px;}
+
+}
diff --git a/docs/assets/scss/_search.scss b/docs/assets/scss/_search.scss
@@ -487,3 +487,29 @@ body.td-searchpage .td-content {
     }
   }
 }
+
+@media (max-width: 1315px) and (min-width: 1130px) {
+  body > header .td-navbar.navbar-expand .page-header .navbar-nav form .td-search-input,
+  body > header .td-navbar.navbar-expand .top-nav .navbar-nav form .td-search-input {
+    width: 215px !important;
+  }
+}
+
+@media (max-width: 1131px) and (min-width: 992px) {
+  body #nav_bar .tritiery-btn:not(.btn-priority) {
+    font-size: 12px !important;
+    padding: 0 5px 0 3px !important;
+  }
+}
+
+@media (max-width: 991px) and (min-width: 768px) {
+  body > header .td-navbar.navbar-expand .page-header .navbar-nav form .td-search-input,
+  body > header .td-navbar.navbar-expand .top-nav .navbar-nav form .td-search-input {
+    width: 280px !important;
+  }
+}
+@media (max-width: 767px) {
+    body>header .td-navbar.navbar-expand .page-header .navbar-nav form .td-search-input, body>header .td-navbar.navbar-expand .top-nav .navbar-nav form .td-search-input {
+        width: 100% !important;
+    }
+}
diff --git a/docs/assets/scss/_yb_kapa_ai.scss b/docs/assets/scss/_yb_kapa_ai.scss
@@ -60,7 +60,7 @@ body {
       cursor: pointer;
       background-color: #fff;
       border-color: #d7dee4;
-      transition: color 250ms ease, backgound 250ms ease;
+      transition: color 250ms ease, background 250ms ease;
       transform: translateX(-230px);
       animation: ask-ai-btn 500ms 3.8s ease forwards;
       position: relative;
@@ -88,13 +88,21 @@ body {
       }
     }
 
+    @media (max-width: 1131px) and (min-width: 992px) {
+      >span.tritiery-btn:not(.btn-priority) {
+        padding-right: 10px;
+      }
+    }
+
     @media(max-width:1129px) {
       margin-left: 6px;
       gap: 8px;
     }
 
     @media (max-width:767px) {
-      font-size: 0;
+      font-size: inherit;
+      display: flex;
+      flex-flow: row-reverse;
       margin: 0 20px 0 auto;
       animation: none;
       transform: translateX(0);
@@ -105,6 +113,28 @@ body {
       }
     }
 
+    @media (max-width: 550px) {
+      >span.tritiery-btn:not(.btn-priority) > img {
+        display: block;
+      }
+
+      >span.tritiery-btn:not(.btn-priority) > span {
+        font-size: 0px;
+      }
+
+      >span.tritiery-btn:not(.btn-priority) > span:after {
+        content: 'Use AI';
+        font-size: 13px;
+        display: block !important;
+        position: relative;
+        top: -7px;
+      }
+    }
+
+    @media (max-width: 450px) {
+      font-size: 0px;
+    }
+
     @media(max-width:419px) {
       margin: 0 10px 0 auto;
       white-space: nowrap;