diff options
Diffstat (limited to 'toolkit/themes/shared/checkbox.css')
| -rw-r--r-- | toolkit/themes/shared/checkbox.css | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/toolkit/themes/shared/checkbox.css b/toolkit/themes/shared/checkbox.css new file mode 100644 index 0000000000..725c995a4d --- /dev/null +++ b/toolkit/themes/shared/checkbox.css @@ -0,0 +1,211 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +checkbox { + appearance: none; + align-items: center; + margin: 4px 2px; +} + +.checkbox-icon[src] { + margin-inline-end: 2px; +} + +.checkbox-label { + margin: 1px 0; +} + +/* ..... disabled state ..... */ + +checkbox[disabled="true"] { + opacity: 0.4; +} + +/* ::::: checkmark image ::::: */ + +.checkbox-check { + appearance: none; + color: var(--checkbox-border-color, ThreeDShadow); + background-color: var(--checkbox-unchecked-bgcolor, Field); + border: 1px solid currentColor; + border-radius: 2px; + margin-inline-end: 6px; +} + +.checkbox-check:not([native]) { + height: 16px; + width: 16px; +} + +checkbox:not([disabled="true"]):hover > .checkbox-check { + background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, AccentColor 4%, Field)); +} + +checkbox:not([disabled="true"]):hover:active > .checkbox-check { + background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, AccentColor 8%, Field)); +} + +.checkbox-check[checked] { + border-color: var(--checkbox-checked-border-color, transparent); + background-color: var(--checkbox-checked-bgcolor, AccentColor); + background-image: url("chrome://global/skin/icons/check.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + color: var(--checkbox-checked-color, AccentColorText); + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact; +} + +checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, AccentColor)); +} + +checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] { + background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, AccentColor)); +} + +checkbox:not([native]):focus-visible > .checkbox-check { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +@media (prefers-contrast) { + checkbox:not([disabled="true"]):hover > .checkbox-check { + /* color will set the border-color on the check due to how HCM works for in-content pages. */ + color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field)); + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked], + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + color: var(--checkbox-checked-border-color, AccentColorText); + fill: var(--checkbox-checked-color, AccentColorText); + background-color: var(--checkbox-checked-bgcolor, AccentColor); + } +} + +/* ..... Platform overrides ..... */ + +@media (-moz-platform: windows) { + checkbox:where([native]) { + appearance: auto; + -moz-default-appearance: checkbox-container; + align-items: center; + margin: 2px 4px; + padding-top: 1px; + padding-bottom: 1px; + padding-inline-start: 4px; + padding-inline-end: 2px; + } + + .checkbox-label[native] { + margin: 0; + } + + /* ..... focused state ..... */ + + checkbox[native]:focus-visible > .checkbox-label-box { + outline: var(--focus-outline); + } + + /* ..... disabled state ..... */ + + checkbox[native][disabled="true"] { + color: GrayText; + } + + @media (-moz-windows-classic) { + checkbox[native][disabled="true"] { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } + } + + /* ::::: checkmark image ::::: */ + + .checkbox-check[native] { + appearance: auto; + -moz-default-appearance: checkbox; + align-items: center; + margin-inline-end: 5px; + } +} + +@media (-moz-platform: macos) { + checkbox:where([native]) { + appearance: auto; + -moz-default-appearance: checkbox-container; + align-items: center; + margin: 4px 2px; + } + + .checkbox-label[native] { + margin: 1px 0; + } + + /* ..... disabled state ..... */ + + checkbox[native][disabled="true"] { + color: GrayText; + } + + /* ::::: checkmark image ::::: */ + + .checkbox-check[native] { + appearance: auto; + -moz-default-appearance: checkbox; + margin-block: 1px 0; + margin-inline: 1px 3px; + /* vertical-align tells native theming where to snap to. However, this doesn't + * always work reliably because of bug 503833. */ + vertical-align: top; + width: 1.3em; + height: 1.3em; + } +} + +@media (-moz-platform: linux) { + checkbox:where([native]) { + appearance: auto; + -moz-default-appearance: checkbox-container; + align-items: center; + margin: 2px 4px; + } + + .checkbox-label-box[native] { + appearance: auto; + -moz-default-appearance: checkbox-label; + } + + .checkbox-label[native] { + margin: 0; + } + + /* ..... focused state ..... */ + + checkbox[native]:focus-visible > .checkbox-label-box { + /* Native theming should take care of this but it appears to be broken with + some Gtk themes. Bug 1312169. */ + outline: var(--focus-outline); + } + + /* ..... disabled state ..... */ + + checkbox[native][disabled="true"] { + color: GrayText; + } + + /* ::::: checkmark image ::::: */ + + .checkbox-check[native] { + appearance: auto; + -moz-default-appearance: checkbox; + margin: 2px; + margin-inline-end: 4px; + } +} |