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

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 5e57047df..aa560e8e0 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -121,17 +121,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 +159,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 {