Fix search box overlapping forum title in some cases. closes #697

- Fix jank in shrinking animation when search box loses focus after overlapping forum title.
- Use solid colors instead of transparent whites/blacks for colored header controls so that search box isn't transparent when it does overlap forum title.
- This also simplifies colored header variables, making them more analogous to the non-colored header variables, and allowing for the removal of some conditional CSS in the notifications dropdown button.

Some more radical changes to header layout (flexbox?) may be made when we implement the new mobile design (#867), but for now this is an acceptable fix.

framework/core/less/forum/NotificationsDropdown.less

@@ -24,11 +24,6 @@
   }
 }
 
-.NotificationsDropdown .Dropdown-toggle .Button-icon {
-  & when (@config-colored-header = true) {
-    color: mix(@header-bg, @header-color);
-  }
-}
 .NotificationsDropdown .Dropdown-toggle.new .Button-icon {
   color: @header-color;
 }
@@ -37,7 +32,7 @@
   position: absolute;
   top: 1px;
   left: 17px;
-  background: @control-color;
+  background: @header-control-color;
   color: @header-bg;
   font-size: 11px;
   font-weight: bold;
@@ -49,10 +44,6 @@
   height: 18px;
   text-align: center;
 
-  & when (@config-colored-header = true) {
-    background: mix(@header-bg, @header-color);
-  }
-
   @media @phone {
     left: 20px;
   }

framework/core/less/lib/Search.less

@@ -2,12 +2,15 @@
   position: relative;
 }
 @media @tablet-up {
-  .Search.focused {
+  .Search {
-    margin-left: -400px;
+    .transition(margin-left 0.4s);
-    .transition(all 0.4s);
 
-    input, .Search-results {
+    &.focused {
-      width: 400px;
+      margin-left: -400px;
+
+      input, .Search-results {
+        width: 400px;
+      }
     }
   }
 }

framework/core/less/lib/mixins/light-contents.less

@@ -1,18 +1,21 @@
 // This is a mixin which styles components (buttons, inputs, etc.) for use on
 // dark backgrounds.
 .light-contents(@color: #fff, @control-bg: fade(#000, 10%), @control-color: #fff) {
-  &, a, .Button--link, .Search-input {
+  &, a {
     color: @color;
   }
+  .Button--link, .Search-input {
+    color: @control-color;
+  }
   .FormControl {
     background: @control-bg;
     border: 0;
     color: @control-color;
-    .placeholder(fade(@control-color, 80%));
+    .placeholder(@control-color);
 
     &:focus {
-      color: @control-color;
+      color: @color;
-      background: fadein(@control-bg, 5%);
+      background: fadein(darken(@control-bg, 5%), 10%);
     }
   }
   .Button, .Button:hover {

framework/core/less/lib/variables.less

@@ -81,8 +81,8 @@
 .define-header(true) {
   @header-bg:                      @primary-color;
   @header-color:                   @body-bg;
-  @header-control-bg:              fade(#000, 10%);
+  @header-control-bg:              mix(#000, @header-bg, 10%);
-  @header-control-color:           @body-bg;
+  @header-control-color:           mix(@body-bg, @header-bg, 60%);
 }
 
 // ---------------------------------