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 {
--menu-item-margin: 0 4px;
--menu-item-padding: 4px;
/* UI Density customization */
&[uidensity="compact"] {
--menu-item-margin: 0 3px;
--menu-item-padding: 3px;
& menupopup {
--arrowpanel-padding: 3px 0;
}
}
&[uidensity="touch"] {
--menu-item-padding: 9px;
}
}
menupopup {
/* Complement the :is(menu, menuitem) margin. */
--arrowpanel-padding: 4px 0;
--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);
--menu-color: var(--arrowpanel-color);
--menu-border-color: var(--arrowpanel-border-color);
--menu-background-color: var(--arrowpanel-background);
font: menu;
font-size: inherit;
text-align: start;
:root:not([lwtheme]) menubar > menu & {
--panel-background: Menu;
--panel-color: MenuText;
}
& > :is(menu, menuitem) {
appearance: none;
margin: var(--menu-item-margin);
min-height: 24px;
padding-inline: 8px;
padding-block: var(--menu-item-padding);
border-radius: 3px;
background-color: transparent;
&:focus {
outline: 0;
}
&[checked="true"],
&[selected="true"] {
list-style-image: var(--icon-check);
-moz-context-properties: stroke;
stroke: currentColor;
color: inherit;
}
&:not([disabled="true"],:active)[_moz-menuactive] {
color: inherit;
background-color: var(--arrowpanel-dimmed);
}
&:not([disabled="true"])[_moz-menuactive]:active {
color: inherit;
background-color: var(--arrowpanel-dimmed-further);
box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
}
&[disabled="true"],
&[disabled="true"]:hover,
&[checked="true"][disabled="true"],
&[checked="true"][disabled="true"]:hover {
color: var(--text-color-deemphasized);
background-color: transparent;
}
& > .menu-text {
appearance: none;
margin-inline-start: 0;
}
}
:root:not([lwtheme]) menubar > menu & >
:is(menu, menuitem):not([disabled="true"])[_moz-menuactive] {
color: -moz-MenuHoverText;
background-color: -moz-MenuHover;
@media (-moz-platform: windows) {
@media not (prefers-contrast) {
color: inherit;
background-color: var(--arrowpanel-dimmed-further);
}
}
}
& > menu::after {
-moz-context-properties: stroke, fill-opacity;
content: var(--icon-nav-right-sm);
stroke: currentColor;
float: inline-end;
margin-inline-start: 10px;
}
& > menu:-moz-locale-dir(rtl)::after {
content: var(--icon-nav-left-sm);
}
& > menuseparator {
padding-inline: 8px;
}
&.no-accel-menupopup > :is(menu, menuitem) > .menu-accel-container {
display: none;
}
/* NOTE: the menuitem children must be constructed with the menuitem-iconic
* class so that this rule can hide the icon container. */
&.no-icon-menupopup > :is(menu, menuitem) > .menu-iconic-left {
display: none;
}
/* Allways show the extension icons. */
&.no-icon-menupopup > menuitem[image^="moz-extension"] > .menu-iconic-left {
display: flex;
}
}
#ContentSelectDropdown {
& > menupopup {
/* !important to override inline styles */
--content-select-background-image: none !important;
--panel-color: var(--arrowpanel-color) !important;
}
& > menupopup[customoptionstyling="true"]::part(arrowscrollbox) {
/* !important to override inline styles */
background-image: none !important;
background-color: var(--arrowpanel-background) !important;
}
& .ContentSelectDropdown-item-0:not([_moz-menuactive="true"]) {
background-color: var(--arrowpanel-background) !important;
color: var(--arrowpanel-color) !important;
}
}
menu > .menu-right {
display: none;
}
.menu-iconic-accel {
margin-inline-end: 3px;
}
/* navigation buttons in context menu */
#context-navigation,
#mailContext-navigation {
--indicator-background: transparent;
& > .menuitem-iconic {
-moz-box-flex: 1;
-moz-box-pack: center;
-moz-box-align: center;
flex: 1 0 auto;
margin: var(--menu-item-margin);
padding: 0;
border-radius: var(--button-border-radius);
&[_moz-menuactive] {
/* Override the menu-shared.css rule. */
&[disabled="true"] {
background-color: transparent;
}
&:not([disabled="true"]) {
color: inherit;
background-color: var(--arrowpanel-dimmed);
}
}
& > .menu-iconic-left {
appearance: none;
position: relative;
flex-direction: column;
margin: 0 auto;
padding: 0;
& > .menu-iconic-icon {
margin: 7px;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
&::after {
content: '';
box-sizing: border-box;
background-color: var(--indicator-background);
border-radius: 4px;
width: 12px;
height: 4px;
margin-block: -6px 1px;
}
}
&[active="true"] > .menu-iconic-left {
color: var(--selected-item-color);
--indicator-background: var(--selected-item-color);
}
& > .menu-iconic-text,
& > .menu-accel-container {
display: none;
}
}
}
#navContext-markRead,
#navContext-markUnread {
list-style-image: var(--icon-unread);
&[disabled="true"] {
display: none;
}
}
#navContext-reply {
list-style-image: var(--icon-reply);
}
#navContext-archive {
list-style-image: var(--icon-archive);
}
#navContext-markAsJunk {
list-style-image: var(--icon-spam);
}
#navContext-delete {
list-style-image: var(--icon-trash);
}
#browserContext-back {
list-style-image: var(--icon-nav-back);
}
#browserContext-forward {
list-style-image: var(--icon-nav-forward);
}
#browserContext-reload {
list-style-image: var(--icon-restore);
}
#browserContext-stop {
list-style-image: var(--icon-close);
}
#browserContext-back:-moz-locale-dir(rtl),
#browserContext-forward:-moz-locale-dir(rtl),
#browserContext-reload:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}