diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /toolkit/components/normandy/skin/shared/Heartbeat.css | |
parent | Initial commit. (diff) | |
download | firefox-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.css | 106 |
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"); +} |