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
.cui-widget-panel {
:root & {
--menu-panel-width: 22.35em;
--wide-menu-panel-width: 29em;
--panel-palette-icon-size: 16px;
--panel-separator-margin: 4px 8px;
/* XXX This is the ugliest bit of code I think I've ever written for Mozilla.
Basically, the [extra 0.1px in the 1.1px] is there to avoid CSS rounding errors
causing buttons to wrap. For gory details, refer to
/* stylelint-disable-next-line */
--menu-panel-button-width: calc(--menu-panel-width / 3 - 1.1px);
/* Complement the .subviewbutton margin. */
--arrowpanel-padding: 8px 0;
--arrowpanel-menuitem-border-radius: 3px;
--appmenu-button-border-color: light-dark(hsla(210, 4%, 10%, 0.14), rgba(249, 249, 250, 0.2));
--appmenu-button-margin: 0 8px;
--appmenu-button-padding: 6px;
--appmenu-combined-radio-button-padding: 4px 8px;
--appmenu-fontsize-icon-size: 20px;
--appmenu-fontsize-reset-button-width: 47px;
--appmenu-warning-background-color: light-dark(#ffefbf, hsla(55, 100%, 50%, 0.1));
--appmenu-warning-background-color-hover: light-dark(#ffe8a2, hsla(55, 100%, 50%, 0.2));
--appmenu-warning-background-color-active: light-dark(#ffe38f, hsla(55, 100%, 50%, 0.3));
--appmenu-warning-color: light-dark(black, #f9f9fa);
--appmenu-warning-border-color: light-dark(hsl(45, 100%, 77%), hsla(55, 100%, 50%, 0.3));
--appmenu-icons-fill: light-dark(color-mix(in srgb, var(--color-ink-70) 20%, transparent),
color-mix(in srgb, var(--color-ink-10) 20%, transparent));
--appmenu-icons-stroke: light-dark(var(--color-ink-70), var(--color-ink-10));
}
@media (prefers-contrast) {
--appmenu-icons-fill: color-mix(in srgb, currentColor 20%, transparent);
--appmenu-icons-stroke: currentColor;
}
/* UI Density customization */
:root[uidensity="compact"] & {
--arrowpanel-padding: 4px 0;
--appmenu-button-margin: 0 4px;
--appmenu-button-padding: 3px;
--appmenu-combined-radio-button-padding: 2px 6px;
--appmenu-fontsize-icon-size: 16px;
--appmenu-fontsize-reset-button-width: 41px;
}
:root[uidensity="touch"] & {
--appmenu-button-padding: 9px;
--appmenu-combined-radio-button-padding: 6px 10px;
--appmenu-fontsize-icon-size: 24px;
--appmenu-fontsize-reset-button-width: 51px;
}
}
#appMenu-popup {
color-scheme: env(-moz-content-preferred-color-scheme);
}
panelview:not([visible]) {
visibility: collapse;
}
.cui-widget-panel,
#widget-overflow {
font: menu;
font-size: inherit;
}
panelview {
flex-direction: column;
background: var(--arrowpanel-background);
padding: 0;
}
/* Prevent a scrollbar from appearing while the animation for transitioning from
one view to another runs, which would otherwise happen if the new view has
more height than the old one because that would mean that during the
animation the height of the multiview will be too short for the new view. */
panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body {
overflow-y: hidden;
}
.panel-subview-body {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
padding: var(--arrowpanel-padding);
}
.panel-view-body-unscrollable {
overflow: hidden;
flex: 1;
}
.subviewbutton.panel-subview-footer {
box-sizing: border-box;
min-height: 41px;
margin: 0;
background-color: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
border-radius: 0;
.cui-widget-panelview menuitem& {
margin: 4px 0 0;
}
.cui-widget-panelview & > .menu-text {
flex: 1;
}
& > .menu-text {
appearance: none;
padding-inline-start: 0 !important; /* to override menu.css on Windows */
padding-inline-end: 6px;
flex: 0 0;
}
& > .toolbarbutton-text {
padding-inline-start: 0;
}
}
#wrapper-edit-controls:is([place="palette"],[place="menu-panel"]) > #edit-controls {
margin-inline-start: 0;
}
#appmenu-edit-button {
margin-inline: 0 3px;
padding-inline: 7px;
&::after {
margin-inline-start: 0;
}
}
panelview[id^=PanelUI-webext-] {
overflow: hidden;
}
panelview:not([mainview]) .toolbarbutton-text,
.cui-widget-panel .toolbarbutton-text,
#overflowMenu-customize-button > .toolbarbutton-text {
text-align: start;
display: flex;
}
#appMenu-popup panelview,
#customizationui-widget-multiview panelview:not([extension]) {
min-width: var(--menu-panel-width);
max-width: 35em;
}
#customizationui-widget-multiview #appMenu-libraryView,
#widget-overflow panelview {
min-width: var(--wide-menu-panel-width);
max-width: var(--wide-menu-panel-width);
}
/* Add 2 * 16px extra width for touch mode button padding. */
#appMenu-popup[touchmode] panelview {
min-width: calc(var(--menu-panel-width) + 32px);
}
.cui-widget-panel.cui-widget-panelWithFooter::part(content) {
padding-bottom: 0;
}
.animate-out {
animation-name: widget-animate-out;
animation-fill-mode: forwards;
animation-duration: 500ms;
animation-timing-function: var(--animation-easing-function);
}
@keyframes widget-animate-out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0 ;
transform: scale(.5);
}
}
toolbarpaletteitem[place="menu-panel"] > .toolbarbutton-1 {
flex: 1;
}
/* Help webextension buttons fit in. */
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
height: var(--panel-palette-icon-size);
width: var(--panel-palette-icon-size);
}
#customization-palette .toolbarbutton-1 {
appearance: none;
flex-direction: column;
padding: 12px 0 9px;
margin: 0;
}
/* above we treat the container as the icon for the margins, that is so the
/* badge itself is positioned correctly. Here we make sure that the icon itself
/* has the minimum size we want, but no padding/margin. */
.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
width: var(--panel-palette-icon-size);
height: var(--panel-palette-icon-size);
min-width: var(--panel-palette-icon-size);
min-height: var(--panel-palette-icon-size);
margin: 0;
padding: 0;
}
#zoom-in-button > .toolbarbutton-text,
#zoom-out-button > .toolbarbutton-text,
#zoom-reset-button > .toolbarbutton-icon {
display: none;
}
#customization-palette .toolbarbutton-text {
display: none;
}
menuitem.subviewbutton {
appearance: none !important;
}
.subviewbutton {
&:focus {
outline: 0;
}
&:is([disabled="true"], [disabled="true"]:hover, [checked="true"][disabled="true"], [checked="true"][disabled="true"]:hover) {
color: var(--text-color-deemphasized);
background-color: transparent;
}
&[shortcut]::after {
content: attr(shortcut);
float: inline-end;
}
&[checked="true"] {
list-style-image: var(--icon-check);
-moz-context-properties: stroke;
stroke: currentColor;
color: inherit;
}
& > .toolbarbutton-text {
padding: 0;
padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined below. */
}
& > .menu-text {
appearance: none;
margin-inline-start: 0 !important;
}
/* We don't always display: none this item, and if it has forced width (like above)
* or margin, that impacts the position of the label. Fix:
*/
& > .toolbarbutton-icon {
margin: 0;
}
}
.subview-subheader,
panelview .toolbarbutton-1,
.subviewbutton,
menu.subviewbutton,
.widget-overflow-list .toolbarbutton-1 {
appearance: none;
margin: var(--appmenu-button-margin);
min-height: 24px;
padding-inline: 8px;
padding-block: var(--appmenu-button-padding);
border-radius: var(--arrowpanel-menuitem-border-radius);
background-color: transparent;
}
.addon-banner-item > .toolbarbutton-text,
.subviewbutton-iconic > .toolbarbutton-text,
.subviewbutton[image] > .toolbarbutton-text,
.subviewbutton[targetURI] > .toolbarbutton-text,
.subviewbutton.restoreallitem > .toolbarbutton-text,
.subviewbutton.bookmark-item > .toolbarbutton-text,
.subviewbutton[checked="true"] > .toolbarbutton-text {
padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
}
.addon-banner-item > .toolbarbutton-icon,
.subviewbutton-iconic > .toolbarbutton-icon {
width: 16px;
height: 16px;
-moz-context-properties: fill, stroke;
}
.subviewbutton-iconic > .toolbarbutton-icon {
fill: var(--appmenu-icons-fill);
stroke: var(--appmenu-icons-stroke);
}
.PanelUI-subView .subviewbutton-nav::after {
-moz-context-properties: stroke, fill-opacity;
content: var(--icon-nav-right-sm);
stroke: currentColor;
fill-opacity: 0.6;
float: inline-end;
}
.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after {
content: var(--icon-nav-left-sm);
}
.subviewbutton[shortcut]::after,
.PanelUI-subView .subviewbutton-nav::after {
margin-inline-start: 10px;
}
.PanelUI-subView .toolbaritem-combined-buttons {
align-items: center;
flex-direction: row;
border: 0;
border-radius: 0;
margin-inline-end: 6px;
padding-block: 0;
& > label {
flex: 1;
margin: 0;
}
& > spacer.before-label {
width: 36px; /* 12px toolbarbutton padding + 16px icon + 8px label padding start */
}
& > spacer.after-label {
flex: 1;
width: 20px; /* a little bigger than the width of the scrollbar */
}
& > .subviewbutton {
flex: 0 0;
height: auto;
margin-inline-start: 18px;
min-width: auto;
padding-inline: 5px;
padding-block: var(--appmenu-button-padding);
--focus-outline-offset: 1px;
}
& > .subviewbutton-iconic {
padding-inline: var(--appmenu-button-padding);
}
& > .subviewbutton-iconic > .toolbarbutton-text,
& > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
display: none;
}
& > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
padding-inline-start: 0;
}
& > .subviewbutton[type="radio"] {
margin-inline-start: 0;
margin-block: 1px;
padding: var(--appmenu-combined-radio-button-padding);
min-height: 22px;
border: 1px solid var(--appmenu-button-border-color);
border-radius: 0;
&:focus {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
&:first-of-type {
border-inline-end: none;
border-start-start-radius: var(--arrowpanel-menuitem-border-radius);
border-end-start-radius: var(--arrowpanel-menuitem-border-radius);
}
&:last-of-type {
border-inline-start: none;
border-start-end-radius: var(--arrowpanel-menuitem-border-radius);
border-end-end-radius: var(--arrowpanel-menuitem-border-radius);
}
&[checked="true"] {
--appmenu-icons-fill: color-mix(in srgb, currentColor 20%, transparent);
--appmenu-icons-stroke: currentColor;
background-color: var(--button-primary-background-color);
color: var(--button-primary-text-color);
}
}
&:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) {
& > toolbarbutton {
border: 0;
margin: 0;
flex-direction: row;
&:not(.toolbarbutton-1)[disabled] {
opacity: 0.4;
/* Override toolbarbutton.css which sets the color to GrayText */
color: inherit;
}
& > .toolbarbutton-icon {
min-width: 0;
min-height: 0;
margin: 0;
}
}
& > separator {
appearance: none;
align-items: stretch;
margin: .5em 0;
width: 1px;
height: auto;
background: var(--panel-separator-color);
transition-property: margin;
transition-duration: 10ms;
transition-timing-function: ease;
}
&:hover > separator {
margin: 0;
}
}
/* In customize mode, extend the buttons *only* in the panel, just to make them not look stupid */
toolbarpaletteitem[place="menu-panel"] > & > toolbarbutton {
min-width: var(--menu-panel-button-width);
max-width: var(--menu-panel-button-width);
}
}
.subview-subheader {
font-size: inherit;
font-weight: inherit;
color: var(--text-color-deemphasized);
}
panelview .toolbarbutton-1 {
margin-top: 6px;
}
panelview .toolbarbutton-1:not([disabled],[open],:active):is(:hover,:focus-visible),
toolbarbutton.subviewbutton:not([disabled],[open],:active):is(:hover,:focus-visible),
menu.subviewbutton:not([disabled],:active)[_moz-menuactive],
menuitem.subviewbutton:not([disabled],:active)[_moz-menuactive],
.widget-overflow-list .toolbarbutton-1:not([disabled],[open],:active):is(:hover,:focus-visible),
.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) >
toolbarbutton:not([disabled],[open],:active):is(:hover,:focus-visible) {
color: inherit;
background-color: var(--arrowpanel-dimmed);
}
panelview .toolbarbutton-1:not([disabled]):is([open],:hover:active),
toolbarbutton.subviewbutton:not([disabled]):is([open],:hover:active),
menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
.widget-overflow-list .toolbarbutton-1:not([disabled]):is([open],:hover:active),
.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) >
toolbarbutton:not([disabled]):is([open],:hover:active) {
color: inherit;
background-color: var(--arrowpanel-dimmed-further);
box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}
menuitem.panel-subview-footer:not([disabled],:active)[_moz-menuactive],
.subviewbutton.panel-subview-footer:not([disabled],[open],:active):is(:hover,:focus-visible) {
background-color: var(--arrowpanel-dimmed-further);
}
menuitem.panel-subview-footer:not([disabled])[_moz-menuactive]:active,
.subviewbutton.panel-subview-footer:not([disabled]):is([open],:hover:active) {
background-color: var(--arrowpanel-dimmed-even-further);
box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}
#widget-overflow-mainView > .panel-subview-body > toolbarseparator,
.PanelUI-subView menuseparator,
.PanelUI-subView toolbarseparator,
.cui-widget-panelview menuseparator,
.cui-widget-panel toolbarseparator {
appearance: none;
min-height: 0;
border-top: 1px solid var(--panel-separator-color);
border-bottom: none;
margin: var(--panel-separator-margin);
padding: 0;
}
.PanelUI-subView toolbarseparator[orient="vertical"] {
height: 24px;
border-inline-start: 1px solid var(--panel-separator-color);
border-top: none;
margin: 0;
margin-inline: 6px 7px;
}
#search-container[cui-areatype="menu-panel"] {
padding-block: 6px;
}
toolbarpaletteitem[place="palette"] > #search-container {
min-width: 7em;
width: 7em;
min-height: 37px;
max-height: 37px;
}
#widget-overflow-mainView .panel-subview-body {
overflow-y: auto;
overflow-x: hidden;
}
.widget-overflow-list {
width: var(--wide-menu-panel-width);
/* In customize mode, the overflow list is constrained by its container,
* so we set width: auto to avoid the scrollbar not fitting.
*/
#customization-panelHolder > & {
width: auto;
}
& .toolbarbutton-1 {
align-items: center;
flex-direction: row;
}
& .subviewbutton-nav::after {
margin-inline-start: 10px;
-moz-context-properties: stroke, fill-opacity;
content: var(--icon-nav-right-sm);
stroke: currentColor;
fill-opacity: 0.6;
float: inline-end;
}
& .subviewbutton-nav:-moz-locale-dir(rtl)::after {
content: var(--icon-nav-left-sm);
}
& .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
text-align: start;
padding-inline-start: .5em;
}
}
toolbaritem[overflowedItem=true],
.widget-overflow-list .toolbarbutton-1 {
width: 100%;
max-width: var(--wide-menu-panel-width);
background-repeat: no-repeat;
background-position: 0 center;
}
toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
opacity: 0.5;
}
.subviewradio {
appearance: none;
align-items: center;
padding: 1px;
margin: 0 0 2px;
background-color: transparent;
border-radius: 2px;
border: 1px solid transparent;
&:not([disabled],[open],:active):is(:hover,:focus-visible) {
background-color: var(--arrowpanel-dimmed);
border-color: var(--panel-separator-color);
}
&:is([selected], [selected]:hover),
&:not([disabled]):is([open],:hover:active) {
background-color: var(--arrowpanel-dimmed-further);
border-color: var(--panel-separator-color);
box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
}
& > .radio-check {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid #e7e7e7;
border-radius: 50%;
margin: 1px 5px;
background-color: #f1f1f1;
&[selected] {
background-color: #fff;
border: 4px solid #177ee6;
}
}
}
.panel-header {
align-items: center;
border-bottom: 1px solid var(--panel-separator-color);
display: flex;
height: 40px; /* fixed item height to prevent flex sizing; height + 2*4px padding */
padding: 4px;
& > h1 {
display: inline;
flex: auto;
font-size: inherit;
font-weight: 600;
margin: 0;
text-align: center;
& > span {
display: inline-block;
white-space: pre-wrap;
}
}
& > .subviewbutton-back {
-moz-context-properties: stroke;
stroke: var(--arrowpanel-color);
list-style-image: var(--icon-nav-left-sm);
padding: 10px;
transform: translateY(1px);
margin: 0 4px;
&:-moz-locale-dir(rtl) {
list-style-image: var(--icon-nav-right-sm);
}
& + h1 {
/* Add the size of the back button to center properly. */
margin-inline-end: 32px;
}
& > .toolbarbutton-icon {
width: 12px;
height: 12px;
}
& > .toolbarbutton-text {
/* !important to override .cui-widget-panel .toolbarbutton-text
* selector further down. */
display: none !important;
}
}
}
.subviewbutton.download {
align-items: flex-start;
min-height: 48px;
padding-inline-start: 8px;
& > .toolbarbutton-icon,
& > .toolbarbutton-text > label {
margin: 4px 0 0;
}
& > .toolbarbutton-icon {
width: 32px;
height: 32px;
}
& > .toolbarbutton-text > .status-text {
color: var(--text-color-deemphasized);
font-size: .9em;
}
}
.button-appmenu {
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
&[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
display: flex;
background: center no-repeat transparent;
background-size: contain;
border: none;
box-shadow: none;
min-width: 12px;
min-height: 12px;
padding: 0;
}
&:is([badge-status="update-available"], [badge-status="update-downloading"],
[badge-status="update-manual"], [badge-status="update-other-instance"],
[badge-status="update-restart"]) > .toolbarbutton-badge-stack > .toolbarbutton-badge {
margin-top: -4px !important;
margin-inline-end: -3px !important;
-moz-context-properties: fill;
fill: var(--color-green-60);
background-image: var(--icon-notification-sm);
background-size: 12px;
}
&[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
margin-top: -3px !important;
margin-inline-end: -5px !important;
background-image: var(--icon-warning-sm);
border-radius: 0;
-moz-context-properties: fill, stroke;
fill: var(--color-amber-30);
stroke: var(--color-amber-60);
}
}
/* Main menu banner menuitems */
.panel-banner-item {
appearance: none;
align-items: flex-start;
margin: var(--appmenu-button-margin);
padding-inline: 8px;
padding-block: calc(var(--appmenu-button-padding) + 3px);
border-radius: var(--arrowpanel-menuitem-border-radius);
color: var(--button-color);
background-color: color-mix(in srgb, currentColor 7%, transparent);;
margin-bottom: 4px;
font-weight: 600;
&:not([disabled]):hover {
background-color: var(--arrowpanel-dimmed);
&:active {
background-color: var(--arrowpanel-dimmed-further);
}
}
& > .toolbarbutton-text {
display: inline-block;
padding: 0;
}
& > .toolbarbutton-icon {
width: 16px;
height: 16px;
/* Move the icon to appear after the text label. */
order: 2;
}
&:is([notificationid="update-available"], [notificationid="update-downloading"],
[notificationid="update-manual"], [notificationid="update-other-instance"],
[notificationid="update-restart"]) > .toolbarbutton-icon {
background-repeat: no-repeat;
background-position: center;
margin-inline-start: 6px;
-moz-context-properties: fill;
fill: var(--color-green-60);
}
}
.addon-banner-item {
appearance: none;
font-weight: 600;
margin: 0 8px 4px;
padding-inline: 8px;
padding-block: var(--appmenu-button-padding);
box-sizing: border-box;
box-shadow: none;
color: var(--appmenu-warning-color);
background-color: var(--appmenu-warning-background-color);
border-top: 1px solid var(--appmenu-warning-border-color);
border-inline: 1px solid var(--appmenu-warning-border-color);
border-radius: var(--arrowpanel-menuitem-border-radius);
transition: background-color;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, var(--appmenu-warning-color) 20%, transparent);
stroke: var(--appmenu-warning-color);
&::after {
content: "";
width: 16px;
height: 16px;
margin-inline: 10px 0;
display: flex;
background: var(--icon-warning) no-repeat center;
:root[lwt-popup-brighttext] & {
-moz-context-properties: fill;
fill: var(--color-amber-30);
}
}
&:last-child {
border-bottom: 1px solid var(--appmenu-warning-border-color);
}
&:is(:focus, :hover) {
background-color: var(--appmenu-warning-background-color-hover);
}
&:hover:active {
background-color: var(--appmenu-warning-background-color-active);
}
& > .toolbarbutton-icon {
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
}
menulist {
border: 1px solid var(--button-border-color);
background-color: var(--button-background-color);
&:not([disabled="true"],[open="true"]):hover,
&[open="true"]:not([disabled="true"]) {
background-color: var(--button-hover-background-color);
border-color: var(--button-border-color);
}
}
/* App Menu items icons */
/* Sync */
#appmenu_signin {
list-style-image: var(--icon-sync);
}
#appmenu-submenu-sync-now {
list-style-image: var(--icon-sync);
@media (prefers-reduced-motion: no-preference) {
&[syncstatus="active"] > .toolbarbutton-icon {
animation: syncRotate 0.8s linear infinite;
}
}
}
@keyframes syncRotate {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
#appmenu-submenu-sync-settings {
list-style-image: var(--icon-settings);
}
#appmenu-submenu-sync-sign-out {
list-style-image: var(--icon-quit);
}
#syncSeparator {
background-color: var(--color-blue-50);
background-image: linear-gradient(to right, var(--color-teal-40), var(--color-magenta-60));
height: 1px;
border: none;
border-radius: 2px;
}
#appmenu-manage-sync-icon {
content: var(--icon-contact);
}
.appmenu-sync-account-email {
font-weight: 600;
}
/* New Account and Create */
#appmenu_new {
list-style-image: var(--icon-new-contact);
}
#appmenu_create {
list-style-image: var(--icon-add);
}
#appmenu_newNewMsgCmd {
list-style-image: var(--icon-new-mail);
}
#appmenu_newMailAccountMenuItem {
list-style-image: var(--icon-mail);
}
#appmenu_calendar-new-calendar-menu-item {
list-style-image: var(--icon-calendar);
}
#appmenu_newAB {
list-style-image: var(--icon-address-book);
}
#appmenu_newABMenuItem,
#appmenu_newCardDAVMenuItem,
#appmenu_newLdapMenuItem {
list-style-image: var(--icon-new-address-book);
}
#appmenu_newIMAccountMenuItem {
list-style-image: var(--icon-chat);
}
#appmenu_newFeedAccountMenuItem {
list-style-image: var(--icon-rss);
}
#appmenu_newNewsgroupAccountMenuItem {
list-style-image: var(--icon-newsletter);
}
#appmenu_calendar-new-event-menu-item {
list-style-image: var(--icon-new-event);
}
#appmenu_calendar-new-task-menu-item {
list-style-image: var(--icon-new-task);
}
#appmenu_open {
list-style-image: var(--icon-draft);
}
#appmenu_OpenMessageFileMenuitem {
list-style-image: var(--icon-mail);
}
#appmenu_OpenCalendarFileMenuitem {
list-style-image: var(--icon-calendar);
}
#appmenu_View {
list-style-image: var(--icon-eye);
}
#appmenu_Toolbars {
list-style-image: var(--icon-spaces-menu);
}
#appmenu_MessagePaneLayout {
list-style-image: var(--icon-layout);
}
#appmenu_FolderViews {
list-style-image: var(--icon-folder);
}
#appMenu-uiDensity-controls .toolbarbutton-icon {
content: var(--icon-spaces-menu);
}
#appMenu-fontSize-controls .toolbarbutton-icon {
content: var(--icon-font);
}
#appmenu_newCard {
list-style-image: var(--icon-new-contact);
}
/* Settings */
#appmenu_addons {
list-style-image: var(--icon-extension);
}
#appmenu_accountmgr {
list-style-image: var(--icon-account-settings);
}
#appmenu_preferences {
list-style-image: var(--icon-settings);
}
/* Density Settings */
#appmenu_uiDensityCompact {
list-style-image: var(--icon-density-compact);
}
#appmenu_uiDensityNormal {
list-style-image: var(--icon-density-default);
}
#appmenu_uiDensityTouch {
list-style-image: var(--icon-density-relaxed);
}
/* Font scaling */
#appMenu-fontSizeReduce-button {
list-style-image: var(--font-size-decrease);
}
#appMenu-fontSizeEnlarge-button {
list-style-image: var(--font-size-increase);
}
#appMenu-fontSizeReduce-button > .toolbarbutton-icon,
#appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
width: var(--appmenu-fontsize-icon-size);
height: var(--appmenu-fontsize-icon-size);
-moz-context-properties: fill, stroke;
fill: var(--button-background-color, ButtonFace);
stroke: var(--button-color);
border-radius: 50%;
margin-block-start: 1px;
padding: 0;
:root[uidensity="compact"] & {
margin-block-start: 2px;
}
}
#appMenu-fontSizeReduce-button:hover > .toolbarbutton-icon,
#appMenu-fontSizeEnlarge-button:hover > .toolbarbutton-icon {
fill: var(--button-hover-background-color);
}
#appMenu-fontSizeReduce-button:active > .toolbarbutton-icon,
#appMenu-fontSizeEnlarge-button:active > .toolbarbutton-icon {
fill: var(--button-active-background-color);
}
/* Compensate the smaller icon. */
#appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
margin-inline-end: -2px;
:root[uidensity="compact"] & {
margin-inline-end: -1px;
}
}
#appMenu-fontSizeReset-button > .toolbarbutton-text {
display: flex;
justify-content: center;
border: 1px solid var(--appmenu-button-border-color);
border-radius: 2px;
min-width: var(--appmenu-fontsize-reset-button-width);
text-align: center;
padding: 2px;
}
#appMenu-fontSizeReset-button:hover > .toolbarbutton-text {
background-color: var(--button-hover-background-color);
}
#appMenu-fontSizeReset-button:active > .toolbarbutton-text {
background-color: var(--button-active-background-color);
}
#appMenu-fontSizeReduce-button:is(:hover, :focus, :active),
#appMenu-fontSizeReset-button:is(:hover, :focus, :active),
#appMenu-fontSizeEnlarge-button:is(:hover, :focus, :active) {
color: unset;
background-color: unset;
box-shadow: unset;
}
#appMenu-fontSizeReset-button:focus > .toolbarbutton-text,
#appMenu-fontSizeReduce-button:focus > .toolbarbutton-icon,
#appMenu-fontSizeEnlarge-button:focus > .toolbarbutton-icon {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
#appMenu-fontSize-controls > .subviewbutton {
margin-inline-start: 2px;
padding: 3px;
}
#appMenu-fontSize-controls > #appMenu-fontSizeEnlarge-button {
padding-inline-end: 0;
}
/* Tools */
#appmenu_import {
list-style-image: var(--icon-import);
}
#appmenu_export {
list-style-image: var(--icon-export);
}
#appmenu_searchCmd {
list-style-image: var(--icon-search);
}
#appmenu_filtersCmd {
list-style-image: var(--icon-filter);
}
#appmenu_openSavedFilesWnd {
list-style-image: var(--icon-download);
}
#appmenu_manageKeysOpenPGP {
list-style-image: var(--icon-key);
}
#appmenu_activityManager {
list-style-image: var(--icon-paste);
}
#appmenu_toolsMenu,
#appmenu_devtoolsToolbox {
list-style-image: var(--icon-tools);
}
/* Help */
#appmenu_help,
#appmenu_openHelp {
list-style-image: var(--icon-question);
}
#appmenu_openTour {
list-style-image: var(--icon-features);
}
#appmenu_keyboardShortcuts {
list-style-image: var(--icon-shortcut);
}
#appmenu_getInvolved {
list-style-image: var(--icon-handshake);
}
#appmenu_makeDonation {
list-style-image: var(--icon-heart);
}
#appmenu_submitFeedback {
list-style-image: var(--icon-chat);
}
#appmenu_troubleshootMode {
list-style-image: var(--icon-tools);
}
#appmenu_troubleshootingInfo {
list-style-image: var(--icon-draft);
}
#appmenu_about {
list-style-image: var(--icon-info);
}
/* Quit */
#appmenu-quit {
list-style-image: var(--icon-quit);
}