Fix: Menu - RTL support #387

This commit is contained in:
alstjr7375 2022-09-05 09:52:44 +09:00
parent b435705098
commit 734ed6913e
6 changed files with 41 additions and 25 deletions

View file

@ -9106,9 +9106,13 @@
/* Padding */
:root {
--uc-menu-background-position: left;
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
}
:root:-moz-locale-dir(rtl) {
--uc-menu-background-position: right;
}
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
@ -9130,19 +9134,20 @@
.openintabs-menuitem,
#blockedPopupDontShowMessage,
#BMB_viewBookmarksToolbar {
background-position: left var(--context-menu-background-padding) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}
/* Menubar */
@supports -moz-bool-pref("userChrome.icon.global_menubar") {
#main-menubar > menu {
background-position: left var(--context-menu-background-padding-default) center !important;
background-position: var(--uc-menu-background-position) 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;
background-position: var(--uc-menu-background-position) 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 {
@ -9311,7 +9316,7 @@
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
@ -9335,7 +9340,7 @@
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
}
/* Linux */

View file

@ -279,15 +279,19 @@
}
.context-menu-list .context-menu-item button span {
padding-inline-start: 24px;
/* 16p + (4px * 2) */
/* Color */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px;
background-repeat: no-repeat;
background-size: 16px !important;
background-repeat: no-repeat !important;
background-image: var(--menuitem-image);
background-position: left 4px center;
padding-inline-start: 24px;
/* 16p + (4px * 2) */
background-position: var(--uc-menu-background-position, left) 4px center;
}
.context-menu-list .context-menu-item button span:dir(rtl) {
--uc-menu-background-position: right;
}
.context-menu-item span[data-l10n-id="newtab-menu-pin"] {
@ -3037,9 +3041,13 @@
/* Padding */
:root {
--uc-menu-background-position: left;
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
}
:root:-moz-locale-dir(rtl) {
--uc-menu-background-position: right;
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
@ -3048,7 +3056,7 @@
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
background-position: left var(--context-menu-background-padding) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}

View file

@ -1,16 +1,15 @@
@import "./menu_common";
.context-menu-list .context-menu-item button {
padding-inline-start: 0 !important;
}
.context-menu-list .context-menu-item button span {
@include _layout_icon_menus;
padding-inline-start: 24px; /* 16p + (4px * 2) */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px;
background-repeat: no-repeat;
background-image: var(--menuitem-image);
background-position: left 4px center;
background-position: var(--uc-menu-background-position, left) 4px center;
&:dir(rtl) {
--uc-menu-background-position: right;
}
}

View file

@ -66,7 +66,7 @@ $_bookmarkToolbarMenus: selector.nest(
}
@include _layoutBookmarkMenu() {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
@include _layoutBookmarkPopup() {
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
@ -82,7 +82,7 @@ $_bookmarkToolbarMenus: selector.nest(
@include _layoutBookmarkMenu() {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
}

View file

@ -56,12 +56,12 @@ $_layoutCommonMenus: (
/* Menubar */
@include Option("userChrome.icon.global_menubar") {
#{$_globalMenus} {
background-position: left var(--context-menu-background-padding-default) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding-default) center !important;
padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
padding-inline-end: 3px;
&:first-child {
background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
background-position: var(--uc-menu-background-position) calc(3px + var(--context-menu-background-padding-default)) center !important;
padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
}
> menupopup {

View file

@ -62,12 +62,16 @@ $_initialMenus: selector.append(
// Padding
@mixin _layout_root_padding() {
:root {
--uc-menu-background-position: left;
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
&:-moz-locale-dir(rtl) {
--uc-menu-background-position: right;
}
}
}
@mixin _layout_init_padding() {
background-position: left var(--context-menu-background-padding) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}