Bug 1371058 - Override default notification styles in Shield's Hearbeat. r?Mossop draft
authorMike Cooper <mcooper@mozilla.com>
Fri, 09 Jun 2017 12:09:59 -0700
changeset 591982 54eedb0aeaf43d15c72bc4e71b6733a156592128
parent 590717 6fd10955e89903caf8f92e2c600aa2aa4a2be496
child 632676 d8bf82f572434aa7516854c4c40f569d0b4b7348
push id63231
push userbmo:mcooper@mozilla.com
push dateFri, 09 Jun 2017 19:10:13 +0000
reviewersMossop
bugs1371058
milestone55.0a1
Bug 1371058 - Override default notification styles in Shield's Hearbeat. r?Mossop MozReview-Commit-ID: 1llOKu7qS3G
browser/extensions/shield-recipe-client/skin/osx/Heartbeat.css
browser/extensions/shield-recipe-client/skin/shared/Heartbeat.css
--- a/browser/extensions/shield-recipe-client/skin/osx/Heartbeat.css
+++ b/browser/extensions/shield-recipe-client/skin/osx/Heartbeat.css
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Notification overrides for Heartbeat UI */
 
 notification.heartbeat {
-  background-image: linear-gradient(-179deg, #FBFBFB 0%, #EBEBEB 100%);
-  border-bottom: 1px solid #C1C1C1;
+  background-image: linear-gradient(-179deg, #FBFBFB 0%, #EBEBEB 100%) !important;
+  border-bottom: 1px solid #C1C1C1 !important;
   height: 40px;
 }
 
 /* In themes/osx/global/notification.css the close icon is inverted because notifications
    on OSX are usually dark. Heartbeat is light, so override that behaviour. */
 
 notification.heartbeat[type="info"] .close-icon:not(:hover) {
   -moz-image-region: rect(0, 16px, 16px, 0) !important;
--- a/browser/extensions/shield-recipe-client/skin/shared/Heartbeat.css
+++ b/browser/extensions/shield-recipe-client/skin/shared/Heartbeat.css
@@ -1,23 +1,20 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Notification overrides for Heartbeat UI */
 
 notification.heartbeat {
-  background-color: #F1F1F1;
-  border-bottom: 1px solid #C1C1C1;
+  background-color: #F1F1F1 !important;
+  border-bottom: 1px solid #C1C1C1 !important;
   height: 40px;
 }
 
-/* In themes/osx/global/notification.css the close icon is inverted because notifications
-   on OSX are usually dark. Heartbeat is light, so override that behaviour. */
-
 @keyframes pulse-onshow {
   0% {
     opacity: 0;
     transform: scale(1);
   }
 
   25% {
     opacity: 1;
@@ -47,27 +44,27 @@ notification.heartbeat {
   }
 
   100% {
     transform: scale(1);
   }
 }
 
 .messageText.heartbeat {
-  color: #333;
+  color: #333 !important;
   margin-inline-end: 12px !important; /* The !important is required to override OSX default style. */
   margin-inline-start: 0;
   text-shadow: none;
 }
 
 .messageImage.heartbeat {
-  height: 24px;
-  margin-inline-end: 8px;
-  margin-inline-start: 8px;
-  width: 24px;
+  height: 24px !important;
+  margin-inline-end: 8px !important;
+  margin-inline-start: 8px !important;
+  width: 24px !important;
 }
 
 .messageImage.heartbeat.pulse-onshow {
   animation-duration: 1.5s;
   animation-iteration-count: 1;
   animation-name: pulse-onshow;
   animation-timing-function: cubic-bezier(0.7, 1.8, 0.9, 1.1);
 }
@@ -76,27 +73,27 @@ notification.heartbeat {
   animation-duration: 1s;
   animation-iteration-count: 2;
   animation-name: pulse-twice;
   animation-timing-function: linear;
 }
 
 /* Learn More link styles */
 .heartbeat > .text-link {
-  color: #0095DD;
-  margin-inline-start: 0;
+  color: #0095DD !important;
+  margin-inline-start: 0 !important;
 }
 
 .heartbeat > .text-link:hover {
-  color: #008ACB;
-  text-decoration: none;
+  color: #008ACB !important;
+  text-decoration: none !important;
 }
 
 .heartbeat > .text-link:hover:active {
-  color: #006B9D;
+  color: #006B9D !important;
 }
 
 /* Heartbeat UI Rating Star Classes */
 .heartbeat > #star-rating-container {
   display: -moz-box;
   margin-bottom: 4px;
 }