summaryrefslogtreecommitdiffstats
path: root/toolkit/content/widgets/datetimebox.css
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/content/widgets/datetimebox.css')
-rw-r--r--toolkit/content/widgets/datetimebox.css104
1 files changed, 104 insertions, 0 deletions
diff --git a/toolkit/content/widgets/datetimebox.css b/toolkit/content/widgets/datetimebox.css
new file mode 100644
index 0000000000..b9ba4bfafa
--- /dev/null
+++ b/toolkit/content/widgets/datetimebox.css
@@ -0,0 +1,104 @@
+/* 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/. */
+
+.datetimebox {
+ display: flex;
+ line-height: normal;
+ /* TODO: Enable selection once bug 1455893 is fixed */
+ user-select: none;
+}
+
+.datetime-input-box-wrapper {
+ display: inline-flex;
+ flex: 1;
+ background-color: inherit;
+ min-width: 0;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.datetime-input-edit-wrapper {
+ overflow: hidden;
+ white-space: nowrap;
+ flex-grow: 1;
+}
+
+.datetime-edit-field {
+ display: inline;
+ text-align: center;
+ padding: 1px 3px;
+ border: 0;
+ margin: 0;
+ ime-mode: disabled;
+ outline: none;
+}
+
+.datetime-edit-field:not([disabled="true"]):focus {
+ background-color: Highlight;
+ color: HighlightText;
+ outline: none;
+}
+
+.datetime-edit-field[disabled="true"],
+.datetime-edit-field[readonly="true"] {
+ user-select: none;
+}
+
+.datetime-calendar-button {
+ -moz-context-properties: fill;
+ color: inherit;
+ font-size: inherit;
+ fill: currentColor;
+ opacity: .65;
+ background-color: transparent;
+ border: none;
+ border-radius: 0.2em;
+ flex: none;
+ margin-block: 0;
+ margin-inline: 0.075em 0.15em;
+ padding: 0 0.15em;
+ line-height: 1;
+}
+
+.datetime-calendar-button:focus-visible {
+ outline: 0.15em solid SelectedItem;
+}
+
+.datetime-calendar-button:is(:focus-visible, :hover) {
+ opacity: 1;
+}
+
+.datetime-calendar-button-svg {
+ pointer-events: none;
+ /* When using a very small font-size, we don't want the button to take extra
+ * space (which will affect the baseline of the form control) */
+ max-width: 1em;
+ max-height: 1em;
+}
+
+@media (prefers-contrast) {
+ .datetime-calendar-button {
+ opacity: 1;
+ background-color: ButtonFace;
+ color: ButtonText;
+ }
+
+ .datetime-calendar-button:focus-visible,
+ .datetime-calendar-button:hover {
+ background-color: SelectedItem;
+ }
+
+ .datetime-calendar-button:focus-visible > .datetime-calendar-button-svg,
+ .datetime-calendar-button:hover > .datetime-calendar-button-svg {
+ background-color: SelectedItem;
+ -moz-context-properties: fill;
+ fill: SelectedItemText;
+ }
+
+ .datetime-calendar-button-svg {
+ background-color: ButtonFace;
+ -moz-context-properties: fill;
+ fill: ButtonText;
+ }
+}