--- a/browser/themes/linux/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/linux/downloads/allDownloadsViewOverlay.css
@@ -1,58 +1,24 @@
 /* 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/. */
 
 %include ../../shared/downloads/allDownloadsViewOverlay.inc.css
 
-#downloadsRichListBox {
-  /** The default listbox appearance comes with an unwanted margin. **/
-  -moz-appearance: none;
-  margin: 0;
-}
+/*** List items ***/
 
-#downloadsRichListBox > richlistitem.download {
-  height: 5em;
-  padding: 5px 8px;
-}
-
-.downloadTypeIcon {
-  -moz-margin-end: 8px;
-  /* Prevent flickering when changing states. */
-  min-height: 32px;
-  min-width: 32px;
+:root {
+  --downloads-item-height: 5em;
 }
 
 .blockedIcon {
   list-style-image: url("moz-icon://stock/gtk-dialog-error?size=dialog");
 }
 
-.downloadTarget {
-  margin-bottom: 3px;
-  cursor: inherit;
-}
-
-.downloadDetails {
-  opacity: 0.7;
-  font-size: 95%;
-  cursor: inherit;
-}
-
-.downloadButton {
-  -moz-appearance: none;
-  background: transparent;
-  min-width: 0;
-  min-height: 0;
-  margin: 3px;
-  border: none;
-  padding: 5px;
-  list-style-image: url("chrome://browser/skin/downloads/buttons.png");
-}
-
 /*** Button icons ***/
 
 .downloadButton.downloadConfirmBlock,
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 richlistitem.download:hover > .downloadButton.downloadConfirmBlock,
 richlistitem.download:hover > .downloadButton.downloadCancel {

--- a/browser/themes/osx/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/osx/downloads/allDownloadsViewOverlay.css
@@ -1,56 +1,18 @@
 /* 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/. */
 
 %include ../../shared/downloads/allDownloadsViewOverlay.inc.css
 
-#downloadsRichListBox {
-  /** The default listbox appearance comes with an unwanted margin. **/
-  -moz-appearance: none;
-  margin: 0;
-}
-
-#downloadsRichListBox > richlistitem.download {
-  height: 6em;
-  padding: 5px 8px;
-}
-
-.downloadTypeIcon {
-  -moz-margin-end: 8px;
-  /* Ensure icons are displayed at 32px size even on Retina display */
-  height: 32px;
-  width: 32px;
-}
+/*** List items ***/
 
-.blockedIcon {
-  list-style-image: url("chrome://global/skin/icons/Error.png");
-}
-
-.downloadTarget {
-  margin-bottom: 3px;
-  cursor: inherit;
-}
-
-.downloadDetails {
-  opacity: 0.7;
-  font-size: 95%;
-  cursor: inherit;
-}
-
-.downloadButton {
-  -moz-appearance: none;
-  background: transparent;
-  min-width: 0;
-  min-height: 0;
-  margin: 3px;
-  border: none;
-  padding: 5px;
-  list-style-image: url("chrome://browser/skin/downloads/buttons.png");
+:root {
+  --downloads-item-height: 6em;
 }
 
 /*** Button icons ***/
 
 .downloadButton.downloadConfirmBlock,
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }

--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -1,3 +1,67 @@
 /* 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/. */
+
+/*** View and outer controls ***/
+
+#downloadsRichListBox {
+  /** The default listbox appearance comes with an unwanted margin. **/
+  -moz-appearance: none;
+  margin: 0;
+}
+
+/*** List items ***/
+
+#downloadsRichListBox > richlistitem.download {
+  height: var(--downloads-item-height);
+}
+
+%ifdef XP_WIN
+@media (-moz-os-version: windows-xp) {
+%endif
+#downloadsRichListBox > richlistitem.download {
+  padding: 5px 8px;
+}
+%ifdef XP_WIN
+}
+%endif
+
+.downloadTypeIcon {
+  -moz-margin-end: 8px;
+  width: 32px;
+  height: 32px;
+}
+
+%ifdef XP_WIN
+@media not all and (-moz-os-version: windows-xp) {
+  .downloadTypeIcon {
+    -moz-margin-start: 8px;
+  }
+}
+%endif
+
+.blockedIcon {
+  list-style-image: url("chrome://global/skin/icons/Error.png");
+}
+
+.downloadTarget {
+  margin-bottom: 3px;
+  cursor: inherit;
+}
+
+.downloadDetails {
+  opacity: 0.7;
+  font-size: 95%;
+  cursor: inherit;
+}
+
+.downloadButton {
+  -moz-appearance: none;
+  background: transparent;
+  min-width: 0;
+  min-height: 0;
+  margin: 3px;
+  border: none;
+  padding: 5px;
+  list-style-image: url("chrome://browser/skin/downloads/buttons.png");
+}

--- a/browser/themes/windows/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/windows/downloads/allDownloadsViewOverlay.css
@@ -1,67 +1,50 @@
 /* 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/. */
 
 %include ../../shared/downloads/allDownloadsViewOverlay.inc.css
 
-#downloadsRichListBox {
-  /** The default listbox appearance comes with an unwanted margin. **/
-  -moz-appearance: none;
-  margin: 0;
-}
+/*** List items ***/
 
-#downloadsRichListBox > richlistitem.download {
-  height: 6em;
+:root {
+  --downloads-item-height: 6em;
 }
 
-@media (-moz-os-version: windows-xp) {
-  #downloadsRichListBox > richlistitem.download {
-    padding: 5px 8px;
-  }
-}
-
-.downloadTypeIcon {
-  -moz-margin-end: 8px;
-  /* explicitly size the icon, so size doesn't vary on hidpi systems */
-  height: 32px;
-  width: 32px;
-}
+/*** Highlighted list items ***/
 
 @media not all and (-moz-os-version: windows-xp) {
-  .downloadTypeIcon {
-    -moz-margin-start: 8px;
-  }
-}
+  @media (-moz-windows-default-theme) {
+    /*
+    -moz-appearance: menuitem is almost right, but the hover effect is not
+    transparent and is lighter than desired.
 
-.blockedIcon {
-  list-style-image: url("chrome://global/skin/icons/Error.png");
-}
-
-.downloadTarget {
-  margin-bottom: 3px;
-  cursor: inherit;
-}
+    Copied from the autocomplete richlistbox styling in
+    toolkit/themes/windows/global/autocomplete.css
 
-.downloadDetails {
-  opacity: 0.7;
-  font-size: 95%;
-  cursor: inherit;
-}
-
-.downloadButton {
-  -moz-appearance: none;
-  background: transparent;
-  min-width: 0;
-  min-height: 0;
-  margin: 3px;
-  border: none;
-  padding: 5px;
-  list-style-image: url("chrome://browser/skin/downloads/buttons.png");
+    This styling should be kept in sync with the style from the above file.
+    */
+    #downloadsRichListBox > richlistitem.download[selected] {
+      color: inherit;
+      background-color: transparent;
+      /* four gradients for the bevel highlights on each edge, one for blue background */
+      background-image:
+        linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px),
+        linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px),
+        linear-gradient(to left, rgba(255,255,255,0.5) 3px, transparent 3px),
+        linear-gradient(to top, rgba(255,255,255,0.4) 3px, transparent 3px),
+        linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3));
+      background-clip: content-box;
+      border-radius: 6px;
+      outline: 1px solid rgb(124,163,206);
+      -moz-outline-radius: 3px;
+      outline-offset: -2px;
+    }
+  }
 }
 
 /*** Button icons ***/
 
 .downloadButton.downloadConfirmBlock,
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
@@ -161,38 +144,8 @@ richlistitem.download:hover > .downloadB
   richlistitem.download[selected]:hover > .downloadButton.downloadRetry:hover {
     -moz-image-region: rect(32px, 112px, 48px, 96px);
   }
 
   richlistitem.download[selected]:hover > .downloadButton.downloadRetry:active {
     -moz-image-region: rect(32px, 128px, 48px, 112px);
   }
 }
-
-@media not all and (-moz-os-version: windows-xp) {
-  @media (-moz-windows-default-theme) {
-    /*
-    -moz-appearance: menuitem is almost right, but the hover effect is not
-    transparent and is lighter than desired.
-
-    Copied from the autocomplete richlistbox styling in
-    toolkit/themes/windows/global/autocomplete.css
-
-    This styling should be kept in sync with the style from the above file.
-    */
-    #downloadsRichListBox > richlistitem.download[selected] {
-      color: inherit;
-      background-color: transparent;
-      /* four gradients for the bevel highlights on each edge, one for blue background */
-      background-image:
-        linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px),
-        linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px),
-        linear-gradient(to left, rgba(255,255,255,0.5) 3px, transparent 3px),
-        linear-gradient(to top, rgba(255,255,255,0.4) 3px, transparent 3px),
-        linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3));
-      background-clip: content-box;
-      border-radius: 6px;
-      outline: 1px solid rgb(124,163,206);
-      -moz-outline-radius: 3px;
-      outline-offset: -2px;
-    }
-  }
-}