From 9653c08d39fa6883823534da1781ebb0a66c6781 Mon Sep 17 00:00:00 2001 From: bmFtZQ Date: Sun, 19 Jun 2022 23:05:53 +0800 Subject: [PATCH] popup/menu styling #22 #28 #35 --- README.md | 2 +- chrome/global/popup.css | 361 +++++++++++++++++++++++++++++++----- chrome/global/tweaks.css | 4 +- chrome/icons/arrow-left.svg | 3 + chrome/icons/checkmark.svg | 3 + chrome/icons/icons.css | 58 +++++- chrome/toolbar/navbar.css | 4 +- chrome/toolbar/tabbar.css | 5 +- chrome/toolbar/urlbar.css | 1 - 9 files changed, 377 insertions(+), 64 deletions(-) create mode 100644 chrome/icons/arrow-left.svg create mode 100644 chrome/icons/checkmark.svg diff --git a/README.md b/README.md index f6debab..9cdc6b8 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch 3. `layout.css.color-mix.enabled` = `true` ###### On macOS: - ~~1. To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false`~~ **(Not Implemented Yet!)** + 1. To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false` ##### Recommended: 1. `browser.tabs.tabMinWidth` = `66` diff --git a/chrome/global/popup.css b/chrome/global/popup.css index cc69bc0..e3af07f 100644 --- a/chrome/global/popup.css +++ b/chrome/global/popup.css @@ -1,20 +1,22 @@ /* EdgeFr-Fox by bmFtZQ - popup.css */ :root { - --arrowpanel-border-radius: 4px !important; + --arrowpanel-border-radius: 8px !important; --panel-subview-body-padding: 4px 0 !important; - --arrowpanel-menuitem-border-radius: 0 !important; - --arrowpanel-menuitem-margin: 0 !important; - --arrowpanel-menuitem-padding-block: 8px !important; - --arrowpanel-menuitem-padding-inline: 14px !important; + --arrowpanel-menuitem-border-radius: 4px !important; + --arrowpanel-menuitem-margin: 0 var(--uc-arrowpanel-menuitem-margin-inline) !important; + --arrowpanel-menuitem-padding-block: 6px !important; + --arrowpanel-menuitem-padding-inline: 11px !important; --uc-arrowpanel-menuicon-margin-inline: 14px; --panel-separator-margin-vertical: 4px !important; --panel-separator-margin-horizontal: 0 !important; --uc-panel-zoom-button-padding: 8px; - --uc-panel-zoom-button-inline-padding: 13px; + --uc-panel-zoom-button-inline-padding: 9px; --uc-autocomplete-panel-menuitem-margin: 4px; - --uc-autocomplete-panel-menuicon-padding-inline: 12px; + --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); } /* app menu */ @@ -22,7 +24,8 @@ .panel-banner-item { margin: 0 4px 4px !important; padding-inline: 4px 12px !important; - border-radius: 2px !important; + padding-block: var(--arrowpanel-menuitem-padding-block) !important; + border-radius: var(--arrowpanel-menuitem-border-radius) !important; } #appMenu-fxa-label2>vbox>label { @@ -57,16 +60,24 @@ border-radius: 99px; } - /* disable proton account separator */ #appMenu-fxa-separator { border-image: none !important; } +#appMenu-fxa-status2:not([fxastatus]) { + padding-block: 0 !important; +} + +#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 { + margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important; +} + /* zoom controls */ #appMenu-zoom-controls2 { border-top: 1px solid var(--panel-separator-color) !important; - padding: 0 0 0 var(--arrowpanel-menuitem-padding-inline) !important; + padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline) !important; + padding-block: var(--uc-panel-zoom-padding-block) !important; margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1) !important; } @@ -79,9 +90,19 @@ padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2) !important; } -#appMenu-zoomReduce-button2, -#appMenu-fullscreen-button2 { - border-inline-start: 1px solid var(--panel-separator-color) !important; +/* #appMenu-zoomReduce-button2, */ +#appMenu-zoom-controls2>#appMenu-fullscreen-button2 { + margin-left: calc(var(--panel-separator-margin-vertical) * 2 + 1px) !important; +} + +#appMenu-zoom-controls2>#appMenu-fullscreen-button2::before { + content: ""; + border-inline-start: 1px solid var(--panel-separator-color); + display: block; + 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)); } #appMenu-zoomReset-button2 { @@ -89,23 +110,17 @@ min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important; } -#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) { - background-color: var(--panel-item-hover-bgcolor) !important; -} - -#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) { - background-color: var(--panel-item-active-bgcolor) !important; -} - #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover), #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover), -#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover) { +#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover), +#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) { background-color: var(--panel-item-hover-bgcolor) !important; } #appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active), #appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active), -#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active) { +#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active), +#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) { background-color: var(--panel-item-active-bgcolor) !important; } @@ -117,6 +132,7 @@ #appMenu-fullscreen-button2>.toolbarbutton-icon { background-color: transparent !important; + padding: 0 !important; } /* URL bar popup */ @@ -150,9 +166,9 @@ margin-block-start: 0 !important; } -.subviewbutton-back { +.panel-header>.subviewbutton-back { margin: 0 !important; - border-radius: 2px !important; + padding: var(--arrowpanel-menuitem-padding-block) !important; } .panel-subview-footer-button { @@ -184,34 +200,27 @@ #downloadsListBox>richlistitem { padding-inline-end: 8px !important; - border-radius: 0 !important; + border-radius: var(--arrowpanel-menuitem-border-radius) !important; +} + +#downloadsListBox, +.downloadsPanelFooterButton { + margin: var(--arrowpanel-menuitem-margin) !important; } #downloadsPanel-blockedSubview, #downloadsPanel-mainView { - padding: var(--panel-separator-margin-vertical) 0 0 !important; + padding: var(--panel-separator-margin-vertical) 0 !important; } #emptyDownloads { padding: 1.5em 16px 1.7em !important; } -/* context menus */ -@media (-moz-windows-compositor) { - menupopup { - --panel-color: var(--arrowpanel-color) !important; - --panel-border-radius: 4px !important; - --panel-padding: 4px 0px !important; - --panel-border-color: var(--arrowpanel-border-color) !important; - --panel-background: var(--arrowpanel-background) !important; - --nested-margin: -6px !important; - --menuitem-hover-background-color: var(--panel-item-hover-bgcolor) !important; - --menu-background-color: var(--arrowpanel-background) !important; - --menu-color: var(--arrowpanel-color) !important; - --menuitem-disabled-hover-background-color: #0000 !important; - --menu-disabled-color: var(--panel-disabled-color) !important; - --menu-border-color: var(--panel-separator-color) !important; - } +.PanelUI-subView .subviewbutton-nav::after, +#PlacesToolbar menu>.menu-right, +.subviewbutton>.menu-right { + fill-opacity: 1 !important; } /* auto complete popup */ @@ -221,25 +230,279 @@ box-shadow: 0 0 0 1px inset var(--arrowpanel-border-color) !important; } -.autocomplete-richlistitem[originaltype="loginsFooter"] { +#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: 40px !important; - padding-inline-start: var(--uc-autocomplete-panel-menuicon-padding-inline) !important; + height: 28px !important; + min-height: 28px !important; + padding-inline-start: var(--arrowpanel-menuitem-padding-inline) !important; + position: relative !important; + overflow: visible !important; + margin-top: calc(var(--panel-separator-margin-vertical) * 2 + 1px) !important; } -.autocomplete-richlistitem:hover { +.autocomplete-richlistitem[originaltype="loginsFooter"]::before { + content: ""; + width: calc(100% + var(--uc-arrowpanel-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); +} + +#PopupAutoComplete .autocomplete-richlistitem:hover { background-color: var(--panel-item-hover-bgcolor) !important; } -.autocomplete-richlistitem[selected] { +#PopupAutoComplete .autocomplete-richlistitem[selected] { background-color: var(--panel-item-active-bgcolor) !important; color: inherit !important; } .ac-site-icon { fill: currentColor !important; - margin: auto var(--uc-autocomplete-panel-menuicon-padding-inline) !important; + margin-block: auto !important; + margin-inline: 0 var(--uc-autocomplete-panel-menuicon-padding-inline) !important; +} + +#PopupAutoComplete>richlistbox>richlistitem>.ac-title { + margin-inline: calc(16px + var(--uc-autocomplete-panel-menuicon-padding-inline)) !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; +} + +/* Context Menu */ +menupopup, +menupopup menuitem, +menupopup menu, +menupopup menuseparator, +panel { + -moz-appearance: none !important; +} + +menupopup, +panel[type="autocomplete-richlistbox"], +menulist>menupopup>menucaption { + -moz-window-shadow: none !important; + background: 0 !important; + border: 0 !important; + color: var(--arrowpanel-color) !important; +} + +.popup-internal-box, +panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox, +.menupopup-arrowscrollbox { + background: var(--arrowpanel-background) !important; + border: 0 !important; +} + +/* make room for menu shadow */ +menupopup { + padding: 8px 16px 26px !important; + margin: -12px -16px -22px !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; +} + +.menupopup-arrowscrollbox { + box-shadow: + 0 10px 16px #0003, + 0 4px 5px #0002, + 0 2px 4px #0002, + 0 0 0 1px #0001 !important; +} + +/* no way to get current firefox theme, using prefers-color-scheme instead */ +@media (prefers-color-scheme:dark) { + .menupopup-arrowscrollbox { + box-shadow: + 0 10px 18px #0003, + 0 4px 5px #0003, + 0 2px 4px #0002, + 0 0 0 1px #0002 !important; + } +} + +.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; + color: inherit !important; +} + +menupopup menu[disabled="true"], +menupopup menuitem[disabled="true"] { + color: var(--panel-disabled-color) !important; + background: none !important; +} + +menupopup menu:hover:not([disabled=true]), +menupopup menuitem:hover:not([disabled=true]), +menupopup menu[_moz-menuactive]:not([disabled=true]), +menupopup menuitem[_moz-menuactive]:not([disabled=true]) { + background-color: var(--panel-item-hover-bgcolor) !important; + color: inherit !important; +} + +menupopup menuitem:hover:active:not([disabled=true]), +menupopup menu:hover:active:not([disabled=true]) { + background-color: var(--panel-item-active-bgcolor) !important; + color: inherit !important; +} + +menupopup menuseparator { + margin: var(--panel-separator-margin-vertical) 0 !important; + padding: 0 !important; + background: none !important; + border-top: 1px solid var(--panel-separator-color) !important; +} + +#PlacesToolbar menupopup[placespopup="true"] menuseparator::before { + display: none !important; +} + +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; +} + +: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; +} + +.menu-iconic-icon { + margin-block: 0 !important; + margin-inline-end: 0 !important; + 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; +} + +.menu-text, +.menu-iconic-text { + margin-inline-start: 0 !important; + padding-block: 0 !important; +} + +.menu-iconic-left { + padding-inline-end: 0 !important; +} + +menuitem:is(.menuitem-iconic:not([data-usercontextid]), [type="checkbox"], [type="radio"], [checked], [selected]) .menu-iconic-icon { + -moz-context-properties: fill !important; + fill: currentColor !important; +} + +.menu-right, +.menu-accel-container { + appearance: none !important; + margin-inline-end: 0 !important; + -moz-context-properties: fill; + fill: currentColor !important; +} + +menupopup menuitem:is([type="checkbox"], [type="radio"]) .menu-iconic-icon, +menulist>menupopup>menuitem .menu-iconic-icon, +menu .menu-right { + height: 16px !important; + width: 16px !important; +} + +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; +} + +menuitem[checked="true"]>.menu-iconic-left, +.menu-iconic>.menu-iconic-left, +.menuitem-iconic>.menu-iconic-left { + margin: 0 !important; +} + +#context-navigation:not([hidden]) { + padding: 0 !important; + --menuitem-min-width: calc(16px + var(--arrowpanel-menuitem-padding-inline) * 2) !important; + min-width: calc(4 * var(--menuitem-min-width)); +} + +#context-navigation>.menuitem-iconic>.menu-iconic-left>.menu-iconic-icon { + width: 16px !important; + height: 16px !important; + padding: 0 !important; +} + +#context-navigation { + margin-inline: var(--uc-arrowpanel-menuitem-margin-inline) !important; +} + +#context-navigation>.menuitem-iconic { + -moz-box-pack: center !important; +} + +#context-navigation>.menuitem-iconic { + margin: 0 !important; +} + +#context-navigation>.menuitem-iconic { + flex-grow: 1 !important; + width: unset !important; +} + +#context-navigation>.menuitem-iconic[_moz-menuactive="true"]>.menu-iconic-left>.menu-iconic-icon { + background-color: transparent !important; +} + +#context-bookmarkpage[starred] .menu-iconic-icon { + fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important; } diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css index 16e0f86..302fc83 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -84,7 +84,7 @@ browsing indicator) */ } /* adjust spacing of area above tabs */ - @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + @media not (-moz-platform: macos) { :root[sizemode="maximized"] #titlebar { --tab-block-margin: 4px !important; } @@ -183,7 +183,7 @@ browsing indicator) */ } /* line up buttons with duplicate icons from -moz-win-glass */ - :root:is(:not(:-moz-lwtheme),[lwt-default-theme-in-dark-mode="true"]) .titlebar-buttonbox-container { + :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-buttonbox-container { --uc-titlebar-button-size: 30px; --uc-titlebar-size: calc(var(--tab-min-height) + var(--tab-block-margin)); margin-bottom: calc(var(--uc-titlebar-size) - var(--uc-titlebar-button-size)) !important; diff --git a/chrome/icons/arrow-left.svg b/chrome/icons/arrow-left.svg new file mode 100644 index 0000000..1da2ba2 --- /dev/null +++ b/chrome/icons/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/icons/checkmark.svg b/chrome/icons/checkmark.svg new file mode 100644 index 0000000..ade387a --- /dev/null +++ b/chrome/icons/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css index d31d1f3..fd37eb3 100644 --- a/chrome/icons/icons.css +++ b/chrome/icons/icons.css @@ -2,7 +2,8 @@ /* windows 11 style window controls (no known way to detect between windows 10 and 11 so applied to both) */ -@media (-moz-windows-compositor), (-moz-gtk-csd-available) { +@media (-moz-windows-compositor), +(-moz-gtk-csd-available) { .titlebar-min { list-style-image: url("win11-minimize.svg") !important; } @@ -36,7 +37,7 @@ and 11 so applied to both) */ } /* disable context menu icons on macOS */ -@supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { +@media not (-moz-platform: macos) { #context-back { list-style-image: url("back.svg") !important; } @@ -100,9 +101,9 @@ and 11 so applied to both) */ #appMenu-passwords-button, #password-notification-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { +#PopupAutoComplete>richlistbox>richlistitem[originaltype="generatedPassword"]>.two-line-wrapper>.ac-site-icon, +#PopupAutoComplete>richlistbox>richlistitem[originaltype="loginWithOrigin"]>.two-line-wrapper>.ac-site-icon, +#PopupAutoComplete>richlistbox>richlistitem[originaltype="login"]>.ac-site-icon { list-style-image: url("passwords.svg") !important; } @@ -345,6 +346,10 @@ and 11 so applied to both) */ list-style-image: url("arrow-right.svg") !important; } +.panel-header>.subviewbutton-back { + list-style-image: url("arrow-left.svg") !important; +} + #overflowMenu-customize-button, #appmenu-moreTools-button { list-style-image: url("customize.svg") !important; @@ -383,7 +388,6 @@ and 11 so applied to both) */ background: url("settings.svg") !important; } - .tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"] { background: url("extension.svg") !important; } @@ -517,3 +521,45 @@ and 11 so applied to both) */ #stop-reload-button[animate]>#reload-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image { background-image: url("stop-to-reload.svg") !important; } + +/* Context Menu Icons */ +menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon { + list-style-image: url("checkmark.svg") !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) { + background-image: var(--uc-menu-image) !important; + background-size: 16px !important; + background-position: var(--arrowpanel-menuitem-padding-inline) center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; +} + +@media (-moz-platform: macos) { + #context-back { + --uc-menu-image: url("back.svg"); + } + + #context-forward { + --uc-menu-image: url("forward.svg"); + } + + #context-reload { + --uc-menu-image: url("reload.svg"); + } + + #context-stop { + --uc-menu-image: url("close.svg"); + } + + #context-bookmarkpage { + --uc-menu-image: url("bookmark-hollow.svg"); + } + + #contentAreaContextMenu #context-bookmarkpage[starred] { + --uc-menu-image: url("bookmark.svg"); + fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important; + } +} diff --git a/chrome/toolbar/navbar.css b/chrome/toolbar/navbar.css index 3b9f385..9120727 100644 --- a/chrome/toolbar/navbar.css +++ b/chrome/toolbar/navbar.css @@ -90,7 +90,7 @@ .toolbarbutton-1>.toolbarbutton-icon, .toolbarbutton-1>.toolbarbutton-text, .toolbarbutton-1>.toolbarbutton-badge-stack, - .bookmark-item, + .bookmark-item:not(menu, menuitem), .urlbar-page-action, .identity-box-button, #tracking-protection-icon-container, @@ -101,7 +101,7 @@ .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-icon, .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-text, .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-badge-stack, - .bookmark-item:not([disabled=true]):is([open],[checked],:hover:active), + .bookmark-item:not(menu, menuitem):not([disabled=true]):is([open],[checked],:hover:active), .urlbar-page-action:not([disabled=true]):is([open],[checked],:hover:active), .identity-box-button:not([disabled=true]):is([open],[checked],:hover:active), #tracking-protection-icon-container:not([disabled=true]):is([open],[checked],:hover:active), diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 2739bf9..e694e6d 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -29,7 +29,7 @@ } /* hide space above tabs when maximised for non-macOS versions of Firefox */ -@supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { +@media not (-moz-platform: macos) { :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]) #titlebar, #toolbar-menubar:not([inactive])+#TabsToolbar { --tab-block-margin: 0px !important; @@ -252,7 +252,7 @@ toolbarbutton[part="scrollbutton-down"] { } /* mac titlebar buttons */ -@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { +@media (-moz-platform: macos) { @media (-moz-mac-big-sur-theme:0) { .titlebar-buttonbox { margin-inline: 10px !important; @@ -299,7 +299,6 @@ toolbarbutton[part="scrollbutton-down"] { margin-inline-end: 7px !important; } - .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2) !important; } diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css index eeed148..ed86943 100644 --- a/chrome/toolbar/urlbar.css +++ b/chrome/toolbar/urlbar.css @@ -125,7 +125,6 @@ border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important; } - /* move tracking protection button */ #tracking-protection-icon-container, #page-action-buttons {