wait #7986 @0:20

diff --git a/style/burger.less b/style/burger.less
index babf79395b7237a5782a41c3cb867a49a0a65116..b2a1e0e2725ce0ed39b8323dc0c47a493feeb5c2 100644 (file)
--- a/style/burger.less
+++ b/style/burger.less
@@ -59,7 +59,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 // Fluidbook menu styles
 #menu {
   transition: left 0.4s ease, right 0.4s ease;
-  background-color: transparent; //@menu-background;
+  background-color: @menu-background;
   color: @menu-text;
   box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from
   width: 320px;
@@ -86,8 +86,6 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   &.open {
     transition: left 0.4s, right 0.4s;
     left: 0;
-    background: transparent;
-    box-shadow: none;
   }
 
   a, li > span {
@@ -188,20 +186,12 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 }
 
 #menuSearch {
-  display: none;
   position: absolute;
 
-  top: 30px;
-  left: 50%;
-  transform: translate(-50%, 0);
+  top: 0;
+  left: 0;
   width: 100%;
-  max-width: 400px;
-  //z-index: 2; // Ensure search box sits above #shareLinks
-  background-color: @menu-field-background;
-  border-radius: 5px;
-  overflow: hidden;
-  box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px;
-  z-index: 999;
+  z-index: 2; // Ensure search box sits above #shareLinks
 
   &:after {
     border: none;
@@ -257,7 +247,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   height: 60px;
   padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
   color: @menu-text;
-  //.button-hover();
+  .button-hover();
   cursor: pointer;
   z-index: 3;
 
@@ -285,9 +275,9 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   background-color: @menu-field-background;
   color: @menu-field-text;
   border-radius: 0;
-  height: 36px;
-  font-size: 14px;
-  padding: 0 1em 0 50px;
+  height: 60px;
+  font-size: 16px;
+  padding: 0 1em 0 64px;
   width: 260px;
   border: transparent 6px solid;
 
@@ -305,13 +295,13 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   left: 0;
   top: 50%;
   transform: translateY(-50%);
-  color: @menu-text;
+  color: @menu-background;
   height: auto;
-  padding-left: 20px !important;
+  padding-top: 20px;
 
   .svg-icon {
-    width: 18px;
-    height: 18px;
+    width: 25px;
+    height: 25px;
   }
 
   .ltr & {
@@ -340,21 +330,15 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 }
 
 #menuSearchHints {
-
-  &:has(.hint) {
-    padding: 10px 0;
-    margin: 0 10px;
-    border-top: 1px solid darken(#fff, 80%);
-  }
+  padding: 15px 0;
 
   .hint {
-    padding: 10px 12px;
-    font-size: 13px;
+    padding: 13px 30px;
+    font-size: 16px;
     display: block;
     width: 100%;
     height: auto;
     position: relative;
-    border-radius: 5px;
 
     .menu-hover-item();
 
@@ -371,7 +355,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
       margin: auto;
       top: 0;
       bottom: 0;
-      right: 15px;
+      right: 25px;
       transform: rotate(135deg);
 
       // Reverse arrow position and direction for RTL screens
@@ -495,4 +479,6 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
       margin: 0;
     }
   }
-}
\ No newline at end of file
+}
+
+@import "search-float";
\ No newline at end of file

diff --git a/style/interface.less b/style/interface.less
index c9415050eabbbcc6478f39614931c0d93c822f65..ab90da39b3c58c415333d5c2fe291f86dce83a93 100644 (file)
--- a/style/interface.less
+++ b/style/interface.less
@@ -166,14 +166,41 @@
   transform: translateX(-50%) translateY(50%);
   width: 100%;
   max-width: 465px;
-  height: 60px;
+  height: 46px;
   display: flex;
   align-items: center;
   transition: all 0.3s ease-out;
-  background: @menu-text;
-  color: @menu-background;
+  background: @search-float-background;
+  color: @search-float-text;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   font-size: 16px; // Controls size of text and padding
+  border-radius: 5px;
+
+  .floatmode & {
+    transition: none;
+
+    .searchResultsNext,
+    .searchResultsPrev {
+      height: 25px;
+      border-radius: 3px;
+      text-align: center;
+      width: 25px;
+      flex-shrink: 0;
+      transition: background-color 250ms;
+
+      &:hover {
+        background-color: if((@search-float-background = @menu-field-background), @menu-button-background, rgba(255, 255, 255, .12));
+      }
+    }
+
+    .searchResultsPrev {
+      padding-left: 9px;
+    }
+
+    .searchResultsNext {
+      padding-right: 9px;
+    }
+  }
 
   @media (max-width: 599px) {
     max-width: none;
@@ -213,18 +240,20 @@
 
     .svg-icon {
       flex: 0 0 auto;
-      height: 26px;
-      width: 26px; // Needed for IE 11
-      margin-left: 1em;
+      height: 18px;
+      width: 18px; // Needed for IE 11
+      margin-left: 20px;
     }
   }
 
   .searchResultsNavQuery {
     flex: 1 1 auto;
-    padding: 0 1em;
+    padding: 0 1em 0 1.125em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 14px;
   }
 
   .searchResultsNavArrows {
@@ -233,7 +262,7 @@
 
   .searchResultsPrev, .searchResultsNext {
     position: relative;
-    font-size: 12px; // Controls arrow size
+    font-size: 7px; // Controls arrow size
 
     &:after {
       content: '';
@@ -247,7 +276,8 @@
   }
 
   .searchResultsPrev {
-    padding: 0.75em 0.25em 0.75em 0.75em; // Padding to make a more even focus outline
+    padding: 0.75em 1.05em 0.75em 0.75em; // Padding to make a more even focus outline
+    order: 1;
 
     &:after {
       transform: rotate(-45deg);
@@ -255,7 +285,8 @@
   }
 
   .searchResultsNext {
-    padding: 0.75em 0.75em 0.75em 0.25em; // Padding to make a more even focus outline
+    padding: 0.75em 0.75em 0.75em 1.05em; // Padding to make a more even focus outline
+    order: 2;
 
     &:after {
       transform: rotate(135deg);
@@ -271,12 +302,32 @@
   }
 
   .searchResultsNavClose {
-    background-color: @menu-background;
-    color: @menu-text;
-    width: 60px;
+    color: @search-float-text;
+    width: 30px;
+    height: 30px;
+    border-radius: 3px;
+    position: relative;
+    margin-right: 14px;
+    transition: background-color 250ms;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, .12);
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: -10px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1px;
+      height: 35px;
+      background-color: darken(#fff, 70%);
+    }
 
     .svg-icon {
-      height: 20px;
+      height: 13px;
     }
   }
 }

diff --git a/style/search-float.less b/style/search-float.less
new file mode 100644 (file)
index 0000000..79b9139
--- /dev/null
+++ b/style/search-float.less
@@ -0,0 +1,131 @@
+body.floatmode {
+  #menuSearch {
+    background-color: @search-float-background;
+    color: @search-float-text;
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    border-radius: 5px;
+    top: 23px;
+    left: 50%;
+    transform: translateY(0) translateX(-50%);
+    transition: all .3s ease-out;
+    max-width: 465px;
+    width: 100%;
+    overflow: hidden;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    z-index: 999;
+
+    &.hidden {
+      visibility: hidden;
+      opacity: 0;
+      top: 0;
+      transform: translateY(-100%) translateX(-50%);
+    }
+  }
+
+  #menuSearchResults {
+    padding: 10px 0;
+    margin: 0 10px !important;
+    border-top: 1px solid darken(#fff, 80%);
+
+    .no-results {
+      font-size: 13px;
+      padding-left: 12px;
+    }
+  }
+
+  #menu #menuClose {
+    background-color: transparent;
+  }
+
+  #searchForm {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  #menuSearchClose {
+    width: 30px;
+    height: 30px;
+    border: 0;
+    cursor: pointer;
+    background-color: transparent;
+    order: 3;
+    flex-shrink: 0;
+    border-radius: 3px;
+    padding: 8px;
+    margin-right: 14px;
+
+    &:hover {
+      background-color: if((@search-float-background = @menu-field-background), @menu-button-background, rgba(255, 255, 255, .12));
+    }
+
+    .svg-icon {
+      color: @search-float-text;
+    }
+  }
+
+  #q {
+    background-color: @search-float-background;
+    color: @search-float-text;
+    height: 46px;
+    font-size: 14px;
+    padding: 0 1em 0 .30em;
+    width: 100%;
+    order: 2;
+  }
+
+  #submitSearch {
+    margin-left: 14px;
+    padding: 6px;
+    border-radius: 3px;
+    transition: background-color 250ms;
+    color: @search-float-text;
+    position: initial;
+    transform: none;
+    order: 1;
+    &:hover {
+      background-color: if((@search-float-background = @menu-field-background), @menu-button-background, rgba(255, 255, 255, .12));
+    }
+
+    .svg-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  #menuSearchHints {
+    padding: 0;
+
+    &:has(.hint) {
+      padding: 10px 0;
+      margin: 0 10px;
+      border-top: 1px solid darken(#fff, 70%);
+    }
+
+    .hint {
+      padding: 10px 12px;
+      font-size: 13px;
+      border-radius: 3px;
+      margin: 0 !important;
+      transition: background-color 250ms;
+
+      &:hover {
+        background-color: if((@search-float-background = @menu-field-background), @menu-button-background, rgba(255, 255, 255, .12));
+      }
+
+      &:focus {
+        .keyboard-navigating & {
+          background-color: if((@search-float-background = @menu-field-background), @menu-button-background, rgba(255, 255, 255, .12));
+        }
+      }
+
+      &:after {
+        right: 16px;
+        width: 7px;
+        height: 7px;
+      }
+    }
+  }
+}
\ No newline at end of file