diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/themeableDialog.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/themeableDialog.css | 608 |
1 files changed, 608 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/themeableDialog.css b/comm/mail/themes/shared/mail/themeableDialog.css new file mode 100644 index 0000000000..9d1c35ffe9 --- /dev/null +++ b/comm/mail/themes/shared/mail/themeableDialog.css @@ -0,0 +1,608 @@ +/* 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/. */ + +@import url("chrome://messenger/skin/icons.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:host, +:root { + --button-background-color: color-mix(in srgb, currentColor 13%, transparent); + --button-hover-background-color: color-mix(in srgb, currentColor 17%, transparent); + --button-active-background-color: color-mix(in srgb, currentColor 30%, transparent); + --button-border-color: color-mix(in srgb, currentColor 17%, transparent); + --button-border-radius: 3px; + --box-text-color: MenuText; + --box-background-color: Menu; + --box-border-color: ThreeDShadow; + --checkbox-border-color: var(--field-border-color); + --checkbox-unchecked-bgcolor: var(--field-background-color); + --checkbox-unchecked-hover-bgcolor: var(--field-background-color); + --field-text-color: FieldText; + --field-background-color: Field; + --field-border-color: rgba(128, 128, 128, .6); + --field-border-hover-color: rgba(128, 128, 128, .8); + --selected-item-color: var(--color-blue-60); + --primary-text-color: var(--selected-item-text-color); + --primary-background-hover: color-mix(in srgb, var(--selected-item-color) 85%, black); + --primary-background-active: color-mix(in srgb, var(--selected-item-color) 78%, black); + --primary-focus-border: -moz-Dialog; + --richlist-button-background: -moz-Dialog; + --tab-hover-background: hsla(0, 0%, 50%, 0.15); + --tab-selected-background: hsla(0, 0%, 50%, 0.25); +} + +:root:-moz-lwtheme { + --box-text-color: var(--color-ink-90); + --box-background-color: var(--color-white); + --box-border-color: var(--color-gray-40); + --field-text-color: var(--color-gray-90); + --field-background-color: var(--color-white); + --field-border-color: rgba(0, 0, 0, 0.3); + --field-border-hover-color: rgba(0, 0, 0, 0.4); + --primary-focus-border: var(--lwt-accent-color); + background-color: var(--lwt-accent-color); + color: var(--lwt-text-color); +} + +:root[lwt-tree] { + --richlist-button-background: var(--sidebar-background-color); +} + +:root:not([lwt-tree]):-moz-lwtheme[lwtheme-image] { + background-image: var(--lwt-header-image) !important; + background-repeat: no-repeat; + background-position: right top !important; +} + +:root:not([lwt-tree]):-moz-lwtheme:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); +} + +:root:not([lwt-tree]):-moz-lwtheme dialog, +#calendar-event-dialog-inner:not([lwt-tree]):-moz-lwtheme, +#calendar-task-dialog-inner:not([lwt-tree]):-moz-lwtheme { + background-color: -moz-Dialog; + color: -moz-DialogText; + text-shadow: none !important; + + --box-text-color: MenuText; + --box-background-color: Menu; + --box-border-color: ThreeDShadow; + --checkbox-border-color: rgba(128, 128, 128, .6); + --checkbox-unchecked-bgcolor: Field; + --checkbox-unchecked-hover-bgcolor: Field; + --field-text-color: FieldText; + --field-background-color: Field; + --field-border-color: rgba(128, 128, 128, .6); + --field-border-hover-color: rgba(128, 128, 128, .8); + --selected-item-color: var(--color-blue-60); + --lwt-accent-color: -moz-Dialog; + --richlist-button-background: -moz-Dialog; + --tab-hover-background: hsla(0, 0%, 50%, 0.15); + --tab-selected-background: hsla(0, 0%, 50%, 0.25); +} + +@media (prefers-color-scheme: dark) { + :host, + :root:-moz-lwtheme, + :root:not([lwt-tree]):-moz-lwtheme dialog { + --box-text-color: var(--color-ink-10); + --box-background-color: var(--color-ink-80); + --box-border-color: rgba(249, 249, 250, 0.3); + --field-text-color: var(--color-ink-10); + --field-background-color: var(--color-gray-70); + --field-border-color: hsla(0, 0%, 70%, 0.4); + --field-border-hover-color: hsla(0, 0%, 70%, 0.5); + --selected-item-color: var(--color-blue-50); + --highlight-background: var(--color-white); + --primary-text-color: var(--color-ink-10); + --tab-hover-background: hsla(0, 0%, 50%, 0.3); + --tab-selected-background: hsla(0, 0%, 50%, 0.5); + } +} + +@media (prefers-contrast) { + :host, + :root:not(:-moz-lwtheme) { + --button-background-color: ButtonFace; + --button-hover-background-color: SelectedItem; + --button-active-background-color: SelectedItem; + --button-text-active: SelectedItemText; + --button-border-color: ThreeDShadow; + --field-border-color: ThreeDShadow; + --field-border-hover-color: SelectedItemText; + --primary-text-color: SelectedItemText; + --selected-item-color: SelectedItem; + --tab-hover-background: SelectedItem; + --tab-selected-background: SelectedItem; + } + + button[open], + button:not([disabled="true"]):hover, + button:not([disabled="true"]):hover:active, + menulist:not([disabled="true"],[open="true"]):hover, + menulist[open="true"]:not([disabled="true"]), + tab:hover, + tab[visuallyselected="true"] { + color: var(--button-text-active) !important; + } +} + +dialog::part(content-box) { + flex: 1; +} + +dialog.scrollable { + width: 100vw; + height: 100vh; +} + +dialog.scrollable::part(content-box) { + overflow: scroll; +} + +html|input, +html|textarea { + appearance: none; + background-color: var(--field-background-color); + border: 1px solid var(--field-border-color); + border-radius: var(--button-border-radius); + color: var(--field-text-color); + margin: 2px 4px; +} + +html|input:not(:focus):hover, +html|textarea:not(:focus):hover { + border-color: var(--field-border-hover-color); +} + +html|input:focus, +html|textarea:focus { + border-color: var(--selected-item-color); + outline: 1px solid var(--selected-item-color); +} + +:root[lwt-tree-brighttext] html|input::selection, +:root[lwt-tree-brighttext] html|textarea::selection, +:root[lwt-default-theme-in-dark-mode] html|input::selection, +:root[lwt-default-theme-in-dark-mode] html|textarea::selection { + background-color: var(--highlight-background); + color: var(--selected-item-color); +} + +html|input:is([type="email"],[type="tel"],[type="text"],[type="password"], + [type="url"],[type="number"]):disabled { + opacity: 0.4; +} + +html|input[type="number"] { + padding-inline-end: 1px; +} + +html|input[type="number"]::-moz-number-spin-up, +html|input[type="number"]::-moz-number-spin-down { + appearance: none; + width: 16px; + background-position: center; + background-color: var(--button-background-color); + background-repeat: no-repeat; + border: 1px solid var(--field-border-color); + -moz-context-properties: stroke; + stroke: currentColor; +} + +html|input[type="number"]::-moz-number-spin-up { + background-image: var(--icon-nav-up-sm); + border-bottom-style: none; + border-radius: 2px 2px 0 0; +} +html|input[type="number"]::-moz-number-spin-down { + background-image: var(--icon-nav-down-sm); + border-radius: 0 0 2px 2px; +} + +button, +menulist, +html|input[type="color"] { + appearance: none; + min-height: 24px; + /* !important overrides button.css for disabled and default XUL buttons: */ + color: inherit !important; + border: 1px solid var(--button-border-color); /* needed for high-contrast mode, where it'll show up */ + border-radius: var(--button-border-radius); + background-color: var(--button-background-color); + padding: 0 8px; + text-decoration: none; + margin: 4px; + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ + font-size: 1em; +} + +menulist { + padding-inline: 4px; +} + +html|input[type="color"] { + padding: 4px; +} + +#folderCompactDialog { + width: 50em; +} + +#resetColor { + list-style-image: url("chrome://messenger/skin/icons/forget.svg"); + -moz-context-properties: fill; + fill: currentColor; + min-width: 16px; + min-height: 16px; + padding: 2px !important; + margin-inline-end: 4px; + --toolbarbutton-hover-background: var(--button-hover-background-color); + --toolbarbutton-hover-bordercolor: var(--button-border-color); + --toolbarbutton-active-background: var(--button-active-background-color); + --toolbarbutton-active-bordercolor: var(--button-border-color); +} + +#resetColor:not(:hover) { + background-color: transparent; +} + +#resetColor .button-icon { + margin-inline-end: 0; +} + +button:-moz-focusring { + outline: 2px solid var(--selected-item-color); + outline-offset: -1px; +} + +button:not([disabled="true"]):hover, +menulist:not([disabled="true"],[open="true"]):hover, +menulist[open="true"]:not([disabled="true"]), +html|input[type="color"]:not([disabled="true"]):hover { + background-color: var(--button-hover-background-color); +} + +button[open], +button[open]:hover, +button:not([disabled="true"]):hover:active, +html|input[type="color"]:not([disabled="true"]):hover:active { + background-color: var(--button-active-background-color); +} + +button[default] { + background-color: var(--selected-item-color); + color: var(--primary-text-color) !important; +} + +button[default]:-moz-focusring { + border-color: var(--primary-focus-border); + outline-offset: 0; +} + +button[default]:not([disabled="true"]):hover { + background-color: var(--primary-background-hover); +} + +button[default]:not([disabled="true"]):hover:active { + background-color: var(--primary-background-active); +} + +button[is="toolbarbutton-menu-button"] > .button-box > button { + border-inline-end-color: var(--button-border-color); +} + +button > .button-box > dropmarker { + padding-inline-start: 3px; +} + +button[disabled="true"], +menulist[disabled="true"] { + opacity: 0.4; +} + +menulist::part(label-box) { + font-weight: inherit; + text-shadow: none; +} + +menulist:-moz-focusring::part(label-box), +menulist:-moz-focusring:not([open="true"])::part(label-box) { + outline: none; +} + +menulist::part(icon) { + -moz-context-properties: fill; + fill: currentColor; +} + +menulist[is="menulist-addrbooks"]::part(icon) { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +menulist::part(dropmarker) { + appearance: none; + width: 16px; + padding: 0; + border: none; + background-color: transparent; +} + +menulist::part(dropmarker-icon) { + -moz-context-properties: stroke; + stroke: currentColor; + width: 16px; +} + +menulist[is="menulist-editable"][editable="true"]::part(text-input) { + background-color: var(--field-background-color); + color: var(--field-text-color); + border: 1px solid var(--field-border-color); + border-start-start-radius: 3px; + border-end-start-radius: 3px; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +menulist[is="menulist-editable"][editable="true"]::part(text-input):focus { + border-color: var(--selected-item-color); + outline: 1px solid var(--selected-item-color); +} + +.menu-iconic-left { + -moz-context-properties: fill; + fill: currentColor; +} + +.abMenuItem > .menu-iconic-left { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.menu-right { + appearance: none; + -moz-context-properties: fill; + list-style-image: var(--icon-nav-right-sm); + fill: currentColor; +} + +.menu-right:-moz-locale-dir(rtl) { + list-style-image: var(--icon-nav-left-sm); +} + +button menupopup menuseparator, +menulist menupopup menuseparator { + appearance: none; + margin: 2px 0; + padding: 0; + border-top: 1px solid var(--box-border-color); + border-bottom: none; +} + +:root[lwt-tree] .autocomplete-richlistbox { + border-style: none; + background-color: var(--box-background-color); +} + +label { + margin-inline-start: 4px; +} + +radio, +checkbox { + appearance: none; +} + +checkbox { + margin: 2px 4px; + padding-inline: 4px 2px; +} + +radio[disabled="true"], +checkbox[disabled="true"] { + color: #999; +} + +.radio-check { + appearance: none; + width: 16px; + height: 16px; + border: 1px solid var(--field-border-color); + margin: 0; + margin-inline-end: 6px; + background-color: var(--field-background-color); +} + +.radio-check { + border-radius: 50%; +} + +radio:not([disabled="true"]):hover > .radio-check, +checkbox:not([disabled="true"]):hover > .checkbox-check { + border-color: var(--selected-item-color); +} + +.radio-check[selected] { + list-style-image: url("chrome://global/skin/icons/radio.svg"); + -moz-context-properties: fill; + color: var(--checkbox-checked-border-color, currentColor); + fill: var(--checkbox-checked-color, AccentColorText); + background-color: var(--checkbox-checked-bgcolor, AccentColor); +} + +:root[lwt-tree] richlistbox { + appearance: none; + background-color: var(--field-background-color); + color: var(--field-text-color); + border: 1px solid var(--field-border-color); +} + +:root[lwt-tree] richlistitem[selected="true"] { + background-color: hsla(0,0%,50%,.15); + color: inherit; +} + +:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] { + background-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 50%, 0.35)); + color: var(--sidebar-highlight-text-color, inherit); + outline: 1px solid var(--selected-item-color) !important; + outline-offset: -1px; +} + +:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] button, +:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] menulist { + color: var(--sidebar-text-color) !important; +} + +richlistitem[selected="true"] { + background-color: var(--tab-selected-background); + color: inherit; +} + +richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: var(--selected-item-color); + color: var(--selected-item-text-color); +} + +richlistbox[seltype="multiple"]:focus > richlistitem[current="true"] { + outline-color: var(--selected-item-color); +} + +richlistbox > richlistitem { + padding-block: 1px; +} + +richlistbox > richlistitem menulist { + margin-block: 2px; +} + +richlistitem button, +richlistitem menulist { + background-color: var(--richlist-button-background); + background-image: linear-gradient(var(--button-background-color), + var(--button-background-color)); + color: var(--field-text-color) !important; +} + +richlistitem button:not([disabled="true"]):hover, +richlistitem menulist:not([disabled="true"]):hover, +richlistitem menulist[open="true"]:not([disabled="true"]) { + background-color: var(--richlist-button-background); + background-image: linear-gradient(var(--button-hover-background-color), + var(--button-hover-background-color)); +} + +richlistitem button[open], +richlistitem button[open]:hover, +richlistitem button:not([disabled="true"]):hover:active { + background-color: var(--richlist-button-background); + background-image: linear-gradient(var(--button-active-background-color), + var(--button-active-background-color)); +} + +menulist[open="true"], +menulist:not([disabled="true"], [open="true"]):hover { + border-color: var(--button-border-color); +} + +:root[lwt-tree] tree { + appearance: none; + border: 1px solid var(--sidebar-border-color); +} + +tabbox { + color: inherit; + text-shadow: none; +} + +tabs { + margin-block: 8px 10px; + margin-inline: 4px; + border-bottom: 1px solid var(--box-border-color); +} + +tab { + appearance: none; + margin-top: 0; + padding: 6px 10px !important; + border-bottom: 2px solid transparent; + color: inherit !important; +} + +tab:hover { + background-color: var(--tab-hover-background); +} + +tab[visuallyselected="true"] { + margin-block: 0; + background-color: var(--tab-selected-background); + border-bottom-color: var(--lwt-tab-line-color, var(--selected-item-color)); +} + +tabpanels { + appearance: none; + border: none; + padding: 0; + background-color: transparent; + color: inherit; +} + +.dialog-button-box { + padding-top: 6px; +} + +fieldset:-moz-lwtheme { + border: 1px solid var(--field-border-color); +} + +legend:-moz-lwtheme { + background-color: var(--lwt-accent-color); +} + +separator.groove:not([orient="vertical"]) { + border-top-color: var(--field-border-color); + border-bottom-style: none; +} + +.tip-caption { + opacity: 0.7; + font-size: .9em; +} + +:root[lwt-tree-brighttext] .text-link { + color: #0aa5ff; +} + +.text-link:focus-visible { + outline: 2px solid var(--selected-item-color); + outline-offset: 1px; + border-radius: 1px; +} + +.alert-icon { + content: var(--icon-warning-dialog); + height: 48px; + width: 48px; +} + +.question-icon { + content: var(--icon-question-dialog); + height: 48px; + width: 48px; +} + +p { + margin: 2px 4px; +} + +hr { + width: 100%; + border-top: 1px solid var(--field-border-color); + border-bottom: 0; +} |