Fix notifications appearance on dark header

framework/core/less/forum/NotificationList.less

@@ -17,10 +17,22 @@
       margin: 0;
       color: @muted-color;
     }
-    .Button {
-      float: right;
-      margin-top: -11px;
-      margin-right: -11px;
+  }
+  .Button {
+    float: right;
+    margin-top: -11px;
+    margin-right: -11px;
+
+    // The NotificationList may be displayed inside of the drawer as a
+    // dropdown menu – but the drawer may have .light-contents() applied to
+    // it. In this case we will need to reset the button's styles back to
+    // normal.
+    & when (@config-colored-header = true) {
+      .Button--color(@control-color, @control-bg);
+
+      &:hover {
+        color: @link-color;
+      }
     }
   }
 }

framework/core/less/forum/NotificationsDropdown.less

@@ -34,6 +34,10 @@
   font-weight: bold;
   margin: -2px 0;
   background: @primary-color;
-  color: #fff;
+  color: @body-bg;
   font-size: 13px;
+
+  & when (@config-colored-header = true) {
+    background: #fff;
+  }
 }

framework/core/less/lib/Button.less

@@ -98,7 +98,7 @@
   &:active,
   &.active,
   .open > .Dropdown-toggle& {
-    background-color: darken(@background, 5%);
+    background-color: darken(fadein(@background, 5%), 5%);
   }
 
   &.disabled,

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

@@ -17,11 +17,7 @@
   }
   .Button, .Button:hover {
     color: @control-color;
-  }
-  .Button {
-    &, &:hover {
-      background: @control-bg;
-    }
+    background: @control-bg;
   }
   .Button--flat {
     background: transparent;

framework/core/less/lib/variables.less

@@ -70,16 +70,16 @@
 
 .define-header(@config-colored-header);
 .define-header(false) {
-  @header-bg: @body-bg;
-  @header-color: @primary-color;
-  @header-control-bg: @control-bg;
-  @header-control-color: @control-color;
+  @header-bg:                      @body-bg;
+  @header-color:                   @primary-color;
+  @header-control-bg:              @control-bg;
+  @header-control-color:           @control-color;
 }
 .define-header(true) {
-  @header-bg: @primary-color;
-  @header-color: @body-bg;
-  @header-control-bg: fade(#000, 10%);
-  @header-control-color: @body-bg;
+  @header-bg:                      @primary-color;
+  @header-color:                   @body-bg;
+  @header-control-bg:              fade(#000, 10%);
+  @header-control-color:           @body-bg;
 }
 
 // ---------------------------------