Commit | Line | Data |
---|---|---|
64897c3a 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 file, | |
3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
5 | /*** Panel and outer controls ***/ | |
6 | ||
64897c3a RK |
7 | #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { |
8 | padding: 0; | |
9 | } | |
10 | ||
11 | #downloadsListBox { | |
64897c3a RK |
12 | background-color: transparent; |
13 | padding: 4px; | |
14 | color: inherit; | |
15 | } | |
16 | ||
990cba4b RK |
17 | #downloadsPanel:not([hasdownloads]) > #downloadsListBox { |
18 | display: none; | |
19 | } | |
20 | ||
64897c3a | 21 | #downloadsHistory { |
64897c3a | 22 | cursor: pointer; |
5968ec68 RK |
23 | margin: 4px !important; |
24 | } | |
25 | ||
26 | #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus { | |
27 | outline: 1px #008484 dotted; | |
28 | outline-offset: -1px; | |
64897c3a RK |
29 | } |
30 | ||
31 | #downloadsHistory > .button-box { | |
5968ec68 | 32 | border: none; |
64897c3a RK |
33 | } |
34 | ||
990cba4b | 35 | /*** Downloads Summary and List items ***/ |
64897c3a | 36 | |
990cba4b | 37 | #downloadsSummary, |
64897c3a RK |
38 | richlistitem[type="download"] { |
39 | height: 7em; | |
990cba4b RK |
40 | -moz-padding-end: 0; |
41 | color: inherit; | |
42 | } | |
43 | ||
44 | #downloadsSummary { | |
45 | padding: 8px 38px 8px 12px; | |
46 | cursor: pointer; | |
5968ec68 RK |
47 | -moz-user-focus: normal; |
48 | } | |
49 | ||
50 | #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus { | |
51 | outline: 1px #008484 dotted; | |
52 | outline-offset: -5px; | |
990cba4b RK |
53 | } |
54 | ||
55 | #downloadsSummary > .downloadTypeIcon { | |
5968ec68 | 56 | list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); |
990cba4b RK |
57 | } |
58 | ||
59 | #downloadsSummaryDescription { | |
5968ec68 | 60 | color: #3333FF; |
990cba4b RK |
61 | } |
62 | ||
63 | richlistitem[type="download"] { | |
64897c3a RK |
64 | margin: 0; |
65 | border-bottom: 1px dotted #9C9CFF; | |
66 | background: transparent; | |
fcfb76ce | 67 | padding: 8px; |
64897c3a RK |
68 | } |
69 | ||
70 | richlistitem[type="download"]:first-child { | |
71 | /* border-top: 1px solid transparent;*/ | |
72 | } | |
73 | ||
74 | #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { | |
75 | outline: 1px #008484 dotted; | |
76 | outline-offset: -1px; | |
b8384c33 | 77 | /*-moz-outline-radius: 3px;*/ |
64897c3a RK |
78 | } |
79 | ||
64897c3a RK |
80 | .downloadTypeIcon { |
81 | -moz-margin-end: 8px; | |
82 | /* Prevent flickering when changing states. */ | |
83 | min-height: 32px; | |
84 | min-width: 32px; | |
85 | } | |
86 | ||
87 | .blockedIcon { | |
88 | list-style-image: url("chrome://global/skin/icons/alert-error.gif"); | |
89 | } | |
90 | ||
5968ec68 RK |
91 | /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of |
92 | a vbox with class .downloadContainer. We set the font-size of the entire | |
93 | container to 90% because: | |
94 | ||
95 | 1) This is the size that we want .downloadDetails to be | |
96 | 2) The container's width is set by localizers by &downloadDetails.width;, | |
97 | which is a ch unit. Since this is the value that should control the | |
98 | panel width, we apply it to the outer container to constrain | |
99 | .downloadTarget and .downloadProgress. | |
100 | ||
101 | Finally, since we want .downloadTarget's font-size to be at 100% of the | |
102 | font-size of .downloadContainer's parent, we use calc to go from the | |
103 | smaller font-size back to the original font-size. | |
104 | */ | |
105 | #downloadsSummaryDetails, | |
106 | .downloadContainer { | |
107 | font-size: 90%; | |
108 | } | |
109 | ||
110 | #downloadsSummaryDescription, | |
64897c3a RK |
111 | .downloadTarget { |
112 | margin-bottom: 6px; | |
113 | cursor: inherit; | |
114 | } | |
115 | ||
5968ec68 RK |
116 | .downloadTarget { |
117 | font-size: calc(100%/0.9); | |
118 | } | |
119 | ||
120 | #downloadsSummaryDetails, | |
64897c3a RK |
121 | .downloadDetails { |
122 | opacity: 0.6; | |
64897c3a RK |
123 | cursor: inherit; |
124 | } | |
125 | ||
126 | .downloadButton { | |
64897c3a RK |
127 | min-width: 0; |
128 | min-height: 0; | |
5968ec68 RK |
129 | margin: 3px; |
130 | /* border: none; */ | |
64897c3a RK |
131 | background: transparent; |
132 | padding: 5px; | |
133 | list-style-image: url("chrome://browser/skin/downloads/buttons.png"); | |
134 | } | |
135 | ||
136 | .downloadButton > .button-box { | |
5968ec68 | 137 | border: 1px solid transparent; |
64897c3a RK |
138 | padding: 0; |
139 | } | |
140 | ||
5968ec68 RK |
141 | #downloadsPanel[keyfocus] .downloadButton:focus > .button-box { |
142 | border: 1px dotted #008484; | |
143 | } | |
144 | ||
64897c3a RK |
145 | /*** Highlighted list items ***/ |
146 | ||
e75098eb | 147 | #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover { |
5968ec68 | 148 | border-radius: 3px; |
64897c3a RK |
149 | background-color: #794900; |
150 | color: #FFCF00; | |
151 | cursor: pointer; | |
152 | } | |
153 | ||
154 | /*** Button icons ***/ | |
155 | ||
156 | .downloadButton.downloadCancel { | |
fcfb76ce | 157 | -moz-image-region: rect(0px, 16px, 16px, 0px); |
64897c3a | 158 | } |
5968ec68 RK |
159 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel, |
160 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover, | |
161 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active { | |
fcfb76ce | 162 | -moz-image-region: rect(0px, 32px, 16px, 16px); |
64897c3a RK |
163 | } |
164 | ||
165 | .downloadButton.downloadShow { | |
fcfb76ce | 166 | -moz-image-region: rect(16px, 16px, 32px, 0px); |
64897c3a | 167 | } |
5968ec68 RK |
168 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow, |
169 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover, | |
170 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active { | |
fcfb76ce | 171 | -moz-image-region: rect(16px, 32px, 32px, 16px); |
64897c3a RK |
172 | } |
173 | ||
174 | .downloadButton.downloadRetry { | |
fcfb76ce | 175 | -moz-image-region: rect(32px, 16px, 48px, 0px); |
64897c3a | 176 | } |
5968ec68 RK |
177 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry, |
178 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover, | |
179 | richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active { | |
fcfb76ce | 180 | -moz-image-region: rect(32px, 32px, 48px, 16px); |
64897c3a RK |
181 | } |
182 | ||
183 | /*** Status and progress indicator ***/ | |
184 | ||
64897c3a | 185 | #downloads-indicator-anchor { |
64897c3a RK |
186 | /* Makes the outermost stack element positioned, so that its contents are |
187 | rendered over the main browser window in the Z order. This is required by | |
188 | the animated event notification. */ | |
189 | position: relative; | |
190 | } | |
191 | ||
192 | /*** Main indicator icon ***/ | |
193 | ||
194 | #downloads-indicator-icon { | |
a736ce46 | 195 | background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), |
64897c3a | 196 | 0, 108, 18, 90) center no-repeat; |
b8384c33 RK |
197 | min-width: 18px; |
198 | min-height: 18px; | |
64897c3a RK |
199 | } |
200 | ||
201 | #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon, | |
7b928026 | 202 | #downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, |
64897c3a | 203 | #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { |
a736ce46 | 204 | background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), |
64897c3a | 205 | 18, 108, 36, 90) center no-repeat; |
e75098eb | 206 | color: #000000; |
64897c3a RK |
207 | } |
208 | ||
5968ec68 RK |
209 | #downloads-indicator-icon:-moz-lwtheme-brighttext { |
210 | /* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), | |
211 | 0, 108, 18, 90) center no-repeat;*/ | |
212 | } | |
213 | ||
64897c3a | 214 | #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { |
990cba4b | 215 | background-image: url("chrome://browser/skin/downloads/download-glow.png"); |
64897c3a RK |
216 | } |
217 | ||
5968ec68 RK |
218 | /* In the next few rules, we use :not([counter]) as a shortcut that is |
219 | equivalent to -moz-any([progress], [paused]). */ | |
220 | ||
64897c3a | 221 | #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { |
a736ce46 | 222 | background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), |
64897c3a RK |
223 | 0, 108, 18, 90) center no-repeat; |
224 | background-size: 12px; | |
225 | } | |
226 | ||
227 | #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
990cba4b | 228 | background-image: url("chrome://browser/skin/downloads/download-glow.png"); |
64897c3a RK |
229 | } |
230 | ||
231 | #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
e75098eb | 232 | #downloads-indicator[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
64897c3a | 233 | #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { |
a736ce46 | 234 | background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), |
64897c3a | 235 | 18, 108, 36, 90) center no-repeat; |
e75098eb | 236 | background-size: 12px; |
64897c3a RK |
237 | } |
238 | ||
5968ec68 | 239 | /*** Download notifications ***/ |
64897c3a RK |
240 | |
241 | #downloads-indicator-notification { | |
242 | opacity: 0; | |
64897c3a | 243 | background-size: 16px; |
5968ec68 RK |
244 | background-position: center; |
245 | background-repeat: no-repeat; | |
64897c3a RK |
246 | } |
247 | ||
5968ec68 | 248 | @keyframes downloadsIndicatorNotificationStartRight { |
71a617ff | 249 | from { opacity: 0; transform: translate(-128px, 128px) scale(8); } |
c29b709d | 250 | 20% { opacity: .85; animation-timing-function: ease-out; } |
71a617ff | 251 | to { opacity: 0; transform: translate(0) scale(1); } |
64897c3a RK |
252 | } |
253 | ||
5968ec68 | 254 | @keyframes downloadsIndicatorNotificationStartLeft { |
71a617ff | 255 | from { opacity: 0; transform: translate(128px, 128px) scale(8); } |
c29b709d | 256 | 20% { opacity: .85; animation-timing-function: ease-out; } |
71a617ff | 257 | to { opacity: 0; transform: translate(0) scale(1); } |
64897c3a RK |
258 | } |
259 | ||
5968ec68 RK |
260 | #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { |
261 | background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); | |
262 | animation-name: downloadsIndicatorNotificationStartRight; | |
c29b709d | 263 | animation-duration: 1s; |
64897c3a RK |
264 | } |
265 | ||
5968ec68 RK |
266 | #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { |
267 | animation-name: downloadsIndicatorNotificationStartLeft; | |
268 | } | |
269 | ||
270 | @keyframes downloadsIndicatorNotificationFinish { | |
271 | from { opacity: 0; transform: scale(1); } | |
272 | 20% { opacity: .65; animation-timing-function: ease-in; } | |
273 | to { opacity: 0; transform: scale(8); } | |
274 | } | |
275 | ||
276 | #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { | |
277 | background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); | |
278 | animation-name: downloadsIndicatorNotificationFinish; | |
279 | animation-duration: 1s; | |
64897c3a RK |
280 | } |
281 | ||
282 | /*** Progress bar and text ***/ | |
283 | ||
284 | #downloads-indicator-counter { | |
990cba4b RK |
285 | height: 9px; |
286 | margin: -3px 0 0; | |
64897c3a | 287 | color: #FFCF00; |
990cba4b RK |
288 | font-size: 9px; |
289 | line-height: 9px; | |
64897c3a RK |
290 | text-align: center; |
291 | } | |
292 | ||
5968ec68 RK |
293 | #downloads-indicator-counter:-moz-lwtheme-brighttext { |
294 | /* color: white; | |
295 | text-shadow: 0 0 1px rgba(0,0,0,.7), | |
296 | 0 1px 1.5px rgba(0,0,0,.5);*/ | |
297 | } | |
298 | ||
e75098eb RK |
299 | #downloads-indicator[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
300 | #downloads-indicator[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
301 | color: #000000; | |
302 | } | |
303 | ||
64897c3a | 304 | #downloads-indicator-progress { |
fcfb76ce | 305 | width: 16px; |
990cba4b | 306 | height: 5px; |
64897c3a RK |
307 | min-width: 0; |
308 | min-height: 0; | |
309 | margin-top: 1px; | |
310 | margin-bottom: 2px; | |
311 | border-radius: 2px; | |
fcfb76ce | 312 | background-color: #795900; |
64897c3a RK |
313 | } |
314 | ||
315 | #downloads-indicator-progress > .progress-bar { | |
316 | -moz-appearance: none; | |
317 | min-width: 0; | |
318 | min-height: 0; | |
319 | background-color: #008484; | |
320 | border-radius: 2px 0 0 2px; | |
321 | } | |
322 | ||
323 | #downloads-indicator-progress > .progress-remainder { | |
324 | min-width: 0; | |
325 | min-height: 0; | |
5968ec68 | 326 | background-color: #A09090; |
64897c3a RK |
327 | border-radius: 0 2px 2px 0; |
328 | } | |
329 | ||
330 | #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { | |
331 | background-color: #8050B0; | |
332 | } | |
333 | ||
334 | #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { | |
5968ec68 | 335 | background-color: #404048; |
64897c3a | 336 | } |
6adbc9a6 RK |
337 | |
338 | toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text { | |
339 | margin: 0; | |
340 | text-align: center; | |
341 | } |