summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/downloads/downloads.inc.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/downloads/downloads.inc.css')
-rw-r--r--browser/themes/shared/downloads/downloads.inc.css257
1 files changed, 257 insertions, 0 deletions
diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css
new file mode 100644
index 0000000000..b835b1cac2
--- /dev/null
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -0,0 +1,257 @@
+/* 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 ***/
+
+#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 {
+ 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;
+ 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 {
+ 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;
+}