X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/851ab47f8adb2d04555c28fceae371e038d90a40..refs/pull/4467/head:/resources/sass/_header.scss

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 5e57047df..c1b6af4c6 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -22,9 +22,6 @@ header {
   border-bottom: 1px solid #DDD;
   box-shadow: $bs-card;
   @include lightDark(border-bottom-color, #DDD, #000);
-  @include whenDark {
-    filter: saturate(0.8) brightness(0.8);
-  }
   .header-links {
     display: flex;
     align-items: center;
@@ -121,17 +118,13 @@ header .search-box {
 }
 #header-search-box-button {
   z-index: 1;
-  left: 16px;
+  inset-inline-start: 16px;
   top: 10px;
   color: #FFF;
   opacity: 0.6;
   @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
-  @include rtl {
-    left: auto;
-    right: 16px;
-  }
   svg {
-    margin-block-end: 0;
+    margin-inline-end: 0;
   }
 }
 
@@ -163,17 +156,22 @@ header .search-box {
     -webkit-line-clamp: 2;
     overflow: hidden;
   }
+  .global-search-loading {
+    position: absolute;
+    width: 100%;
+  }
 }
-.search-active .global-search-suggestions {
-  display: block;
-}
-header .search-box.search-active input {
-  background-color: #EEE;
-  color: #444;
-  border-color: #DDD;
-}
-header .search-box.search-active #header-search-box-button {
-  color: #444;
+header .search-box.search-active:focus-within {
+  .global-search-suggestions {
+    display: block;
+  }
+  input {
+    @include lightDark(background-color, #EEE, #333);
+    @include lightDark(border-color, #DDD, #111);
+  }
+  #header-search-box-button, input {
+    @include lightDark(color, #444, #AAA);
+  }
 }
 
 .logo {