Commit | Line | Data |
---|---|---|
cf264274 RK |
1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
5 | /*** Status and progress indicator ***/ | |
6 | ||
3a0880a9 RK |
7 | #downloads-animation-container { |
8 | min-height: 1px; | |
9 | min-width: 1px; | |
10 | height: 1px; | |
11 | margin-bottom: -1px; | |
12 | /* Makes the outermost animation container element positioned, so that its | |
13 | contents are rendered over the main browser window in the Z order. | |
14 | This is required by the animated event notification. */ | |
cf264274 | 15 | position: relative; |
3a0880a9 RK |
16 | /* The selected tab may overlap #downloads-indicator-notification */ |
17 | z-index: 5; | |
cf264274 RK |
18 | } |
19 | ||
20 | /*** Main indicator icon ***/ | |
21 | ||
c9b0a396 RK |
22 | /*@media not all and (min-resolution: 1.1dppx) {*/ |
23 | #downloads-button { | |
2e389898 RK |
24 | --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180); |
25 | --downloads-indicator-icon-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180); | |
26 | --downloads-indicator-icon-attention: url("chrome://browser/skin/downloads/download-glow.png"); | |
27 | } | |
c9b0a396 | 28 | /*}*/ |
2e389898 RK |
29 | |
30 | ||
cf264274 | 31 | #downloads-indicator-icon { |
2e389898 RK |
32 | background: var(--downloads-indicator-icon) center no-repeat; |
33 | width: 18px; | |
34 | height: 18px; | |
35 | background-size: 18px; | |
cf264274 RK |
36 | } |
37 | ||
00f971bc RK |
38 | #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon, |
39 | #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, | |
40 | #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { | |
2e389898 | 41 | background-image: var(--downloads-indicator-icon-hover); |
cf264274 RK |
42 | color: #000000; |
43 | } | |
44 | ||
589b5528 | 45 | toolbar[brighttext] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon { |
2e389898 | 46 | /* background-image: var(--downloads-indicator-icon-inverted); */ |
cf264274 RK |
47 | } |
48 | ||
00f971bc | 49 | #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { |
2e389898 | 50 | background-image: var(--downloads-indicator-icon-attention); |
cf264274 RK |
51 | } |
52 | ||
45dc7657 RK |
53 | #downloads-button[cui-areatype="menu-panel"][attention] { |
54 | list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); | |
55 | -moz-image-region: auto; | |
56 | } | |
57 | ||
cf264274 RK |
58 | /* In the next few rules, we use :not([counter]) as a shortcut that is |
59 | equivalent to -moz-any([progress], [paused]). */ | |
60 | ||
00f971bc | 61 | #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { |
2e389898 | 62 | background: var(--downloads-indicator-icon) center no-repeat; |
cf264274 RK |
63 | background-size: 12px; |
64 | } | |
65 | ||
00f971bc | 66 | #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { |
2e389898 | 67 | background-image: var(--downloads-indicator-icon-attention); |
cf264274 RK |
68 | } |
69 | ||
00f971bc RK |
70 | #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
71 | #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
72 | #downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
2e389898 | 73 | background-image: var(--downloads-indicator-icon-hover); |
cf264274 RK |
74 | background-size: 12px; |
75 | } | |
76 | ||
77 | /*** Download notifications ***/ | |
78 | ||
79 | #downloads-indicator-notification { | |
80 | opacity: 0; | |
81 | background-size: 16px; | |
82 | background-position: center; | |
83 | background-repeat: no-repeat; | |
3a0880a9 RK |
84 | width: 16px; |
85 | height: 16px; | |
cf264274 RK |
86 | } |
87 | ||
88 | @keyframes downloadsIndicatorNotificationStartRight { | |
89 | from { opacity: 0; transform: translate(-128px, 128px) scale(8); } | |
90 | 20% { opacity: .85; animation-timing-function: ease-out; } | |
91 | to { opacity: 0; transform: translate(0) scale(1); } | |
92 | } | |
93 | ||
94 | @keyframes downloadsIndicatorNotificationStartLeft { | |
95 | from { opacity: 0; transform: translate(128px, 128px) scale(8); } | |
96 | 20% { opacity: .85; animation-timing-function: ease-out; } | |
97 | to { opacity: 0; transform: translate(0) scale(1); } | |
98 | } | |
99 | ||
3a0880a9 | 100 | #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification { |
cf264274 RK |
101 | background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); |
102 | animation-name: downloadsIndicatorNotificationStartRight; | |
103 | animation-duration: 1s; | |
104 | } | |
105 | ||
3a0880a9 | 106 | #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification { |
cf264274 RK |
107 | animation-name: downloadsIndicatorNotificationStartLeft; |
108 | } | |
109 | ||
110 | @keyframes downloadsIndicatorNotificationFinish { | |
111 | from { opacity: 0; transform: scale(1); } | |
112 | 20% { opacity: .65; animation-timing-function: ease-in; } | |
113 | to { opacity: 0; transform: scale(8); } | |
114 | } | |
115 | ||
3a0880a9 | 116 | #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification { |
cf264274 RK |
117 | background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); |
118 | animation-name: downloadsIndicatorNotificationFinish; | |
119 | animation-duration: 1s; | |
120 | } | |
121 | ||
122 | /*** Progress bar and text ***/ | |
123 | ||
124 | #downloads-indicator-counter { | |
125 | height: 9px; | |
126 | margin: -3px 0 0; | |
127 | color: #FFCF00; | |
128 | font-size: 9px; | |
129 | line-height: 9px; | |
130 | text-align: center; | |
131 | } | |
132 | ||
589b5528 | 133 | toolbar[brighttext] #downloads-indicator-counter { |
cf264274 RK |
134 | /* color: white; |
135 | text-shadow: 0 0 1px rgba(0,0,0,.7), | |
136 | 0 1px 1.5px rgba(0,0,0,.5);*/ | |
137 | } | |
138 | ||
00f971bc RK |
139 | #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
140 | #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
cf264274 RK |
141 | color: #000000; |
142 | } | |
143 | ||
144 | #downloads-indicator-progress { | |
145 | width: 16px; | |
146 | height: 5px; | |
147 | min-width: 0; | |
148 | min-height: 0; | |
149 | margin-top: 1px; | |
150 | margin-bottom: 2px; | |
151 | border-radius: 2px; | |
152 | background-color: #795900; | |
153 | } | |
154 | ||
155 | #downloads-indicator-progress > .progress-bar { | |
156 | -moz-appearance: none; | |
157 | min-width: 0; | |
158 | min-height: 0; | |
159 | background-color: #008484; | |
160 | border-radius: 2px 0 0 2px; | |
161 | } | |
162 | ||
163 | #downloads-indicator-progress > .progress-remainder { | |
164 | min-width: 0; | |
165 | min-height: 0; | |
166 | background-color: #A09090; | |
167 | border-radius: 0 2px 2px 0; | |
168 | } | |
169 | ||
00f971bc | 170 | #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { |
cf264274 RK |
171 | background-color: #8050B0; |
172 | } | |
173 | ||
00f971bc | 174 | #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { |
cf264274 RK |
175 | background-color: #404048; |
176 | } | |
177 | ||
3a0880a9 | 178 | toolbar[mode="full"] > #downloads-button > .toolbarbutton-text { |
cf264274 RK |
179 | margin: 0; |
180 | text-align: center; | |
181 | } |