Source code
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-icon-opacity: 1;
--menu-arrow-width: 1em;
@media (-moz-platform: windows) {
--menu-arrow-width: max(1em, 16px);
@media (prefers-color-scheme: light) {
--menu-icon-opacity: 0.7;
}
}
}
/* Menu separator */
menuseparator {
/* Using padding instead of margin to increase the hit area, as some
separators (e.g. in bookmarks menus) can be dragged or have a context
menu. */
padding-block: 4px;
@media (-moz-platform: macos) {
padding-block: 5px;
margin-inline: 9px;
}
}
menuseparator::before {
border-top: 1px solid var(--panel-separator-color);
content: "";
display: block;
flex: 1;
}
/* Accel text */
@media not (prefers-contrast) {
menuitem:not([disabled]) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) {
color: var(--panel-disabled-color);
}
}
/* Scroll buttons */
/* Hide arrow buttons when there's nothing to scroll in that direction */
.menupopup-arrowscrollbox[scrolledtostart="true"]::part(scrollbutton-up),
.menupopup-arrowscrollbox[scrolledtoend="true"]::part(scrollbutton-down) {
display: none;
}
/* Prevent the scrolled contents of the menupopup from jumping vertically when
* the arrow buttons appear / disappear, by positioning ::part(scrollbox) in
* such a way that its edges are at the same position as the edges of
* arrowscrollbox regardless of scroll button visibility.
*/
.menupopup-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbox) {
/* scrollbutton-up is visible; shift our top edge up by its height. */
margin-top: -16px;
}
.menupopup-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbox) {
/* scrollbutton-down is visible; shift our bottom edge down by its height. */
margin-bottom: -16px;
}
.menupopup-arrowscrollbox::part(scrollbox-clip) {
/* In the space where the arrow buttons overlap the scrollbox, clip away the
* scrollbox so that nothing is shown behind the arrow button even if the
* button is transparent.
*/
overflow: clip;
}
@media (-moz-platform: windows) or (-moz-platform: linux) {
menupopup,
menubar {
font: menu;
}
}
@media (-moz-platform: macos) {
menupopup {
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font: -moz-pull-down-menu;
}
}
menu,
menuitem,
menucaption {
border-radius: calc(var(--panel-border-radius) / 2);
align-items: center;
flex-shrink: 0;
list-style-image: none;
max-width: 42em;
@media (-moz-platform: linux) {
padding: 4px 6px;
}
@media (-moz-platform: macos) {
padding: 3px 9px;
}
}
menu,
menuitem {
&:where([disabled="true"]) {
color: var(--panel-disabled-color);
text-shadow: none;
}
&:where([_moz-menuactive]:not([disabled="true"])) {
color: -moz-menuhovertext;
background-color: -moz-menuhover;
}
&:where([_moz-menuactive="true"][disabled="true"]) {
background-color: -moz-menuhoverdisabled;
}
}
menuitem:is([default="true"], .spell-suggestion),
menucaption {
font-weight: bold;
}
/* ..... menu arrow box ..... */
.menu-right {
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: var(--menu-icon-opacity);
&:-moz-locale-dir(rtl) {
}
> image {
width: var(--menu-arrow-width);
}
@media (-moz-platform: linux) {
margin-block: 0;
margin-inline: 6px 0;
}
@media (-moz-platform: macos) {
margin-inline: 22px -3px;
}
@media (-moz-platform: windows) {
margin-inline-end: 1em;
}
}
@media (-moz-platform: macos) {
:is(.menu-accel, .menu-iconic-accel)[value] {
margin-inline-start: 25px;
}
}