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 {
user-select: none;
&:-moz-locale-dir(rtl) {
direction: rtl;
}
}
:root,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: clip;
}
body {
display: flex;
flex-direction: column;
flex: 1;
}
#messengerWindow {
text-rendering: optimizeLegibility;
min-height: 95px;
min-width: 95px;
}
p {
margin: 2px 4px;
}
hr {
width: 100%;
border-top: 1px solid var(--field-border-color);
border-bottom: 0;
}
:root:not([sizemode=maximized]) .titlebar-restore,
:root:is([sizemode=maximized]) .titlebar-max {
display: none;
}
#toolbar-menubar[autohide="true"] {
overflow: hidden;
&[inactive="true"]:not([customizing="true"]) {
min-height: 0 !important;
height: 0 !important;
padding: 0 !important;
appearance: none !important;
}
}
#titlebar-spacer {
pointer-events: none;
}
:root[lwtheme] #navigation-toolbox,
:root[lwtheme] #compose-toolbox {
background-color: var(--lwt-accent-color);
background-image: var(--lwt-additional-images);
background-repeat: var(--lwt-background-tiling);
background-position: var(--lwt-background-alignment);
}
:root[lwtheme]:not([tabsintitlebar]) #navigation-toolbox {
color: var(--toolbar-color, inherit);
background-color: var(--toolbar-bgcolor);
}
/* When a theme defines both theme_frame and additional_backgrounds, show
the latter atop the former. */
:root[lwtheme-image] #navigation-toolbox,
:root[lwtheme-image] #compose-toolbox {
background-image: var(--lwt-header-image), var(--lwt-additional-images);
background-repeat: no-repeat, var(--lwt-background-tiling);
background-position: right top, var(--lwt-background-alignment);
}
:root[lwtheme][tabsintitlebar] #navigation-toolbox:-moz-window-inactive,
:root[lwtheme] #compose-toolbox:-moz-window-inactive {
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}
#titlebar > #toolbar-menubar:-moz-window-inactive,
#titlebar > #tabs-toolbar:-moz-window-inactive {
color: color-mix(in srgb, currentColor 70%, transparent);
}
.tree-columnpicker-button {
list-style-image: var(--icon-column-menu);
padding-inline: 4px;
border-style: none;
border-radius: 0;
-moz-context-properties: stroke, fill;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
.thread-tree-col-picker > image,
.thread-tree-icon-header img {
-moz-context-properties: stroke, fill;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
treechildren::-moz-tree-row(selected, current, focus) {
outline: 1px solid color-mix(in srgb, var(--selected-item-color), black 10%);
outline-offset: -1px;
}
tree {
& > treechildren::-moz-tree-row(hover) {
background-color: hsla(0, 0%, 50%, 0.15);
}
& > treechildren::-moz-tree-row(selected) {
background-color: -moz-cellhighlight;
}
& > treechildren::-moz-tree-row(selected, focus) {
background-color: var(--selected-item-color);
}
}
treechildren::-moz-tree-twisty {
-moz-context-properties: stroke;
stroke: currentColor;
color: #505050;
}
@media (prefers-color-scheme: dark) {
treechildren::-moz-tree-twisty {
color: #d4d4d4;
}
}
treechildren::-moz-tree-twisty(selected, focus) {
stroke: var(--select-focus-text-color);
}
/* LW theme tree styling */
:root[lwt-tree] {
& tree,
& #folderPaneHeader {
background-color: var(--sidebar-background-color);
color: var(--sidebar-text-color);
}
& #threadTree treechildren::-moz-tree-row(untagged, selected),
&:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
& tree:not(#threadTree) treechildren::-moz-tree-row(selected) {
border-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
outline: none;
}
& treechildren::-moz-tree-row(current, focus) {
border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.6));
}
& #threadTree treechildren::-moz-tree-row(untagged, selected, focus, current),
& tree:not(#threadTree) treechildren::-moz-tree-row(selected, focus, current) {
border-color: var(--sidebar-highlight-border-color, var(--item-focus-selected-border-color));
}
& treechildren::-moz-tree-image,
& #threadTree treechildren::-moz-tree-cell-text(untagged),
& tree:not(#threadTree) treechildren::-moz-tree-cell-text {
color: var(--sidebar-text-color);
}
& treechildren::-moz-tree-image(selected),
& #threadTree treechildren::-moz-tree-cell-text(untagged, selected),
& tree:not(#threadTree) treechildren::-moz-tree-cell-text(selected) {
color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}
& tree:not(:focus) treechildren::-moz-tree-image(selected),
& #threadTree:not(:focus) treechildren::-moz-tree-cell-text(untagged, selected),
& tree:not(#threadTree,:focus) treechildren::-moz-tree-cell-text(selected) {
color: var(--sidebar-text-color);
}
& treechildren::-moz-tree-line {
border-color: var(--sidebar-text-color);
}
& treechildren::-moz-tree-line(selected, focus) {
border-color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}
& .statuspanel-label {
background-color: var(--toolbar-field-background-color);
color: var(--toolbar-field-color);
border-color: var(--toolbar-field-border-color);
}
}
/* Dark theme adaptions */
:root[lwt-tree-brighttext] {
& #threadTree treechildren::-moz-tree-row(untagged, selected),
&:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
& tree:not(#threadTree) treechildren::-moz-tree-row(selected) {
border-color: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
}
& treechildren::-moz-tree-row(current, focus) {
border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.3));
}
& treechildren::-moz-tree-twisty {
color: #d4d4d4;
}
}
:root[lwtheme] tree:not(:focus)
treechildren::-moz-tree-row(selected) {
--sidebar-highlight-background-color: hsla(0, 0%, 50%, 0.2);
}
tree > treechildren::-moz-tree-row(dropOn) {
border-color: var(--selected-item-text-color);
background-color: var(--selected-item-color) !important;
}
tree > treechildren::-moz-tree-cell-text(primary, dropOn) {
color: var(--selected-item-text-color);
}
tree > treechildren::-moz-tree-image(primary, dropOn) {
fill: color-mix(in srgb, var(--selected-item-text-color) 20%, transparent);
stroke: var(--selected-item-text-color) !important;
}
:root[lwtheme] {
& treecol:not([hideheader="true"]),
& .tree-columnpicker-button:not([hideheader="true"]) {
appearance: none;
color: inherit;
background-color: transparent;
padding-block: 2px;
border-bottom: 1px solid color-mix(in srgb, var(--splitter-color,
hsla(0, 0%, 60%, 0.4)) 50%, transparent);
}
& treecol {
border-inline-end: 1px solid color-mix(in srgb, var(--splitter-color,
hsla(0, 0%, 60%, 0.4)) 50%, transparent);
}
@media (prefers-color-scheme: dark) {
& treecol,
& .tree-columnpicker-button {
border-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
}
& treecol {
border-inline-end-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
}
}
& treecol:hover,
& .tree-columnpicker-button:hover {
background-color: hsla(0, 0%, 60%, 0.4);
}
@media (prefers-color-scheme: dark) {
& treecol:hover,
& .tree-columnpicker-button:hover {
background-color: rgba(249, 249, 250, 0.2);
}
}
}
.treecol-sortdirection {
-moz-context-properties: stroke;
stroke: currentColor;
}
/* toolbar */
toolbar[type="menubar"][autohide="true"] {
overflow: hidden;
&[inactive="true"]:not([customizing="true"]) {
min-height: 0 !important;
height: 0 !important;
appearance: none !important;
}
}
/* Show hidden toolbars in customize mode */
toolbar[customizing="true"][collapsed="true"] {
visibility: visible;
}
/* toolbarbutton */
.toolbarbutton-1 {
flex-direction: column;
min-height: 24px;
min-width: 32px;
margin: 4px 1px;
padding: 1px 5px !important;
-moz-context-properties: fill, stroke, fill-opacity;
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill, currentColor) 20%, transparent);
stroke: var(--toolbarbutton-icon-fill, currentColor);
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
&:not([is="toolbarbutton-menu-button"]),
& > .toolbarbutton-menubutton-button,
& > .toolbarbutton-menubutton-dropmarker {
border: 1px solid transparent;
border-radius: var(--button-border-radius);
transition: background-color .15s, border-color .15s;
}
&:not([disabled="true"]):is(:hover,[open="true"]) > .toolbarbutton-menubutton-button,
&:not([disabled="true"]):hover > .toolbarbutton-menubutton-dropmarker,
&:not([is="toolbarbutton-menu-button"],[disabled="true"],[checked="true"],[open="true"],:active):hover {
background-color: var(--toolbarbutton-hover-background);
border-color: var(--toolbarbutton-hover-bordercolor);
box-shadow: var(--toolbarbutton-hover-boxshadow);
}
& > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
&[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
&:not([is="toolbarbutton-menu-button"],[disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
background-color: var(--toolbarbutton-checked-background);
border-color: var(--toolbarbutton-active-bordercolor);
box-shadow: var(--toolbarbutton-active-boxshadow);
transition-duration: 10ms;
}
&:not([is="toolbarbutton-menu-button"],[disabled="true"]):hover:active,
&:not([is="toolbarbutton-menu-button"],[disabled="true"])[open="true"],
& > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
&[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
background-color: var(--toolbarbutton-active-background) !important;
}
&[is="toolbarbutton-menu-button"] > .toolbarbutton-menubutton-button {
border-inline-end: none;
margin: 0;
}
& > .toolbarbutton-menubutton-dropmarker {
height: auto;
width: auto;
padding: 1px 5px;
}
& .toolbarbutton-menu-dropmarker,
& > .toolbarbutton-menubutton-dropmarker {
flex: 0;
content: var(--icon-nav-down-sm);
-moz-context-properties: stroke;
stroke: currentColor;
}
& .toolbarbutton-menu-dropmarker::part(icon),
& > .toolbarbutton-menubutton-dropmarker::part(icon) {
width: 12px;
}
& > .toolbarbutton-menubutton-button {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
& > .toolbarbutton-menubutton-dropmarker {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
:root[uidensity="touch"] &:not([is="toolbarbutton-menu-button"]),
:root[uidensity="touch"] & > .toolbarbutton-menubutton-button,
:root[uidensity="touch"] & > .toolbarbutton-menubutton-dropmarker {
padding: 5px !important;
}
toolbar[mode="full"] &:not([hideWebExtensionLabel="true"]) {
min-width: 55px;
}
toolbar:not([mode="text"]) &[hideWebExtensionLabel="true"] .toolbarbutton-text {
display: none;
}
#header-view-toolbar &[hideWebExtensionLabel="true"] .toolbarbutton-text {
display: none;
}
toolbox[labelalign="end"] > toolbar[mode="full"] & .toolbarbutton-text {
padding-inline-start: 2px;
}
& .toolbarbutton-icon {
/* NOTE: At the moment, these rule can be applied to either xul:image elements
* (the plain toolbarbutton elements, defined in mozilla) or html:img
* elements (custom extensions in comm).
* The icon content is meant to be 16px by 16px, but xul:image sizing is
* essentially always border-box, and a content-box value would be ignored. We
* include this explicit border-box value for buttons that use a html:img
* icon.
* If all such icons become html:img elements, then it will be safe to use the
* default content-box sizing. */
box-sizing: border-box;
padding: 1px;
width: 18px;
height: 18px;
}
/* Separator between menu and split type buttons */
&:not(:hover,:active,[open],[checked]) > .toolbarbutton-menubutton-dropmarker,
&[disabled="true"] > .toolbarbutton-menubutton-dropmarker {
border-inline-start-color: color-mix(in srgb, currentColor 20%, transparent);
}
toolbox:not([labelalign="end"]) > toolbar[mode="full"]
&:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"] {
padding-inline-end: 15px !important;
background-image: var(--icon-nav-down-sm);
background-size: 12px;
background-repeat: no-repeat;
background-position-y: center;
background-position-x: calc(100% - 4px);
&:-moz-locale-dir(rtl) {
background-position: 4px center;
}
&[disabled="true"] {
opacity: 0.4;
}
/* Don't set a reduced opacity because we set it on the whole button. */
&[disabled="true"] .toolbarbutton-icon,
&[disabled="true"] .toolbarbutton-text {
opacity: 1;
}
& > .toolbarbutton-menu-dropmarker {
display: none;
}
}
toolbar[brighttext] &:not(:hover,:active,[open]) > .toolbarbutton-menubutton-dropmarker {
border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
}
#palette-box & {
flex-direction: row;
}
}
.toolbarbutton-menubutton-button {
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 24px;
min-width: 32px;
margin: 4px 1px;
padding: 1px 5px !important;
& > .toolbarbutton-icon {
padding: 1px;
}
}
toolbox[labelalign="end"] .toolbarbutton-1,
toolbox[labelalign="end"] .toolbarbutton-menubutton-button,
toolbox:not([mode="full"]) .toolbarbutton-1,
toolbox:not([mode="full"]) .toolbarbutton-menubutton-button {
flex-direction: row;
}
/* Replicate the xul.css rule for when toolbar button icons are html:img instead
* of xul:image. */
toolbar[mode="text"] .toolbarbutton-icon {
display: none;
}
.toolbarbutton-menubutton-dropmarker {
pointer-events: none;
}
#alltabs-button {
margin-block: 3px;
}
description.error {
color: #f00;
}
.sidebar-header {
min-height: 25px;
text-shadow: none;
& > xul|label {
padding-inline-start: 4px;
}
}
menupopup,
menubar {
font-size: inherit;
}
:root[lwtheme] menubar > menu[_moz-menuactive="true"]:not([disabled="true"]) {
background-color: hsla(0, 0%, 0%, 0.12);
color: inherit;
@media (prefers-color-scheme: dark) {
background-color: hsla(0, 0%, 100%, 0.22);
}
}
menulist {
min-height: 24px;
margin-block: 4px;
color: var(--button-text-color);
border: 1px solid var(--toolbarbutton-hover-bordercolor);
border-radius: var(--button-border-radius);
background-color: var(--toolbarbutton-hover-background);
box-shadow: var(--toolbarbutton-hover-boxshadow);
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
:root[lwtheme] & {
color: inherit;
}
/* Override the not existing rule in menu.css */
&[disabled="true"]:hover,
&[open="true"]:hover {
background-color: var(--toolbarbutton-hover-background);
}
&:not([disabled="true"],[open="true"]):hover {
background-color: var(--toolbarbutton-active-background);
border-color: var(--toolbarbutton-active-bordercolor);
}
&[open="true"] {
background-color: var(--toolbarbutton-active-background);
border-color: var(--toolbarbutton-active-bordercolor);
box-shadow: var(--toolbarbutton-active-boxshadow);
}
&[disabled="true"] {
opacity: 0.6;
}
&::part(label-box) {
font-weight: inherit;
}
&::part(dropmarker-icon) {
-moz-context-properties: stroke;
stroke: currentColor;
width: 16px;
}
}
/* Buttons */
button,
html|input[type="color"] {
appearance: none;
min-height: 24px;
min-width: 5.5em;
color: inherit;
border: 1px solid var(--button-border-color);
border-radius: var(--button-border-radius);
background: var(--button-background-color);
margin: 1px 5px;
padding: 0 4px;
box-shadow: none;
}
xul|button:is(:not([disabled="true"])):hover,
html|button:is(:not([disabled])):hover {
border-color: var(--button-border-color);
background-color: var(--button-hover-background-color);
}
xul|button:is(:not([disabled="true"])):hover:active,
html|button:is(:not([disabled])):hover:active,
xul|button:is(:not([disabled="true"]))[open="true"],
html|input[type="color"]:not([disabled="true"]):hover,
html|input[type="color"]:not([disabled="true"]):hover:active {
border-color: var(--button-border-color);
background-color: var(--button-active-background-color);
}
html|input[type="color"] {
padding: 4px;
}
/* For buttons that wraps its content with no outline or background.
* NOTE: the hover background will still appear on hover. */
button.plain-button {
/* grid display ensures the button only takes up the same room as its
* content. */
display: inline grid;
height: -moz-fit-content;
min-height: auto;
min-width: -moz-fit-content;
border: none;
background: none;
&[hidden] {
display: none;
}
}
button[is="toolbarbutton-menu-button"] {
appearance: none;
& > .button-box > button {
appearance: none;
min-width: 5.5em;
background: transparent;
border-color: transparent;
border-inline-end-color: var(--toolbarbutton-active-bordercolor);
margin-inline: -4px 5px;
padding: 0 4px;
}
}
button > .button-box > dropmarker {
appearance: none;
content: var(--icon-nav-down-sm);
-moz-context-properties: stroke;
stroke: currentColor;
}
img.invisible-on-broken:-moz-broken {
visibility: hidden;
}
.popup-notification-button {
height: auto;
border-style: none;
border-radius: 0;
}
#notification-popup-box {
display: flex;
align-items: center;
gap: 9px;
& > .notification-anchor-icon {
width: 16px;
height: 16px;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill, currentColor) 20%, transparent);
stroke: var(--toolbarbutton-icon-fill, currentColor);
opacity: var(--toolbarbutton-icon-fill-opacity);
}
}
/* notification anchors should only be visible when their associated
notifications are */
.notification-anchor-icon {
-moz-user-focus: normal;
&:not([showing]) {
display: none;
}
}
.popup-notification-icon {
width: 32px;
height: 32px;
margin-inline-end: 12px;
-moz-context-properties: fill;
fill: currentColor;
&[popupid="xpinstall-disabled"],
&[popupid="addon-install-blocked"],
&[popupid="addon-install-origin-blocked"] {
}
&[popupid="addon-progress"] {
}
&[popupid="addon-install-failed"] {
}
&[popupid="addon-install-confirmation"] {
}
#addon-install-confirmation-notification[warning] &[popupid="addon-install-confirmation"] {
}
&[popupid="addon-install-complete"] {
}
}
.popup-notification-body[popupid="addon-progress"],
.popup-notification-body[popupid="addon-install-confirmation"] {
width: 28em;
max-width: 28em;
}
.addon-install-confirmation-name {
font-weight: bold;
}
html|*.addon-webext-perm-list {
margin-block-end: 0;
padding-inline-start: 10px;
}
.addon-webext-perm-single-entry {
margin-top: 11px;
}
.addon-webext-perm-text,
.addon-webext-perm-single-entry {
margin-inline-start: 0;
}
.popup-notification-description[popupid="addon-webext-permissions"],
.popup-notification-description[popupid="addon-webext-permissions-notification"] {
margin-inline-start: -1px;
}
.addon-webext-perm-notification-content,
.addon-installed-notification-content {
margin-top: 0;
}
#addon-webext-experiment-warning {
margin-top: 11px;
margin-inline-start: 0;
}
#addon-webext-perm-info {
margin-inline-start: 0;
}
#addon-progress-notification-progressmeter {
margin: 2px 4px;
}
.addon-webext-name {
display: inline;
font-weight: bold;
margin: 0;
}
html|ul.addon-installed-list {
margin-top: 0;
}
.chromeclass-toolbar {
overflow-x: hidden;
& toolbarseparator {
appearance: none;
min-width: 1px;
background-image: linear-gradient(
transparent 4px,
var(--toolbarseparator-color) 4px,
var(--toolbarseparator-color) calc(100% - 4px),
transparent calc(100% - 4px));
margin-inline: 1px;
}
}
#tabpanelcontainer {
/* While mail tab browsers load, the window goes transparent. Stop that. */
background-color: -moz-Dialog;
}
.button-more {
list-style-image: var(--icon-more);
}
.toolbarbutton-1:not(.qfb-tag-button),
.toolbarbutton-menubutton-button {
color: inherit !important;
}
/* Don't show a menupopup in customize mode */
toolbarpaletteitem menulist,
toolbarpaletteitem toolbarbutton {
pointer-events: none;
}
/* throbber */
#throbber-box {
margin: 0 3px;
/* Allow image to be center aligned vertically (when in the toolbar) or
* horizontally (when in the customize toolbar dialog). */
display: grid;
& img {
width: 16px;
height: 16px;
align-self: center;
justify-self: center;
}
&:not([busy="true"]) .animated-throbber-icon {
/* Hide the icon, but still occupy space in the toolbar. */
visibility: hidden;
}
/* When the throbber-box is wrapped by the customizeToolbar dialog, we show the
* static image. */
#wrapper-throbber-box > & .animated-throbber-icon {
display: none;
}
/* Else, we hide the static image. */
:not(#wrapper-throbber-box) > & .static-throbber-icon {
display: none;
}
}
/* Panels. */
panelmultiview[transitioning] {
pointer-events: none;
}
.panel-viewcontainer {
overflow: hidden;
flex-shrink: 0;
min-width: 0;
min-height: 0;
max-height: 100%;
&[panelopen] {
transition-property: height;
transition-timing-function: var(--animation-easing-function);
transition-duration: var(--panelui-subview-transition-duration);
will-change: height;
}
&.offscreen {
display: block;
}
}
.panel-viewstack {
overflow: visible;
transition: height var(--panelui-subview-transition-duration);
}
/* Status panel */
statuspanel {
position: fixed;
display: block;
left: 0;
bottom: 0;
z-index: 20;
max-width: 50%;
transition: opacity 120ms ease-out, visibility 120ms;
&:-moz-locale-dir(ltr)[mirror],
&:-moz-locale-dir(rtl):not([mirror]) {
left: auto;
right: 0;
}
&[label=""],
&:not([label]) {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
}
.statuspanel-inner {
height: 3em;
align-items: flex-end;
}
.statuspanel-label {
display: inline-block;
}
/* Status bar */
.statusbar {
background-color: var(--layout-background-1);
border-top: 1px solid var(--splitter-color);
min-height: 22px;
@media (prefers-color-scheme: dark) {
:root[lwtheme] & {
border-top-color: var(--lwt-accent-color);
}
}
}
:root[lwtheme] #status-bar {
appearance: none;
background-repeat: no-repeat, var(--lwt-background-tiling);
background-position: bottom right, var(--lwt-background-alignment);
background-color: var(--lwt-accent-color);
background-image: var(--lwt-header-image), var(--lwt-additional-images);
color: var(--lwt-text-color);
border-top-color: var(--lwt-tabs-border-color);
& toolbarbutton {
color: var(--lwt-text-color, inherit);
}
}
.statusbarpanel {
padding: 0 4px;
}
label.statusbarpanel {
margin-block: 3px;
display: inline-block;
}
.statusbarpanel-progress {
align-items: center;
}
#dialog\.progress,
#shutdown_progressmeter,
.progressmeter-statusbar {
appearance: none;
height: 4px;
background-color: hsla(0, 0%, 60%, 0.2);
border-style: none;
border-radius: 2px;
&::-moz-progress-bar {
appearance: none;
background-color: var(--primary);
border-radius: 2px;
}
&:indeterminate::-moz-progress-bar {
/* Make a white reflecting animation.
Create a gradient with 2 identical pattern, and enlarge the size to 200%.
This allows us to animate background-position with percentage. */
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0.8) 100%);
background-size: 200% 100%;
@media (prefers-color-scheme: dark) {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.1) 25%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.1) 75%,
rgba(0, 0, 0, 0.5) 100%);
}
}
}
@media (prefers-reduced-motion: no-preference) {
#dialog\.progress:indeterminate::-moz-progress-bar,
#shutdown_progressmeter:indeterminate::-moz-progress-bar,
.progressmeter-statusbar:indeterminate::-moz-progress-bar {
animation: progressSlideX 1.5s linear infinite;
}
@keyframes progressSlideX {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
}
/* online/offline icons */
#offline-status {
padding: 0 2px;
list-style-image: var(--icon-online);
appearance: none;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
&[offline="true"] {
list-style-image: var(--icon-offline);
}
}
/* status bar adjustments */
#quotaMeter {
min-width: 8em;
max-width: 8em;
height: 10px;
border: 1px solid var(--chrome-content-separator-color);
}
#quotaPercentageBar {
border-color: ThreeDShadow;
}
#quotaPanel {
& ::-moz-progress-bar {
appearance: none;
background-color: #45a1ff;
opacity: .75;
border-radius: 0;
}
&.alert-warning ::-moz-progress-bar {
background-color: orange;
}
&.alert-critical ::-moz-progress-bar {
background-color: red;
opacity: .6;
}
}
#quotaLabel {
text-align: center;
font-size: 0.8rem;
text-decoration: none;
margin-top: -1px;
}
/* searchTermOverlay */
@media (prefers-reduced-motion: no-preference) {
#searchTermList > richlistitem[highlight = "true"] {
animation: highlight .4s ease-in;
}
@keyframes highlight {
from { background-color: Highlight; }
to { background-color: transparent; }
}
}
#findbar-beforeReplaceSeparator {
height: 16px;
}
findbar {
background-color: var(--toolbar-bgcolor);
color: var(--toolbar-color);
border-top-color: var(--chrome-content-separator-color, ThreeDShadow);
:root[lwtheme] & {
background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
background-repeat: no-repeat, var(--lwt-background-tiling);
background-position: right bottom, var(--lwt-background-alignment);
background-position-y: bottom;
}
:root[lwtheme-image] & {
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
var(--lwt-header-image), var(--lwt-additional-images);
background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
background-position: center, right bottom, var(--lwt-background-alignment);
}
}
#messagepanebox > findbar {
color: var(--layout-color-1);
background-color: var(--layout-background-1);
border-top-color: var(--splitter-color);
& > .findbar-container {
min-width: 100px;
}
}
/* menupopup/panel */
:is(panel, menupopup)::part(content) {
--panel-color: var(--layout-color-1);
--panel-background: var(--layout-background-1);
--panel-border-color: var(--layout-border-1);
}
/* Panel toolbarbuttons */
.panelTitle {
font-weight: bold;
margin-block: 6px;
margin-inline-start: 7px;
}
.panelButton {
appearance: none;
min-height: 24px;
padding: 4px 6px;
background-color: transparent;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
&:focus {
outline: 0;
}
&:not([disabled],[open],:active):is(:hover,:focus-visible) {
background-color: var(--arrowpanel-dimmed);
}
&:not([disabled]):is([open],:hover:active) {
background-color: var(--arrowpanel-dimmed-further);
box-shadow: 0 1px 0 hsla(210, 4%, 10%, .03) inset;
}
& > .toolbarbutton-text {
text-align: start;
padding-inline: 6px;
}
&[prettykey]::after {
content: attr(prettykey);
float: inline-end;
color: GrayText;
}
}
toolbarpaletteitem toolbarspacer,
toolbarpaletteitem toolbarspring {
-moz-window-dragging: no-drag;
}
/* MailExtension panels */
.mail-extension-panel {
font: menu;
}
/* Autocomplete labels
html|span.ac-emphasize-text {
font-weight: bold;
}
.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) {
& > .ac-url,
& > .ac-separator {
display: flex;
}
& > .ac-url {
order: 1;
}
& > .ac-separator {
order: 2;
}
& > .ac-title {
order: 3;
}
}
.ac-url-text {
max-width: unset !important;
}
/* Date/time picker anchor */
.popup-anchor {
/* should occupy space but not be visible */
opacity: 0;
pointer-events: none;
position: absolute;
}
html|input[type="number"] {
margin: 2px 4px;
/* sizes: chars + 8px padding + 1px borders + spin buttons 14+0+10px */
&.size2 {
width: calc(2ch + 44px);
}
&.size3 {
width: calc(3ch + 44px);
}
&.size4 {
width: calc(4ch + 44px);
}
&.size5 {
width: calc(5ch + 44px);
}
}
/* Fix the height of the print preview toolbar */
#print-preview-toolbar {
max-height: 2.5em;
}
/* Toolbar customization */
toolbar[customizing="true"] {
outline: 2px dashed var(--focus-outline-color);
outline-offset: -3px;
border-radius: 3px;
}
toolbarpaletteitem[type="spacer"][place="toolbar"],
toolbarpaletteitem[type="spring"][place="toolbar"] {
align-items: center;
}
toolbarpaletteitem[type="spring"][place="toolbar"] {
flex: 1000 1000;
}
toolbarpaletteitem[type="spacer"][place="toolbar"] toolbarspacer,
toolbarpaletteitem[type="spring"][place="toolbar"] toolbarspring {
height: 16px;
margin-inline: 6px;
opacity: 0.5;
border-inline: 2px solid currentColor;
background-image: linear-gradient(transparent calc(50% - 1px), currentColor calc(50% - 1px),
currentColor calc(50% + 1px), transparent calc(50% + 1px));
}
toolbarpaletteitem[type="separator"][place="palette"] toolbarseparator {
appearance: none;
width: 1px;
height: 50px;
background-color: currentColor;
}
toolbarpaletteitem[type="spacer"][place="palette"] toolbarspacer,
toolbarpaletteitem[type="spring"][place="palette"] toolbarspring {
margin-bottom: 2px;
border: 1px solid currentColor;
background-color: hsla(0, 0%, 100%, .3) !important;
}
toolbarpaletteitem[type="spring"][place="palette"] toolbarspring {
-moz-context-properties: fill;
fill: currentColor;
}
panel[type="arrow"].panel-block-padding::part(content) {
padding-block: 6px;
}
/* Used by the import dialog */
.wizard-box {
padding: 20px 44px 10px;
}
.image-container > html|img {
width: 32px;
-moz-context-properties: fill;
fill: currentColor;
}
.text-container description {
margin-block-end: 1em;
}
/* Print UI, mostly from browser.css */
.browserContainer,
.browserStack {
flex: 10000 10000;
}
.printPreviewStack {
position: relative;
}
:is(browser, hbox, tabbox, vbox)[tabDialogShowing],
:is(browser, hbox, tabbox, vbox)[tabDialogShowing] * {
-moz-user-focus: none !important;
}
.printSettingsBrowser {
width: 250px !important;
}
.previewStack {
background-color: light-dark(#f9f9fa, #2a2a2e);
color: light-dark(#0c0c0d, rgb(249, 249, 250));
& > .previewRendering {
background-repeat: no-repeat;
background-size: 60px 60px;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
& > .printPreviewBrowser {
visibility: collapse;
opacity: 1;
}
&[rendering=true] > .previewRendering,
&[previewtype="source"] > .printPreviewBrowser[previewtype="source"],
&[previewtype="selection"] > .printPreviewBrowser[previewtype="selection"],
&[previewtype="simplified"] > .printPreviewBrowser[previewtype="simplified"] {
visibility: inherit;
}
&[rendering=true] > .printPreviewBrowser {
opacity: 0;
}
}
.print-pending-label {
margin-top: 110px;
font-size: large;
}
printpreview-pagination {
opacity: 0;
}
printpreview-pagination:focus-within,
.previewStack:hover printpreview-pagination {
opacity: 1;
}
.previewStack[rendering=true] printpreview-pagination {
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.previewRendering {
}
.printPreviewBrowser {
transition: opacity 60ms;
}
.previewStack[rendering=true] > .printPreviewBrowser {
transition: opacity 1ms 250ms;
}
printpreview-pagination {
transition: opacity 100ms 500ms;
}
printpreview-pagination:focus-within,
.previewStack:hover printpreview-pagination {
transition: opacity 100ms;
}
}
.dialogStack {
/* Should outrank the z-index values of other UI elements, particularly the devtools
splitter element. */
z-index: 11;
position: absolute;
inset: 0 0 0 0;
&.temporarilyHidden {
/* For some printing use cases we need to visually hide the dialog before
* actually closing it / make it disappear from the frame tree. */
visibility: hidden;
}
}
.dialogOverlay {
visibility: hidden;
&[topmost="true"] {
z-index: 1;
background-color: rgba(28, 27, 34, 0.45);
}
}
.dialogBox {
background-clip: content-box;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
display: flex;
margin: 0;
padding: 0;
overflow-x: auto;
border-radius: 8px;
&[resizable="true"] {
resize: both;
overflow: hidden;
min-height: 20em;
}
&[sizeto="available"] {
--box-inline-margin: 4px;
--box-block-margin: 4px;
--box-ideal-width: 1000;
--box-ideal-height: 650;
--box-max-width-margin: calc(100vw - 2 * var(--box-inline-margin));
--box-max-height-margin: calc(100vh - var(--box-top-px) - var(--box-block-margin));
--box-max-width-ratio: 70vw;
--box-max-height-ratio: calc(var(--box-ideal-height) / var(--box-ideal-width) * var(--box-max-width-ratio));
max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin));
max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin));
width: 100vw;
height: 85vh; /* This is 100vh in Firefox but we have less space to work with. */
@media (min-width: 550px) {
--box-inline-margin: min(calc(4px + (100vw - 550px) / 4), 16px);
}
@media (min-width: 800px) {
--box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px);
}
@media (min-height: 350px) {
--box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px);
}
@media (min-height: 550px) {
--box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px);
}
}
}
:not(.content-prompt-dialog) > .dialogOverlay > .dialogBox {
/* Make dialogs overlap with upper chrome UI. */
margin-top: 5px;
}
/* Infobar styles */
.notification-button-container {
display: flex;
}
.notification-button {
margin: 4px;
border: 1px solid var(--in-content-button-border);
border-radius: 3px;
color: var(--in-content-button-color);
background-color: var(--in-content-button-background);
&:not([disabled]):hover {
color: var(--in-content-button-color-hover);
background-color: var(--in-content-button-background-hover);
&:active {
border-color: var(--in-content-button-border-active);
color: var(--in-content-button-color-active);
background-color: var(--in-content-button-background-active);
}
}
&:first-of-type {
/* When the buttons wrap to their own line we want to match the 8px on the message. */
margin-inline-start: 0;
}
&.small-button {
font-size: inherit;
font-weight: 400;
min-height: 24px;
margin: 4px;
}
/* Button variations */
&.button-menu-list {
appearance: none;
padding-inline-end: 18px;
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 12px;
background-image: var(--icon-nav-down-sm);
-moz-context-properties: stroke;
stroke: currentColor;
&:-moz-locale-dir(rtl) {
background-position-x: left 4px;
}
}
toolbarbutton&[is="toolbarbutton-menu-button"] {
align-items: center;
margin: 4px 6px;
padding-block: 0;
background-color: var(--in-content-button-background);
& > toolbarbutton {
margin-block: 0;
margin-inline: 0 2px;
min-height: 22px;
border-start-start-radius: 2px;
border-start-end-radius: 2px;
border-start-end-radius: 0;
border-end-end-radius: 0;
padding: 2px 15px;
font-weight: inherit;
background-color: var(--in-content-button-background);
border-width: 0;
border-inline-end: 1px solid var(--in-content-button-border);
}
&:hover,
& > toolbarbutton:hover {
background-color: var(--in-content-button-background-hover);
color: var(--in-content-button-color-hover);
&:active {
background-color: var(--in-content-button-background-active);
color: var(--in-content-button-color-active);
border-color: var(--in-content-button-border-active);
}
}
& > dropmarker {
appearance: none;
content: var(--icon-nav-down-sm);
-moz-context-properties: stroke;
stroke: currentColor;
margin-inline-end: -5px;
padding-inline-start: 5px;
border-start-start-radius: 0;
border-start-end-radius: 0;
pointer-events: none;
display: inline-flex;
}
}
}