summaryrefslogtreecommitdiffstats
path: root/toolkit/components/normandy/skin/shared/Heartbeat.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /toolkit/components/normandy/skin/shared/Heartbeat.css
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/components/normandy/skin/shared/Heartbeat.css')
-rw-r--r--toolkit/components/normandy/skin/shared/Heartbeat.css106
1 files changed, 106 insertions, 0 deletions
diff --git a/toolkit/components/normandy/skin/shared/Heartbeat.css b/toolkit/components/normandy/skin/shared/Heartbeat.css
new file mode 100644
index 0000000000..21c77bc1a5
--- /dev/null
+++ b/toolkit/components/normandy/skin/shared/Heartbeat.css
@@ -0,0 +1,106 @@
+/* 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 */
+
+@keyframes pulse-onshow {
+ 0% {
+ opacity: 0;
+ transform: scale(1);
+ }
+
+ 25% {
+ opacity: 1;
+ transform: scale(1.1);
+ }
+
+ 50% {
+ transform: scale(1);
+ }
+
+ 75% {
+ transform: scale(1.1);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes pulse-twice {
+ 0% {
+ transform: scale(1.1);
+ }
+
+ 50% {
+ transform: scale(0.8);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+}
+
+.messageImage.heartbeat {
+ /* Needed for the animation to not get clipped when pulsing. */
+ margin-inline: 8px;
+}
+
+.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);
+}
+
+.messageImage.heartbeat.pulse-twice {
+ animation-duration: 1s;
+ animation-iteration-count: 2;
+ animation-name: pulse-twice;
+ animation-timing-function: linear;
+}
+
+/* Learn More link styles */
+.heartbeat > hbox > .text-link {
+ margin-inline-start: 0 !important;
+}
+
+.heartbeat > hbox > .text-link:hover {
+ text-decoration: none !important;
+}
+
+/* Heartbeat UI Rating Star Classes */
+#star-rating-container {
+ display: -moz-box;
+ margin-bottom: 4px;
+}
+
+#star-rating-container > #star5 {
+ -moz-box-ordinal-group: 5;
+}
+
+#star-rating-container > #star4 {
+ -moz-box-ordinal-group: 4;
+}
+
+#star-rating-container > #star3 {
+ -moz-box-ordinal-group: 3;
+}
+
+#star-rating-container > #star2 {
+ -moz-box-ordinal-group: 2;
+}
+
+#star-rating-container > .star-x {
+ background: url("resource://normandy/skin/shared/heartbeat-star-off.svg");
+ cursor: pointer;
+ height: 16px;
+ margin-inline-end: 4px !important; /* Overrides the margin-inline-end for all platforms defined in the .plain class */
+ width: 16px;
+}
+
+#star-rating-container > .star-x:hover,
+#star-rating-container > .star-x:hover ~ .star-x {
+ background: url("resource://normandy/skin/shared/heartbeat-star-lit.svg");
+}