1 /*** Common-styled progressmeter ***/
6 margin-inline-end: 12px;
8 /* for overriding rules in progressmeter.css */
11 background-color: transparent;
16 .downloadProgress[mode="undetermined"] {
17 /* for overriding rules on global.css in Linux. */
18 -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter");
21 .downloadProgress > .progress-bar {
22 background-color: #008484;
24 /* for overriding rules in progressmeter.css */
25 -moz-appearance: none;
28 .downloadProgress[paused="true"] > .progress-bar {
29 background-color: #A09090;
32 .downloadProgress[mode="undetermined"] > .progress-bar {
33 /* Make a white reflecting animation.
34 Create a gradient with 2 identical pattern, and enlarge the size to 200%.
35 This allows us to animate background-position with percentage. */
36 background-image: linear-gradient(90deg, transparent 0%,
37 rgba(255,255,255,0.5) 25%,
39 rgba(255,255,255,0.5) 75%,
41 background-blend-mode: lighten;
42 background-size: 200% 100%;
43 animation: downloadProgressSlideX 1.5s linear infinite;
46 .downloadProgress > .progress-remainder {
47 border: solid #9C9CFF;
48 border-block-start-width: 1px;
49 border-block-end-width: 1px;
50 border-inline-start-width: 0;
51 border-inline-end-width: 1px;
52 background-color: #000000;
55 .downloadProgress[value="0"] > .progress-remainder {
59 .downloadProgress > .progress-remainder[mode="undetermined"] {
63 @keyframes downloadProgressSlideX {
65 background-position: 0 0;
68 background-position: -100% 0;