1 files changed, 266 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..887bb8b60c
--- /dev/null
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -0,0 +1,266 @@
+/* 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: #C50042;
+  /* 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;
+}
+
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails {
+  color: #FF848B;
+}
+
+.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: -moz-nativehyperlinktext;
+}
+
+:root[lwt-popup-brighttext] #downloadsSummaryDescription {
+  color: #75baff; /* --blue-30 */
+}
+
+/*** 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;
+}