/* 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 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); /* ::::: menupopup ::::: */ menupopup, panel { min-width: 1px; --panel-background: Menu; --panel-color: MenuText; --panel-padding: 0; --panel-border-radius: 0; --panel-border-color: ThreeDShadow; --panel-width: initial; --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2); --panel-shadow-margin: 4px; -moz-window-input-region-margin: var(--panel-shadow-margin); margin: calc(-1 * var(--panel-shadow-margin)); } @media not (-moz-windows-non-native-menus) { menupopup { appearance: auto; -moz-default-appearance: menupopup; /* Native menus are always light */ color-scheme: light !important; /* We set the background-color / border here so that it doesn't interfere with native styling. */ background-color: Menu; border: 1px solid ThreeDShadow; --panel-background: transparent; --panel-border-color: transparent; --nested-margin: -3px; --panel-shadow-margin: 0px; } } @media (-moz-windows-non-native-menus) { menupopup { /* Disable the default appearance so we can override the native styling. */ appearance: none; /* Prevent any background or border around the outside of the shadow. */ background-color: transparent; border: none; --panel-border-radius: 4px; --panel-padding: 4px 0; --panel-border-color: ThreeDShadow; --panel-background: Menu; --nested-margin: -10px; } menupopup > menuitem, menupopup > menu { padding-block: 0.5em; padding-inline-start: 1em; } } menupopup > menu > menupopup { /* align submenus */ margin-inline-start: var(--nested-margin); margin-top: var(--nested-margin); } :is(panel, menupopup)[type="arrow"] { appearance: none; background: transparent; border: none; } :is(panel, menupopup)::part(content) { display: flex; box-sizing: border-box; padding: var(--panel-padding); margin: var(--panel-shadow-margin); box-shadow: var(--panel-shadow); color: var(--panel-color); background: var(--panel-background); border-radius: var(--panel-border-radius); border: 1px solid var(--panel-border-color); width: var(--panel-width); min-width: 0; min-height: 0; /* Makes popup constraints work */ max-height: calc(100% - 2 * var(--panel-shadow-margin)); max-width: calc(100% - 2 * var(--panel-shadow-margin)); } :is(panel, menupopup)[orient=vertical]::part(content) { flex-direction: column; } panel[type="arrow"].panel-no-padding::part(content) { padding: 0; overflow: hidden; /* Don't let panel content overflow the border-radius */ } /* rules for popups associated with menulists */ menulist > menupopup { font: inherit; appearance: none; background-color: transparent; border: none; min-width: 0; } @media not (-moz-windows-non-native-menus) { /* For Win10, the popup itself needs to have a transparent background because otherwise the background color would appear behind the drop shadow. */ menulist > menupopup { color: FieldText; --panel-background: Field; --panel-border-color: ThreeDShadow; } }