Source code
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
/* all localizable skin settings shall live here */
@import url("close-icon.css");
:root {
--default-focusring-width: 2px;
--default-focusring: var(--default-focusring-width) dotted;
--arrowpanel-background: Field;
--arrowpanel-color: FieldText;
--arrowpanel-border-color: ThreeDShadow;
--arrowpanel-border-radius: 8px;
--arrowpanel-padding: 16px;
--arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent);
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent);
--panel-separator-color: color-mix(in srgb, currentColor 25%, transparent);
--panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent);
--popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
--toolbarbutton-icon-fill: currentColor;
--toolbarbutton-disabled-opacity: 0.4;
--toolbar-field-background-color: Field;
--toolbar-field-color: FieldText;
--toolbar-field-border-color: ThreeDShadow;
--toolbar-field-focus-background-color: Field;
--toolbar-field-focus-color: FieldText;
--toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
--toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
--toolbar-non-lwt-textcolor: -moz-dialogtext;
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
--toolbar-color: var(--toolbar-non-lwt-textcolor);
&[lwtheme] {
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-color: var(--lwt-text-color, inherit);
}
/* This color scheme should match --toolbar-color. However, note that
* individual toolbars might override this (see ToolbarIconColor and the
* brighttext attribute). */
--toolbar-color-scheme: light dark;
&[lwt-toolbar="light"] {
--toolbar-color-scheme: light;
}
&[lwt-toolbar="dark"] {
--toolbar-color-scheme: dark;
}
@media (prefers-contrast) {
/* Reduce the opacity of disabled toolbar buttons in order to increase
contrast with the enabled state. */
--toolbarbutton-disabled-opacity: 0.3;
--panel-separator-color: currentColor;
--toolbar-field-focus-border-color: var(--focus-outline-color);
&:not([lwtheme]) {
--panel-disabled-color: GrayText;
}
}
background-color: -moz-Dialog;
color: -moz-DialogText;
font: message-box;
&[dialogroot] {
font: menu;
}
}
:is(menupopup, panel):where([type=arrow]) {
--panel-background: var(--arrowpanel-background);
--panel-color: var(--arrowpanel-color);
--panel-border-color: var(--arrowpanel-border-color);
--panel-border-radius: var(--arrowpanel-border-radius);
--panel-padding: var(--arrowpanel-padding);
}
/* Lightweight theme roots */
:root[lwtheme] {
toolbar,
&[lwt-popup="light"] panel {
color-scheme: light;
}
toolbar[brighttext],
&[lwt-popup="dark"] panel {
color-scheme: dark;
}
}
:root[lwtheme-image] {
text-shadow: 0 -0.5px 1.5px white;
}
:root[lwtheme-image][lwtheme-brighttext] {
text-shadow: 1px 1px 1.5px black;
}
/* General styles */
.plain {
appearance: none;
margin: 0 !important;
border: none;
padding: 0;
}
moz-input-box,
html|input {
min-width: 0;
}
html|input {
margin: 2px 4px;
}
html|button,
html|input,
html|select,
html|textarea {
font: inherit;
}
html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])),
html|textarea {
appearance: none;
padding: var(--space-small);
border: 1px solid var(--input-border-color, ThreeDShadow);
border-radius: var(--border-radius-small);
margin: 0;
background-color: var(--input-bgcolor, Field);
color: var(--input-color, FieldText);
&:where(:user-invalid) {
border-color: var(--outline-color-error);
}
&:where(:focus-visible) {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
}
/* adapted from toolkit/themes/shared/menulist-shared.css */
html|select:where(:not([size], [multiple])) {
appearance: none;
padding: 6px 16px;
padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
margin: 5px 2px 3px;
border: none;
border-radius: var(--border-radius-small);
font-weight: var(--font-weight-bold);
color: var(--button-color, ButtonText);
background-color: var(--button-bgcolor, ButtonFace);
background-position: right 10px center;
background-repeat: no-repeat;
-moz-context-properties: fill;
fill: currentColor;
&:-moz-locale-dir(rtl) {
background-position-x: left 10px;
}
&:hover {
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
}
&:hover:active {
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
}
.header {
font-weight: var(--font-weight-bold);
}
.indent {
margin-inline-start: 23px;
}
.box-padded {
padding: 5px;
}
/* XUL iframe */
xul|iframe {
border: none;
min-width: 10px;
min-height: 10px;
}
/* Label/description formatting */
xul|description,
xul|label {
cursor: default;
margin-block: 1px 2px;
margin-inline: 6px 5px;
}
xul|description {
margin-bottom: 4px;
}
xul|label[disabled="true"] {
color: GrayText;
}
.tooltip-label {
margin: 0;
word-wrap: break-word;
/* We must specify a min-width, otherwise word-wrap:break-word doesn't work.
min-width: 1px;
}
/* Links */
.text-link,
a {
color: var(--link-color);
cursor: pointer;
text-decoration: underline;
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--link-focus-outline-offset);
border-radius: 1px;
}
}
/* Override properties set on buttons, to display the links without unwanted styling */
button.text-link {
appearance: none;
background-color: transparent;
border: none;
min-width: 0;
margin: 0;
padding: 0;
font: inherit;
}
button.text-link .button-text {
/* Cancel out the default internal margin */
margin: 0;
}
/* Textbox context menu */
.textbox-contextmenu:-moz-locale-dir(rtl) {
direction: rtl;
}
/* Panel footer buttons */
.panel-footer {
margin: 8px 16px 16px;
}
.footer-button {
appearance: none;
border: 0;
border-radius: var(--border-radius-small);
color: var(--button-color, inherit);
background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
padding: .45em 1em;
min-height: var(--size-item-large);
font-weight: 600;
min-width: 0;
margin-inline: 8px 0;
margin-bottom: 0;
&.small-button {
margin: 0;
min-height: var(--size-item-medium);
font-size: var(--font-size-small);
align-items: center;
}
&[disabled] {
opacity: 0.4;
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
&:not([disabled]) {
&:hover {
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
}
&:hover:active {
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
}
&[default],
&.primary {
color: var(--button-primary-color);
background-color: var(--button-primary-bgcolor);
&:hover {
background-color: var(--button-primary-hover-bgcolor);
}
&:hover:active {
background-color: var(--button-primary-active-bgcolor);
}
}
}
&[type=menu] > .button-box > .button-menu-dropmarker {
appearance: none;
display: flex;
-moz-context-properties: fill;
fill: currentColor;
}
}
/* Autoscroll popup */
.autoscroller {
appearance: none;
/* Resets the native styles in windows and macOS */
border: none;
background-color: transparent;
-moz-window-shadow: none;
--panel-border-color: rgba(0,0,0,.4);
--panel-padding: 0;
--panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
--panel-shadow-margin: 4px;
/* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.sys.mjs. */
pointer-events: none;
}
.autoscroller::part(content) {
border-radius: 100%;
background-clip: padding-box;
box-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2);
width: 100%;
height: 100%;
}
.autoscroller[scrolldir="NS"] {
}
.autoscroller[scrolldir="EW"] {
}
/* Combobox dropdown renderer */
#ContentSelectDropdown > menupopup {
/* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
* the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
direction: ltr;
}
#ContentSelectDropdown > menupopup::part(arrowscrollbox-scrollbox) {
scrollbar-width: var(--content-select-scrollbar-width, auto);
}
#ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox) {
/* When authors specify a custom background, we use background-image to specify the author-supplied color.
* In that case, we don't want stuff like custom appearance or custom
* backgrounds, so we make sure to apply it on top of the default background. */
background-image: var(--content-select-background-image, none);
background-color: -moz-Combobox;
}
/* Full width separator in select */
#ContentSelectDropdown menuseparator {
padding-inline: 0;
}
/* Indent options in optgroups */
.contentSelectDropdown-ingroup .menu-iconic-text {
padding-inline-start: 2em;
}
.deemphasized {
color: var(--text-color-deemphasized);
}