From afdf696045e0d09ceeeb1a24b05784514f217be4 Mon Sep 17 00:00:00 2001 From: bmFtZQ Date: Wed, 22 Jun 2022 23:51:39 +0800 Subject: [PATCH] replicate edge's context menu spacing #37 --- chrome/global/popup.css | 242 +++++++++++++++++++++++++++++----------- 1 file changed, 179 insertions(+), 63 deletions(-) diff --git a/chrome/global/popup.css b/chrome/global/popup.css index e3af07f..16b2d47 100644 --- a/chrome/global/popup.css +++ b/chrome/global/popup.css @@ -1,22 +1,42 @@ /* EdgeFr-Fox by bmFtZQ - popup.css */ :root { + --panel-subview-body-padding: 2px 0 !important; --arrowpanel-border-radius: 8px !important; - --panel-subview-body-padding: 4px 0 !important; --arrowpanel-menuitem-border-radius: 4px !important; - --arrowpanel-menuitem-margin: 0 var(--uc-arrowpanel-menuitem-margin-inline) !important; + --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important; --arrowpanel-menuitem-padding-block: 6px !important; - --arrowpanel-menuitem-padding-inline: 11px !important; + --arrowpanel-menuitem-padding-inline: 10px !important; --uc-arrowpanel-menuicon-margin-inline: 14px; - --panel-separator-margin-vertical: 4px !important; + --uc-arrowpanel-menuitem-margin-inline: 4px; + --uc-arrowpanel-menuitem-margin-block: 2px; + --panel-separator-margin-vertical: 2px !important; --panel-separator-margin-horizontal: 0 !important; + --uc-panel-zoom-button-padding: 8px; --uc-panel-zoom-button-inline-padding: 9px; + --uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)); + --uc-autocomplete-panel-menuitem-margin: 4px; --uc-autocomplete-panel-menuicon-padding-inline: 14px; --uc-autocomplete-panel-separator-margin-vertical: 4px; - --uc-arrowpanel-menuitem-margin-inline: 4px; - --uc-panel-zoom-padding-block: var(--panel-separator-margin-vertical); + + --uc-permission-itemcontainer-padding-block: 8px; + --uc-permission-item-margin-block: 4px; + --uc-permission-item-padding-inline: 16px; + + --uc-contextmenu-border-radius: 8px; + --uc-contextmenu-padding: calc(4px - var(--uc-contextmenu-menuitem-border-width)) 0; + --uc-contextmenu-menuitem-border-radius: calc(4px + var(--uc-contextmenu-menuitem-border-width)); + --uc-contextmenu-menuitem-padding-block: 6px; + --uc-contextmenu-menuitem-padding-inline: 10px; + --uc-contextmenu-menuitem-border-width: 2px; + --uc-contextmenu-menuicon-margin-inline: 12px; + --uc-contextmenu-menuitem-margin-inline: calc(4px - var(--uc-contextmenu-menuitem-border-width)); + --uc-contextmenu-menuitem-margin-block: 0px; + --uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline); + --uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width)); + --uc-contextmenu-separator-horizontal: 0; } /* app menu */ @@ -28,7 +48,8 @@ border-radius: var(--arrowpanel-menuitem-border-radius) !important; } -#appMenu-fxa-label2>vbox>label { +#appMenu-fxa-label2 label, +#PanelUI-fxa-menu-syncnow-button label { margin-block: 0 !important; } @@ -92,7 +113,7 @@ /* #appMenu-zoomReduce-button2, */ #appMenu-zoom-controls2>#appMenu-fullscreen-button2 { - margin-left: calc(var(--panel-separator-margin-vertical) * 2 + 1px) !important; + margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px) !important; } #appMenu-zoom-controls2>#appMenu-fullscreen-button2::before { @@ -102,7 +123,7 @@ position: relative; height: 32px; margin-block: calc(var(--uc-panel-zoom-button-padding) * -1); - transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - var(--panel-separator-margin-vertical) - 1px)); + transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px)); } #appMenu-zoomReset-button2 { @@ -130,11 +151,39 @@ stroke: none !important; } +#appMenu-zoomReset-button2>.toolbarbutton-text, #appMenu-fullscreen-button2>.toolbarbutton-icon { background-color: transparent !important; padding: 0 !important; } +.subviewbutton[shortcut]::after { + opacity: 0.7 !important; +} + +#widget-overflow-mainView .panel-subview-body { + padding-bottom: 0 !important; +} + +.PanelUI-subView>.panel-header+toolbarseparator { + margin-bottom: 0 !important; +} + +.PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body { + padding-top: var(--panel-separator-margin-vertical) !important; +} + +#identity-popup-security-button { + margin-bottom: var(--panel-separator-margin-vertical) !important; +} + +#permission-popup-mainView-panel-header, +#identity-popup-mainView-panel-header, +#protections-popup-mainView-panel-header, +.panel-header { + min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px) !important; +} + /* URL bar popup */ .panel-footer>button { border-radius: 2px !important; @@ -156,13 +205,47 @@ margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)) !important; } +#identity-popup-mainView-panel-header-span, +#permission-popup-mainView-panel-header-span, +#identity-popup-mainView-panel-header label, +#permission-popup-mainView-panel-header label, +#protections-popup-mainView-panel-header-span { + margin-block: 0 !important; +} + +.permission-popup-section { + padding-block: var(--uc-permission-itemcontainer-padding-block) !important; +} + +#permission-popup-permissions-content { + padding-inline: var(--uc-permission-item-padding-inline) !important; +} + +.permission-popup-permission-item, +#permission-popup-storage-access-permission-list-header { + margin-block: var(--uc-permission-item-margin-block) !important; +} + +.permission-popup-permission-label, +.permission-popup-permission-header-label { + margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important; +} + +#editBookmarkPanel > #editBookmarkHeaderSeparator, +#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator { + margin-inline: 0 !important; +} + /* subview */ .panel-header { padding: 4px; padding-top: 4px !important; } -.panel-header+toolbarseparator { +.panel-header+toolbarseparator, +#identity-popup-mainView-panel-header+toolbarseparator, +#permission-popup-mainView-panel-header+toolbarseparator, +#protections-popup-mainView-panel-header-section+toolbarseparator { margin-block-start: 0 !important; } @@ -217,6 +300,11 @@ padding: 1.5em 16px 1.7em !important; } +#downloadsHistory .button-text { + margin-block: 0 !important; + margin-inline: 0 !important; +} + .PanelUI-subView .subviewbutton-nav::after, #PlacesToolbar menu>.menu-right, .subviewbutton>.menu-right { @@ -233,24 +321,22 @@ #PopupAutoComplete .autocomplete-richlistitem[originaltype="loginsFooter"] { -moz-box-pack: start !important; color: inherit !important; - border: 0 !important; - border-color: var(--panel-separator-color) !important; background-color: transparent !important; height: 28px !important; min-height: 28px !important; - padding-inline-start: var(--arrowpanel-menuitem-padding-inline) !important; + padding-inline-start: var(--uc-contextmenu-menuitem-padding-inline) !important; position: relative !important; overflow: visible !important; - margin-top: calc(var(--panel-separator-margin-vertical) * 2 + 1px) !important; + margin-top: calc(var(--uc-contextmenu-separator-vertical) * 2 + 1px) !important; } .autocomplete-richlistitem[originaltype="loginsFooter"]::before { content: ""; - width: calc(100% + var(--uc-arrowpanel-menuitem-margin-inline) * 2); + width: calc(100% + var(--uc-contextmenu-menuitem-margin-inline) * 2); border-top: 1px solid var(--panel-separator-color); position: absolute; - top: calc(var(--panel-separator-margin-vertical) * -1 - 1px); - left: calc(var(--uc-arrowpanel-menuitem-margin-inline) * -1); + top: calc((var(--uc-contextmenu-separator-vertical) + var(--uc-contextmenu-menuitem-border-width)) * -1 - 1px); + left: calc(var(--uc-contextmenu-menuitem-margin-inline) * -1); } #PopupAutoComplete .autocomplete-richlistitem:hover { @@ -272,13 +358,32 @@ margin-inline: calc(16px + var(--uc-autocomplete-panel-menuicon-padding-inline)) !important; } +/* workaround for inaccessible shadow-root element + moves the shadow-root element underneath, and away from panel edges */ +#PopupAutoComplete { + padding-block: 10px !important; + padding-inline: 2px !important; +} + +panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox { + margin-block: -10px !important; + margin-inline: -2px !important; + padding: var(--uc-contextmenu-padding) !important; + border-radius: var(--uc-contextmenu-border-radius) !important; + color: inherit !important; +} + +#PopupAutoComplete>richlistbox>richlistitem>.two-line-wrapper { + padding-block: 0 !important; + padding-inline-end: calc((var(--uc-autocomplete-panel-menuitem-margin) + var(--arrowpanel-menuitem-padding-inline)) * 2) !important; +} + #PlacesToolbar menuitem, #PlacesToolbar menu, -.subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 { - min-height: calc(16px + var(--arrowpanel-menuitem-padding-block) * 2) !important; + min-height: calc(16px + var(--uc-contextmenu-menuitem-padding-block) * 2) !important; } /* Context Menu */ @@ -308,19 +413,24 @@ panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox, /* make room for menu shadow */ menupopup { - padding: 8px 16px 26px !important; - margin: -12px -16px -22px !important; + padding: 4px 12px 20px !important; + margin: -6px -12px -16px !important; +} + +#bookmarks-menu-button menupopup { + padding: 4px 12px 20px !important; + margin: -8px -24px -16px -12px !important; } /* cut off shadow so it doesn't get in the way of the menubar items */ menubar menupopup { - padding: 1px 10px 26px !important; - margin: -1px -10px -22px !important; + padding: 1px 8px 20px !important; + margin: -1px -4px -16px !important; } .menupopup-arrowscrollbox { box-shadow: - 0 10px 16px #0003, + 0 8px 12px #0003, 0 4px 5px #0002, 0 2px 4px #0002, 0 0 0 1px #0001 !important; @@ -330,7 +440,7 @@ menubar menupopup { @media (prefers-color-scheme:dark) { .menupopup-arrowscrollbox { box-shadow: - 0 10px 18px #0003, + 0 8px 12px #0003, 0 4px 5px #0003, 0 2px 4px #0002, 0 0 0 1px #0002 !important; @@ -338,11 +448,10 @@ menubar menupopup { } .popup-internal-box, -panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox, .menupopup-arrowscrollbox { margin: 0 !important; - padding: var(--panel-subview-body-padding) !important; - border-radius: var(--arrowpanel-border-radius) !important; + padding: var(--uc-contextmenu-padding) !important; + border-radius: var(--uc-contextmenu-border-radius) !important; color: inherit !important; } @@ -367,7 +476,7 @@ menupopup menu:hover:active:not([disabled=true]) { } menupopup menuseparator { - margin: var(--panel-separator-margin-vertical) 0 !important; + margin: var(--uc-contextmenu-separator-vertical) 0 !important; padding: 0 !important; background: none !important; border-top: 1px solid var(--panel-separator-color) !important; @@ -381,14 +490,18 @@ menupopup menu, menupopup menuitem, menupopup menucaption, #PopupAutoComplete>richlistbox>richlistitem { - padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; - margin: var(--arrowpanel-menuitem-margin) !important; - border-radius: var(--arrowpanel-menuitem-border-radius) !important; + padding: var(--uc-contextmenu-menuitem-padding-block) var(--uc-contextmenu-menuitem-padding-inline) !important; + margin: var(--uc-contextmenu-menuitem-margin) !important; + border-radius: var(--uc-contextmenu-menuitem-border-radius) !important; + border: var(--uc-contextmenu-menuitem-border-width) solid transparent !important; + background-clip: padding-box !important; + min-height: calc(16px + (var(--uc-contextmenu-menuitem-padding-block) + var(--uc-contextmenu-menuitem-border-width)) * 2) !important; } :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current), -:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current) { - padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + var(--uc-arrowpanel-menuicon-margin-inline)) !important; +:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current), +:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menucaption { + padding-inline-start: calc(var(--uc-contextmenu-menuitem-padding-inline) + 16px + var(--uc-contextmenu-menuicon-margin-inline)) !important; } .menu-iconic-icon { @@ -397,16 +510,9 @@ menupopup menucaption, margin-inline-start: 0 !important; } -.subviewbutton>.menu-iconic-text, menu>.menu-iconic-text, -menuitem>.menu-iconic-text, -.addon-banner-item>.toolbarbutton-text, -.subviewbutton-iconic>.toolbarbutton-text, -.subviewbutton[image]>.toolbarbutton-text, -.subviewbutton[targetURI]>.toolbarbutton-text, -.subviewbutton.bookmark-item>.toolbarbutton-text, -.subviewbutton[checked="true"]>.toolbarbutton-text { - padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important; +menuitem>.menu-iconic-text { + padding-inline-start: var(--uc-contextmenu-menuicon-margin-inline) !important; } .menu-text, @@ -415,8 +521,17 @@ menuitem>.menu-iconic-text, padding-block: 0 !important; } -.menu-iconic-left { +.menu-accel, +.menu-iconic-accel { + margin-inline-end: 0 !important; + padding-block: 0 !important; + opacity: 0.7 !important; +} + +.menu-iconic>.menu-iconic-left, +.menuitem-iconic>.menu-iconic-left { padding-inline-end: 0 !important; + padding-block: 0 !important; } menuitem:is(.menuitem-iconic:not([data-usercontextid]), [type="checkbox"], [type="radio"], [checked], [selected]) .menu-iconic-icon { @@ -443,23 +558,6 @@ menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before { display: none !important; } -/* workaround for inaccessible shadow-root element - moves the shadow-root element underneath, and away from panel edges */ -#PopupAutoComplete { - padding-block: 10px !important; - padding-inline: 2px !important; -} - -panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox { - margin-block: -10px !important; - margin-inline: -2px !important; -} - -#PopupAutoComplete>richlistbox>richlistitem>.two-line-wrapper { - padding-block: 0 !important; - padding-inline-end: calc((var(--uc-autocomplete-panel-menuitem-margin) + var(--arrowpanel-menuitem-padding-inline)) * 2) !important; -} - menuitem:is([type="checkbox"], [checked="true"], [type="radio"])>.menu-iconic-left>.menu-iconic-icon { display: -moz-box !important; } @@ -472,7 +570,7 @@ menuitem[checked="true"]>.menu-iconic-left, #context-navigation:not([hidden]) { padding: 0 !important; - --menuitem-min-width: calc(16px + var(--arrowpanel-menuitem-padding-inline) * 2) !important; + --menuitem-min-width: calc(16px + var(--uc-contextmenu-menuitem-padding-inline) * 2) !important; min-width: calc(4 * var(--menuitem-min-width)); } @@ -483,7 +581,7 @@ menuitem[checked="true"]>.menu-iconic-left, } #context-navigation { - margin-inline: var(--uc-arrowpanel-menuitem-margin-inline) !important; + margin-inline: var(--uc-contextmenu-menuitem-margin-inline) !important; } #context-navigation>.menuitem-iconic { @@ -506,3 +604,21 @@ menuitem[checked="true"]>.menu-iconic-left, #context-bookmarkpage[starred] .menu-iconic-icon { fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important; } + +@media (-moz-platform: windows) { + .menu-text, + .menu-iconic-text, + panel .toolbarbutton-text { + margin-inline-start: 0 !important; + margin-block: -3px -1px !important; + padding-block: 0 !important; + } + + .menu-text, + .menu-iconic-text, + panel .toolbarbutton-text, + #appMenu-fxa-status2, + .panel-header { + font-size: 13.6px !important; + } +}