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
|
/* 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/. */
:root {
--in-content-button-border-radius: 3px;
}
@media not (prefers-contrast) {
:root {
--in-content-button-background: var(--grey-90-a10);
--in-content-button-background-hover: var(--grey-90-a20);
}
@media (prefers-color-scheme: dark) {
:root {
--in-content-button-background: rgba(249, 249, 250, 0.1);
--in-content-button-background-hover: rgba(249, 249, 250, 0.15);
}
}
}
button {
margin: 0;
padding: 0 12px;
border-radius: var(--in-content-button-border-radius);
min-height: var(--in-content-button-height);
}
button + button {
margin-inline-start: 6px;
}
input[type="number"] {
min-height: calc(var(--in-content-button-height) - 4px);
padding: 1px;
border-radius: var(--in-content-button-border-radius);
}
/* sizes: chars + 8px padding + 1px borders + spin buttons 25+2+10px */
input[type="number"].size3 {
width: calc(3ch + 55px);
}
input[type="number"].size5 {
width: calc(5ch + 55px);
}
input[type="number"]::-moz-number-spin-box {
padding-inline-start: 10px;
}
input[type="number"]::-moz-number-spin-up,
input[type="number"]::-moz-number-spin-down {
appearance: none;
min-width: 25px;
border: 1px solid var(--in-content-box-border-color);
border-radius: 0;
background-color: var(--in-content-button-background);
background-position: center;
background-repeat: no-repeat;
-moz-context-properties: stroke;
stroke: currentColor;
}
input[type="number"]::-moz-number-spin-up:hover,
input[type="number"]::-moz-number-spin-down:hover {
background-color: var(--in-content-button-background-hover);
}
input[type="number"]::-moz-number-spin-up {
min-height: calc(var(--in-content-button-height) * 0.5 - 3px);
border-bottom-width: 1px;
border-bottom-style: solid;
border-start-end-radius: var(--in-content-button-border-radius);
background-image: var(--icon-nav-up-sm);
}
input[type="number"]::-moz-number-spin-down {
min-height: calc(var(--in-content-button-height) * 0.5 - 4px);
border-end-end-radius: var(--in-content-button-border-radius);
background-image: var(--icon-nav-down-sm);
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"]) {
border-radius: var(--in-content-button-border-radius);
padding-block: initial;
/* it should be --in-content-button-height but input doesn't include the border */
min-height: calc(var(--in-content-button-height) - 2px);
}
|
