1 files changed, 387 insertions, 0 deletions
diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css
new file mode 100644
index 0000000000..dc0c7ef6f8
--- /dev/null
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -0,0 +1,387 @@
+/* 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 {
+  --font-size-default: 1.1rem;
+  --spinner-width: 3rem;
+  --spinner-margin-top-bottom: 0.4rem;
+  --spinner-item-height: 2.4rem;
+  --spinner-item-margin-bottom: 0.1rem;
+  --spinner-button-height: 1.2rem;
+  --colon-width: 2rem;
+  --day-period-spacing-width: 1rem;
+  --calendar-width: 23.1rem;
+  --date-picker-item-height: 2.5rem;
+  --date-picker-item-width: 3.3rem;
+
+  --border-radius: 0.3rem;
+
+  --border: 0.1rem solid FieldText;
+  --border-active-color: FieldText;
+  --fill-color: color-mix(in srgb, FieldText 20%, transparent);
+  --today-fill-color: color-mix(in srgb, FieldText 10%, transparent);
+  --button-fill-color-active: color-mix(in srgb, FieldText 20%, transparent);
+
+  --selected-font-color: SelectedItemText;
+  --selected-fill-color: SelectedItem;
+
+  /* Use -moz-activehyperlinktext to get a system color that
+     by default will be closest to Red */
+  --weekend-font-color: -moz-activehyperlinktext;
+
+  --disabled-fill-color: ButtonShadow;
+
+  --disabled-opacity: 0.2;
+
+  /* We need to hide the scroll bar but maintain its scrolling
+     capability, so using |overflow: hidden| is not an option. */
+  scrollbar-width: none;
+}
+
+@media not (prefers-contrast) {
+  :root {
+    --border: 0.1rem solid color-mix(in srgb, FieldText 65%, transparent);
+    --border-active-color: color-mix(in srgb, FieldText 80%, transparent);
+    --fill-color: color-mix(in srgb, FieldText 20%, transparent);
+    --today-fill-color: color-mix(in srgb, FieldText 30%, transparent);
+    --button-fill-color-active: color-mix(in srgb, FieldText 30%, transparent);
+  }
+}
+
+html {
+  font-size: 10px;
+}
+
+body {
+  margin: 0;
+  font: message-box;
+  font-size: var(--font-size-default);
+  background: Field;
+  color: FieldText;
+}
+
+button {
+  appearance: none;
+  background: none;
+  border: none;
+}
+
+.month-year-nav {
+  display: flex;
+  width: var(--calendar-width);
+  height: 2.4rem;
+  margin-bottom: 0.8rem;
+  justify-content: space-evenly;
+}
+
+.month-year-nav > button {
+  width: 3rem;
+  height: var(--date-picker-item-height);
+  -moz-context-properties: fill, fill-opacity;
+  fill: FieldText;
+  fill-opacity: .5;
+}
+
+.month-year-nav > button:hover {
+  fill-opacity: .8;
+}
+
+.month-year-nav > button.active {
+  fill-opacity: 1;
+}
+
+.month-year-nav > button.prev:dir(ltr),
+.month-year-nav > button.next:dir(rtl) {
+  background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat center;
+}
+
+.month-year-nav > button.prev:dir(rtl),
+.month-year-nav > button.next:dir(ltr) {
+  background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat center;
+}
+
+.month-year-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 17.1rem;
+  height: var(--date-picker-item-height);
+  z-index: 10;
+}
+
+.month-year-container {
+  margin-block: 0;
+}
+
+button.month-year {
+  font-size: 1.3rem;
+  border: var(--border);
+  color: inherit;
+  border-radius: 0.3rem;
+  padding-block: 0.2rem;
+  padding-inline: 1.2rem 2.6rem;
+}
+
+button.month-year:hover {
+  background: var(--fill-color);
+}
+
+button.month-year.active {
+  border-color: var(--border-active-color);
+  background: var(--button-fill-color-active);
+}
+
+button.month-year::after {
+  position: absolute;
+  content: "";
+  width: 2.6rem;
+  height: 1.6rem;
+  background: url("chrome://global/skin/icons/arrow-down.svg") no-repeat 50% 50%;
+  -moz-context-properties: fill, fill-opacity;
+  fill: FieldText;
+  fill-opacity: .5;
+}
+
+button.month-year.active::after {
+  background: url("chrome://global/skin/icons/arrow-up.svg") no-repeat 50% 50%;
+}
+
+.month-year-view {
+  position: absolute;
+  z-index: 5;
+  padding-top: 3.2rem;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--calendar-width);
+  background-color: window;
+  color: windowtext;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
+
+.month-year-view > .spinner-container {
+  width: 5.5rem;
+  margin: 0 0.5rem;
+}
+
+.order-month-year > #spinner-month,
+.order-year-month > #spinner-year {
+  order: 1;
+}
+
+.order-month-year > #spinner-year,
+.order-year-month > #spinner-month {
+  order: 2;
+}
+
+.calendar-container {
+  cursor: default;
+}
+
+.calendar-container > table:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  width: var(--calendar-width);
+  border-spacing: inherit;
+}
+
+.week-header > tr,
+.days-view > tr {
+  display: flex;
+  flex-direction: row;
+}
+
+.week-header > tr > th {
+  opacity: .5;
+}
+
+.days-view {
+  min-height: 15rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.week-header > tr > th,
+.days-view > tr > td {
+  padding: 0;
+  font-weight: inherit;
+}
+
+.week-header > tr > th,
+.days-view > tr > td {
+  align-items: center;
+  display: flex;
+  height: var(--date-picker-item-height);
+  position: relative;
+  justify-content: center;
+  width: var(--date-picker-item-width);
+}
+
+.days-view > tr > td:focus-visible {
+  z-index: 1;
+}
+
+.days-view > tr > td.outside {
+  opacity: .5;
+}
+
+.weekend {
+  color: var(--weekend-font-color);
+}
+
+.days-view > tr > td.weekend.outside {
+  opacity: .5;
+}
+
+.days-view > tr > td.out-of-range,
+.days-view > tr > td.off-step {
+  background: var(--disabled-fill-color);
+}
+
+.days-view > tr > td.today {
+  font-weight: bold;
+}
+
+.days-view > tr > td.out-of-range::before,
+.days-view > tr > td.off-step::before {
+  display: none;
+}
+
+.days-view > tr > td:hover::before,
+.days-view > tr > td.select::before,
+.days-view > tr > td.today::before {
+  position: absolute;
+  inset: 5%;
+  z-index: -10;
+  border-radius: var(--border-radius);
+}
+
+#time-picker,
+.month-year-view:not([hidden]) {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.spinner-container {
+  display: flex;
+  flex-direction: column;
+  width: var(--spinner-width);
+}
+
+.spinner-container > button {
+  height: var(--spinner-button-height);
+  -moz-context-properties: fill, fill-opacity;
+  fill: FieldText;
+  fill-opacity: .5;
+}
+
+.spinner-container > button:hover {
+  fill-opacity: .8;
+}
+
+.spinner-container > button.active {
+  fill-opacity: 1;
+}
+
+.spinner-container > button.up {
+  background: url("chrome://global/skin/icons/arrow-up.svg") no-repeat 50% 50%;
+}
+
+.spinner-container > button.down {
+  background: url("chrome://global/skin/icons/arrow-down.svg") no-repeat 50% 50%;
+}
+
+.spinner-container.hide-buttons > button {
+  visibility: hidden;
+}
+
+.spinner-container > .spinner {
+  position: relative;
+  width: 100%;
+  margin: var(--spinner-margin-top-bottom) 0;
+  cursor: default;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  scroll-snap-type: both mandatory;
+}
+
+@media not (prefers-reduced-motion) {
+  .spinner-container > .spinner {
+    scroll-behavior: smooth;
+  }
+}
+
+.spinner-container > .spinner > div {
+  box-sizing: border-box;
+  position: relative;
+  text-align: center;
+  padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0;
+  margin-bottom: var(--spinner-item-margin-bottom);
+  height: var(--spinner-item-height);
+  user-select: none;
+  scroll-snap-align: start;
+}
+
+.spinner-container > .spinner > div::before,
+.calendar-container .days-view > tr > td::before {
+  position: absolute;
+  inset: 5%;
+  z-index: -1;
+  border-radius: var(--border-radius);
+}
+
+.spinner-container > .spinner > div:hover::before,
+.calendar-container .days-view > tr > td:hover::before {
+  background: var(--fill-color);
+  border: var(--border);
+  content: "";
+}
+
+.calendar-container .days-view > tr > td.today::before {
+  background: var(--today-fill-color);
+  border: var(--border);
+  content: "";
+}
+
+@media not (prefers-contrast) {
+  .calendar-container .days-view > tr > td.today::before {
+    border-width: 0;
+  }
+}
+
+.spinner-container > .spinner:not(.scrolling) > div.selection,
+.calendar-container .days-view > tr > td.selection {
+  color: var(--selected-font-color);
+}
+
+.spinner-container > .spinner > div.selection::before,
+.calendar-container .days-view > tr > td.selection::before {
+  background: var(--selected-fill-color);
+  border: none;
+  content: "";
+}
+
+.spinner-container > .spinner > div.disabled::before,
+.spinner-container > .spinner.scrolling > div.selection::before,
+.spinner-container > .spinner.scrolling > div:hover::before {
+  display: none;
+}
+
+.spinner-container > .spinner > div.disabled {
+  opacity: var(--disabled-opacity);
+}
+
+.colon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--colon-width);
+  margin-bottom: 0.3rem;
+}
+
+.spacer {
+  width: var(--day-period-spacing-width);
+}