Bug 1371058 - Override default notification styles in Shield's Hearbeat. r?Mossop
MozReview-Commit-ID: 1llOKu7qS3G
--- 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;
}