diff options
Diffstat (limited to '')
-rw-r--r-- | toolkit/themes/windows/global/button.css | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/toolkit/themes/windows/global/button.css b/toolkit/themes/windows/global/button.css new file mode 100644 index 0000000000..14a6be2e93 --- /dev/null +++ b/toolkit/themes/windows/global/button.css @@ -0,0 +1,108 @@ +/* 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/. */ + +/* ===== button.css ===================================================== + == Styles used by the XUL button element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* :::::::::: button :::::::::: */ + +button { + margin: 1px 5px 2px; + min-width: 6.3em; + color: ButtonText; + background-color: ButtonFace; + text-shadow: none; + border: 1px solid ThreeDLightShadow; + padding: 2px 3px; + /* TODO: In Windows 11 perhaps we want some border-radius */ +} + +button:where(:hover) { + background-color: -moz-ButtonHoverFace; +} + +button:where(:hover:active) { + background-color: -moz-ButtonActiveFace; +} + +.button-text { + margin: 0; + text-align: center; +} + +/* .......... focused state .......... */ + +button:focus-visible { + outline: var(--default-focusring); + outline-offset: calc(-1 * var(--default-focusring-width) - 2px); +} + +@media (prefers-color-scheme: dark) { + button:focus-visible { + outline: 1px auto; + outline-offset: initial; + } +} + +/* .......... default/hover/focused state .......... */ + +@media (prefers-contrast) and (-moz-windows-compositor) { + /* This is for high-contrast black and white themes on Windows 8 and later, + where the native appearance renders a different background (which + appears to be equivalent to the Highlight color) if the button is in the + default, hovered or focused state. However, if these states overlap with + the active, disabled, open or checked state, the appearance reverts back + to the default background. */ + button:where([default="true"],:hover,:focus):where(:not(:active,[disabled="true"],[open="true"],[checked="true"])) { + color: HighlightText; + } +} + +/* .......... disabled state .......... */ + +button:where([disabled="true"]) { + color: GrayText; + background-color: ButtonFace; +} + +@media (-moz-windows-classic) { + button:where([disabled="true"]) { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } +} + +/* ::::: menu buttons ::::: */ + +.button-menu-dropmarker { + appearance: none; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill; + fill: currentColor; + width: 12px; + height: 12px; +} + +/* ::::: plain buttons ::::: */ + +button.plain { + margin: 0 !important; + padding: 0 !important; +} + +button[type="disclosure"] { + margin: 0; + appearance: none; + list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg"); + -moz-context-properties: fill; + fill: currentColor; + min-width: 0; +} + +button[type="disclosure"][open="true"] { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); +} |