69 lines
1.8 KiB
CSS
69 lines
1.8 KiB
CSS
/* 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/. */
|
|
|
|
#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);
|
|
}
|
|
}
|