1 files changed, 89 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/abFormFields.css b/comm/mail/themes/shared/mail/abFormFields.css
new file mode 100644
index 0000000000..ac0d2cb9a0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/abFormFields.css
@@ -0,0 +1,89 @@
+/* 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/. */
+
+:root {
+  --in-content-button-border-radius: 3px;
+}
+
+@media not (prefers-contrast) {
+  :root {
+    --in-content-button-background: var(--grey-90-a10);
+    --in-content-button-background-hover: var(--grey-90-a20);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --in-content-button-background: rgba(249, 249, 250, 0.1);
+      --in-content-button-background-hover: rgba(249, 249, 250, 0.15);
+    }
+  }
+}
+
+button {
+  margin: 0;
+  padding: 0 12px;
+  border-radius: var(--in-content-button-border-radius);
+  min-height: var(--in-content-button-height);
+}
+
+button + button {
+  margin-inline-start: 6px;
+}
+
+input[type="number"] {
+  min-height: calc(var(--in-content-button-height) - 4px);
+  padding: 1px;
+  border-radius: var(--in-content-button-border-radius);
+}
+
+/* sizes: chars + 8px padding + 1px borders + spin buttons 25+2+10px  */
+input[type="number"].size3 {
+  width: calc(3ch + 55px);
+}
+input[type="number"].size5 {
+  width: calc(5ch + 55px);
+}
+
+input[type="number"]::-moz-number-spin-box {
+  padding-inline-start: 10px;
+}
+
+input[type="number"]::-moz-number-spin-up,
+input[type="number"]::-moz-number-spin-down {
+  appearance: none;
+  min-width: 25px;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 0;
+  background-color: var(--in-content-button-background);
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: stroke;
+  stroke: currentColor;
+}
+
+input[type="number"]::-moz-number-spin-up:hover,
+input[type="number"]::-moz-number-spin-down:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+
+input[type="number"]::-moz-number-spin-up {
+  min-height: calc(var(--in-content-button-height) * 0.5 - 3px);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-start-end-radius: var(--in-content-button-border-radius);
+  background-image: var(--icon-nav-up-sm);
+}
+
+input[type="number"]::-moz-number-spin-down {
+  min-height: calc(var(--in-content-button-height) * 0.5 - 4px);
+  border-end-end-radius: var(--in-content-button-border-radius);
+  background-image: var(--icon-nav-down-sm);
+}
+
+input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"]) {
+  border-radius: var(--in-content-button-border-radius);
+  padding-block: initial;
+  /* it should be --in-content-button-height but input doesn't include the border */
+  min-height: calc(var(--in-content-button-height) - 2px);
+}