diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 9ddf186..8464ee4 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6059,6 +6059,7 @@ list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } + /* Padding */ :root { --context-menu-background-padding-default: 5px; diff --git a/css/leptonContent.css b/css/leptonContent.css index 87005bd..2afd5b6 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -2313,9 +2313,8 @@ } /*= Context Menu ===========================================================*/ @supports -moz-bool-pref("userChrome.icon.context_menu") { - menupopup menuitem:not([type="checkbox"], [type="radio"]), - menupopup menu:not([type="checkbox"], [type="radio"]), - #main-menubar > menu { + menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]), + menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) { -moz-appearance: none !important; /* Linux: menulist */ } @@ -2341,9 +2340,10 @@ :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { - list-style-image: var(--menuitem-image) !important; + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } + /* Padding */ :root { --context-menu-background-padding-default: 5px; diff --git a/src/icons/_layout_menu.scss b/src/icons/_layout_menu.scss index d5efe3a..dd32f91 100644 --- a/src/icons/_layout_menu.scss +++ b/src/icons/_layout_menu.scss @@ -1,3 +1,5 @@ +@import "./layout_menu_common"; + //-- Mixin --------------------------------------------------------------------- // Items $_iconNoneCommon: ".in-menulist, [checked=\"true\"]"; @@ -57,41 +59,25 @@ $_layoutCommonMenus: ( } //------------------------------------------------------------------------------ -#{selector.append( - "menupopup menuitem, menupopup menu", - ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])" -)}, +#{$_initialMenus}, #{$_globalMenus} { - -moz-appearance: none !important; /* Linux: menulist */ + @include _initial_menus; } /* Icon */ @include _layoutInitIconMenus { - /* Color */ - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - - /* Layout */ - background-size: 16px !important; - background-repeat: no-repeat !important; - background-image: var(--menuitem-image); + @include _layout_icon_menus; } /* For native context menus */ -@include NativeMenu { - #{$_nestedPopupIconMenus} { - list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; - } +#{$_nestedPopupIconMenus} { + @include _layout_icon_native_menus; } /* Padding */ -:root { - --context-menu-background-padding-default: 5px; - --context-menu-background-padding: var(--context-menu-background-padding-default); -} +@include _layout_root_padding; @include _layoutInitPaddingMenus { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !important; + @include _layout_init_padding; } /* Menubar */ @@ -128,67 +114,47 @@ $_layoutCommonMenus: ( // } // } -@include OS($win7) { - :root { - --context-menu-background-padding-default: 2px; - } -} -@include OS($win8) { - :root { - --context-menu-background-padding-default: 3px; - } -} +@include _layout_root_win7_8; @include OS($win7, $win8) { @include _layoutIconMenus { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: 0 !important; + @include _layout_init_win7_8(); } } @include OS($win10) { - :root { - --context-menu-background-padding: 1em; - --context-menu-text-padding: 24px; /* 16px + 8px */ - --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)); - } + @include _layout_root_win10; @include _layoutIconMenus { - padding-inline-start: var(--menu-background-padding-default) !important; - margin-left: 0 !important; + @include _layout_init_win10; } } /* Padding - Linux */ @include OS($linux) { - :root { - --context-menu-background-padding-default: 6px; - } + @include _layout_root_linux; #{$_globalMenus} > .menubar-text { - padding-inline-start: 3px; + @include _layout_init_linux; } } /* Padding - Mac */ @include OS($mac) { - :root { - --context-menu-background-padding-default: 10px; - --context-menu-mac-padding: 21px; - } + @include _layout_root_mac; /* context menu width */ #{$_nestedPopupPaddingMenus}, #blockedPopupDontShowMessage { - padding-inline-end: var(--context-menu-background-padding) !important; + @include _layout_init_mac_width; } /* text position */ #{selector.nest($_nestedPopupPadding, "menuitem > .menu-text, menu > .menu-text")} { - padding-inline-start: var(--context-menu-mac-padding) !important; + @include _layout_init_mac_text; } /* Checkbox menuitem, None iconic menu */ #{selector.nest($_nestedPopupPadding, "menuitem[checked=\"true\"], menu:not(.menu-iconic)")} { - padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; + @include _layout_init_mac_others; } /* Global Menu */ diff --git a/src/icons/_layout_menu_common.scss b/src/icons/_layout_menu_common.scss new file mode 100644 index 0000000..35e449f --- /dev/null +++ b/src/icons/_layout_menu_common.scss @@ -0,0 +1,91 @@ +$_initialMenus: selector.append( + "menupopup menuitem, menupopup menu", + ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])" +); +@mixin _initial_menus() { + -moz-appearance: none !important; /* Linux: menulist */ +} + +// Icon +@mixin _layout_icon_menus() { + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); +} + +@mixin _layout_icon_native_menus() { + @include NativeMenu { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; + } +} + +// Padding +@mixin _layout_root_padding() { + :root { + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); + } +} +@mixin _layout_init_padding() { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; +} + +@mixin _layout_root_win7_8() { + @include OS($win7) { + :root { + --context-menu-background-padding-default: 2px; + } + } + @include OS($win8) { + :root { + --context-menu-background-padding-default: 3px; + } + } +} +@mixin _layout_init_win7_8() { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; +} + +@mixin _layout_root_win10() { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding: 24px; /* 16px + 8px */ + --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)); + } +} +@mixin _layout_init_win10() { + padding-inline-start: var(--menu-background-padding-default) !important; + margin-left: 0 !important; +} + +@mixin _layout_root_linux() { + :root { + --context-menu-background-padding-default: 6px; + } +} +@mixin _layout_init_linux() { + padding-inline-start: 3px; +} + +@mixin _layout_root_mac() { + :root { + --context-menu-background-padding-default: 10px; + --context-menu-mac-padding: 21px; + } +} +@mixin _layout_init_mac_width() { + padding-inline-end: var(--context-menu-background-padding) !important; +} +@mixin _layout_init_mac_text() { + padding-inline-start: var(--context-menu-mac-padding) !important; +} +@mixin _layout_init_mac_others() { + padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; +} diff --git a/src/leptonContent.scss b/src/leptonContent.scss index b949684..780b42b 100644 --- a/src/leptonContent.scss +++ b/src/leptonContent.scss @@ -3,6 +3,7 @@ @use "utils/color_scheme" as *; @use "utils/native_menu" as *; @use "utils/proton_elements" as Proton; +@use "sass:selector"; @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); diff --git a/src/library/_contents_menu.scss b/src/library/_contents_menu.scss index 59ed236..e3b3e3f 100644 --- a/src/library/_contents_menu.scss +++ b/src/library/_contents_menu.scss @@ -1,8 +1,4 @@ -menupopup menuitem:not([type="checkbox"], [type="radio"]), -menupopup menu:not([type="checkbox"], [type="radio"]), -#main-menubar > menu { - -moz-appearance: none !important; /* Linux: menulist */ -} +@import "../icons/layout_menu_common"; //-- Mixin --------------------------------------------------------------------- @function _library_iconTargetSelector($target: "menu") { @@ -35,32 +31,23 @@ $_library_menuSelector: _library_iconTargetSelector("menu"); //------------------------------------------------------------------------------ -@include _library_contextMenu { - /* Color */ - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; +#{$_initialMenus} { + @include _initial_menus; +} - /* Layout */ - background-size: 16px !important; - background-repeat: no-repeat !important; - background-image: var(--menuitem-image); +@include _library_contextMenu { + @include _layout_icon_menus; } /* For native context menus */ -@include NativeMenu { - @include _library_nativeContextMenu { - list-style-image: var(--menuitem-image) !important; - } +@include _library_nativeContextMenu { + @include _layout_icon_native_menus; } /* Padding */ -:root { - --context-menu-background-padding-default: 5px; - --context-menu-background-padding: var(--context-menu-background-padding-default); -} +@include _layout_root_padding; @include _library_contextMenu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !important; + @include _layout_init_padding; } /* Padding - Windows */ @@ -77,66 +64,44 @@ $_library_menuSelector: _library_iconTargetSelector("menu"); } } -@include OS($win7) { - :root { - --context-menu-background-padding-default: 2px; - } -} -@include OS($win8) { - :root { - --context-menu-background-padding-default: 3px; - } -} +@include _layout_root_win7_8; @include OS($win7, $win8) { @include _library_contextMenu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: 0 !important; + @include _layout_init_win7_8(); } } @include OS($win10) { - :root { - --context-menu-background-padding: 1em; - --context-menu-text-padding: 24px; /* 16px + 8px */ - --menu-background-padding-default: calc( - var(--context-menu-background-padding) + var(--context-menu-text-padding) - ); - } + @include _layout_root_win10; @include _library_contextMenu { - padding-inline-start: var(--menu-background-padding-default) !important; - margin-left: 0 !important; + @include _layout_init_win10; } } /* Padding - Linux */ @include OS($linux) { - :root { - --context-menu-background-padding-default: 6px; - } + @include _layout_root_linux; } /* Padding - Mac */ @include OS($mac) { - :root { - --context-menu-background-padding-default: 10px; - --context-menu-mac-padding: 21px; - } + @include _layout_root_mac; /* context menu width */ #placesContext #{$_library_menuitemSelector}, #placesContext #{$_library_menuSelector} { - padding-inline-end: var(--context-menu-background-padding) !important; + @include _layout_init_mac_width; > .menu-text { /* text position */ - padding-inline-start: var(--context-menu-mac-padding) !important; + @include _layout_init_mac_text; } } /* Checkbox menuitem, None iconic menu */ #placesContext menuitem[type="checkbox"], #placesContext menu:not(.menu-iconic) { - padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; + @include _layout_init_mac_others; } }