Revision control
Copy as Markdown
Other Tools
/* 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
:root {
--in-content-button-border-radius: 3px;
@media not (prefers-contrast) {
--in-content-button-background: light-dark(var(--grey-90-a10), rgba(249, 249, 250, 0.1));
--in-content-button-background-hover: light-dark(var(--grey-90-a20), 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);
& + & {
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);
}
&.size5 {
width: calc(5ch + 55px);
}
&::-moz-number-spin-box {
padding-inline-start: 10px;
}
&::-moz-number-spin-up,
&::-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;
}
&::-moz-number-spin-up:hover,
&::-moz-number-spin-down:hover {
background-color: var(--in-content-button-background-hover);
}
&::-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);
}
&::-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);
}