1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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");
}
|
