1 files changed, 114 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/accountHubForms.css b/comm/mail/themes/shared/mail/accountHubForms.css
new file mode 100644
index 0000000000..30887a24be
--- /dev/null
+++ b/comm/mail/themes/shared/mail/accountHubForms.css
@@ -0,0 +1,114 @@
+/* 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/. */
+
+form {
+  grid-row: header / footer;
+}
+
+form .hub-body {
+  align-items: stretch;
+  justify-content: flex-start;
+  place-self: center;
+  gap: 0;
+  width: 100%;
+  max-width: 400px;
+  text-align: start;
+  margin-inline: 0;
+}
+
+form label {
+  font-size: 1.1rem;
+  line-height: 1;
+  margin-block-end: 3px;
+}
+
+.input-control {
+  display: flex;
+  align-items: center;
+  margin-block-end: 21px;
+}
+
+.input-control.vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+form .input-field {
+  flex: 1;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline-end: 33px;
+  min-height: var(--hub-input-height);
+  border-radius: var(--hub-input-border-radius);
+}
+
+.form-icon {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill, fill-opacity, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+  fill-opacity: 0.7;
+  margin-inline: -26px 10px;
+}
+
+.form-toggle-button {
+  cursor: pointer;
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0 4px;
+  margin-inline: -30px 6px;
+  min-width: auto;
+  min-height: auto;
+  margin-block: 0;
+  line-height: 0;
+}
+
+.form-toggle-button:hover,
+.form-toggle-button:active {
+  background-color: transparent !important;
+}
+
+.form-toggle-button .form-icon {
+  pointer-events: none;
+  margin-inline: 0;
+}
+
+#password:placeholder-shown + .form-toggle-button {
+  display: none;
+}
+
+#password[type="password"] + .form-toggle-button .form-icon {
+  content: var(--icon-hidden);
+}
+
+#password[type="text"] + .form-toggle-button .form-icon {
+  content: var(--icon-eye);
+}
+
+#password[type="text"] + .form-toggle-button {
+  color: var(--in-content-primary-button-background);
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+.icon-warning {
+  display: none;
+  color: var(--orange-50);
+  fill-opacity: 1;
+}
+
+input:user-invalid ~ .form-icon {
+  display: none;
+}
+
+input:user-invalid ~ .icon-warning {
+  display: inline-block;
+}
+
+.remember-button-container {
+  margin-block-start: -18px;
+}