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