1 files changed, 174 insertions, 0 deletions

diff --git a/comm/mail/themes/shared/mail/aboutAddonsExtra.css b/comm/mail/themes/shared/mail/aboutAddonsExtra.css
new file mode 100644
index 0000000000..9fc38f6c5e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/aboutAddonsExtra.css
@@ -0,0 +1,174 @@
+/* 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 url("chrome://messenger/skin/icons.css");
+@import url("chrome://messenger/skin/colors.css");
+
+body {
+  /* Override the absolute (px) font-size value in common-shared.css. */
+  font-size: 1.1rem;
+}
+
+#full {
+  grid-template-columns: 18em 1fr;
+}
+
+#sidebar {
+  background-color: var(--in-content-categories-background);
+}
+
+#sidebar > #categories {
+  width: inherit;
+  padding-inline-end: 0;
+}
+
+#categories > .category {
+  border-radius: var(--in-content-button-border-radius);
+  -moz-context-properties: fill, fill-opacity, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+/* Hide Plugins category */
+button[name="plugin"] {
+  display: none;
+}
+
+.sidebar-footer-list > li {
+  margin-inline: 6px;
+  border-radius: var(--in-content-button-border-radius);
+}
+
+@media (max-width: 830px) {
+  #full {
+    grid-template-columns: 60px 1fr;
+  }
+
+  #categories > .category {
+    padding-inline: 12px;
+  }
+
+  .sidebar-footer-list > li > a {
+    margin-inline: auto;
+  }
+}
+
+.category[name="discover"] {
+  background-image: var(--addons-manager-recommendations);
+}
+
+.category[name="extension"] {
+  background-image: var(--addons-manager-extensions);
+}
+
+.category[name="theme"] {
+  background-image: var(--addons-manager-themes);
+}
+
+.category[name="dictionary"] {
+  background-image: var(--addons-manager-dictionaries);
+}
+
+.category[name="locale"] {
+  background-image: var(--addons-manager-languages);
+}
+
+.category[name="sitepermission"] {
+  background-image: var(--addons-manager-site-permissions);
+}
+
+.category[name="available-updates"] {
+  background-image: var(--addons-manager-available-updates);
+}
+
+.category[name="recent-updates"] {
+  background-image: var(--addons-manager-recent-updates);
+}
+
+/* Temporary styles for the supernova icons */
+#preferencesButton .sidebar-footer-icon,
+.page-options-menu > .more-options-button {
+  -moz-context-properties: fill, stroke, stroke-opacity;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+/* Settings icon override */
+#preferencesButton .sidebar-footer-icon {
+  content: var(--icon-settings);
+}
+
+.page-options-menu > .more-options-button {
+  background-image: url("chrome://messenger/skin/icons/new/touch/settings.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.more-options-button {
+  -moz-context-properties: stroke;
+  stroke: currentColor;
+  background-image: var(--icon-more);
+}
+
+/* Hide in extension details the private browsing section */
+section > .addon-detail-row-private-browsing,
+.addon-detail-row-private-browsing + .addon-detail-row.addon-detail-help-row {
+  display: none;
+}
+
+/* Hide the options entry in the options menu, as we have a dedicated button */
+addon-options panel-item[action="preferences"] {
+  display:none;
+}
+
+.extension-options-button {
+  min-width: auto;
+  min-height: auto;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  margin-inline-start: 8px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  background-image: url("chrome://messenger/skin/icons/developer.svg");
+  background-repeat: no-repeat;
+  background-position: center center;
+  /* Get the -badged ::after element in the right spot. */
+  padding: 1px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+recommended-addon-card .addon.card:hover {
+  box-shadow: var(--card-shadow-hover);
+  cursor: pointer;
+}
+
+panel-item[action="remove"] {
+  --icon: var(--icon-trash);
+}
+panel-item {
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+/* Override the absolute (px) font-size values in aboutaddons.css. */
+
+.addon-name,
+.disco-addon-name {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.theme-enable-button,
+.addon-description,
+.disco-addon-author,
+.disco-cta-button {
+  font-size: 1.1rem;
+}
+
+button.tab-button {
+  font-size: 1.1rem;
+}