Add a search input in navbar and a hover effect on nav buttons

ffdnispdb/static/css/bootstrap.css

@@ -4439,7 +4439,7 @@ input[type="submit"].btn.btn-mini {
 
 .navbar-link:hover,
 .navbar-link:focus {
-  color: #dddddd;
+  color: #f8f8f8;
 }
 
 .navbar .divider-vertical {
@@ -4624,9 +4624,9 @@ input[type="submit"].btn.btn-mini {
 
 .navbar .nav > li > a:focus,
 .navbar .nav > li > a:hover {
-  color: #dddddd;
+  color: #f8f8f8;
   text-decoration: none;
-  background-color: transparent;
+  background-color: #729fcf;
 }
 
 .navbar .nav > .active > a,
@@ -4738,8 +4738,8 @@ input[type="submit"].btn.btn-mini {
 
 .navbar .nav li.dropdown > a:hover .caret,
 .navbar .nav li.dropdown > a:focus .caret {
-  border-top-color: #dddddd;
-  border-bottom-color: #dddddd;
+  border-top-color: #f8f8f8;
+  border-bottom-color: #f8f8f8;
 }
 
 .navbar .nav li.dropdown.open > .dropdown-toggle,

ffdnispdb/static/css/style.css

@@ -17,6 +17,25 @@
     margin-top: 0;
 }
 
+input#search-input {
+    position: relative;
+    padding-left: 23px;
+}
+
+.navbar-search:before {
+    content:'';
+    display: block;
+    width: 14px;
+    height: 14px;
+    background-image: url(../img/glyphicons-halflings.png);
+    background-position: -48px 0;
+    position: absolute;
+    top: 9px;
+    left: 8px;
+    z-index:99;
+    opacity: 0.5;
+}
+
 #ffdn-header {
     font-family: ffdn;
     font-size: 24px;

ffdnispdb/templates/layout.html

@@ -26,6 +26,9 @@
       </a>
       <a class="brand" href="/"><span id="ffdn-header"><span>F</span><span>F</span><span>D</span><span>N</span></span> Database</a>
       <div class="nav-collapse collapse">
+        <form class="navbar-search pull-right">
+          <input type="text" id="search-input" class="search-query input-medium" placeholder="{{ _("Search") }}"/>
+        </form>
         <ul class="nav pull-right">
           <li class="active">
           <a href="/">Home</a>
@@ -33,8 +36,9 @@
           <li><a href="{{ url_for('project_list') }}">Project List</a></li>
           <li><a href="#">Schema</a></li>
           <li><a href="#">API</a></li>
+          <li class="divider-vertical"></li>
         </ul>
-        </div>
+      </div>
     </div>
   </div>
 </div>

variables.less

@@ -188,9 +188,9 @@
 @navbarText:                      #F8F8F8;
 @navbarLinkColor:                 #F8F8F8;
 
-@navbarLinkColorHover:            @grayLighter;
+@navbarLinkColorHover:            @white;
 @navbarLinkColorActive:           @grayLighter;
-@navbarLinkBackgroundHover:       transparent;
+@navbarLinkBackgroundHover:       lighten(@navbarBackground, 5%);
 @navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
 
 @navbarBrandColor:                @navbarLinkColor;