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/. */
5 /* === BEGIN downloads.inc.css === */
7 /* In the original, this is at the end of the file as a preprocessor-include */
8 @import url("progressmeter.inc.css");
10 /*** Panel and outer controls ***/
12 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
17 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
18 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
23 background-color: transparent;
31 /* The panel can be wider than this description after the blocked subview is
32 shown, so center the text. */
36 .downloadsPanelFooter {
37 /* background-color: var(--arrowpanel-dimmed);
38 border-top: 1px solid var(--panel-separator-color);*/
41 .downloadsPanelFooter toolbarseparator,
42 richlistitem[type="download"] > toolbarseparator {
46 /* border-left: 1px solid var(--panel-separator-color);
47 -moz-appearance: none;*/
50 .downloadsPanelFooterButton {
54 /* min-height: 40px;*/
58 .downloadsPanelFooterButton:hover {
61 .downloadsPanelFooterButton:hover:active,
62 .downloadsPanelFooterButton[open="true"] {
65 .downloadsPanelFooterButton[default] {
68 .downloadsPanelFooterButton[default]:hover {
71 .downloadsPanelFooterButton[default]:hover:active {
74 .downloadsPanelFooterButton > .button-box {
81 padding-inline-start: 10px;
82 padding-inline-end: 10px;
85 #downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
86 padding-inline-start: 68px;
89 toolbarseparator.downloadsDropmarkerSplitter {
93 richlistitem[type="download"] > toolbarseparator {
97 richlistitem[type="download"]:hover > toolbarseparator,
98 #downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
99 #downloadsFooter[showingdropdown] toolbarseparator {
103 .downloadsDropmarker {
107 .downloadsDropmarker > .button-box > hbox {
111 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
117 .downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
120 /* list-style-image: url("chrome://global/skin/icons/menubutton-dropmarker.svg");
121 filter: url("chrome://global/skin/filters.svg#fill");
122 fill: currentColor;*/
125 /* Override default icon size which is too small for this dropdown */
126 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
132 -moz-user-focus: normal;
135 #downloadsSummary > .downloadTypeIcon {
136 list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
139 #downloadsSummaryDescription {
143 /*** List items and similar elements in the summary ***/
146 richlistitem[type="download"] {
147 height: var(--downloads-item-height);
150 richlistitem[type="download"] {
151 border-bottom: 1px solid var(--panel-separator-color);
152 background: transparent;
156 richlistitem[type="download"]:last-child {
166 .downloadBlockedBadge {
168 background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
171 downloadBlockedBadge:-moz-locale-dir(rtl) {
172 background-position-x: left;
175 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
176 background-image: url("chrome://browser/skin/warning.svg");
179 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
180 background-image: url("chrome://browser/skin/info.svg");
183 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
184 a vbox with class .downloadContainer. We set the font-size of the entire
185 container to --downloads-item-font-size-factor because:
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.
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.
198 font-size: calc(100% * var(--downloads-item-font-size-factor));
199 margin-inline-end: 13px;
202 #downloadsSummaryDescription,
205 font-size: calc(100% / var(--downloads-item-font-size-factor));
208 #downloadsSummaryDetails,
210 opacity: var(--downloads-item-details-opacity);
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);
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. */
221 /* The full status message is only displayed in the Downloads View. */
222 .downloadDetailsFull {
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 {
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 {
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 {
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 {
258 richlistitem[type="download"][verdict] > toolbarseparator {
266 background: transparent;
271 .downloadButton > .button-box > .button-icon {
275 filter: url("chrome://global/skin/filters.svg#fill");
279 .downloadButton > .button-box > .button-text {
280 margin: 0 !important;
284 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
285 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
286 richlistitem[type="download"][verdict]:hover {
287 background-color: var(--arrowpanel-dimmed);
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 {
293 background-color: var(--arrowpanel-dimmed-further);
296 richlistitem[type="download"][showingsubview] {
297 background-color: #794900;
299 transition: background-color var(--panelui-subview-transition-duration),
300 color var(--panelui-subview-transition-duration);
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;
310 /*** Button icons ***/
312 .downloadIconCancel > .button-box > .button-icon {
313 list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel");
316 .downloadIconShow > .button-box > .button-icon {
317 list-style-image: url("chrome://browser/skin/panel-icons.svg#folder");
320 .downloadIconRetry > .button-box > .button-icon {
321 list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
324 .downloadShowBlockedInfo > .button-box > .button-icon {
325 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
328 .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
329 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
332 /*** Blocked subview ***/
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. */
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 {
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");
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");
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;
361 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
362 background-position: calc(100% - 16px) 16px;
365 #downloadsPanel-blockedSubview[verdict=Malware] {
366 background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
369 #downloadsPanel-blockedSubview-title {
372 font-size: calc(100% / var(--downloads-item-font-size-factor));
375 #downloadsPanel-blockedSubview-details1,
376 #downloadsPanel-blockedSubview-details2 {
377 font-size: calc(100% * var(--downloads-item-font-size-factor));
379 opacity: var(--downloads-item-details-opacity);
382 #downloadsPanel-blockedSubview-title,
383 #downloadsPanel-blockedSubview-details1,
384 #downloadsPanel-blockedSubview-details2 {
385 -moz-margin-start: 64px;
386 -moz-margin-end: 16px;
389 /*** Progressmeter ***/
390 /* %include progressmeter.inc.css - this happens as @import at the start of the file */
392 /* === END downloads.inc.css === */
394 /*** Panel and outer controls ***/
396 #downloadsPanel[keyfocus] #downloadsSummary:focus,
397 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
398 outline: 1px #008484 dotted;
399 outline-offset: -1px;
402 #downloadsPanel[keyfocus] #downloadsSummary:focus {
403 outline-offset: -5px;
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);
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%);
421 /*** List items and similar elements in the summary ***/
424 --downloads-item-height: 5.5em;
425 --downloads-item-font-size-factor: 0.9;
426 --downloads-item-details-opacity: 0.6;
429 .downloadButton > .button-box {
430 border: 1px solid transparent;
433 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
434 border: 1px dotted #008484;
437 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
438 list-style-image: url("chrome://global/skin/icons/warning.svg");
441 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
442 list-style-image: url("chrome://global/skin/icons/information-32.png");
445 @media (-moz-windows-default-theme) {
446 richlistitem[type="download"][verdict="Malware"] {
451 /*** Highlighted list items ***/
453 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
454 outline: 1px #008484 dotted;
455 outline-offset: -1px;
456 /*-moz-outline-radius: 3px;*/