+/* === BEGIN indicator.inc.css === */
+
+#downloads-indicator-progress-icon {
+ background: var(--downloads-indicator-image-attention) bottom no-repeat;
+ background-size: 18px;
+ margin-top: 18px;
+ /* From javascript side we use animation delay from 0s to -100s to show
+ * corresponding frames needed for progress.
+ * animation-delay is set to a positive value to make nothing shown.
+ */
+ animation-play-state: paused;
+ animation-delay: 1s;
+ animation-duration: 100s;
+ animation-timing-function: linear;
+ animation-name: indicatorArrowProgress;
+}
+/*
+toolbar[brighttext] #downloads-indicator-progress-icon {
+ background-image: var(--downloads-indicator-image-attention-inverted);
+ animation-name: indicatorArrowProgressDark;
+}
+*/
+@keyframes indicatorArrowProgress {
+ 0% {
+ margin-top: 12px;
+ filter: brightness(1.2);
+ }
+ 100% {
+ margin-top: 2px;
+ filter: brightness(1);
+ }
+}
+/*
+@keyframes indicatorArrowProgressDark {
+ 0% {
+ margin-top: 12px;
+ filter: brightness(0.7);
+ }
+ 100% {
+ margin-top: 2px;
+ filter: brightness(1);
+ }
+}
+*/
+#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+ animation-name: downloadsIndicatorStartJump;
+ /* Upon changing the overall duration below, please keep the delay time of
+ setTimeout() identical in indicator.js for this animation. */
+ animation-duration: 0.5s;
+ animation-delay: 1s;
+ animation-iteration-count: 2;
+}
+
+@keyframes downloadsIndicatorStartJump {
+ 0% {
+ transform: translateY(0);
+ animation-timing-function: ease-out;
+ }
+ 50% {
+ transform: translateY(-3px);
+ animation-timing-function: ease-in;
+ }
+ 100% {
+ transform: translateY(0);
+ }
+}
+/* === END indicator.inc.css === */
+