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 | ||
7327c957 RK |
5 | /* === BEGIN downloads.inc.css === */ |
6 | ||
b1d1a8bb RK |
7 | /* In the original, this is at the end of the file as a preprocessor-include */ |
8 | @import url("progressmeter.inc.css"); | |
9 | ||
64897c3a RK |
10 | /*** Panel and outer controls ***/ |
11 | ||
64897c3a | 12 | #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { |
db1c5db1 RK |
13 | overflow: hidden; |
14 | display: block; | |
15 | } | |
16 | ||
17 | #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent, | |
18 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { | |
64897c3a RK |
19 | padding: 0; |
20 | } | |
21 | ||
22 | #downloadsListBox { | |
64897c3a | 23 | background-color: transparent; |
64897c3a | 24 | color: inherit; |
d23bf94a | 25 | margin: 0; |
64897c3a RK |
26 | } |
27 | ||
db1c5db1 | 28 | #emptyDownloads { |
d23bf94a RK |
29 | padding: 16px 25px; |
30 | margin: 0; | |
db1c5db1 RK |
31 | /* The panel can be wider than this description after the blocked subview is |
32 | shown, so center the text. */ | |
33 | text-align: center; | |
990cba4b RK |
34 | } |
35 | ||
db1c5db1 | 36 | .downloadsPanelFooter { |
d23bf94a RK |
37 | /* background-color: var(--arrowpanel-dimmed); |
38 | border-top: 1px solid var(--panel-separator-color);*/ | |
589b5528 RK |
39 | } |
40 | ||
1cf9b082 RK |
41 | .downloadsPanelFooter toolbarseparator, |
42 | richlistitem[type="download"] > toolbarseparator { | |
db1c5db1 RK |
43 | margin: 0; |
44 | border: 0; | |
45 | min-width: 0; | |
d23bf94a RK |
46 | /* border-left: 1px solid var(--panel-separator-color); |
47 | -moz-appearance: none;*/ | |
db1c5db1 RK |
48 | } |
49 | ||
50 | .downloadsPanelFooterButton { | |
51 | margin: 0; | |
52 | padding: 0; | |
d23bf94a | 53 | min-width: 0; |
db1c5db1 | 54 | /* min-height: 40px;*/ |
d23bf94a | 55 | border: none; |
db1c5db1 RK |
56 | } |
57 | ||
58 | .downloadsPanelFooterButton:hover { | |
59 | } | |
60 | ||
d23bf94a RK |
61 | .downloadsPanelFooterButton:hover:active, |
62 | .downloadsPanelFooterButton[open="true"] { | |
db1c5db1 RK |
63 | } |
64 | ||
65 | .downloadsPanelFooterButton[default] { | |
66 | } | |
67 | ||
68 | .downloadsPanelFooterButton[default]:hover { | |
69 | } | |
70 | ||
71 | .downloadsPanelFooterButton[default]:hover:active { | |
589b5528 RK |
72 | } |
73 | ||
d23bf94a RK |
74 | .downloadsPanelFooterButton > .button-box { |
75 | padding: 0; | |
76 | margin: 0; | |
77 | border: none; | |
78 | } | |
79 | ||
80 | #downloadsHistory { | |
81 | padding-inline-start: 10px; | |
82 | padding-inline-end: 10px; | |
83 | } | |
84 | ||
85 | #downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory { | |
86 | padding-inline-start: 68px; | |
87 | } | |
88 | ||
89 | toolbarseparator.downloadsDropmarkerSplitter { | |
90 | margin: 7px 0; | |
91 | } | |
92 | ||
1cf9b082 RK |
93 | richlistitem[type="download"] > toolbarseparator { |
94 | margin: 10px 0; | |
95 | } | |
96 | ||
97 | richlistitem[type="download"]:hover > toolbarseparator, | |
d23bf94a RK |
98 | #downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter, |
99 | #downloadsFooter[showingdropdown] toolbarseparator { | |
100 | margin: 0; | |
101 | } | |
102 | ||
103 | .downloadsDropmarker { | |
104 | padding: 0 21px; | |
105 | } | |
106 | ||
107 | .downloadsDropmarker > .button-box > hbox { | |
108 | display: none; | |
109 | } | |
110 | ||
111 | .downloadsDropmarker > .button-box > .button-menu-dropmarker { | |
112 | display: -moz-box; | |
113 | padding: 0; | |
114 | margin: 0; | |
115 | } | |
116 | ||
117 | .downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon { | |
118 | width: 16px; | |
119 | height: 16px; | |
fa981c35 | 120 | /* list-style-image: url("chrome://global/skin/icons/menubutton-dropmarker.svg"); |
0282321d | 121 | filter: url("chrome://global/skin/filters.svg#fill"); |
d23bf94a RK |
122 | fill: currentColor;*/ |
123 | } | |
124 | ||
125 | /* Override default icon size which is too small for this dropdown */ | |
126 | .downloadsDropmarker > .button-box > .button-menu-dropmarker { | |
127 | width: 16px; | |
128 | height: 16px; | |
129 | } | |
130 | ||
7327c957 | 131 | #downloadsSummary { |
7327c957 | 132 | -moz-user-focus: normal; |
64897c3a RK |
133 | } |
134 | ||
7327c957 | 135 | #downloadsSummary > .downloadTypeIcon { |
d23bf94a | 136 | list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); |
64897c3a RK |
137 | } |
138 | ||
7327c957 RK |
139 | #downloadsSummaryDescription { |
140 | color: #3333FF; | |
649b5d38 RK |
141 | } |
142 | ||
7327c957 | 143 | /*** List items and similar elements in the summary ***/ |
64897c3a | 144 | |
990cba4b | 145 | #downloadsSummary, |
64897c3a | 146 | richlistitem[type="download"] { |
7327c957 | 147 | height: var(--downloads-item-height); |
990cba4b RK |
148 | } |
149 | ||
990cba4b | 150 | richlistitem[type="download"] { |
1cf9b082 | 151 | border-bottom: 1px solid var(--panel-separator-color); |
64897c3a | 152 | background: transparent; |
b1d1a8bb | 153 | color: inherit; |
64897c3a RK |
154 | } |
155 | ||
1cf9b082 RK |
156 | richlistitem[type="download"]:last-child { |
157 | border-bottom: none; | |
158 | } | |
159 | ||
64897c3a | 160 | .downloadTypeIcon { |
b1d1a8bb | 161 | margin: 8px 13px; |
a6757852 | 162 | width: 32px; |
db1c5db1 RK |
163 | height: 32px; |
164 | } | |
165 | ||
166 | .downloadBlockedBadge { | |
b1d1a8bb | 167 | margin: 0 5px; |
db1c5db1 RK |
168 | background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; |
169 | } | |
170 | ||
171 | downloadBlockedBadge:-moz-locale-dir(rtl) { | |
172 | background-position-x: left; | |
64897c3a RK |
173 | } |
174 | ||
db1c5db1 RK |
175 | richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge { |
176 | background-image: url("chrome://browser/skin/warning.svg"); | |
177 | } | |
178 | ||
179 | richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge { | |
180 | background-image: url("chrome://browser/skin/info.svg"); | |
64897c3a RK |
181 | } |
182 | ||
5968ec68 RK |
183 | /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of |
184 | a vbox with class .downloadContainer. We set the font-size of the entire | |
7327c957 | 185 | container to --downloads-item-font-size-factor because: |
5968ec68 RK |
186 | |
187 | 1) This is the size that we want .downloadDetails to be | |
188 | 2) The container's width is set by localizers by &downloadDetails.width;, | |
189 | which is a ch unit. Since this is the value that should control the | |
190 | panel width, we apply it to the outer container to constrain | |
191 | .downloadTarget and .downloadProgress. | |
192 | ||
193 | Finally, since we want .downloadTarget's font-size to be at 100% of the | |
194 | font-size of .downloadContainer's parent, we use calc to go from the | |
195 | smaller font-size back to the original font-size. | |
196 | */ | |
5968ec68 | 197 | .downloadContainer { |
7327c957 | 198 | font-size: calc(100% * var(--downloads-item-font-size-factor)); |
b1d1a8bb | 199 | margin-inline-end: 13px; |
5968ec68 RK |
200 | } |
201 | ||
202 | #downloadsSummaryDescription, | |
64897c3a | 203 | .downloadTarget { |
b1d1a8bb | 204 | margin: 0; |
7327c957 | 205 | font-size: calc(100% / var(--downloads-item-font-size-factor)); |
5968ec68 RK |
206 | } |
207 | ||
208 | #downloadsSummaryDetails, | |
64897c3a | 209 | .downloadDetails { |
7327c957 | 210 | opacity: var(--downloads-item-details-opacity); |
b1d1a8bb RK |
211 | /* Use calc() to keep the height consistent with .downloadTarget, so that the |
212 | progress bar can be vertically centered. */ | |
213 | margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em); | |
64897c3a RK |
214 | } |
215 | ||
b1ab79d5 RK |
216 | /* The following rules control which message is shown under the name of the |
217 | download, using a set of elements that share the class ".downloadDetails". | |
218 | At any given time, only one of these elements is displayed. We use a set of | |
219 | rules to hide the elements that shouldn't be displayed in each case. */ | |
220 | ||
221 | /* The full status message is only displayed in the Downloads View. */ | |
222 | .downloadDetailsFull { | |
223 | display: none; | |
224 | } | |
225 | ||
226 | /* When hovering the mouse pointer over the item, instead of the normal message | |
227 | we display a more detailed one. */ | |
228 | richlistitem[type="download"]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, | |
229 | richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover { | |
230 | display: none; | |
231 | } | |
232 | ||
233 | /* When hovering the action button in particular, instead of the usual hover | |
234 | message we display the command associated with the button. */ | |
235 | richlistitem[type="download"].downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover, | |
236 | richlistitem[type="download"]:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadButtonLabels { | |
237 | display: none; | |
238 | } | |
239 | ||
240 | /* When hovering the main area of a finished download whose target exists, | |
241 | instead of the usual hover message we display the "Open File" command. */ | |
242 | richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover > .downloadContainer > .downloadDetailsHover, | |
243 | richlistitem[type="download"]:not([state="1"]) > .downloadMainArea > .downloadContainer > .downloadOpenFile, | |
244 | richlistitem[type="download"]:not([exists]) > .downloadMainArea > .downloadContainer > .downloadOpenFile, | |
245 | .downloadMainArea:not(:hover) > .downloadContainer > .downloadOpenFile { | |
246 | display: none; | |
247 | } | |
248 | ||
249 | /* When hovering items blocked by Application Reputation, instead of the other | |
250 | hover messages we display the "Show more information" label. */ | |
251 | richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadDetailsHover, | |
252 | richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadButtonLabels, | |
253 | richlistitem[type="download"]:not([verdict]) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo, | |
254 | richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo { | |
255 | display: none; | |
256 | } | |
257 | ||
1cf9b082 RK |
258 | richlistitem[type="download"][verdict] > toolbarseparator { |
259 | visibility: hidden; | |
260 | } | |
261 | ||
64897c3a | 262 | .downloadButton { |
1cf9b082 RK |
263 | min-width: 58px; |
264 | margin: 0; | |
5968ec68 | 265 | /* border: none; */ |
64897c3a | 266 | background: transparent; |
b1d1a8bb RK |
267 | padding: 0; |
268 | color: inherit; | |
64897c3a RK |
269 | } |
270 | ||
1cf9b082 RK |
271 | .downloadButton > .button-box > .button-icon { |
272 | width: 16px; | |
273 | height: 16px; | |
274 | margin: 1px; | |
0282321d | 275 | filter: url("chrome://global/skin/filters.svg#fill"); |
1cf9b082 RK |
276 | fill: currentColor; |
277 | } | |
278 | ||
279 | .downloadButton > .button-box > .button-text { | |
280 | margin: 0 !important; | |
64897c3a RK |
281 | padding: 0; |
282 | } | |
283 | ||
1cf9b082 RK |
284 | richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover, |
285 | richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover, | |
286 | richlistitem[type="download"][verdict]:hover { | |
b1d1a8bb | 287 | background-color: var(--arrowpanel-dimmed); |
1cf9b082 RK |
288 | } |
289 | ||
290 | richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active, | |
291 | richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active, | |
292 | richlistitem[type="download"][verdict]:hover:active { | |
b1d1a8bb | 293 | background-color: var(--arrowpanel-dimmed-further); |
1cf9b082 RK |
294 | } |
295 | ||
296 | richlistitem[type="download"][showingsubview] { | |
297 | background-color: #794900; | |
298 | color: #FFCF00; | |
299 | transition: background-color var(--panelui-subview-transition-duration), | |
300 | color var(--panelui-subview-transition-duration); | |
301 | } | |
302 | ||
303 | richlistitem[type="download"][verdict="Malware"]:hover, | |
304 | richlistitem[type="download"][verdict="Malware"]:hover:active, | |
305 | richlistitem[type="download"][verdict="Malware"][showingsubview] { | |
306 | background-color: #FF0000; | |
307 | color: #000000; | |
308 | } | |
309 | ||
1cf9b082 RK |
310 | /*** Button icons ***/ |
311 | ||
312 | .downloadIconCancel > .button-box > .button-icon { | |
313 | list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel"); | |
314 | } | |
315 | ||
316 | .downloadIconShow > .button-box > .button-icon { | |
317 | list-style-image: url("chrome://browser/skin/panel-icons.svg#folder"); | |
318 | } | |
319 | ||
320 | .downloadIconRetry > .button-box > .button-icon { | |
321 | list-style-image: url("chrome://browser/skin/panel-icons.svg#retry"); | |
322 | } | |
323 | ||
324 | .downloadShowBlockedInfo > .button-box > .button-icon { | |
325 | list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); | |
326 | } | |
327 | ||
328 | .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) { | |
329 | list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); | |
330 | } | |
331 | ||
db1c5db1 RK |
332 | /*** Blocked subview ***/ |
333 | ||
334 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews { | |
335 | /* When the main view is showing, the shadow on the left edge of the subview is | |
336 | barely visible on the right edge of the main view, so set it to none. */ | |
337 | box-shadow: none; | |
338 | } | |
339 | ||
340 | /* When the subview is showing, turn the download button into an arrow pointing | |
341 | back to the main view. */ | |
342 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton { | |
1cf9b082 RK |
343 | color: #FFCF00; |
344 | } | |
345 | ||
346 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon { | |
347 | list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); | |
db1c5db1 RK |
348 | } |
349 | ||
1cf9b082 RK |
350 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) { |
351 | list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); | |
db1c5db1 RK |
352 | } |
353 | ||
354 | #downloadsPanel-blockedSubview { | |
355 | background-image: url("chrome://browser/skin/warning.svg"); | |
356 | background-size: 32px 32px; | |
357 | background-position: 16px 16px; | |
358 | background-repeat: no-repeat; | |
359 | } | |
360 | ||
361 | #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) { | |
362 | background-position: calc(100% - 16px) 16px; | |
363 | } | |
364 | ||
365 | #downloadsPanel-blockedSubview[verdict=Malware] { | |
366 | background-image: url("chrome://browser/skin/downloads/download-blocked.svg"); | |
367 | } | |
368 | ||
369 | #downloadsPanel-blockedSubview-title { | |
370 | margin-top: 16px; | |
371 | margin-bottom: 16px; | |
372 | font-size: calc(100% / var(--downloads-item-font-size-factor)); | |
373 | } | |
374 | ||
375 | #downloadsPanel-blockedSubview-details1, | |
376 | #downloadsPanel-blockedSubview-details2 { | |
377 | font-size: calc(100% * var(--downloads-item-font-size-factor)); | |
378 | margin-bottom: 16px; | |
379 | opacity: var(--downloads-item-details-opacity); | |
380 | } | |
381 | ||
382 | #downloadsPanel-blockedSubview-title, | |
383 | #downloadsPanel-blockedSubview-details1, | |
384 | #downloadsPanel-blockedSubview-details2 { | |
385 | -moz-margin-start: 64px; | |
386 | -moz-margin-end: 16px; | |
387 | } | |
7327c957 | 388 | |
b1d1a8bb RK |
389 | /*** Progressmeter ***/ |
390 | /* %include progressmeter.inc.css - this happens as @import at the start of the file */ | |
391 | ||
7327c957 RK |
392 | /* === END downloads.inc.css === */ |
393 | ||
394 | /*** Panel and outer controls ***/ | |
395 | ||
7327c957 | 396 | #downloadsPanel[keyfocus] #downloadsSummary:focus, |
db1c5db1 | 397 | #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus { |
7327c957 RK |
398 | outline: 1px #008484 dotted; |
399 | outline-offset: -1px; | |
400 | } | |
401 | ||
402 | #downloadsPanel[keyfocus] #downloadsSummary:focus { | |
403 | outline-offset: -5px; | |
404 | } | |
405 | ||
db1c5db1 RK |
406 | richlistitem[type="download"][showingsubview] { |
407 | background-color: Highlight; | |
408 | color: HighlightText; | |
409 | transition: background-color var(--panelui-subview-transition-duration), | |
410 | color var(--panelui-subview-transition-duration); | |
411 | } | |
412 | ||
413 | #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover, | |
414 | #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active, | |
415 | richlistitem[type="download"][showingsubview][verdict="Malware"] { | |
416 | background-color: hsl(4, 82%, 47%); | |
417 | color: white; | |
418 | } | |
419 | ||
420 | ||
7327c957 RK |
421 | /*** List items and similar elements in the summary ***/ |
422 | ||
423 | :root { | |
b1d1a8bb | 424 | --downloads-item-height: 5.5em; |
7327c957 | 425 | --downloads-item-font-size-factor: 0.9; |
7327c957 RK |
426 | --downloads-item-details-opacity: 0.6; |
427 | } | |
428 | ||
429 | .downloadButton > .button-box { | |
430 | border: 1px solid transparent; | |
431 | } | |
432 | ||
5968ec68 RK |
433 | #downloadsPanel[keyfocus] .downloadButton:focus > .button-box { |
434 | border: 1px dotted #008484; | |
435 | } | |
436 | ||
7c1e433b RK |
437 | richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon { |
438 | list-style-image: url("chrome://global/skin/icons/warning.svg"); | |
439 | } | |
440 | ||
441 | richlistitem[type="download"][verdict="Uncommon"] .blockedIcon { | |
442 | list-style-image: url("chrome://global/skin/icons/information-32.png"); | |
443 | } | |
444 | ||
1cf9b082 RK |
445 | @media (-moz-windows-default-theme) { |
446 | richlistitem[type="download"][verdict="Malware"] { | |
447 | color: #FF0000; | |
448 | } | |
449 | } | |
450 | ||
64897c3a RK |
451 | /*** Highlighted list items ***/ |
452 | ||
7327c957 RK |
453 | #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { |
454 | outline: 1px #008484 dotted; | |
455 | outline-offset: -1px; | |
456 | /*-moz-outline-radius: 3px;*/ | |
457 | } |