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
/* This file defines the various widgets used across the application. */
/* Default Button Styles */
.button {
--icon-size: 16px;
appearance: none;
background-color: var(--button-background-color);
color: var(--button-text-color);
border: var(--button-border-size) solid var(--button-border-color);
border-radius: var(--button-border-radius);
padding: var(--button-padding);
margin: var(--button-margin);
min-width: 6em;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: inherit;
@media (prefers-reduced-motion: no-preference) {
transition: background-color .15s, border-color .15s;
}
&:enabled {
&:hover {
color: var(--button-hover-text-color);
background-color: var(--button-hover-background-color);
border-color: var(--button-border-color);
&:active {
background-color: var(--button-active-background-color);
border-color: var(--button-border-color);
}
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
}
&[aria-pressed="true"] {
box-shadow: var(--button-pressed-shadow);
}
&:disabled {
opacity: 0.4;
pointer-events: none;
}
&[hidden] {
display: none;
}
&:dir(rtl),
&:-moz-locale-dir(rtl) {
background-position-x: right var(--button-padding);
}
&.icon-button {
background-image: none;
background-size: var(--icon-size);
background-position: var(--button-padding) center;
background-repeat: no-repeat;
padding-inline-start: calc(var(--button-padding) * 2 + var(--icon-size));
padding-inline-end: calc(var(--button-padding) * 2);
min-width: 0;
}
&.icon-only {
background-position: center;
/* 2px at the end for the border. */
height: calc(var(--button-padding) * 2 + var(--icon-size) + 2px);
padding: 0;
aspect-ratio: 1;
}
&.toolbar-button,
&.unified-toolbar-button {
background-color: transparent;
color: currentColor;
border-color: transparent;
margin-block: 4px;
}
&.toolbar-button[open="true"],
&.toolbar-button:not([disabled="true"]):hover,
&.unified-toolbar-button:enabled:is([aria-pressed="true"], :hover) {
color: var(--button-hover-text-color);
background-color: var(--toolbar-button-hover-background-color);
border-color: var(--toolbar-button-hover-border-color);
}
&.toolbar-button[open="true"] {
color: var(--button-hover-text-color);
}
&.unified-toolbar-button[aria-pressed="true"] {
&:enabled {
color: var(--button-hover-text-color);
box-shadow: var(--button-pressed-shadow);
&:hover {
background-color: var(--toolbar-button-hover-checked-color);
}
}
}
&.toolbar-button:not([disabled="true"]):hover:active,
&.unified-toolbar-button:enabled:hover:active {
background-color: var(--toolbar-button-active-background-color);
border-color: var(--toolbar-button-active-border-color);
}
& > img {
pointer-events: none;
}
/* Primary Button Styles */
&.button-primary {
background-color: var(--button-primary-background-color);
color: var(--button-primary-text-color);
border-color: var(--button-primary-border-color);
&:enabled {
&:hover {
background-color: var(--button-primary-hover-background-color);
color: var(--button-primary-text-color);
border-color: var(--button-primary-border-color);
&:active {
background-color: var(--button-primary-active-background-color);
border-color: var(--button-primary-border-color);
}
}
}
@media (prefers-contrast) {
:root:not([lwtheme]) &:hover {
border-color: var(--button-primary-hover-border-color);
}
}
}
/* Destructive Button Styles */
&.button-destructive {
background-color: var(--button-destructive-background-color);
color: var(--button-destructive-text-color);
border-color: var(--button-destructive-border-color);
&:hover {
background-color: var(--button-destructive-hover-background-color);
border-color: var(--button-destructive-border-color);
&:active {
background-color: var(--button-destructive-active-background-color);
border-color: var(--button-destructive-border-color);
}
}
}
/* Flat Button Styles */
&.button-flat {
background-color: transparent;
color: currentColor;
border-color: transparent;
&:hover {
background-color: color-mix(in srgb, currentColor 10%, transparent);
border-color: transparent;
&:active {
background-color: color-mix(in srgb, currentColor 30%, transparent);
border-color: transparent;
}
}
@media (prefers-contrast) {
&:hover,
&:hover:active {
background-color: SelectedItem;
}
}
&:focus-visible {
color: currentColor;
}
}
/* Link Button Styles */
&.link-button {
background-color: transparent;
color: var(--button-link-text-color);
border-color: transparent;
&:hover {
background-color: transparent;
color: var(--button-link-text-color);
border-color: transparent;
text-decoration: underline;
&:active {
background-color: transparent;
color: var(--button-link-active-text-color);
border-color: transparent;
}
}
}
/* Check Button Styles */
&.check-button {
position: relative;
&:not(.icon-button) {
padding-inline-start: calc(var(--button-padding) * 2 + 9px);
padding-inline-end: calc(var(--button-padding) * 2);
}
&.icon-button {
background-position: calc(var(--button-padding) * 1.2 + var(--button-pressed-indicator-padding)) center;
padding-inline-start: calc(var(--button-padding) * 2 + var(--icon-size) + var(--button-pressed-indicator-padding));
&:dir(rtl),
&:-moz-locale-dir(rtl) {
background-position-x: right calc(var(--button-padding) * 1.2 + var(--button-pressed-indicator-padding));
}
}
&.icon-only {
background-position: calc(var(--button-padding) + var(--button-pressed-indicator-padding)) center;
aspect-ratio: auto;
&:dir(rtl),
&:-moz-locale-dir(rtl) {
background-position-x: right calc(var(--button-padding) + var(--button-pressed-indicator-padding));
}
}
&::before {
content: '';
box-sizing: border-box;
background-color: color-mix(in srgb, currentColor 10%, transparent);
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
border-radius: 4px;
width: 4px;
height: 12px;
margin: auto 3px;
position: absolute;
inset-block: 0;
inset-inline-start: 2px;
}
&[aria-pressed="true"]::before {
background-color: var(--button-primary-background-color);
border-color: var(--button-primary-border-color);
box-shadow: var(--button-pressed-indicator-shadow);
}
}
@container threadPane (max-width: 999px) {
&.collapsible-button {
padding-inline-end: 0;
& span {
display: inline-block;
visibility: hidden;
width: 0;
}
}
}
}
/* Button Group Styles */
.button-group {
display: inline-flex;
color: var(--button-text-color);
border: var(--button-border-size) solid var(--button-border-color);
border-radius: var(--button-border-radius);
margin: var(--button-margin);
position: relative;
isolation: isolate;
z-index: 1;
& :is(.button, input) {
--button-margin: 0;
border: none;
border-radius: 0;
z-index: 2;
}
& .button {
&:focus-visible {
outline-offset: 0;
z-index: 3;
}
&:first-child {
border-inline-end: var(--button-border-size) solid var(--button-border-color);
border-start-start-radius: calc(var(--button-border-radius) - 1px);
border-end-start-radius: calc(var(--button-border-radius) - 1px);
}
&:last-child {
border-start-end-radius: calc(var(--button-border-radius) - 1px);
border-end-end-radius: calc(var(--button-border-radius) - 1px);
}
& + .button:not(:last-child) {
border-inline-end: var(--button-border-size) solid var(--button-border-color);
}
}
}
@media (-moz-windows-accent-color-in-titlebar) {
:root:not([lwtheme]) #navigation-toolbox :is(.unified-toolbar-button, .toolbar-button):focus-visible {
outline-color: AccentColorText;
}
}
/* Select element */
.select {
appearance: none;
text-decoration: none;
background-color: var(--button-background-color);
color: var(--button-text-color);
border: var(--button-border-size) solid var(--button-border-color);
border-radius: var(--button-border-radius);
padding: var( --button-padding);
margin: var(--button-margin);
font-size: 1em;
&:enabled {
&:hover {
color: var(--button-hover-text-color);
background-color: var(--button-hover-background-color);
border-color: var(--button-border-color);
&:active {
background-color: var(--button-active-background-color);
border-color: var(--button-border-color);
}
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
}
&:disabled {
opacity: 0.4;
pointer-events: none;
}
&[hidden] {
display: none;
}
&:not([size], [multiple]) {
--logical-padding: 3px;
--start-padding: calc(var(--logical-padding) + 3px);
--end-padding: calc(var(--logical-padding) + 9px);
--background-image-width: 12px;
background-image: var(--icon-nav-down-sm);
background-position: right calc(var(--end-padding) / 2) center;
background-repeat: no-repeat;
background-size: auto var(--background-image-width);
-moz-context-properties: fill;
fill: currentColor;
font: inherit;
padding-inline-start: var(--start-padding);
padding-inline-end: calc(var(--background-image-width) + var(--end-padding));
text-overflow: ellipsis;
&:dir(rtl) {
background-position-x: left calc(var(--end-padding) / 2);
}
& > option {
background-color: var(--in-content-box-background);
color: var(--in-content-text-color);
}
}
}
.kbd-container kbd {
background-color: var(--layout-background-3);
color: var(--layout-color-2);
text-transform: uppercase;
font-size: 0.8rem;
line-height: 1;
font-weight: bold;
box-shadow: inset 0px -1px 0px var(--layout-border-2);
border-radius: 3px;
display: inline-block;
padding: 2px 4px;
&:first-of-type {
margin-inline-start: 6px;
}
}