263 lines
7.9 KiB
CSS
263 lines
7.9 KiB
CSS
/* 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
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
@import "chrome://browser/skin/downloads/progressmeter.css";
|
|
@import "chrome://browser/skin/downloads/download-blockedStates.css";
|
|
|
|
/*** Panel and outer controls ***/
|
|
|
|
#downloadsHistory {
|
|
border: 0;
|
|
}
|
|
|
|
#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 {
|
|
color: var(--button-text-color-ghost-hover);
|
|
background-color: var(--button-background-color-ghost-hover);
|
|
}
|
|
|
|
#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active,
|
|
#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active,
|
|
#downloadsListBox > richlistitem[verdict]:hover:active,
|
|
.downloadsPanelFooterButton[open="true"] {
|
|
color: var(--button-text-color-ghost-active);
|
|
background-color: var(--button-background-color-ghost-active);
|
|
}
|
|
|
|
#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 {
|
|
list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
|
|
}
|
|
|
|
#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;
|
|
color: var(--button-text-color-ghost);
|
|
background-color: var(--button-background-color-ghost);
|
|
border-radius: 4px;
|
|
--button-background-color-hover: var(--button-background-color-ghost-hover);
|
|
--button-hover-color: var(--button-text-color-ghost-hover);
|
|
--button-background-color-active: var(--button-background-color-ghost-acitve);
|
|
--button-active-color: var(--button-text-color-ghost-active);
|
|
}
|
|
|
|
.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-background-color-hover: SelectedItem;
|
|
--button-hover-color: SelectedItemText;
|
|
--button-background-color-active: ButtonFace;
|
|
--button-active-color: ButtonText;
|
|
}
|
|
}
|
|
|
|
.downloadButton:hover:not(:active) {
|
|
background-color: var(--button-background-color-hover);
|
|
color: var(--button-hover-color);
|
|
border-color: var(--button-background-color-hover);
|
|
}
|
|
.downloadButton:hover:active {
|
|
background-color: var(--button-background-color-active);
|
|
color: var(--button-active-color);
|
|
}
|
|
|
|
/*** Button icons ***/
|
|
|
|
.downloadIconCancel > .button-box > .button-icon {
|
|
list-style-image: url("chrome://global/skin/icons/close.svg");
|
|
}
|
|
|
|
.downloadIconShow > .button-box > .button-icon {
|
|
list-style-image: url("chrome://global/skin/icons/folder.svg");
|
|
}
|
|
|
|
@media (-moz-platform: macos) {
|
|
.downloadIconShow > .button-box > .button-icon {
|
|
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
|
|
}
|
|
}
|
|
|
|
.downloadIconRetry > .button-box > .button-icon {
|
|
list-style-image: url("chrome://global/skin/icons/reload.svg");
|
|
}
|
|
|
|
.downloadIconSubviewArrow > .button-box > .button-icon {
|
|
list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
|
|
}
|
|
|
|
.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) {
|
|
list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
|
|
}
|
|
|
|
/*** 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;
|
|
}
|