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 | ||
5968ec68 RK |
147 | #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover { |
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 { | |
195 | background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), | |
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 RK |
203 | #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { |
204 | background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), | |
205 | 18, 108, 36, 90) center no-repeat; | |
206 | } | |
207 | ||
5968ec68 RK |
208 | #downloads-indicator-icon:-moz-lwtheme-brighttext { |
209 | /* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), | |
210 | 0, 108, 18, 90) center no-repeat;*/ | |
211 | } | |
212 | ||
64897c3a | 213 | #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { |
990cba4b | 214 | background-image: url("chrome://browser/skin/downloads/download-glow.png"); |
64897c3a RK |
215 | } |
216 | ||
5968ec68 RK |
217 | /* In the next few rules, we use :not([counter]) as a shortcut that is |
218 | equivalent to -moz-any([progress], [paused]). */ | |
219 | ||
64897c3a RK |
220 | #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { |
221 | background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), | |
222 | 0, 108, 18, 90) center no-repeat; | |
223 | background-size: 12px; | |
224 | } | |
225 | ||
226 | #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
990cba4b | 227 | background-image: url("chrome://browser/skin/downloads/download-glow.png"); |
64897c3a RK |
228 | } |
229 | ||
230 | #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
231 | #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
232 | background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), | |
233 | 18, 108, 36, 90) center no-repeat; | |
234 | } | |
235 | ||
5968ec68 | 236 | /*** Download notifications ***/ |
64897c3a RK |
237 | |
238 | #downloads-indicator-notification { | |
239 | opacity: 0; | |
64897c3a | 240 | background-size: 16px; |
5968ec68 RK |
241 | background-position: center; |
242 | background-repeat: no-repeat; | |
64897c3a RK |
243 | } |
244 | ||
5968ec68 | 245 | @keyframes downloadsIndicatorNotificationStartRight { |
71a617ff | 246 | from { opacity: 0; transform: translate(-128px, 128px) scale(8); } |
c29b709d | 247 | 20% { opacity: .85; animation-timing-function: ease-out; } |
71a617ff | 248 | to { opacity: 0; transform: translate(0) scale(1); } |
64897c3a RK |
249 | } |
250 | ||
5968ec68 | 251 | @keyframes downloadsIndicatorNotificationStartLeft { |
71a617ff | 252 | from { opacity: 0; transform: translate(128px, 128px) scale(8); } |
c29b709d | 253 | 20% { opacity: .85; animation-timing-function: ease-out; } |
71a617ff | 254 | to { opacity: 0; transform: translate(0) scale(1); } |
64897c3a RK |
255 | } |
256 | ||
5968ec68 RK |
257 | #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { |
258 | background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); | |
259 | animation-name: downloadsIndicatorNotificationStartRight; | |
c29b709d | 260 | animation-duration: 1s; |
64897c3a RK |
261 | } |
262 | ||
5968ec68 RK |
263 | #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { |
264 | animation-name: downloadsIndicatorNotificationStartLeft; | |
265 | } | |
266 | ||
267 | @keyframes downloadsIndicatorNotificationFinish { | |
268 | from { opacity: 0; transform: scale(1); } | |
269 | 20% { opacity: .65; animation-timing-function: ease-in; } | |
270 | to { opacity: 0; transform: scale(8); } | |
271 | } | |
272 | ||
273 | #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { | |
274 | background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); | |
275 | animation-name: downloadsIndicatorNotificationFinish; | |
276 | animation-duration: 1s; | |
64897c3a RK |
277 | } |
278 | ||
279 | /*** Progress bar and text ***/ | |
280 | ||
281 | #downloads-indicator-counter { | |
990cba4b RK |
282 | height: 9px; |
283 | margin: -3px 0 0; | |
64897c3a | 284 | color: #FFCF00; |
990cba4b RK |
285 | font-size: 9px; |
286 | line-height: 9px; | |
64897c3a RK |
287 | text-align: center; |
288 | } | |
289 | ||
5968ec68 RK |
290 | #downloads-indicator-counter:-moz-lwtheme-brighttext { |
291 | /* color: white; | |
292 | text-shadow: 0 0 1px rgba(0,0,0,.7), | |
293 | 0 1px 1.5px rgba(0,0,0,.5);*/ | |
294 | } | |
295 | ||
64897c3a | 296 | #downloads-indicator-progress { |
fcfb76ce | 297 | width: 16px; |
990cba4b | 298 | height: 5px; |
64897c3a RK |
299 | min-width: 0; |
300 | min-height: 0; | |
301 | margin-top: 1px; | |
302 | margin-bottom: 2px; | |
303 | border-radius: 2px; | |
fcfb76ce | 304 | background-color: #795900; |
64897c3a RK |
305 | } |
306 | ||
307 | #downloads-indicator-progress > .progress-bar { | |
308 | -moz-appearance: none; | |
309 | min-width: 0; | |
310 | min-height: 0; | |
311 | background-color: #008484; | |
312 | border-radius: 2px 0 0 2px; | |
313 | } | |
314 | ||
315 | #downloads-indicator-progress > .progress-remainder { | |
316 | min-width: 0; | |
317 | min-height: 0; | |
5968ec68 | 318 | background-color: #A09090; |
64897c3a RK |
319 | border-radius: 0 2px 2px 0; |
320 | } | |
321 | ||
322 | #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { | |
323 | background-color: #8050B0; | |
324 | } | |
325 | ||
326 | #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { | |
5968ec68 | 327 | background-color: #404048; |
64897c3a | 328 | } |