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; | |
120 | /* list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg"); | |
121 | filter: url("chrome://browser/skin/filters.svg#fill"); | |
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 | ||
1cf9b082 RK |
216 | richlistitem[type="download"][verdict] > toolbarseparator { |
217 | visibility: hidden; | |
218 | } | |
219 | ||
64897c3a | 220 | .downloadButton { |
1cf9b082 RK |
221 | min-width: 58px; |
222 | margin: 0; | |
5968ec68 | 223 | /* border: none; */ |
64897c3a | 224 | background: transparent; |
b1d1a8bb RK |
225 | padding: 0; |
226 | color: inherit; | |
64897c3a RK |
227 | } |
228 | ||
1cf9b082 RK |
229 | .downloadButton > .button-box > .button-icon { |
230 | width: 16px; | |
231 | height: 16px; | |
232 | margin: 1px; | |
233 | filter: url("chrome://browser/skin/filters.svg#fill"); | |
234 | fill: currentColor; | |
235 | } | |
236 | ||
237 | .downloadButton > .button-box > .button-text { | |
238 | margin: 0 !important; | |
64897c3a RK |
239 | padding: 0; |
240 | } | |
241 | ||
1cf9b082 RK |
242 | richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover, |
243 | richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover, | |
244 | richlistitem[type="download"][verdict]:hover { | |
b1d1a8bb | 245 | background-color: var(--arrowpanel-dimmed); |
1cf9b082 RK |
246 | } |
247 | ||
248 | richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active, | |
249 | richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active, | |
250 | richlistitem[type="download"][verdict]:hover:active { | |
b1d1a8bb | 251 | background-color: var(--arrowpanel-dimmed-further); |
1cf9b082 RK |
252 | } |
253 | ||
254 | richlistitem[type="download"][showingsubview] { | |
255 | background-color: #794900; | |
256 | color: #FFCF00; | |
257 | transition: background-color var(--panelui-subview-transition-duration), | |
258 | color var(--panelui-subview-transition-duration); | |
259 | } | |
260 | ||
261 | richlistitem[type="download"][verdict="Malware"]:hover, | |
262 | richlistitem[type="download"][verdict="Malware"]:hover:active, | |
263 | richlistitem[type="download"][verdict="Malware"][showingsubview] { | |
264 | background-color: #FF0000; | |
265 | color: #000000; | |
266 | } | |
267 | ||
1cf9b082 RK |
268 | /*** Button icons ***/ |
269 | ||
270 | .downloadIconCancel > .button-box > .button-icon { | |
271 | list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel"); | |
272 | } | |
273 | ||
274 | .downloadIconShow > .button-box > .button-icon { | |
275 | list-style-image: url("chrome://browser/skin/panel-icons.svg#folder"); | |
276 | } | |
277 | ||
278 | .downloadIconRetry > .button-box > .button-icon { | |
279 | list-style-image: url("chrome://browser/skin/panel-icons.svg#retry"); | |
280 | } | |
281 | ||
282 | .downloadShowBlockedInfo > .button-box > .button-icon { | |
283 | list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); | |
284 | } | |
285 | ||
286 | .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) { | |
287 | list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); | |
288 | } | |
289 | ||
db1c5db1 RK |
290 | /*** Blocked subview ***/ |
291 | ||
292 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews { | |
293 | /* When the main view is showing, the shadow on the left edge of the subview is | |
294 | barely visible on the right edge of the main view, so set it to none. */ | |
295 | box-shadow: none; | |
296 | } | |
297 | ||
298 | /* When the subview is showing, turn the download button into an arrow pointing | |
299 | back to the main view. */ | |
300 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton { | |
1cf9b082 RK |
301 | color: #FFCF00; |
302 | } | |
303 | ||
304 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon { | |
305 | list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); | |
db1c5db1 RK |
306 | } |
307 | ||
1cf9b082 RK |
308 | #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) { |
309 | list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); | |
db1c5db1 RK |
310 | } |
311 | ||
312 | #downloadsPanel-blockedSubview { | |
313 | background-image: url("chrome://browser/skin/warning.svg"); | |
314 | background-size: 32px 32px; | |
315 | background-position: 16px 16px; | |
316 | background-repeat: no-repeat; | |
317 | } | |
318 | ||
319 | #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) { | |
320 | background-position: calc(100% - 16px) 16px; | |
321 | } | |
322 | ||
323 | #downloadsPanel-blockedSubview[verdict=Malware] { | |
324 | background-image: url("chrome://browser/skin/downloads/download-blocked.svg"); | |
325 | } | |
326 | ||
327 | #downloadsPanel-blockedSubview-title { | |
328 | margin-top: 16px; | |
329 | margin-bottom: 16px; | |
330 | font-size: calc(100% / var(--downloads-item-font-size-factor)); | |
331 | } | |
332 | ||
333 | #downloadsPanel-blockedSubview-details1, | |
334 | #downloadsPanel-blockedSubview-details2 { | |
335 | font-size: calc(100% * var(--downloads-item-font-size-factor)); | |
336 | margin-bottom: 16px; | |
337 | opacity: var(--downloads-item-details-opacity); | |
338 | } | |
339 | ||
340 | #downloadsPanel-blockedSubview-title, | |
341 | #downloadsPanel-blockedSubview-details1, | |
342 | #downloadsPanel-blockedSubview-details2 { | |
343 | -moz-margin-start: 64px; | |
344 | -moz-margin-end: 16px; | |
345 | } | |
7327c957 | 346 | |
b1d1a8bb RK |
347 | /*** Progressmeter ***/ |
348 | /* %include progressmeter.inc.css - this happens as @import at the start of the file */ | |
349 | ||
7327c957 RK |
350 | /* === END downloads.inc.css === */ |
351 | ||
352 | /*** Panel and outer controls ***/ | |
353 | ||
7327c957 | 354 | #downloadsPanel[keyfocus] #downloadsSummary:focus, |
db1c5db1 | 355 | #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus { |
7327c957 RK |
356 | outline: 1px #008484 dotted; |
357 | outline-offset: -1px; | |
358 | } | |
359 | ||
360 | #downloadsPanel[keyfocus] #downloadsSummary:focus { | |
361 | outline-offset: -5px; | |
362 | } | |
363 | ||
db1c5db1 RK |
364 | richlistitem[type="download"][showingsubview] { |
365 | background-color: Highlight; | |
366 | color: HighlightText; | |
367 | transition: background-color var(--panelui-subview-transition-duration), | |
368 | color var(--panelui-subview-transition-duration); | |
369 | } | |
370 | ||
371 | #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover, | |
372 | #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active, | |
373 | richlistitem[type="download"][showingsubview][verdict="Malware"] { | |
374 | background-color: hsl(4, 82%, 47%); | |
375 | color: white; | |
376 | } | |
377 | ||
378 | ||
7327c957 RK |
379 | /*** List items and similar elements in the summary ***/ |
380 | ||
381 | :root { | |
b1d1a8bb | 382 | --downloads-item-height: 5.5em; |
7327c957 | 383 | --downloads-item-font-size-factor: 0.9; |
7327c957 RK |
384 | --downloads-item-details-opacity: 0.6; |
385 | } | |
386 | ||
387 | .downloadButton > .button-box { | |
388 | border: 1px solid transparent; | |
389 | } | |
390 | ||
5968ec68 RK |
391 | #downloadsPanel[keyfocus] .downloadButton:focus > .button-box { |
392 | border: 1px dotted #008484; | |
393 | } | |
394 | ||
7c1e433b RK |
395 | richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon { |
396 | list-style-image: url("chrome://global/skin/icons/warning.svg"); | |
397 | } | |
398 | ||
399 | richlistitem[type="download"][verdict="Uncommon"] .blockedIcon { | |
400 | list-style-image: url("chrome://global/skin/icons/information-32.png"); | |
401 | } | |
402 | ||
1cf9b082 RK |
403 | @media (-moz-windows-default-theme) { |
404 | richlistitem[type="download"][verdict="Malware"] { | |
405 | color: #FF0000; | |
406 | } | |
407 | } | |
408 | ||
64897c3a RK |
409 | /*** Highlighted list items ***/ |
410 | ||
7327c957 RK |
411 | #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { |
412 | outline: 1px #008484 dotted; | |
413 | outline-offset: -1px; | |
414 | /*-moz-outline-radius: 3px;*/ | |
415 | } |