replicate edge's context menu spacing #37
This commit is contained in:
bmFtZQ
parent
63bff7a61c
commit
afdf696045
1 changed files with 179 additions and 63 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue