clean up search form in navbar, add new variable for placeholder text color

docs/assets/css/bootstrap.css

@@ -2881,10 +2881,8 @@ input[type="submit"].btn.btn-small {
   font-weight: normal;
   line-height: 1;
   color: #ffffff;
-  color: rgba(255, 255, 255, 0.75);
-  background: #666;
-  background: rgba(255, 255, 255, 0.3);
-  border: 1px solid #111;
+  background-color: #626262;
+  border: 1px solid #000000;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
   -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
@@ -2894,16 +2892,11 @@ input[type="submit"].btn.btn-small {
   -o-transition: none;
   transition: none;
 }
-.navbar-search .search-query :-moz-placeholder {
-  color: #eeeeee;
-}
-.navbar-search .search-query ::-webkit-input-placeholder {
-  color: #eeeeee;
+.navbar-search .search-query:-moz-placeholder {
+  color: #cccccc;
 }
-.navbar-search .search-query:hover {
-  color: #ffffff;
-  background-color: #999999;
-  background-color: rgba(255, 255, 255, 0.5);
+.navbar-search .search-query::-webkit-input-placeholder {
+  color: #cccccc;
 }
 .navbar-search .search-query:focus,
 .navbar-search .search-query.focused {

docs/download.html

@@ -327,6 +327,8 @@
       <input type="text" class="span3" placeholder="transparent">
       <label>@navbarLinkBackgroundActive</label>
       <input type="text" class="span3" placeholder="@navbarBackground">
+      <label>@navbarSearchPlaceholderColor</label>
+      <input type="text" class="span3" placeholder="#ccc">
 
       <h3>Dropdowns</h3>
       <label>@dropdownBackground</label>

docs/templates/pages/download.mustache

@@ -251,6 +251,8 @@
       <input type="text" class="span3" placeholder="transparent">
       <label>@navbarLinkBackgroundActive</label>
       <input type="text" class="span3" placeholder="@navbarBackground">
+      <label>@navbarSearchPlaceholderColor</label>
+      <input type="text" class="span3" placeholder="#ccc">
 
       <h3>{{_i}}Dropdowns{{/i}}</h3>
       <label>@dropdownBackground</label>

less/navbar.less

@@ -127,23 +127,20 @@
     padding: 4px 9px;
     #font > .sans-serif(13px, normal, 1);
     color: @white;
-    color: rgba(255,255,255,.75);
-    background: #666;
-    background: rgba(255,255,255,.3);
-    border: 1px solid #111;
+    background-color: lighten(@navbarBackground, 25%);
+    border: 1px solid darken(@navbarBackground, 15%);
     @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
     .box-shadow(@shadow);
     .transition(none);
 
-    // Placeholder text gets special styles; can't be bundled together though for some reason
-    .placeholder(@grayLighter);
-
-    // Hover states
-    &:hover {
-      color: @white;
-      background-color: @grayLight;
-      background-color: rgba(255,255,255,.5);
+    // Placeholder text gets special styles; can't be a grouped selector
+    &:-moz-placeholder {
+      color: @navbarSearchPlaceholderColor;
+    }
+    &::-webkit-input-placeholder {
+      color: @navbarSearchPlaceholderColor;
     }
+
     // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
     &:focus,
     &.focused {

less/variables.less

@@ -149,6 +149,8 @@
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundActive:      @navbarBackground;
 
+@navbarSearchPlaceholderColor:    #ccc;
+
 
 // Hero unit
 // -------------------------