1 files changed, 408 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/unifiedToolbarShared.css b/comm/mail/themes/shared/mail/unifiedToolbarShared.css
new file mode 100644
index 0000000000..7f304fa944
--- /dev/null
+++ b/comm/mail/themes/shared/mail/unifiedToolbarShared.css
@@ -0,0 +1,408 @@
+/* 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/content/unifiedtoolbar/unifiedToolbarWebextensions.css");
+
+/* Styles shared between the actual unfied toolbar and the replica in the
+ * customization overlay */
+
+:root {
+  --toolbar-button-badge-text-color: var(--color-white);
+  --toolbar-button-badge-bg-color: var(--color-red-70);
+  --toolbar-button-badge-padding: 1px 3px;
+  --toolbar-button-badge-font: 0.8rem;
+  --badge-inset-block-start: 1px;
+  --badge-inset-inline-nudge: 0px;
+  --badge-inset-inline-end: 2px;
+}
+
+/* UI Density customization */
+:root[uidensity="compact"] {
+  --badge-inset-block-start: 0px;
+  --badge-inset-inline-nudge: 4px;
+  --badge-inset-inline-end: 0px;
+}
+
+:root[uidensity="touch"] {
+  --badge-inset-block-start: 4px;
+  --badge-inset-inline-nudge: -3px;
+  --badge-inset-inline-end: 3px;
+}
+
+@media (-moz-windows-accent-color-in-titlebar) {
+  /* Apply everywhere */
+  :root {
+    --windows-accent-outline-color: var(--focus-outline-color);
+  }
+  /* Apply only in unified toolbar */
+  .search-bar {
+    --windows-accent-outline-color: accentColorText;
+  }
+}
+
+.unified-toolbar {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  list-style-type: none;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.unified-toolbar li {
+  padding: 0;
+  margin: 0;
+  border-radius: 1px;
+}
+
+.unified-toolbar [is="customizable-element"] .preview {
+  display: none;
+}
+
+.unified-toolbar-button {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  flex-wrap: nowrap;
+  min-width: initial;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.icons-above-text .unified-toolbar-button {
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.icons-only .unified-toolbar-button .button-label {
+  display: none;
+}
+
+.text-only .unified-toolbar-button .button-icon {
+  display: none;
+}
+
+.unified-toolbar-button[popup] {
+  padding-inline-end: 20px;
+  background-image: var(--icon-nav-down-sm);
+  background-position: calc(100% - 4px) center;
+  background-repeat: no-repeat;
+}
+
+.unified-toolbar-button[popup]:dir(rtl) {
+  background-position-x: 4px;
+}
+
+.unified-toolbar-button[badge] {
+  position: relative;
+}
+
+.unified-toolbar-button[badge]::after {
+  content: attr(badge);
+  background-color: var(--toolbar-button-badge-bg-color);
+  border-radius: 12px;
+  padding: var(--toolbar-button-badge-padding);
+  font-weight: 600;
+  font-size: var(--toolbar-button-badge-font);
+  color: var(--toolbar-button-badge-text-color);
+  line-height: 1em;
+  position: absolute;
+  inset-inline-end: var(--badge-inset-inline-end);
+  inset-block-start: var(--badge-inset-block-start);
+  max-width: 3ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-overflow: clip;
+}
+
+.unified-toolbar-button[popup][badge]::after {
+  inset-inline-end: 14px;
+}
+
+.unified-toolbar-button[badge]:-moz-window-inactive::after {
+  background-color: color-mix(in srgb, var(--toolbar-button-badge-bg-color) 50%, black);
+}
+
+/* If the text is shown after the icon, move the badge to be over the icon */
+.icons-beside-text .unified-toolbar-button[badge]::after {
+  inset-inline-end: unset;
+  inset-inline-start: calc(var(--icon-size) - var(--badge-inset-inline-nudge));
+  inset-block-start: var(--badge-inset-block-start);
+}
+
+/* With text only, just show the badge after the label */
+.text-only .unified-toolbar-button[badge]::after {
+  position: static;
+}
+
+/* If we are showing the text below the icon, move the badge in toward the
+ * center of the button. */
+.icons-above-text .unified-toolbar-button[badge]::after {
+  inset-inline-end: unset;
+  inset-inline-start: 51%;
+}
+
+.icons-above-text .unified-toolbar-button[popup][badge]::after {
+  inset-inline-start: unset;
+  inset-inline-end: 38%;
+}
+
+.unified-toolbar-button .button-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  max-width: 50ch;
+  pointer-events: none;
+}
+
+global-search-bar:not([hidden]) {
+  display: block;
+  color: var(--layout-color-0);
+}
+
+global-search-bar:not([hidden]):-moz-lwtheme {
+  color: var(--toolbar-field-color);
+  text-shadow: none;
+}
+
+kbd {
+  background-color: var(--layout-background-3);
+  color: var(--layout-color-2);
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  line-height: 1;
+  font-weight: bold;
+  box-shadow: inset 0px -1px 0px var(--layout-border-2);
+  border-radius: 3px;
+  display: inline-block;
+  padding: 2px 4px;
+}
+
+kbd:first-of-type {
+  margin-inline-start: 6px;
+}
+
+span[slot="placeholder"] {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.unified-toolbar .spacer {
+  flex: 1 1 auto;
+}
+
+.unified-toolbar .search-bar {
+  flex: 1 1 33%;
+  min-width: 5em;
+}
+
+.unified-toolbar .button-icon {
+  content: var(--icon-extension);
+}
+
+.unified-toolbar .search-button-icon {
+  content: var(--icon-search);
+}
+
+.unified-toolbar .write-message .button-icon {
+  content: var(--icon-new-mail);
+}
+
+.unified-toolbar .move-to .button-icon {
+  content: var(--icon-file);
+}
+
+.unified-toolbar .unifinder .button-icon {
+  content: var(--icon-search);
+}
+
+.unified-toolbar .folder-location .button-icon {
+  content: var(--icon-folder);
+}
+
+.unified-toolbar .edit-event .button-icon {
+  content: var(--icon-pencil);
+}
+
+.unified-toolbar .get-messages .button-icon {
+  content: var(--icon-cloud-download);
+}
+
+.unified-toolbar .reply .button-icon {
+  content: var(--icon-reply);
+}
+
+.unified-toolbar .reply-all .button-icon {
+  content: var(--icon-reply-all);
+}
+
+.unified-toolbar .reply-to-list .button-icon {
+  content: var(--icon-reply-list);
+}
+
+.unified-toolbar .redirect .button-icon {
+  content: var(--icon-redirect);
+}
+
+.unified-toolbar .archive .button-icon {
+  content: var(--icon-archive);
+}
+
+.unified-toolbar .conversation .button-icon {
+  content: var(--icon-conversation);
+}
+
+.unified-toolbar .previous-unread .button-icon {
+  content: var(--icon-nav-up-unread);
+}
+
+.unified-toolbar .previous .button-icon {
+  content: var(--icon-nav-up);
+}
+
+.unified-toolbar .next-unread .button-icon {
+  content: var(--icon-nav-down-unread);
+}
+
+.unified-toolbar .next .button-icon {
+  content: var(--icon-nav-down);
+}
+
+.unified-toolbar .junk .button-icon {
+  content: var(--icon-spam);
+}
+
+.unified-toolbar .delete .button-icon {
+  content: var(--icon-trash);
+}
+
+.unified-toolbar .compact .button-icon {
+  content: var(--icon-compress);
+}
+
+.unified-toolbar .add-as-event .button-icon {
+  content: var(--icon-new-event);
+}
+
+.unified-toolbar .add-as-task .button-icon {
+  content: var(--icon-new-task);
+}
+
+.unified-toolbar .tag-message .button-icon {
+  content: var(--icon-tag);
+}
+
+.unified-toolbar .forward-inline .button-icon {
+  content: var(--icon-forward);
+}
+
+.unified-toolbar .forward-attachment .button-icon {
+  /* TODO separate icon for forwarding as attachment */
+  content: var(--icon-forward);
+}
+
+.unified-toolbar .mark-as .button-icon {
+  content: var(--icon-unread);
+}
+
+.unified-toolbar .view-picker .button-icon {
+  content: var(--icon-eye);
+}
+
+.unified-toolbar .address-book .button-icon {
+  content: var(--icon-address-book);
+}
+
+.unified-toolbar .chat .button-icon {
+  content: var(--icon-chat)
+}
+
+.unified-toolbar .add-ons-and-themes .button-icon {
+  content: var(--icon-extension);
+}
+
+.unified-toolbar .calendar .button-icon {
+  content: var(--icon-calendar);
+}
+
+.unified-toolbar .tasks .button-icon {
+  content: var(--icon-tasks)
+}
+
+.unified-toolbar .mail .button-icon {
+  content: var(--icon-mail);
+}
+
+.unified-toolbar .print .button-icon {
+  content: var(--icon-print);
+}
+
+.unified-toolbar .quick-filter-bar .button-icon {
+  content: var(--icon-filter);
+}
+
+.unified-toolbar .synchronize .button-icon {
+  content: var(--icon-sync);
+}
+
+.unified-toolbar .new-event .button-icon {
+  content: var(--icon-new-event);
+}
+
+.unified-toolbar .new-task .button-icon {
+  content: var(--icon-new-task);
+}
+
+.unified-toolbar .delete-event .button-icon {
+  content: var(--icon-trash);
+}
+
+.unified-toolbar .print-event .button-icon {
+  content: var(--icon-print);
+}
+
+.unified-toolbar .go-to-today .button-icon {
+  content: var(--icon-calendar-today);
+}
+
+.unified-toolbar .go-back .button-icon {
+  content: var(--icon-nav-back);
+}
+
+.unified-toolbar .go-forward .button-icon {
+  content: var(--icon-nav-forward);
+}
+
+.unified-toolbar .stop .button-icon {
+  content: var(--icon-close);
+}
+
+.unified-toolbar .throbber .throbber-icon {
+  stroke: var(--button-primary-background-color);
+  -moz-context-properties: stroke, fill;
+  width: 16px;
+  height: 16px;
+  visibility: hidden;
+  margin: var(--button-margin);
+  vertical-align: middle;
+  content: var(--icon-loading);
+  object-fit: cover;
+}
+
+.unified-toolbar .throbber.busy .throbber-icon {
+  visibility: visible;
+  object-position: 0px 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .unified-toolbar .throbber.busy .throbber-icon {
+    animation: activity-indicator-throbber 1.05s steps(30) infinite;
+  }
+
+  @keyframes activity-indicator-throbber {
+    100% { object-position: -480px 0; }
+  }
+}