Adjust search info appearance, fix Firefox bug

source/javascripts/app/search.js

@@ -40,9 +40,6 @@
       .on('keyup', search)
       .on('focus', active)
       .on('blur', inactive);
-
-    $global.on('resize', resize);
-    resize();
   }
 
   function search (event) {
@@ -93,8 +90,4 @@
     content.unhighlight(highlightOpts);
   }
 
-  function resize () {
-    searchInfo.innerWidth(content.innerWidth() - darkBox.innerWidth());
-  }
-
 })(window);

source/layouts/layout.erb

@@ -41,6 +41,7 @@ under the License.
       <div class="search">
         <input type="text" class="search" id="input-search">
       </div>
+      <div class="search-info"></div>
       <div id="toc">
       </div>
       <% if current_page.data.toc_footers %>
@@ -52,7 +53,6 @@ under the License.
       <% end %>
     </div>
     <div class="page-wrapper">
-      <div class="search-info"></div>
       <div class="content">
         <%= yield %>
         <% current_page.data.includes && current_page.data.includes.each do |include| %>

source/stylesheets/screen.css.scss

@@ -65,23 +65,35 @@ html, body {
       border-width: 0 0 1px 0;
       border-color: $search-box-border-color;
       padding: 6px 0 6px 20px;
-      box-sizing: border-box;
+      @include box-sizing(border-box);
       margin: 10px 15px;
       width: $nav-width - 30;
       outline: none;
       color: $nav-text;
-      letter-spacing: 0.07em;
     }
 
     &:before {
-      @extend %icon-search;
       position: absolute;
-      top: 16px;
+      top: 17px;
       left: 15px;
       color: $nav-text;
+      @extend %icon-search;
     }
   }
 
+  .search-info {
+    margin-top: 0;
+    padding: 1em $nav-padding;
+    font-size: 0.9em;
+    font-weight: bold;
+    text-shadow: 0 1px 0 lighten($search-notice-bg, 15%);
+    background: $search-notice-bg;
+    display: none;
+
+    @include box-sizing(border-box);
+  }
+
+
   .tocify-item>a, .toc-footer li {
     padding: 0 $nav-padding 0 $nav-padding;
     display: block;
@@ -422,28 +434,6 @@ html, body {
   }
 }
 
-.search-info {
-  margin-top: 0;
-  min-height: 52px;
-  padding: 1em 1.75em;
-  font-size: 1.2em;
-  font-weight: bold;
-  text-shadow: 0 1px 0 lighten($search-notice-bg, 15%);
-  background: $search-notice-bg;
-  position: fixed;
-  z-index: 75;
-  display: none;
-
-  @include box-sizing(border-box);
-
-  &:before {
-    @extend %icon-search;
-    vertical-align: middle;
-    padding-right: 0.5em;
-    font-size: 1.2em;
-  }
-}
-
 ////////////////////////////////////////////////////////////////////////////////
 // CODE SAMPLE STYLES
 ////////////////////////////////////////////////////////////////////////////////

source/stylesheets/variables.scss

@@ -37,7 +37,7 @@ $main-bg: #eaf2f6;
 $aside-notice-bg: #8fbcd4;
 $aside-warning-bg: #c97a7e;
 $aside-success-bg: #6ac174;
-$search-notice-bg: #8fbcd4;
+$search-notice-bg: #c97a7e;
 
 
 // TEXT COLORS