mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 11:15:34 +00:00
daf6e74a28
MozReview-Commit-ID: 1EoBfLXyDVN --HG-- extra : rebase_source : 2a44c65eff7122f0c6f2096e6e9dba0be05a778f
71 lines
1.9 KiB
CSS
71 lines
1.9 KiB
CSS
/*** Common-styled progressmeter ***/
|
|
.downloadProgress {
|
|
height: 8px;
|
|
border-radius: 1px;
|
|
margin: 4px 0 0;
|
|
margin-inline-end: 12px;
|
|
|
|
/* for overriding rules in progressmeter.css */
|
|
-moz-appearance: none;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
min-width: initial;
|
|
min-height: initial;
|
|
}
|
|
|
|
.downloadProgress[mode="undetermined"] {
|
|
/* for overriding rules on global.css in Linux. */
|
|
-moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter");
|
|
}
|
|
|
|
.downloadProgress > .progress-bar {
|
|
background-color: Highlight;
|
|
|
|
/* for overriding rules in progressmeter.css */
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
.downloadProgress[paused="true"] > .progress-bar {
|
|
background-color: GrayText;
|
|
}
|
|
|
|
.downloadProgress[mode="undetermined"] > .progress-bar {
|
|
/* Make a white reflecting animation.
|
|
Create a gradient with 2 identical pattern, and enlarge the size to 200%.
|
|
This allows us to animate background-position with percentage. */
|
|
background-image: linear-gradient(90deg, transparent 0%,
|
|
rgba(255,255,255,0.5) 25%,
|
|
transparent 50%,
|
|
rgba(255,255,255,0.5) 75%,
|
|
transparent 100%);
|
|
background-blend-mode: lighten;
|
|
background-size: 200% 100%;
|
|
animation: downloadProgressSlideX 1.5s linear infinite;
|
|
}
|
|
|
|
.downloadProgress > .progress-remainder {
|
|
border: solid ButtonShadow;
|
|
border-block-start-width: 1px;
|
|
border-block-end-width: 1px;
|
|
border-inline-start-width: 0;
|
|
border-inline-end-width: 1px;
|
|
background-color: ButtonFace;
|
|
}
|
|
|
|
.downloadProgress[value="0"] > .progress-remainder {
|
|
border-width: 1px;
|
|
}
|
|
|
|
.downloadProgress > .progress-remainder[mode="undetermined"] {
|
|
border: none;
|
|
}
|
|
|
|
@keyframes downloadProgressSlideX {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: -100% 0;
|
|
}
|
|
}
|