1 files changed, 213 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/popupPanel.css b/comm/mail/themes/shared/mail/popupPanel.css
new file mode 100644
index 0000000000..c46d4457e5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/popupPanel.css
@@ -0,0 +1,213 @@
+/* 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");
+
+.editContactPanel_rowLabel {
+  text-align: end;
+}
+
+#editContactHeader {
+  display: flex;
+  margin-bottom: 15px;
+}
+
+#editContactPanelIcon {
+  -moz-context-properties: fill, stroke, stroke-opacity;
+  fill: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 20%, transparent);
+  stroke: var(--toolbarbutton-icon-fill-attention);
+  width: 20px;
+  height: 20px;
+  margin-block: auto;
+  margin-inline: 3px 12px;
+}
+
+#editContactPanelTitle {
+  font-size: 130%;
+  font-weight: bold;
+  margin-block: auto;
+}
+
+#editContactContent {
+  margin-block: 6px 15px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+}
+
+#editContactEmail {
+  min-width: 20em;
+}
+
+html|input.editContactTextbox {
+  appearance: none;
+  cursor: text;
+  color: var(--toolbar-field-color);
+  background-color: var(--toolbar-field-background-color);
+  border: 1px solid var(--toolbar-field-border-color);
+  border-radius: var(--button-border-radius);
+  padding: 3px 8px;
+  width: 20em;
+}
+
+html|input.editContactTextbox:focus {
+  border-color: var(--focus-outline-color);
+  outline: 1px solid var(--focus-outline-color);
+}
+
+html|input.editContactTextbox[readonly] {
+  border-color: transparent !important;
+  background-color: inherit !important;
+  box-shadow: none;
+  color: inherit;
+  outline: none !important;
+}
+
+#contactMoveDisabledText {
+  width: 20em;
+}
+
+#editContactAddressBookList {
+  appearance: none;
+  background-color: var(--arrowpanel-dimmed);
+  background-image: none;
+  border: 1px solid;
+  border-color: var(--panel-separator-color) !important;
+  box-shadow: none;
+  color: inherit;
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+#editContactAddressBookList:not([disabled="true"],[open="true"]):hover {
+  background-image: linear-gradient(var(--arrowpanel-dimmed),
+                                    var(--arrowpanel-dimmed));
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editContactAddressBookList[open="true"] {
+  background-image: linear-gradient(var(--arrowpanel-dimmed-further),
+                                    var(--arrowpanel-dimmed-further));
+  box-shadow: 0 1px 0 hsla(210, 4%, 10%, .05) inset;
+}
+
+#spacesToolbarCustomizationPanel {
+  margin-block-end: 0;
+}
+
+.popup-panel {
+  margin-block: 0;
+}
+
+.popup-panel-body {
+  padding: 9px 15px;
+  min-width: 300px;
+}
+
+.popup-panel-body h3 {
+  margin-block: 0 15px;
+  font-size: 1.4em;
+  font-weight: 500;
+}
+
+.popup-panel-options-grid {
+  display: grid;
+  margin-block: 6px 15px;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.popup-panel-options-grid input {
+  margin-inline-end: 0;
+}
+
+.popup-panel-column-container {
+  grid-column: 1 / 3;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.popup-panel button:focus-visible,
+.popup-panel input[type="color"]:focus-visible {
+  outline: 2px solid var(--focus-outline-color);
+  outline-offset: -1px;
+}
+
+.popup-panel label,
+.popup-panel checkbox {
+  margin-inline-start: 0;
+}
+
+.popup-panel label.indent,
+.popup-panel checkbox.indent {
+  margin-inline-start: 23px;
+}
+
+.popup-panel-buttons-container {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  justify-content: end;
+}
+
+.popup-panel-buttons-container > button {
+  appearance: none;
+  border: 0;
+  border-radius: 4px;
+  color: var(--button-color, inherit);
+  background-color: var(--button-background-color, color-mix(in srgb, currentColor 13%, transparent));
+  padding: 8px 16px;
+  font-weight: 600;
+  min-width: 0;
+  margin-inline: 8px 0;
+  margin-bottom: 0;
+}
+
+@media (prefers-contrast) {
+  .popup-panel-buttons-container > button {
+    outline: 1px solid var(--button-border-color);
+  }
+}
+
+.popup-panel-buttons-container > button[disabled] {
+  opacity: 0.4;
+}
+
+.popup-panel-buttons-container > button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.popup-panel-buttons-container > button:not([disabled]):hover {
+  background-color: var(--button-hover-background-color, color-mix(in srgb, currentColor 17%, transparent));
+  color: var(--button-hover-text-color);
+}
+
+
+.popup-panel-buttons-container > button:not([disabled]):hover:active {
+  background-color: var(--button-active-background-color, color-mix(in srgb, currentColor 30%, transparent));
+}
+
+.popup-panel-buttons-container > button.primary:not([disabled]) {
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-background-color);
+}
+
+.popup-panel-buttons-container > button.primary:not([disabled]):hover {
+  background-color: var(--button-primary-hover-background-color);
+}
+
+.popup-panel-buttons-container > button.primary:not([disabled]):hover:active {
+  background-color: var(--button-primary-active-background-color);
+}
+
+.checkbox-description {
+  margin-inline-start: 23px;
+  font-size: 0.95rem;
+  opacity: 0.8;
+  margin-block: -5px 6px;
+}