Commit | Line | Data |
---|---|---|
b1d1a8bb RK |
1 | /*** Common-styled progressmeter ***/ |
2 | .downloadProgress { | |
3 | height: 8px; | |
4 | border-radius: 1px; | |
5 | margin: 4px 0 0; | |
6 | margin-inline-end: 12px; | |
7 | ||
8 | /* for overriding rules in progressmeter.css */ | |
9 | -moz-appearance: none; | |
10 | border-style: none; | |
11 | background-color: transparent; | |
12 | min-width: initial; | |
13 | min-height: initial; | |
14 | } | |
15 | ||
16 | .downloadProgress[mode="undetermined"] { | |
17 | /* for overriding rules on global.css in Linux. */ | |
18 | -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter"); | |
19 | } | |
20 | ||
21 | .downloadProgress > .progress-bar { | |
22 | background-color: #008484; | |
23 | ||
24 | /* for overriding rules in progressmeter.css */ | |
25 | -moz-appearance: none; | |
26 | } | |
27 | ||
28 | .downloadProgress[paused="true"] > .progress-bar { | |
29 | background-color: #A09090; | |
30 | } | |
31 | ||
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%, | |
38 | transparent 50%, | |
39 | rgba(255,255,255,0.5) 75%, | |
40 | transparent 100%); | |
41 | background-blend-mode: lighten; | |
42 | background-size: 200% 100%; | |
43 | animation: downloadProgressSlideX 1.5s linear infinite; | |
44 | } | |
45 | ||
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; | |
53 | } | |
54 | ||
55 | .downloadProgress[value="0"] > .progress-remainder { | |
56 | border-width: 1px; | |
57 | } | |
58 | ||
59 | .downloadProgress > .progress-remainder[mode="undetermined"] { | |
60 | border: none; | |
61 | } | |
62 | ||
63 | @keyframes downloadProgressSlideX { | |
64 | 0% { | |
65 | background-position: 0 0; | |
66 | } | |
67 | 100% { | |
68 | background-position: -100% 0; | |
69 | } | |
70 | } |