fix(style): search bar stays open on large viewports

rosenpass · Oct 8, 2024 · 76c91c6 · 76c91c6
1 parent 8e62924
commit 76c91c6
Showing 1 changed file with 36 additions and 28 deletions.
diff --git a/static/css/rosenpass.css b/static/css/rosenpass.css
@@ -1148,24 +1148,29 @@ header {
 
 }
 
-.navbar-nav:has(input.td-search__input:not(:hover, :focus)) {
-  div.td-search input.td-search__input:not(:hover) {
-    transition: all 0.01s 0.1s;
-    width: 36px;
-    box-shadow: none;
-  }
-}
-@media (max-width: 522px) {
-  .td-light-dark-menu {
-    transition: visibility 0s 0.1s;
-    visibility: visible;
+@media (max-width: 1500px){
+  .navbar-nav:has(input.td-search__input:not(:hover, :focus)) {
+    div.td-search input.td-search__input:not(:hover) {
+      transition: all 0.01s 0.1s;
+      width: 36px;
+      box-shadow: none;
+    }
   }
-}
-
-.container-fluid:has(input.td-search__input:focus),
-body:has(.td-offline-search-results) {
-  .td-search__input {
-    box-shadow: inset 0 0 0 2px var(--bs-primary) !important;
+  .container-fluid:has(input.td-search__input:focus),
+  .container-fluid:has(input.td-search__input:hover),
+  body:has(.td-offline-search-results) {
+    .td-search__input {
+      transition: all 0.5s ease-in-out 0.2s;
+      width: 207px !important;
+      margin-left: 0.2rem;
+      margin-right: 0.1rem;
+    }
+    @media (max-width: 522px) {
+      .td-light-dark-menu {
+        transition: visibility 0s 0.5s ease-in-out;
+        visibility: hidden;
+      }
+    }
   }
 }
 
@@ -1179,9 +1184,6 @@ body:has(.td-offline-search-results) {
 
   .td-search__input {
     transition: all 0.5s ease-in-out 0.2s;
-    width: 207px !important;
-    margin-left: 0.2rem;
-    margin-right: 0.1rem;
     background-color: var(--bs-white);
   }
   #main_navbar {
@@ -1193,14 +1195,23 @@ body:has(.td-offline-search-results) {
   .td-search__icon {
     color: var(--bs-primary);
   }
-  @media (max-width: 522px) {
-    .td-light-dark-menu {
-      transition: visibility 0s 0.5s ease-in-out;
-      visibility: hidden;
-    }
+}
+@media (max-width: 522px) {
+  .td-light-dark-menu {
+    transition: visibility 0s 0.1s;
+    visibility: visible;
+  }
+}
+
+.container-fluid:has(input.td-search__input:focus),
+body:has(.td-offline-search-results) {
+  .td-search__input {
+    box-shadow: inset 0 0 0 2px var(--bs-primary) !important;
   }
 }
 
+
+
 /* Handles expansion of navbar. Not sure if best end result */
 .navbar-nav {
   @media(min-width:920px){
@@ -1209,9 +1220,6 @@ body:has(.td-offline-search-results) {
   @media(min-width:1038px){
     max-height: 50px !important;
     }
-  /* @media(min-width:1170px){
-    max-height: 50px !important;
-    } */
   }
 
   .search-highlight {