respective book and chapter structure added.

[bookstack] / resources / sass / _header.scss

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 5e57047dfb5f7794876ebe9eb9556e2330f15826..d72b66729489256108ece9da8de019a5a4024c5c 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -2,12 +2,12 @@
  * Includes the main navigation header and the faded toolbar.
  */
 
-header .grid {
+header.grid {
   grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
 }
 
 @include smaller-than($l) {
-  header .grid {
+  header.grid {
     grid-template-columns: 1fr;
     grid-row-gap: 0;
   }
@@ -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 {
@@ -207,9 +205,6 @@ header .search-box.search-active #header-search-box-button {
   border: 2px solid rgba(255, 255, 255, 0.8);
   border-radius: 4px;
   padding: 0 $-xs;
-  position: absolute;
-  right: $-m;
-  top: 13px;
   line-height: 1;
   cursor: pointer;
   user-select: none;
@@ -217,20 +212,15 @@ header .search-box.search-active #header-search-box-button {
     margin: 0;
     bottom: -2px;
   }
-  @include rtl() {
-    left: $-m;
-    right: auto;
-  }
 }
 
 
-
 @include smaller-than($l) {
   header .header-links {
     @include lightDark(background-color, #fff, #333);
     display: none;
     z-index: 10;
-    right: $-m;
+    inset-inline-end: $-m;
     border-radius: 4px;
     overflow: hidden;
     position: absolute;
@@ -366,43 +356,4 @@ header .search-box.search-active #header-search-box-button {
 .faded span.faded-text {
   display: inline-block;
   padding: $-s;
-}
-
-.action-buttons .text-button {
-  display: inline-block;
-  padding: $-xs $-s;
-  &:last-child {
-    padding-inline-end: 0;
-  }
-  &:first-child {
-    padding-inline-start: 0;
-  }
-}
-
-
-.action-buttons .dropdown-container:last-child a {
-  padding-inline-end: 0;
-  padding-inline-start: $-s;
-}
-.action-buttons {
-  text-align: end;
-  &.text-left {
-    text-align: start;
-    .text-button {
-      padding-inline-end: $-m;
-      padding-inline-start: 0;
-    }
-  }
-  &.text-center {
-    text-align: center;
-  }
-}
-
-@include smaller-than($m) {
-  .action-buttons .text-button {
-    padding: $-xs $-xs;
-  }
-  .action-buttons .dropdown-container:last-child a {
-    padding-inline-start: $-xs;
-  }
 }
\ No newline at end of file