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