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
/* Styles shared between the actual unfied toolbar and the replica in the
* customization overlay */
:root {
--toolbar-button-badge-text-color: var(--color-white);
--toolbar-button-badge-bg-color: var(--color-red-70);
--toolbar-button-badge-padding: 1px 3px;
--toolbar-button-badge-font: 0.8rem;
--badge-inset-block-start: 1px;
--badge-inset-inline-nudge: 0px;
--badge-inset-inline-end: 2px;
/* UI Density customization */
&[uidensity="compact"] {
--badge-inset-block-start: 0px;
--badge-inset-inline-nudge: 4px;
--badge-inset-inline-end: 0px;
}
&[uidensity="touch"] {
--badge-inset-block-start: 4px;
--badge-inset-inline-nudge: -3px;
--badge-inset-inline-end: 3px;
}
@media (-moz-windows-accent-color-in-titlebar) {
/* Apply everywhere */
& {
--windows-accent-outline-color: var(--focus-outline-color);
}
/* Apply only in unified toolbar */
& .search-bar {
--windows-accent-outline-color: var(--selected-item-text-color);
}
}
}
.unified-toolbar {
display: flex;
justify-content: start;
align-items: center;
list-style-type: none;
overflow: hidden;
flex-wrap: nowrap;
min-width: 0;
& li {
padding: 0;
margin: 0;
border-radius: 1px;
}
& [is="customizable-element"] .preview {
display: none;
}
& .spacer {
flex: 1 1 auto;
}
& .search-bar {
flex: 1 1 33%;
min-width: 5em;
}
& .search-button-icon {
content: var(--icon-search);
}
& .clear-button-icon {
content: var(--icon-clear);
}
& .button-icon {
content: var(--icon-extension);
}
& .write-message .button-icon {
content: var(--icon-new-mail);
}
& .move-to .button-icon {
content: var(--icon-file);
}
& .unifinder .button-icon {
content: var(--icon-search);
}
& .folder-location .button-icon {
content: var(--icon-folder);
}
& .edit-event .button-icon {
content: var(--icon-pencil);
}
& .get-messages .button-icon {
content: var(--icon-cloud-download);
}
& .reply .button-icon {
content: var(--icon-reply);
}
& .reply-all .button-icon {
content: var(--icon-reply-all);
}
& .reply-to-list .button-icon {
content: var(--icon-reply-list);
}
& .redirect .button-icon {
content: var(--icon-redirect);
}
& .archive .button-icon {
content: var(--icon-archive);
}
& .conversation .button-icon {
content: var(--icon-conversation);
}
& .previous-unread .button-icon {
content: var(--icon-nav-up-unread);
}
& .previous .button-icon {
content: var(--icon-nav-up);
}
& .next-unread .button-icon {
content: var(--icon-nav-down-unread);
}
& .next .button-icon {
content: var(--icon-nav-down);
}
& .junk .button-icon {
content: var(--icon-spam);
}
& .delete .button-icon {
content: var(--icon-trash);
}
& .compact .button-icon {
content: var(--icon-compress);
}
& .add-as-event .button-icon {
content: var(--icon-new-event);
}
& .add-as-task .button-icon {
content: var(--icon-new-task);
}
& .tag-message .button-icon {
content: var(--icon-tag);
}
& .forward-inline .button-icon {
content: var(--icon-forward);
}
& .forward-attachment .button-icon {
/* TODO separate icon for forwarding as attachment */
content: var(--icon-forward);
}
& .mark-as .button-icon {
content: var(--icon-unread);
}
& .view-picker .button-icon {
content: var(--icon-eye);
}
& .address-book .button-icon {
content: var(--icon-address-book);
}
& .chat .button-icon {
content: var(--icon-chat)
}
& .add-ons-and-themes .button-icon {
content: var(--icon-extension);
}
& .calendar .button-icon {
content: var(--icon-calendar);
}
& .tasks .button-icon {
content: var(--icon-tasks)
}
& .mail .button-icon {
content: var(--icon-mail);
}
& .print .button-icon {
content: var(--icon-print);
}
& .quick-filter-bar .button-icon {
content: var(--icon-filter);
}
& .synchronize .button-icon {
content: var(--icon-sync);
}
& .new-event .button-icon {
content: var(--icon-new-event);
}
& .new-task .button-icon {
content: var(--icon-new-task);
}
& .delete-event .button-icon {
content: var(--icon-trash);
}
& .print-event .button-icon {
content: var(--icon-print);
}
& .go-to-today .button-icon {
content: var(--icon-calendar-today);
}
& .go-back .button-icon {
content: var(--icon-nav-back);
}
& .go-forward .button-icon {
content: var(--icon-nav-forward);
}
& .stop .button-icon {
content: var(--icon-close);
}
& .throbber .throbber-icon {
stroke: var(--button-primary-background-color);
-moz-context-properties: stroke, fill;
width: 16px;
height: 16px;
visibility: hidden;
margin: var(--button-margin);
vertical-align: middle;
content: var(--icon-loading);
object-fit: cover;
@media (-moz-windows-accent-color-in-titlebar) {
stroke: currentColor;
}
}
& .throbber.busy .throbber-icon {
visibility: visible;
object-position: 0;
}
& .create-contact .button-icon {
content: var(--icon-new-contact);
}
& .create-address-book .button-icon {
content: var(--icon-new-address-book);
}
& .create-list .button-icon {
content: var(--icon-new-user-list);
}
& .import-contacts .button-icon {
content: var(--icon-import);
}
}
@media (prefers-reduced-motion: no-preference) {
.unified-toolbar .throbber.busy .throbber-icon {
animation: activity-indicator-throbber 1.05s steps(30) infinite;
}
@keyframes activity-indicator-throbber {
100% { object-position: -480px 0; }
}
}
.unified-toolbar-button {
display: flex;
gap: 3px;
align-items: center;
flex-wrap: nowrap;
min-width: initial;
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
.icons-above-text & {
flex-direction: column;
justify-content: space-around;
}
&[popup] {
padding-inline-end: 20px;
background-image: var(--icon-nav-down-sm);
background-position: calc(100% - 4px) center;
background-repeat: no-repeat;
&:dir(rtl) {
background-position-x: 4px;
}
}
&[badge] {
position: relative;
&::after {
content: attr(badge);
background-color: var(--toolbar-button-badge-bg-color);
border-radius: 12px;
padding: var(--toolbar-button-badge-padding);
font-weight: 600;
font-size: var(--toolbar-button-badge-font);
color: var(--toolbar-button-badge-text-color);
line-height: 1em;
position: absolute;
inset-inline-end: var(--badge-inset-inline-end);
inset-block-start: var(--badge-inset-block-start);
max-width: 3ch;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: clip;
/* If the text is shown after the icon, move the badge to be over the icon */
.icons-beside-text & {
inset-inline-end: unset;
inset-inline-start: calc(var(--icon-size) - var(--badge-inset-inline-nudge));
inset-block-start: var(--badge-inset-block-start);
}
/* With text only, just show the badge after the label */
.text-only & {
position: static;
}
/* If we are showing the text below the icon, move the badge in toward the
* center of the button. */
.icons-above-text & {
inset-inline-end: unset;
inset-inline-start: 51%;
}
}
&:-moz-window-inactive::after {
background-color: color-mix(in srgb, var(--toolbar-button-badge-bg-color) 50%, black);
}
}
&[popup][badge]::after {
inset-inline-end: 14px;
.icons-above-text & {
inset-inline-start: unset;
inset-inline-end: 38%;
}
}
& .button-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
max-width: 50ch;
pointer-events: none;
.icons-only & {
display: none;
}
}
.text-only & .button-icon {
display: none;
}
}
global-search-bar:not([hidden]) {
display: block;
color: var(--layout-color-0);
:root[lwtheme] & {
color: var(--toolbar-field-color);
text-shadow: none;
}
}
span[slot="placeholder"] {
display: flex;
align-items: center;
gap: 3px;
}