зеркало из https://github.com/mozilla/gecko-dev.git
214 строки
5.4 KiB
CSS
214 строки
5.4 KiB
CSS
/* 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;
|
|
-moz-box-align: 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;
|
|
-moz-box-align: 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;
|
|
-moz-box-align: center;
|
|
min-width: 13px;
|
|
min-height: 13px;
|
|
margin-inline-end: 5px;
|
|
}
|
|
}
|
|
|
|
@media (-moz-platform: macos) {
|
|
checkbox:where([native]) {
|
|
appearance: auto;
|
|
-moz-default-appearance: checkbox-container;
|
|
-moz-box-align: 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;
|
|
-moz-box-align: 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;
|
|
}
|
|
}
|