87 lines
2.6 KiB
CSS
87 lines
2.6 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/. */
|
|
|
|
toolbarbutton {
|
|
appearance: auto;
|
|
-moz-default-appearance: toolbarbutton;
|
|
margin: 0;
|
|
/* Prefer pixels over rem spacing in chrome */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
padding: 3px;
|
|
|
|
&:where(:focus-visible) {
|
|
outline: auto;
|
|
}
|
|
|
|
@media not (-moz-platform: macos) {
|
|
&:where(:hover) {
|
|
color: -moz-buttonhovertext;
|
|
}
|
|
&:where(:hover:active, [checked], [open]) {
|
|
color: -moz-buttonactivetext;
|
|
}
|
|
}
|
|
|
|
&:where([disabled]) {
|
|
color: GrayText;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
.toolbarbutton-text {
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ::::: toolbarbutton badged ::::: */
|
|
|
|
.toolbarbutton-badge {
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
background-color: var(--toolbarbutton-badge-background-color);
|
|
font-size: var(--toolbarbutton-badge-font-size);
|
|
padding: 0 var(--toolbarbutton-badge-padding-inline) var(--toolbarbutton-badge-padding-block-end);
|
|
color: white;
|
|
text-shadow: none;
|
|
border-radius: var(--border-radius-xsmall);
|
|
/* Inset badge embossing does not map to elevation box-shadow tokens */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
box-shadow:
|
|
0 1px 0 hsla(0, 100%, 100%, 0.2) inset,
|
|
0 -1px 0 hsla(0, 0%, 0%, 0.1) inset,
|
|
0 1px 0 hsla(206, 50%, 10%, 0.2);
|
|
/* Prefer pixels over rem spacing in chrome */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
margin: -5px 0 0 !important;
|
|
/* Prefer pixels over rem spacing in chrome */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
margin-inline-end: -4px !important;
|
|
min-width: var(--toolbarbutton-badge-min-width);
|
|
max-width: var(--toolbarbutton-badge-max-width);
|
|
line-height: 1;
|
|
text-align: center;
|
|
align-self: start;
|
|
justify-self: end;
|
|
|
|
@media (-moz-platform: windows) {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
@media (-moz-platform: macos) {
|
|
--toolbarbutton-badge-font-size: 9px;
|
|
line-height: 1.11;
|
|
/* Prefer pixels over rem spacing in chrome */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
padding-top: 1px;
|
|
|
|
toolbar[mode="icons"] > *|* > & {
|
|
/* Prefer pixels over rem spacing in chrome */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
margin-inline-end: -10px !important;
|
|
}
|
|
}
|
|
}
|