Bug 1371058 - Override default notification styles in Shield's Hearbeat. r=mossop
authorMike Cooper <mcooper@mozilla.com>
Fri, 09 Jun 2017 12:09:59 -0700
changeset 413772 d09e630c7054ca6e08200bbfc659784652ac7b3e
parent 413771 675ddaef4e5d0aaee6d03d78a78587d584a73e06
child 413773 f759d63d25b98c4e73a375fa2752b5be442e2435
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmossop
bugs1371058
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;
 }