Clean: Icons - Layout menu of chrome, content

This commit is contained in:
alstjr7375 2022-06-28 04:34:11 +09:00
parent a1950d8085
commit 05bbeb43e2
6 changed files with 135 additions and 111 deletions

View file

@ -6059,6 +6059,7 @@
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
}
}
/* Padding */
:root {
--context-menu-background-padding-default: 5px;

View file

@ -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;

View file

@ -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 */

View file

@ -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;
}

View file

@ -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");

View file

@ -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;
}
}