1 files changed, 95 insertions, 0 deletions
diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css
new file mode 100644
index 0000000000..5f44720aa3
--- /dev/null
+++ b/browser/themes/shared/downloads/progressmeter.css
@@ -0,0 +1,95 @@
+/* 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/. */
+
+/*** Common-styled progressmeter ***/
+
+:root {
+  --download-progress-fill-color: AccentColor;
+  --download-progress-paused-color: GrayText;
+  --download-progress-flare-color: rgba(255,255,255,0.75);
+}
+
+/* download progress bar is used in contexts which are not LightweightThemeConsumers and
+   do not get the lwt- theme variables. So we duplicate the fallbacks here. */
+:root:-moz-lwtheme {
+  --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224));
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:-moz-lwtheme {
+    --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255));
+  }
+  #contentAreaDownloadsView {
+    --download-progress-fill-color: var(--in-content-item-selected);
+  }
+}
+
+:root[lwt-popup-brighttext] panel,
+toolbar[brighttext]:-moz-lwtheme {
+  --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255));
+}
+
+/*
+ * Styling "html:progress" is limited by the fact that a number of properties
+ * are intentionally locked at the UA stylesheet level. We have to use a border
+ * instead of an outline because the latter would be drawn over the progress
+ * bar and we cannot change its z-index. This means we have to use a negative
+ * margin, except when the value is zero, and adjust the width calculation for
+ * the indeterminate state.
+ */
+
+.downloadProgress {
+  appearance: none;
+  display: flex;
+  margin-block: 5px 1px;
+  /* This value is kinda odd, it's used to align with the edge of the badge,
+   * if shown, which is inside the edge of the image (the image gets 16px
+   * margin). */
+  margin-inline-end: 18px;
+  border: none;
+  height: 4px;
+  border-radius: 2px;
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+/* Ensure we have contrast in selected download items */
+#downloadsListBox.allDownloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar {
+  --download-progress-fill-color: currentColor;
+  --download-progress-flare-color: AccentColor;
+}
+
+.downloadProgress::-moz-progress-bar {
+  appearance: none;
+  background-color: var(--download-progress-fill-color);
+  border-radius: 2px;
+}
+
+.downloadProgress[paused]::-moz-progress-bar {
+  background-color: var(--download-progress-paused-color);
+}
+
+.downloadProgress:indeterminate::-moz-progress-bar {
+  width: calc(100% + 2px);
+  /* Make a white reflecting animation.
+     Create a gradient with 2 identical patterns, and enlarge the size to 200%.
+     This allows us to animate background-position with percentage. */
+  background-color: var(--download-progress-fill-color);
+  background-image: linear-gradient(90deg, transparent 0%,
+                                           var(--download-progress-flare-color) 25%,
+                                           transparent 50%,
+                                           var(--download-progress-flare-color) 75%,
+                                           transparent 100%);
+  background-blend-mode: normal;
+  background-size: 200% 100%;
+  animation: downloadProgressSlideX 1.5s linear infinite;
+}
+
+@keyframes downloadProgressSlideX {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}