Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/*** Panel and outer controls ***/
#downloadsListBox {
background: transparent;
color: inherit;
appearance: none;
border: 0;
margin: 0;
/* We have an explicit width set by l10n, but we still want to fill our
* container if it's wider. */
min-width: 100%;
}
@media not (prefers-contrast) {
#downloadsListBox[disabled] {
opacity: var(--downloads-item-disabled-opacity) !important;
}
}
@media (prefers-contrast) {
#downloadsListBox[disabled] {
color: GrayText;
}
}
#emptyDownloads {
padding: 1.5em 8px 2.1em;
margin: 0;
pointer-events: none;
}
#downloadsListBox > richlistitem {
/* Leave space for the 32x32 icon with 16px vertical padding, and/or
* the text in the item, with the same padding, whichever is bigger: */
min-height: max(48px, calc(16px + 2em));
padding-inline-end: 4px;
margin: 0 0 8px;
border-radius: 4px;
}
.downloadMainArea {
padding-block: 8px;
padding-inline-start: 4px;
border-radius: 4px;
}
#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover,
#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover,
#downloadsListBox > richlistitem[verdict]:hover,
#downloadsListBox > richlistitem.openWhenFinished:hover,
.downloadsPanelFooterButton:hover {
background-color: var(--panel-item-hover-bgcolor);
}
#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active,
#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active,
#downloadsListBox > richlistitem[verdict]:hover:active,
.downloadsPanelFooterButton[open="true"] {
background-color: var(--panel-item-active-bgcolor);
}
#downloadsListBox:focus-visible > richlistitem[selected],
#downloadsListBox[force-focus-visible]:focus > richlistitem[selected],
.downloadButton:focus-visible,
#downloadsSummary:focus-visible,
.downloadsPanelFooterButton:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
#downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails,
#downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails {
color: var(--text-color-error);
/* The details text usually gets an opacity reduction, but for the error
states we disable that, because it would reduce the contrast too much. */
opacity: inherit;
}
.downloadTypeIcon {
margin-inline-end: 0.7em;
}
#downloadsPanel-blockedSubview-buttons {
margin-top: 1.5em;
}
#downloadsSummary {
background: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
/* Reserve the same space as the button and separator in download items. */
padding-inline-end: 59px;
-moz-user-focus: normal;
}
#downloadsSummary > .downloadTypeIcon {
}
#downloadsSummaryDescription {
color: var(--link-color);
}
/*** List items and similar elements in the summary ***/
#downloadsSummary {
min-height: var(--downloads-item-height);
}
#downloadsListBox > richlistitem {
background: transparent;
color: inherit;
}
#downloadsListBox > richlistitem:last-child {
margin-bottom: 0;
}
.downloadTypeIcon {
width: 32px;
height: 32px;
}
#downloadsSummaryDescription,
.downloadTarget {
margin: 0;
}
#downloadsSummaryDetails,
.downloadDetails {
font-size: calc(100% * var(--downloads-item-font-size-factor));
opacity: var(--downloads-item-details-opacity);
/* Use calc() to keep the height consistent with .downloadTarget, so that the
progress bar can be vertically centered. */
margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
}
/* When hovering the mouse pointer over the item, instead of the normal message
we display a more detailed one. For blocked downloads the entire area shows
the hover message, for other downloads only the main area does. */
#downloadsListBox > richlistitem[verdict]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
#downloadsListBox > richlistitem[verdict]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
.downloadMainArea:hover > .downloadContainer > .downloadDetailsNormal,
#downloadsListBox > richlistitem:not([verdict]) > .downloadMainArea:not(:hover) > .downloadContainer > .downloadDetailsHover {
display: none;
}
/* When hovering the action button in particular, instead of the usual hover
message we display the command associated with the button. */
#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
#downloadsListBox > richlistitem:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadDetailsButtonHover {
display: none;
}
.downloadButton {
appearance: none;
min-width: 32px;
height: 32px;
margin: 0;
margin-inline-start: 4px;
border: 1px solid transparent;
padding: 0;
background: transparent;
color: inherit;
border-radius: 4px;
--button-hover-bgcolor: var(--panel-item-hover-bgcolor);
--button-hover-color: inherit;
--button-active-bgcolor: var(--panel-item-active-bgcolor);
--button-active-color: inherit;
}
.downloadButton > .button-box > .button-icon {
width: 16px;
height: 16px;
margin: 1px;
-moz-context-properties: fill;
fill: currentColor;
}
.downloadButton > .button-box > .button-text {
margin: 0 !important;
padding: 0;
}
@media (prefers-contrast) {
.downloadButton {
background-color: ButtonFace;
color: ButtonText;
border-color: currentColor;
--button-hover-bgcolor: SelectedItem;
--button-hover-color: SelectedItemText;
--button-active-bgcolor: ButtonFace;
--button-active-color: ButtonText;
}
}
.downloadButton:hover:not(:active) {
background-color: var(--button-hover-bgcolor);
color: var(--button-hover-color);
border-color: var(--button-hover-bgcolor);
}
.downloadButton:hover:active {
background-color: var(--button-active-bgcolor);
color: var(--button-active-color);
}
/*** Button icons ***/
.downloadIconCancel > .button-box > .button-icon {
}
.downloadIconShow > .button-box > .button-icon {
}
@media (-moz-platform: macos) {
.downloadIconShow > .button-box > .button-icon {
}
}
.downloadIconRetry > .button-box > .button-icon {
}
.downloadIconSubviewArrow > .button-box > .button-icon {
}
.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) {
}
/*** Blocked subview ***/
#downloadsPanel-blockedSubview-title {
font-size: calc(100% * var(--downloads-item-font-size-factor));
margin-bottom: 1.5em;
}
#downloadsPanel-blockedSubview-details1,
#downloadsPanel-blockedSubview-details2 {
font-size: calc(100% * var(--downloads-item-font-size-factor));
margin-bottom: 0.5em;
opacity: var(--downloads-item-details-opacity);
}
/*** Toolbarseparator ***/
#downloadsFooterButtons > toolbarseparator {
margin-inline: 0;
}