295 lines
11 KiB
SCSS
295 lines
11 KiB
SCSS
// Non Native
|
|
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/browser/themes/windows/browser.css#L481
|
|
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/toolkit/themes/windows/global/global.css#L20
|
|
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/toolkit/themes/windows/global/menu.css#L30
|
|
@include OS($linux) {
|
|
//-- Global ------------------------------------------------------------------
|
|
:root {
|
|
/* Override some menu color variables for light browser themes. */
|
|
--menu-icon-opacity: 0.7;
|
|
--nested-margin: -10px;
|
|
--windows-panel-box-shadow: 0 0 4px hsla(0,0%,0%,.2);
|
|
|
|
--menu-checkbox-padding: 12px;
|
|
@include Dark {
|
|
/* Override the menu color variables for dark browser themes. */
|
|
--menu-icon-opacity: 1;
|
|
}
|
|
}
|
|
|
|
//-- Global - Menu -----------------------------------------------------------
|
|
/* For Windows 10, prevent using native OS drawing of certain menu elements,
|
|
especially background colors and shadows. */
|
|
menu, menuitem, menucaption {
|
|
appearance: none !important;
|
|
}
|
|
|
|
menu,
|
|
menuitem {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Menu item text also needs native drawing disabled. */
|
|
menu > .menu-text,
|
|
menuitem > .menu-text,
|
|
menu > .menu-iconic-text,
|
|
menuitem > .menu-iconic-text {
|
|
appearance: none !important;
|
|
margin-inline-start: 0 !important; /* need !important to override the other !important below... */
|
|
padding-inline-end: 0;
|
|
|
|
// Align
|
|
&::before {
|
|
box-sizing: border-box !important;
|
|
height: calc(2px + 1.2em) !important;
|
|
padding: 1px 0 !important;
|
|
}
|
|
&[value*="…"]::before {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
menu[_moz-menuactive="true"]:not([disabled="true"]),
|
|
menuitem[_moz-menuactive="true"]:not([disabled="true"]) {
|
|
background-color: var(--menuitem-hover-background-color) !important;
|
|
color: var(--menu-color) !important;
|
|
}
|
|
menu:where([_moz-menuactive="true"][disabled="true"]),
|
|
menuitem:where([_moz-menuactive="true"][disabled="true"]) {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.menu-text {
|
|
padding-inline-start: 0 !important;
|
|
}
|
|
|
|
.menu-right {
|
|
appearance: none !important;
|
|
width: unset !important;
|
|
list-style-image: url("chrome://global/skin/icons/arrow-right.svg") !important;
|
|
-moz-context-properties: fill, fill-opacity !important;
|
|
fill: currentColor !important;
|
|
fill-opacity: var(--menu-icon-opacity) !important;
|
|
margin-inline-end: 1px !important;
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
.menu-right > image {
|
|
/* Do not make this smaller than the size of the svg, but upscale for
|
|
* people with large fonts. */
|
|
width: max(1em, 16px) !important;
|
|
}
|
|
|
|
.menu-right:-moz-locale-dir(rtl) {
|
|
list-style-image: url("chrome://global/skin/icons/arrow-left.svg") !important;
|
|
}
|
|
|
|
menulist > menupopup > menuitem {
|
|
padding-inline-end: 1px !important;
|
|
}
|
|
|
|
menupopup[needsgutter] menu:not([icon], .menu-iconic),
|
|
menupopup[needsgutter] menuitem:not([type="checkbox"], [type="radio"], [icon], .menuitem-iconic) {
|
|
padding-inline-start: 36px !important;
|
|
}
|
|
|
|
/* For Windows 10, checkbox, radio and iconified menuitems need the default
|
|
appearance disabled so they pick up our custom styles instead. */
|
|
.menu-iconic-left,
|
|
menuitem[type="checkbox"],
|
|
menuitem[type="radio"] {
|
|
appearance: none !important; /* to override more specific selectors above. */
|
|
width: unset !important;
|
|
.menu-iconic-icon {
|
|
appearance: none !important;
|
|
}
|
|
}
|
|
|
|
.menu-iconic > .menu-iconic-left,
|
|
.menuitem-iconic > .menu-iconic-left {
|
|
padding-inline-end: 0 !important;
|
|
margin-inline-end: 8px !important;
|
|
}
|
|
|
|
menuitem[type="checkbox"],
|
|
menuitem[type="radio"] {
|
|
--menu-background-padding-default: var(--menu-checkbox-padding);
|
|
}
|
|
menuitem[checked="true"] {
|
|
padding-inline-start: var(--menu-checkbox-padding) !important;
|
|
}
|
|
|
|
menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item .menu-iconic-left {
|
|
padding-inline-end: 0 !important;
|
|
margin-inline-end: 6px !important;
|
|
}
|
|
|
|
/* We need to do something to override the default style for selected
|
|
checkboxes and radio buttons because the native drawing we use on other
|
|
Windows versions looks pretty bad with the Win10 styles, so for now we'll
|
|
insert a generic checkmark icon for both types. */
|
|
menuitem[checked="true"] > .menu-iconic-left {
|
|
-moz-context-properties: fill, fill-opacity !important;
|
|
fill: currentColor !important;
|
|
fill-opacity: var(--menu-icon-opacity) !important;
|
|
list-style-image: url("../icons/menu-check.svg") !important;
|
|
width: 16px !important;
|
|
margin-inline-end: 8px !important;
|
|
}
|
|
menuitem[checked="true"] > .menu-iconic-left > .menu-iconic-icon {
|
|
display: initial !important;
|
|
}
|
|
|
|
menuseparator {
|
|
appearance: none !important;
|
|
|
|
border-top: 1px solid var(--menu-border-color) !important;
|
|
border-bottom: none !important;
|
|
padding: 0 !important;
|
|
/* The side margins should align with the start of the menu item text. */
|
|
margin: 2px 1em !important;
|
|
|
|
&::before {
|
|
display: none !important; /* Original: block */
|
|
}
|
|
}
|
|
|
|
//-- Global - Menu Popup -----------------------------------------------------
|
|
menupopup {
|
|
/* Disable the default appearance so we can override the native styling. */
|
|
appearance: none !important !important;
|
|
|
|
/* Prevent any background or border around the outside of the shadow. */
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
/* To account for the box-shadow below */
|
|
margin: -4px !important;
|
|
}
|
|
|
|
menupopup:not([placespopup="true"]) > {
|
|
menuitem,
|
|
menu {
|
|
padding-block: var(--menu-padding, 0.5em) !important;
|
|
padding-inline-start: 1em !important;
|
|
}
|
|
}
|
|
.menupopup-arrowscrollbox[part*="content"] {
|
|
box-shadow: var(--windows-panel-box-shadow) !important;
|
|
margin: 4px !important;
|
|
padding: 4px 0 !important;
|
|
|
|
color: var(--menu-color) !important;
|
|
background: var(--menu-background-color) !important;
|
|
border-radius: 4px !important;
|
|
@include Option("userChrome.rounding.square_menupopup") {
|
|
border-radius: 0px !important;
|
|
}
|
|
border: 1px solid var(--menu-border-color) !important;
|
|
|
|
min-width: 0 !important;
|
|
min-height: 0 !important;
|
|
}
|
|
menupopup > menu > menupopup {
|
|
/* align submenus */
|
|
margin-inline-start: var(--nested-margin) !important;
|
|
margin-top: var(--nested-margin) !important;
|
|
}
|
|
|
|
//-- Browser -----------------------------------------------------------------
|
|
#mainPopupSet {
|
|
--menu-background-padding-default: calc( var(--context-menu-background-padding) + var(--context-menu-text-padding-default) );
|
|
}
|
|
|
|
/* :not([hidden]) to avoid the display: flex unhiding the item. */
|
|
#context-navigation:not([hidden]) {
|
|
/* The Windows 10 version of the navigation area needs the scrollbox's
|
|
background color, not the builtin "menu" color. */
|
|
background-color: inherit !important;
|
|
/* Match the inner top padding of the menupopup to center the icons visually. */
|
|
padding-bottom: 4px !important;
|
|
/* Use modern flex box so we can use percentage widths to redistribute
|
|
* spacing manually. */
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
/* We want the first and last icons to align with the text items which
|
|
* have 1em inline padding, and for icons to be centered within their
|
|
* hover state, so each icon of 16px needs 1em padding on both sides:
|
|
*/
|
|
--menuitem-min-width: calc(2em + 16px) !important;
|
|
/* The total width of the container should then be at least 4 times that: */
|
|
min-width: calc(4 * var(--menuitem-min-width)) !important;
|
|
}
|
|
|
|
#context-navigation > .menuitem-iconic {
|
|
flex: 1 0 auto !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
#context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
|
|
/* We only show hover state on the icons. This ensures there is no
|
|
* dead space between icons, but the visible hover state is only
|
|
* around the icons, and all the icons' hover states match each other.
|
|
*/
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
#context-navigation > .menuitem-iconic > .menu-iconic-left {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* override styles from shared/contextmenu.inc.css */
|
|
#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
|
|
width: var(--menuitem-min-width) !important;
|
|
height: 32px !important;
|
|
padding: 8px 1em !important;
|
|
margin: 0 !important;
|
|
}
|
|
#context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon {
|
|
background-color: var(--menuitem-hover-background-color) !important; // -moz-menuhover
|
|
}
|
|
|
|
#context-navigation > .menuitem-iconic[_moz-menuactive="true"][disabled="true"] > .menu-iconic-left > .menu-iconic-icon {
|
|
background-color: transparent !important;// -moz-menuhoverdisabled
|
|
}
|
|
|
|
/* If the menu is wider than the icons strictly need, the <menuitem> elements
|
|
* will stretch to pick up the extra space. In that case, the outer icons
|
|
* should align to the start/end of their containing <menuitem>: */
|
|
#context-navigation > .menuitem-iconic:first-child {
|
|
@include BoxPack("start", true);
|
|
}
|
|
|
|
#context-navigation > .menuitem-iconic:last-child {
|
|
@include BoxPack("end", true);
|
|
}
|
|
|
|
#context-navigation > .menuitem-iconic:last-child,
|
|
#context-navigation > .menuitem-iconic:first-child {
|
|
flex-grow: 0 !important;
|
|
/* The first and last items start off as 16px + 2em, like the other ones.
|
|
* 100% is the width of the parent, which will be at least 4 * the width of
|
|
* an individual item (16px + 2em)
|
|
* So 100% - 4 item widths gets us the remaining available space if
|
|
* #context-navigation is wider than that.
|
|
* Then divide by 6 to get the 1/6 of that extra space, and add this space
|
|
* to the width of the first/last items.
|
|
* This ensures that the 3 visual gaps between the 4 icons are all the same
|
|
* size, with each 1/3 of the available space evenly distributed between
|
|
* the 2 items on either side of the gap.
|
|
*/
|
|
width: calc(var(--menuitem-min-width) + calc(100% - 4 * var(--menuitem-min-width)) / 6) !important;
|
|
}
|
|
|
|
/* Other menu separators don't extend all the way to the menu edges, but the
|
|
one below the navigation buttons in the content context menu should. */
|
|
#context-sep-navigation {
|
|
margin-top: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
}
|
|
|
|
// Not
|
|
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/browser/themes/windows/customizableui/panelUI.css#L18
|
|
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/toolkit/themes/windows/global/popup.css#L26
|