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
:host,
:root {
--box-text-color: MenuText;
--box-background-color: Menu;
--box-border-color: ThreeDShadow;
--field-text-color: FieldText;
--field-background-color: Field;
--field-border-color: rgba(128, 128, 128, 0.6);
--field-border-hover-color: rgba(128, 128, 128, 0.8);
--primary-focus-border: -moz-Dialog;
--richlist-button-background: -moz-Dialog;
--tab-hover-background: hsla(0, 0%, 50%, 0.15);
--tab-selected-background: hsla(0, 0%, 50%, 0.25);
}
:root[lwtheme] {
background-color: var(--lwt-accent-color);
color: var(--lwt-text-color);
--box-text-color: var(--color-ink-90);
--box-background-color: var(--color-white);
--box-border-color: var(--color-gray-40);
--field-text-color: var(--color-gray-90);
--field-background-color: var(--color-white);
--field-border-color: rgba(0, 0, 0, 0.3);
--field-border-hover-color: rgba(0, 0, 0, 0.4);
--primary-focus-border: var(--lwt-accent-color);
&[lwtheme-image]:not([lwt-tree]) {
background-image: var(--lwt-header-image) !important;
background-repeat: no-repeat;
background-position: right top !important;
}
&:not([lwt-tree]):-moz-window-inactive {
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}
&:not([lwt-tree]) dialog,
& #calendar-event-dialog-inner:not([lwt-tree]),
& #calendar-task-dialog-inner:not([lwt-tree]) {
background-color: -moz-Dialog;
color: -moz-DialogText;
text-shadow: none !important;
--box-text-color: MenuText;
--box-background-color: Menu;
--box-border-color: ThreeDShadow;
--field-text-color: FieldText;
--field-background-color: Field;
--field-border-color: rgba(128, 128, 128, 0.6);
--field-border-hover-color: rgba(128, 128, 128, 0.8);
--lwt-accent-color: -moz-Dialog;
--richlist-button-background: -moz-Dialog;
--tab-hover-background: hsla(0, 0%, 50%, 0.15);
--tab-selected-background: hsla(0, 0%, 50%, 0.25);
}
}
:root[lwt-tree] {
--richlist-button-background: var(--sidebar-background-color);
}
@media (prefers-color-scheme: dark) {
:host,
:root[lwtheme],
:root[lwtheme]:not([lwt-tree]) dialog {
--box-text-color: var(--color-ink-10);
--box-background-color: var(--color-ink-80);
--box-border-color: rgba(249, 249, 250, 0.3);
--field-text-color: var(--color-ink-10);
--field-background-color: var(--color-gray-70);
--field-border-color: hsla(0, 0%, 70%, 0.4);
--field-border-hover-color: hsla(0, 0%, 70%, 0.5);
--highlight-background: var(--color-white);
--tab-hover-background: hsla(0, 0%, 50%, 0.3);
--tab-selected-background: hsla(0, 0%, 50%, 0.5);
}
}
@media (prefers-contrast) {
:host,
:root:not([lwtheme]) {
--button-text-active: SelectedItemText;
--field-border-color: ThreeDShadow;
--field-border-hover-color: SelectedItemText;
--tab-hover-background: SelectedItem;
--tab-selected-background: SelectedItem;
}
button[open],
button:not([disabled="true"]):hover,
button:not([disabled="true"]):hover:active,
menulist:not([disabled="true"],[open="true"]):hover,
menulist[open="true"]:not([disabled="true"]),
select:not([size], [multiple], [disabled]):is(:hover, :active),
tab:hover,
tab[visuallyselected="true"] {
color: var(--button-text-active) !important;
}
}
dialog::part(content-box) {
flex: 1;
}
dialog.scrollable {
width: 100vw;
height: 100vh;
&::part(content-box) {
overflow: scroll;
}
}
html|input,
html|textarea {
appearance: none;
background-color: var(--field-background-color);
border: 1px solid var(--field-border-color);
border-radius: var(--button-border-radius);
color: var(--field-text-color);
margin: 2px 4px;
&:not(:focus):hover {
border-color: var(--field-border-hover-color);
}
&:focus {
border-color: var(--selected-item-color);
outline: 1px solid var(--selected-item-color);
}
:root[lwt-tree-brighttext] &::selection {
background-color: var(--highlight-background);
color: var(--selected-item-color);
}
}
html|input:is([type="email"],[type="tel"],[type="text"],[type="password"],
[type="url"],[type="number"]):disabled {
opacity: 0.4;
}
html|input[type="number"] {
padding-inline-end: 1px;
&::-moz-number-spin-up,
&::-moz-number-spin-down {
appearance: none;
width: 16px;
background-position: center;
background-color: var(--button-background-color);
background-repeat: no-repeat;
border: 1px solid var(--field-border-color);
-moz-context-properties: stroke;
stroke: currentColor;
}
&::-moz-number-spin-up {
background-image: var(--icon-nav-up-sm);
border-bottom-style: none;
border-radius: 2px 2px 0 0;
}
&::-moz-number-spin-down {
background-image: var(--icon-nav-down-sm);
border-radius: 0 0 2px 2px;
}
}
html|input[type="radio"],
html|input[type="checkbox"] {
appearance: auto;
}
button,
menulist,
html|input[type="color"],
select:not([size], [multiple]) {
appearance: none;
min-height: 24px;
/* !important overrides button.css for disabled and default XUL buttons: */
color: inherit !important;
border: 1px solid var(--button-border-color); /* needed for high-contrast mode, where it'll show up */
border-radius: var(--button-border-radius);
background-color: var(--button-background-color);
padding: 0 8px;
text-decoration: none;
margin: 4px;
/* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
font-size: 1em;
}
html|input[type="color"] {
padding: 4px;
}
#resetColor {
-moz-context-properties: fill;
fill: currentColor;
min-width: 16px;
min-height: 16px;
padding: 2px !important;
margin-inline-end: 4px;
--toolbarbutton-hover-background: var(--button-hover-background-color);
--toolbarbutton-hover-bordercolor: var(--button-border-color);
--toolbarbutton-active-background: var(--button-active-background-color);
--toolbarbutton-active-bordercolor: var(--button-border-color);
&:not(:hover) {
background-color: transparent;
}
& .button-icon {
margin-inline-end: 0;
}
}
button:focus-visible {
outline: 2px solid var(--selected-item-color);
outline-offset: -1px;
}
button:not([disabled="true"]):hover,
menulist:not([disabled="true"],[open="true"]):hover,
menulist[open="true"]:not([disabled="true"]),
html|input[type="color"]:not([disabled="true"]):hover,
select:not([size], [multiple]):is(:hover, :active) {
background-color: var(--button-hover-background-color);
}
button[open],
button[open]:hover,
button:not([disabled="true"]):hover:active,
html|input[type="color"]:not([disabled="true"]):hover:active {
background-color: var(--button-active-background-color);
}
button[default] {
background-color: var(--button-primary-background-color);
color: var(--button-primary-text-color) !important;
&:focus-visible {
border-color: var(--primary-focus-border);
outline-offset: 0;
}
&:not([disabled="true"]):hover {
background-color: var(--button-primary-hover-background-color);
&:active {
background-color: var(--button-primary-active-background-color);
}
}
}
button[is="toolbarbutton-menu-button"] > .button-box > button {
border-inline-end-color: var(--button-border-color);
}
button > .button-box > dropmarker {
padding-inline-start: 3px;
}
button[disabled="true"],
menulist[disabled="true"],
select[disabled]:not([size], [multiple]) {
opacity: 0.4;
}
menulist {
padding-inline: 4px;
&::part(label-box) {
font-weight: inherit;
text-shadow: none;
}
&:focus-visible::part(label-box),
&:focus-visible:not([open="true"])::part(label-box) {
outline: none;
}
&::part(icon) {
-moz-context-properties: fill;
fill: currentColor;
}
&[is="menulist-addrbooks"]::part(icon) {
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
&::part(dropmarker) {
appearance: none;
padding: 0;
border: none;
background-color: transparent;
}
&[is="menulist-editable"][editable="true"]::part(text-input) {
background-color: var(--field-background-color);
color: var(--field-text-color);
border: 1px solid var(--field-border-color);
border-start-start-radius: 3px;
border-end-start-radius: 3px;
border-start-end-radius: 0;
border-end-end-radius: 0;
&:focus {
border-color: var(--selected-item-color);
outline: 1px solid var(--selected-item-color);
}
}
}
select:not([size], [multiple]) {
/* Padding to account for the 12px dropmarker plus an extra gap to the content. */
padding-inline-end: 28px;
}
.menu-iconic-left {
-moz-context-properties: fill;
fill: currentColor;
.abMenuItem > & {
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
}
.menu-right {
appearance: none;
-moz-context-properties: fill;
list-style-image: var(--icon-nav-right-sm);
fill: currentColor;
&:-moz-locale-dir(rtl) {
list-style-image: var(--icon-nav-left-sm);
}
}
button menupopup menuseparator,
menulist menupopup menuseparator {
padding-inline: 8px;
}
label {
margin-inline-start: 4px;
}
radio,
checkbox {
accent-color: var(--button-primary-background-color);
}
checkbox {
margin: 2px 4px;
padding-inline: 4px 2px;
}
.radio-check {
width: 16px;
height: 16px;
margin: 0;
margin-inline-end: 6px;
}
:root[lwt-tree] {
& richlistbox {
appearance: none;
background-color: var(--field-background-color);
color: var(--field-text-color);
border: 1px solid var(--field-border-color);
}
& richlistitem[selected="true"] {
background-color: hsla(0, 0%, 50%, 0.15);
color: inherit;
}
& richlistbox:focus > richlistitem[selected="true"] {
background-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 50%, 0.35));
color: var(--sidebar-highlight-text-color, inherit);
outline: 1px solid var(--selected-item-color) !important;
outline-offset: -1px;
& button,
& menulist,
& select:not([size], [multiple]) {
color: var(--sidebar-text-color) !important;
}
}
& tree {
appearance: none;
border: 1px solid var(--sidebar-border-color);
}
& .autocomplete-richlistbox {
border-style: none;
background-color: var(--box-background-color);
}
}
richlistitem[selected="true"] {
background-color: var(--tab-selected-background);
color: inherit;
richlistbox:where(:focus) > & {
background-color: var(--selected-item-color);
color: var(--selected-item-text-color);
}
}
richlistbox[seltype="multiple"]:focus > richlistitem[current="true"] {
outline-color: var(--selected-item-color);
}
richlistbox > richlistitem {
padding-block: 1px;
& menulist {
margin-block: 2px;
}
& button,
& menulist {
background-color: var(--richlist-button-background);
background-image: linear-gradient(var(--button-background-color),
var(--button-background-color));
color: var(--field-text-color) !important;
:root[lwtheme] & {
color: var(--lwt-text-color) !important;
}
}
& button:not([disabled="true"]):hover,
& menulist:not([disabled="true"]):hover,
& menulist[open="true"]:not([disabled="true"]) {
background-color: var(--richlist-button-background);
background-image: linear-gradient(var(--button-hover-background-color),
var(--button-hover-background-color));
}
& button[open],
& button[open]:hover,
& button:not([disabled="true"]):hover:active {
background-color: var(--richlist-button-background);
background-image: linear-gradient(var(--button-active-background-color),
var(--button-active-background-color));
}
}
menulist[open="true"],
menulist:not([disabled="true"], [open="true"]):hover,
select:not([size], [multiple]):is(:hover, :active) {
border-color: var(--button-border-color);
}
tabbox {
color: inherit;
text-shadow: none;
}
tabs {
margin-block: 8px 10px;
margin-inline: 4px;
border-bottom: 1px solid var(--box-border-color);
}
tab {
appearance: none;
margin-top: 0;
padding: 6px 10px !important;
border-bottom: 2px solid transparent;
color: inherit !important;
&:hover {
background-color: var(--tab-hover-background);
}
&[visuallyselected="true"] {
margin-block: 0;
background-color: var(--tab-selected-background);
border-bottom-color: var(--lwt-tab-line-color, var(--tabline-color));
}
}
tabpanels {
appearance: none;
border: none;
padding: 0;
background-color: transparent;
color: inherit;
}
.dialog-button-box {
padding-top: 6px;
}
:root[lwtheme] fieldset {
border: 1px solid var(--field-border-color);
}
:root[lwtheme] legend {
background-color: var(--lwt-accent-color);
}
separator.groove:not([orient="vertical"]) {
border-top-color: var(--field-border-color);
border-bottom-style: none;
}
.tip-caption {
opacity: 0.7;
font-size: .9em;
}
:root[lwt-tree-brighttext] .text-link {
color: #0aa5ff;
}
.text-link:focus-visible {
outline: 2px solid var(--selected-item-color);
outline-offset: 1px;
border-radius: 1px;
}
.alert-icon {
content: var(--icon-warning-dialog);
height: 48px;
width: 48px;
}
.question-icon {
content: var(--icon-question-dialog);
height: 48px;
width: 48px;
}
p {
margin: 2px 4px;
}
hr {
width: 100%;
border-top: 1px solid var(--field-border-color);
border-bottom: 0;
}