5 files changed, 95 insertions, 0 deletions
diff --git a/browser/themes/shared/translation/infobar.css b/browser/themes/shared/translation/infobar.css
new file mode 100644
index 0000000000..7f42cf2939
--- /dev/null
+++ b/browser/themes/shared/translation/infobar.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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+notification[value="translation"] .messageImage {
+  list-style-image: url(chrome://browser/skin/translation-16.png) !important;
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  notification[value="translation"] .messageImage {
+    list-style-image: url(chrome://browser/skin/translation-16@2x.png) !important;
+    -moz-image-region: rect(0, 64px, 32px, 32px);
+  }
+}
+
+notification[value="translation"][state="translating"] .messageImage {
+  list-style-image: url(chrome://browser/skin/translating-16.png) !important;
+  -moz-image-region: auto;
+}
+
+@media (min-resolution: 1.25dppx) {
+  notification[value="translation"][state="translating"] .messageImage {
+    list-style-image: url(chrome://browser/skin/translating-16@2x.png) !important;
+  }
+}
+
+notification[value="translation"] hbox[anonid="details"] {
+  overflow: hidden;
+}
+
+notification[value="translation"] menulist::part(dropmarker) {
+  display: -moz-box;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+}
+
+notification[value="translation"] menulist::part(dropmarker-icon) {
+  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+notification[value="translation"] menulist > menupopup {
+  margin: 0; /* override popup.css */
+}
+
+.translation-attribution {
+  cursor: pointer;
+  -moz-box-align: end;
+  font-size: small;
+  padding-block: 5px;
+}
+
+.translation-attribution > label {
+  margin-bottom: 0;
+}
+
+.translation-attribution > image {
+  width: 70px;
+}
+
+.translation-welcome-panel {
+  width: 305px;
+}
+
+.translation-welcome-panel::part(content) {
+  /* Prevent from stretching logo height */
+  -moz-box-align: start;
+}
+
+.translation-welcome-logo {
+  height: 32px;
+  width: 32px;
+  list-style-image: url(chrome://browser/skin/translation-16@2x.png);
+  -moz-image-region: rect(0, 64px, 32px, 32px);
+}
+
+.translation-welcome-content {
+  margin-inline-start: 16px;
+}
+
+.translation-welcome-headline {
+  font-size: larger;
+  font-weight: bold;
+  margin-inline-start: 0;
+}
+
+.translation-welcome-body {
+  padding: 1em 0;
+  margin: 0 0;
+}
diff --git a/browser/themes/shared/translation/translating-16.png b/browser/themes/shared/translation/translating-16.png
new file mode 100644
index 0000000000..71ca37c22a
--- /dev/null
+++ b/browser/themes/shared/translation/translating-16.png
diff --git a/browser/themes/shared/translation/translating-16@2x.png b/browser/themes/shared/translation/translating-16@2x.png
new file mode 100644
index 0000000000..ab6184047e
--- /dev/null
+++ b/browser/themes/shared/translation/translating-16@2x.png
diff --git a/browser/themes/shared/translation/translation-16.png b/browser/themes/shared/translation/translation-16.png
new file mode 100644
index 0000000000..ef17f55271
--- /dev/null
+++ b/browser/themes/shared/translation/translation-16.png
diff --git a/browser/themes/shared/translation/translation-16@2x.png b/browser/themes/shared/translation/translation-16@2x.png
new file mode 100644
index 0000000000..c942e5ec09
--- /dev/null
+++ b/browser/themes/shared/translation/translation-16@2x.png