From 7f44de2569a373a7610317a0c4e1110548e91a19 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 2 Jun 2022 14:02:40 +0900 Subject: [PATCH] Clean: Icon - layout menu --- css/leptonChrome.css | 42 ++++----- src/icons/_layout_menu.scss | 165 ++++++++++++++++-------------------- 2 files changed, 96 insertions(+), 111 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index da0a632..2cfbfde 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5982,13 +5982,13 @@ /* Icon */ :not(menu, #ContentSelectDropdown) > menupopup - > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #main-menubar > menu, menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, @@ -6009,10 +6009,10 @@ @supports -moz-bool-pref("widget.macos.native-context-menus") { :not(menu, #ContentSelectDropdown) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), :not(menu, #ContentSelectDropdown) > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { + > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } @@ -6024,8 +6024,14 @@ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, @@ -6044,17 +6050,14 @@ padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important; padding-inline-end: 3px; } - #main-menubar > menu:first-child { background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important; padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important; } - #main-menubar > menu > menupopup { --menuitem-image: none; /* Prevent Image Inheritance */ } - @supports not -moz-bool-pref("userChrome.padding.global_menubar") { #main-menubar > menu { padding-block: 2px !important; @@ -6096,12 +6099,12 @@ (-moz-platform: windows-win8) { :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, @@ -6125,12 +6128,12 @@ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, @@ -6162,17 +6165,17 @@ /* context menu width */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type="checkbox"], [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #blockedPopupDontShowMessage { padding-inline-end: var(--context-menu-background-padding) !important; } /* text position */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text, - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text { + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > .menu-text { padding-inline-start: var(--context-menu-mac-padding) !important; } @@ -6184,10 +6187,7 @@ /* Global Menu */ /* Disabled. some icons not appear - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [type=checkbox], [checked=true]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type=checkbox], [checked=true]) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")); } */ diff --git a/src/icons/_layout_menu.scss b/src/icons/_layout_menu.scss index 026e88f..e8afb6c 100644 --- a/src/icons/_layout_menu.scss +++ b/src/icons/_layout_menu.scss @@ -4,23 +4,57 @@ menupopup menu:not([type="checkbox"], [type="radio"]), -moz-appearance: none !important; /* Linux: menulist */ } +//-- Mixin --------------------------------------------------------------------- +// Items +$_iconNoneCommon: ".in-menulist, [type=\"checkbox\"], [checked=\"true\"]"; +$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})"; +$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})"; + +// Components +$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) > menupopup >"; +$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) > menupopup >"; +$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)"; + +$_nestedPopupIconMenus: selector.nest( + $_nestedPopupIcon, + "#{$_iconMenuitem}, #{$_iconMenu}" +); +$_nestedPopupPaddingMenus: selector.nest( + $_nestedPopupPadding, + "#{$_iconMenuitem}, #{$_iconMenu}" +); +$_iconMenuPopupMenus: selector.nest( + $_iconMenuPopup, + "#{$_iconMenuitem}, #{$_iconMenu}" +); + +$_globalMenus: "#main-menubar > menu"; +$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem"; +$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu"; +$_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem"; +$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage"; + +@mixin _layoutIconMenus() { + #{$_nestedPopupPaddingMenus}, + #{$_iconMenuPopupMenus}, + #{$_libraryMenuitem}, + #{$_libraryMenu}, + #{$_sendTabMenuitem}, + #{$_otherIconMenu} { + @content; + } +} + +//------------------------------------------------------------------------------ + /* Icon */ -:not(menu, #ContentSelectDropdown) - > menupopup - > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -:not(menu, #ContentSelectDropdown) - > menupopup - > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -#main-menubar > menu, -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, -menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, -.openintabs-menuitem, -#blockedPopupDontShowMessage { +#{$_nestedPopupIconMenus}, +#{$_globalMenus}, +#{$_iconMenuPopupMenus}, +#{$_libraryMenuitem}, +#{$_libraryMenu}, +#{$_sendTabMenuitem}, +#{$_otherIconMenu} { /* Color */ -moz-context-properties: fill, fill-opacity !important; fill: currentColor !important; @@ -33,12 +67,7 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) /* For native context menus on macOS */ @supports -moz-bool-pref("widget.macos.native-context-menus") { - :not(menu, #ContentSelectDropdown) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { + #{$_nestedPopupIconMenus} { list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } @@ -48,39 +77,33 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) --context-menu-background-padding-default: 5px; --context-menu-background-padding: var(--context-menu-background-padding-default); } -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic), -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, -menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, -.openintabs-menuitem, -#blockedPopupDontShowMessage { +#{selector.nest($_nestedPopupPadding, "menuitem:not(.menuitem-iconic), menu:not(.menu-iconic)")}, +#{$_nestedPopupPaddingMenus}, +#{$_iconMenuPopupMenus}, +#{$_libraryMenuitem}, +#{$_libraryMenu}, +#{$_sendTabMenuitem}, +#{$_otherIconMenu} { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: var(--context-menu-background-padding) !important; } /* Menubar */ @include Option("userChrome.icon.global_menubar") { - #main-menubar > menu { + #{$_globalMenus} { background-position: left var(--context-menu-background-padding-default) center !important; padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important; padding-inline-end: 3px; - } - #main-menubar > menu:first-child { - background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important; - padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important; - } - #main-menubar > menu > menupopup { - --menuitem-image: none; /* Prevent Image Inheritance */ - } - @include NotOption("userChrome.padding.global_menubar") { - #main-menubar > menu { - padding-block: 2px !important;; + &:first-child { + background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important; + padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important; + } + > menupopup { + --menuitem-image: none; /* Prevent Image Inheritance */ + } + @include NotOption("userChrome.padding.global_menubar") { + padding-block: 2px !important; } } } @@ -110,21 +133,7 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) } } @include OS($win7, $win8) { - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, - .openintabs-menuitem, - #blockedPopupDontShowMessage { + @include _layoutIconMenus { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: 0 !important; } @@ -136,21 +145,7 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)); } - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, - .openintabs-menuitem, - #blockedPopupDontShowMessage { + @include _layoutIconMenus { padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } @@ -162,7 +157,7 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) --context-menu-background-padding-default: 6px; } - #main-menubar > menu > .menubar-text { + #{$_globalMenus} > .menubar-text { padding-inline-start: 3px; } } @@ -175,34 +170,24 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) } /* context menu width */ - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + #{$_nestedPopupPaddingMenus}, #blockedPopupDontShowMessage { padding-inline-end: var(--context-menu-background-padding) !important; } /* text position */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text, - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text { + #{selector.nest($_nestedPopupPadding, "menuitem > .menu-text, menu > .menu-text")} { padding-inline-start: var(--context-menu-mac-padding) !important; } /* Checkbox menuitem, None iconic menu */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"], - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) { + #{selector.nest($_nestedPopupPadding, "menuitem[type=\"checkbox\"], menu:not(.menu-iconic)")} { padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; } /* Global Menu */ /* Disabled. some icons not appear - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { + #{$_iconMenuPopupMenus} { list-style-image: var(--menuitem-image, url("../icons/blank.svg")); } */