diff options
Diffstat (limited to 'toolkit/content/widgets/datetimebox.css')
-rw-r--r-- | toolkit/content/widgets/datetimebox.css | 104 |
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; + } +} |