summaryrefslogtreecommitdiffstats
path: root/toolkit/content/widgets/datetimebox.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /toolkit/content/widgets/datetimebox.css
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/content/widgets/datetimebox.css')
-rw-r--r--toolkit/content/widgets/datetimebox.css107
1 files changed, 107 insertions, 0 deletions
diff --git a/toolkit/content/widgets/datetimebox.css b/toolkit/content/widgets/datetimebox.css
new file mode 100644
index 0000000000..4c8914ace4
--- /dev/null
+++ b/toolkit/content/widgets/datetimebox.css
@@ -0,0 +1,107 @@
+/* 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;
+
+ &:focus {
+ background-color: Highlight;
+ color: HighlightText;
+ outline: 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;
+
+ &:focus-visible {
+ outline: 0.15em solid SelectedItem;
+ }
+
+ &:focus-visible,
+ &:hover {
+ opacity: 1;
+ }
+
+ @media (prefers-contrast) {
+ opacity: 1;
+ background-color: ButtonFace;
+ color: ButtonText;
+
+ > .datetime-calendar-button-svg {
+ background-color: ButtonFace;
+ -moz-context-properties: fill;
+ fill: ButtonText;
+ }
+
+ &:focus-visible,
+ &:hover {
+ background-color: SelectedItem;
+
+ > .datetime-calendar-button-svg {
+ background-color: SelectedItem;
+ -moz-context-properties: fill;
+ fill: SelectedItemText;
+ }
+ }
+ }
+}
+
+.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;
+}
+
+:host(:is(:disabled, :read-only, [type="time"])) .datetime-calendar-button {
+ display: none;
+}
+
+:host(:is(:disabled, :read-only)) .datetime-edit-field {
+ user-select: none;
+ pointer-events: none;
+ -moz-user-focus: none;
+}