diff --git a/README.md b/README.md index 133c96b..8373700 100644 --- a/README.md +++ b/README.md @@ -1,105 +1,100 @@ # Edge-Frfox A Firefox userChrome.css theme that aims to recreate the look and feel of the Chromium version of Microsoft Edge. -![thumbnail](screenshots/thumbnail.png) -###### Screenshot taken with macOS Monterey / Firefox Nightly 96.0a1 (2021-11-30) + +thumbnail screenshot ## How to install 1. Go to `about:support` and click the "Open Folder/Show in Finder" button for the root directory of your browser profile/s. 2. Download and copy the `chrome` folder into the profile folder. 3. Go to about:config and change these preferences: - ###### For all operating systems: + + ### For all operating systems: 1. `toolkit.legacyUserProfileCustomizations.stylesheets` = `true` 2. `svg.context-properties.content.enabled` = `true` 3. `layout.css.color-mix.enabled` = `true` - ###### On macOS: + ### On macOS: 1. To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false` - ###### Recommended: + ### Recommended: 1. `browser.tabs.tabMinWidth` = `66` 2. `browser.tabs.tabClipWidth` = `86` + ### Optional: + 1. To use the light theme in private browsing mode set `browser.theme.dark-private-windows` = `false` + Additional tweaks can also be applied to the theme, such as Mica (Windows 11 Only), Floating Tabs and more. See [Tweaks](#tweaks). **Note: Most frequently tested on macOS** ## Screenshots -|Theme|Light|Dark| -|-|-|-| -|Default (Windows 11)|![Light](screenshots/light.png)|![Dark](screenshots/dark.png)| -|Floating Tabs (Windows 11)|![Light, Floating Tabs](screenshots/light-floating-tabs.png)|![Dark, Floating Tabs](screenshots/dark-floating-tabs.png)| -|Mica (Windows 11)|![Light, Mica](screenshots/light-mica.png)|![Dark, Mica](screenshots/dark-mica.png)| -|Mica and Floating Tabs (Windows 11)|![Light, Mica and Floating Tabs](screenshots/light-mica-floating-tabs.png)|![Dark, Mica and Floating Tabs](screenshots/dark-mica-floating-tabs.png)| -|GTK (GNOME 42, [adw-gtk3](https://github.com/lassekongo83/adw-gtk3) theme)|![Light, GTK](screenshots/gtk-light.png)|![Dark, GTK](screenshots/gtk-dark.png)| +| Theme | Light | Dark | +| ----------------------------------- | --------------------------------------- | -------------------------------------- | +| Default (Windows 11) | ![Light][s-l] | ![Dark][s-d] | +| Floating Tabs (Windows 11) | ![Light, Floating Tabs][s-lf] | ![Dark, Floating Tabs][s-df] | +| Mica (Windows 11) | ![Light, Mica][s-lm] | ![Dark, Mica][s-dm] | +| Mica and Floating Tabs (Windows 11) | ![Light, Mica and Floating Tabs][s-lmf] | ![Dark, Mica and Floating Tabs][s-dmf] | +| GTK (GNOME 42, [adw-gtk3][1] theme) | ![Light, GTK][s-lgtk] | ![Dark, GTK][s-dgtk] | ## Tweaks Certain tweaks can be applied to the theme, to enable them navigate to `about:config` and create a boolean key for each tweak you want to use and set it to `true`, then restart the browser. To disable a tweak, set the key to `false` or delete it, then restart the browser. -|use background image on newtab page| -|-| -|**SETUP: Add an image named `background-0.(jpg/png)` to the `chrome` folder.**| -|**OPTIONAL: Add a second image named `background-1.(jpg/png)` for seperate dark mode background.**| -|`uc.tweak.newtab-background`| +| use background image on newtab page | +| -------------------------------------------------------------------------------------------------- | +| **SETUP: Add an image named `background-0.(jpg/png)` to the `chrome` folder.** | +| **OPTIONAL: Add a second image named `background-1.(jpg/png)` for seperate dark mode background.** | +| `uc.tweak.newtab-background` | -|hide Firefox logo on newtab page| -|-| -|`uc.tweak.hide-newtab-logo`| +| hide Firefox logo on newtab page | +| -------------------------------- | +| `uc.tweak.hide-newtab-logo` | -|disable drag space above tabs| -|-| -|`uc.tweak.disable-drag-space`| +| disable drag space above tabs | +| ----------------------------- | +| `uc.tweak.disable-drag-space` | -|enable Edge style floating tabs| -|-| -|`uc.tweak.floating-tabs`| +| enable Edge style floating tabs | +| ------------------------------- | +| `uc.tweak.floating-tabs` | -|enable Mica toolbar background (Windows 11 only)| -|-| -|**See [Mica Tweak Instructions (Windows 11 Only)](#mica-tweak-instructions-windows-11-only) for installation instructions.**| -|**NOTE: Only works on default theme: 'System theme - auto'**| -|`uc.tweak.win11-mica`| +| enable Mica toolbar background *(Windows 11 only)* | +| ------------------------------------------------------------------- | +| **See [Mica Tweak Instructions][3] for installation instructions.** | +| **NOTE: Only works on default theme: 'System theme - auto'** | +| `uc.tweak.win11-mica` | -|force tab background colour to the same colour as the navbar background (useful for Proton themes)| -|-| -|**NOTE: can cause readability issues with some themes! (eg. white text on white bg)**| -|`uc.tweak.force-tab-colour`| -|![force tab colour example](screenshots/force-tab-colour.svg) (Left: OFF, Right: ON)| +| force tab background colour to the same colour as the navbar background (useful for Proton themes) | +| -------------------------------------------------------------------------------------------------- | +| **NOTE: can cause readability issues with some themes! (eg. white text on white bg)** | +| `uc.tweak.force-tab-colour` | +| ![force tab colour example](screenshots/force-tab-colour.svg) (Left: OFF, Right: ON) | -|only show Firefox account button when in private mode (useful as a private browsing indicator)| -|-| -|**NOTE: all functionality of this button can still be accessed from the app menu.**| -|`uc.tweak.fxa-button-as-private-indicator`| +| Show context menu navigation buttons (Back, Forward, Reload, etc.) vertically | +| ----------------------------------------------------------------------------- | +| **NOTE: labels are only shown in the English language.** | +| `uc.tweak.vertical-context-navigation` | -|Show context menu navigation buttons (Back, Forward, Reload, etc.) vertically| -|-| -|**NOTE: labels are only shown in the English language.**| -|`uc.tweak.vertical-context-navigation`| +| remove tab separators | +| -------------------------------- | +| `uc.tweak.remove-tab-separators` | -|remove tab separators| -|-| -|`uc.tweak.remove-tab-separators`| +| use Firefox's default context menu font-size (only applies to Windows) | +| ---------------------------------------------------------------------- | +| `uc.tweak.smaller-context-menu-text` | -|remove extra padding from permissions button (older functionality)| -|-| -|`uc.tweak.less-permissions-button-padding`| +| disable custom context menus | +| ------------------------------ | +| `uc.tweak.revert-context-menu` | -|use Firefox's default context menu font-size (only applies to Windows)| -|-| -|`uc.tweak.smaller-context-menu-text`| - -|disable custom context menus| -|-| -|`uc.tweak.revert-context-menu`| - -|if a tab's close button is hidden, show it when hovering over tab| -|-| -|`uc.tweak.show-tab-close-button-on-hover`| +| if a tab's close button is hidden, show it when hovering over tab | +| ----------------------------------------------------------------- | +| `uc.tweak.show-tab-close-button-on-hover` | ## Mica Tweak Instructions (Windows 11 Only) -1. Download and install [Mica For Everyone](https://github.com/MicaForEveryone/MicaForEveryone). +1. Download and install [Mica For Everyone][2]. 2. Create a custom process rule with the following: 1. Name: `firefox` 2. Titlebar Color: `System` @@ -114,6 +109,21 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse [KibSquib48](https://github.com/KibSquib48) - [MicaFox](https://github.com/KibSquib48/MicaFox) ---- + +[1]: https://github.com/lassekongo83/adw-gtk3 +[2]: https://github.com/MicaForEveryone/MicaForEveryone +[3]: #mica-tweak-instructions-windows-11-only -Old version can be found [here](https://github.com/bmFtZQ/edge-frfox/tree/v91.0-archive). + +[s-l]: screenshots/light.png +[s-lf]: screenshots/light-floating-tabs.png +[s-lm]: screenshots/light-mica.png +[s-lmf]: screenshots/light-mica-floating-tabs.png +[s-lgtk]: screenshots/gtk-light.png + + +[s-d]: screenshots/dark.png +[s-df]: screenshots/dark-floating-tabs.png +[s-dm]: screenshots/dark-mica.png +[s-dmf]: screenshots/dark-mica-floating-tabs.png +[s-dgtk]: screenshots/gtk-dark.png diff --git a/chrome/global/colors.css b/chrome/global/colors.css index 2fdbcaf..8623f46 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -62,9 +62,7 @@ --toolbarbutton-hover-background: rgba(0, 0, 0, 0.08) !important; --toolbarbutton-active-background: rgba(0, 0, 0, 0.12) !important; --uc-private-browsing-indicator: var(--button-primary-bgcolor); - --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor); - --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor); - --uc-private-browding-indicator-text: var(--button-primary-color); + --uc-private-browsing-indicator-text: var(--button-primary-color); --tab-icon-overlay-stroke: #fff !important; --tab-icon-overlay-fill: #252525 !important; } @@ -130,9 +128,7 @@ --toolbarbutton-hover-background: rgba(255, 255, 255, 0.1) !important; --toolbarbutton-active-background: rgba(255, 255, 255, 0.16) !important; --uc-private-browsing-indicator: var(--button-primary-bgcolor); - --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor); - --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor); - --uc-private-browding-indicator-text: var(--button-primary-color); + --uc-private-browsing-indicator-text: var(--button-primary-color); --tab-icon-overlay-stroke: #4b4b4b !important; --tab-icon-overlay-fill: #fff !important; } @@ -197,11 +193,11 @@ stroke: white !important; background-color: #e81123 !important; } - + .titlebar-close:hover:active { background-color: #EF6B76 !important; } - + toolbar[brighttext] .titlebar-close:hover:active { background-color: #9C1420 !important; } @@ -299,10 +295,10 @@ color: #000 !important; } -@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml) { - body { - background: transparent !important; - } +@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml){ +body { + background: transparent !important; +} } .sidebar-panel[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"], @@ -389,14 +385,12 @@ body[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, --panel-banner-item-update-supported-bgcolor: #1bba6b !important; --focus-outline-color: -moz-accent-color !important; --uc-private-browsing-indicator: -moz-accent-color !important; - --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor); - --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor); - --uc-private-browding-indicator-text: var(--button-primary-color); + --uc-private-browsing-indicator-text: var(--button-primary-color); } #sidebar-box:not([lwt-sidebar]) { --sidebar-background-color: -moz-dialog !important; - --sidebar-text-color: -moz-dialog-text !important; + --sidebar-text-color: -moz-dialog-text !important; } #browser:not([style*="--sidebar-border-color"]) { diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css index f1b1469..75f518e 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -15,14 +15,6 @@ bugs with certain themes eg. dark text on dark background.) */ } } -/* hide firefox account button when not in private mode (useful as a private -browsing indicator) */ -@supports -moz-bool-pref("uc.tweak.fxa-button-as-private-indicator") { - :root:not([privatebrowsingmode]) #nav-bar:not([customizing]) #fxa-toolbar-menu-button { - display: none !important; - } -} - /* remove tab separators */ @supports -moz-bool-pref("uc.tweak.remove-tab-separators") { .tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after { @@ -34,17 +26,6 @@ browsing indicator) */ } } -@supports -moz-bool-pref("uc.tweak.less-permissions-button-padding") { - #identity-icon-box { - padding-inline: var(--uc-toolbarbutton-inner-inline-padding) !important; - } - - #identity-permission-box { - padding-inline: 2px var(--uc-urlbar-icon-inline-padding) !important; - margin-inline-start: -8px !important; - } -} - @supports -moz-bool-pref("uc.tweak.floating-tabs") { :root:not(:-moz-lwtheme), :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] { @@ -121,12 +102,6 @@ browsing indicator) */ } } - /* remove navbar shadow */ - #titlebar, - :root[lwtheme-brighttext="true"] #titlebar { - box-shadow: none !important; - } - /* move tab shadow behind urlbar */ .tabbrowser-tab[visuallyselected="true"], #nav-bar { @@ -150,12 +125,16 @@ browsing indicator) */ margin-bottom: -8px !important; } - .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background { - box-shadow: 0 3.3px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.11) !important; + :root { + --uc-titlebar-shadow: none; + --uc-tab-shadow: + 0 3.3px 3px rgba(0, 0, 0, 0.06), + 0 0 0 1px rgba(0, 0, 0, 0.11); } - :root[lwtheme-brighttext="true"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important; + :root[lwtheme-brighttext="true"] { + --uc-titlebar-shadow: none; + --uc-tab-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } } @@ -212,26 +191,6 @@ browsing indicator) */ :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]):is([inFullscreen], [sizemode="maximized"]) .titlebar-close { padding-right: 19px !important; } - - @supports -moz-bool-pref("uc.tweak.win11-mica-toolbar") { - :root:not(:-moz-lwtheme):not(:-moz-window-inactive) { - --lwt-accent-color: #00000015 !important; - --toolbar-bgcolor: #ffffffbf !important; - --uc-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.03) !important; - } - - :root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) { - --toolbar-bgcolor: #4a4a4a70 !important; - --toolbar-field-background-color: #0004 !important; - --toolbar-field-focus-background-color: #2B2B2B !important; - --chrome-content-separator-color: #fff3 !important; - } - - #navigator-toolbox #titlebar, - #navigator-toolbox .tab-background { - box-shadow: none !important; - } - } } } @@ -251,28 +210,38 @@ browsing indicator) */ display: -moz-box !important; } + :root, + :root[lang^="en"] { + --uc-string-back: "Back"; + --uc-string-forward: "Forward"; + --uc-string-reload: "Reload"; + --uc-string-stop: "Stop"; + --uc-string-bookmark-page: "Bookmark Page"; + --uc-string-edit-bookmark: "Edit Bookmark"; + } + #context-navigation>#context-back .menu-iconic-text::before { - content: "Back" !important; + content: var(--uc-string-back) !important; } #context-navigation>#context-forward .menu-iconic-text::before { - content: "Forward" !important; + content: var(--uc-string-forward) !important; } #context-navigation>#context-reload .menu-iconic-text::before { - content: "Reload" !important; + content: var(--uc-string-reload) !important; } #context-navigation>#context-stop .menu-iconic-text::before { - content: "Stop" !important; + content: var(--uc-string-stop) !important; } #context-navigation>#context-bookmarkpage .menu-iconic-text::before { - content: "Bookmark Page" !important; + content: var(--uc-string-bookmark-page) !important; } #context-navigation>#context-bookmarkpage[starred] .menu-iconic-text::before { - content: "Edit Bookmark" !important; + content: var(--uc-string-edit-bookmark) !important; } } } diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css index 9b081d4..0c2500a 100644 --- a/chrome/icons/icons.css +++ b/chrome/icons/icons.css @@ -20,8 +20,8 @@ and 11 so applied to both) */ list-style-image: url("win11-close.svg") !important; } - /* darkmode icon that uses thicker strokes and easier to see (only needed at - 1x scale) */ + /* darkmode icon that uses thicker strokes and is easier to see (only needed + at 1x scale) */ @media (max-resolution: 1dppx) { :root[lwtheme-brighttext="true"] .titlebar-close, .titlebar-close:hover { @@ -30,9 +30,7 @@ and 11 so applied to both) */ } } -#appMenu-multiView .subviewbutton, -#sidebarMenu-popup .subviewbutton, -#overflowMenu-customize-button { +.subviewbutton { -moz-context-properties: fill, fill-opacity !important; fill: currentColor !important; } @@ -41,8 +39,9 @@ and 11 so applied to both) */ list-style-image: url("account.svg") !important; } -:root[privatebrowsingmode] #fxa-avatar-image { +.private-browsing-indicator-icon { list-style-image: url("account-private.svg") !important; + border-radius: 100% !important; } /* disable context menu icons on macOS */ @@ -104,7 +103,8 @@ and 11 so applied to both) */ #downloads-button, #downloads-indicator-anchor, -#appMenu-downloads-button { +#appMenu-downloads-button, +#appMenu-library-downloads-button { list-style-image: url("downloads.svg") !important; } @@ -143,6 +143,7 @@ and 11 so applied to both) */ .urlbarView-row[source="history"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon, #urlbar-engine-one-off-item-history, #appMenu-history-button, +#appMenu-library-history-button, #sidebar-switcher-history, #sidebar-box[sidebarcommand="viewHistorySidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon { list-style-image: url("history.svg") !important; @@ -172,7 +173,8 @@ and 11 so applied to both) */ } #add-ons-button, -#appMenu-extensions-themes-button { +#appMenu-extensions-themes-button, +#unified-extensions-button { list-style-image: url("extension.svg") !important; } @@ -210,7 +212,8 @@ and 11 so applied to both) */ #preferences-button, .search-setting-button>.button-box>.button-icon, -#appMenu-settings-button { +#appMenu-settings-button, +.unified-extensions-item-open-menu.subviewbutton { list-style-image: url("settings.svg") !important; } @@ -259,6 +262,7 @@ and 11 so applied to both) */ #bookmarks-menu-button, #appMenu-bookmarks-button, #sidebar-switcher-bookmarks, +#appMenu-library-bookmarks-button, #sidebar-box[sidebarcommand="viewBookmarksSidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon { list-style-image: url("bookmark-star-on-tray.svg") !important; } @@ -395,29 +399,20 @@ and 11 so applied to both) */ /* tab icons */ .tab-icon-image[src="chrome://branding/content/icon32.png"], -.tab-icon-image[src="chrome://global/skin/icons/settings.svg"], -.tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"], -.tab-icon-image[src="chrome://browser/skin/customize.svg"], .tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] { - padding-left: 16px !important; - box-sizing: border-box !important; -} - -.tab-icon-image[src="chrome://branding/content/icon32.png"], -.tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] { - background: url("new-tab-image.svg") !important; + content: url("new-tab-image.svg") !important; } .tab-icon-image[src="chrome://global/skin/icons/settings.svg"] { - background: url("settings.svg") !important; + content: url("settings.svg") !important; } .tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"] { - background: url("extension.svg") !important; + content: url("extension.svg") !important; } .tab-icon-image[src="chrome://browser/skin/customize.svg"] { - background: url("customize.svg") !important; + content: url("customize.svg") !important; } /* permissions */ @@ -550,381 +545,391 @@ and 11 so applied to both) */ list-style-image: url("reader-mode.svg") !important; } +#unified-extensions-manage-extensions { + list-style-image: url("manage.svg") !important; +} + /* disable context menu icons when this tweak is applied */ @supports not -moz-bool-pref("uc.tweak.revert-context-menu") { -/* Context Menu Icons */ -menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon { - list-style-image: url("checkmark.svg") !important; -} - -#context-video-pictureinpicture:not([checked="true"]) .menu-iconic-icon { - list-style-image: url("media-pip.svg") !important; -} - -#context-media-loop:not([checked="true"]) .menu-iconic-icon { - list-style-image: url("media-loop.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(--menu-image) !important; - background-size: 16px !important; - background-position: var(--uc-contextmenu-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 { - --menu-image: url("back.svg"); + /* Context Menu Icons */ + menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon { + list-style-image: url("checkmark.svg") !important; } - #context-forward { - --menu-image: url("forward.svg"); + #context-video-pictureinpicture:not([checked="true"]) .menu-iconic-icon { + list-style-image: url("media-pip.svg") !important; } - #context-reload { + #context-media-loop:not([checked="true"]) .menu-iconic-icon { + list-style-image: url("media-loop.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(--menu-image) !important; + background-size: 16px !important; + background-position: var(--uc-contextmenu-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 { + --menu-image: url("back.svg"); + } + + #context-forward { + --menu-image: url("forward.svg"); + } + + #context-reload { + --menu-image: url("reload.svg"); + } + + #context-stop { + --menu-image: url("close.svg"); + } + + #context-bookmarkpage { + --menu-image: url("bookmark-hollow.svg"); + } + + #contentAreaContextMenu #context-bookmarkpage[starred] { + --menu-image: url("bookmark.svg"); + fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important; + } + } + + #context-savepage { + --menu-image: url("save.svg"); + } + + #context-selectall, + .textbox-contextmenu menuitem[cmd*="selectAll"], + #context_selectAllTabs, + #toolbar-context-selectAllTabs { + --menu-image: url("edit-select-all.svg"); + } + + #context-undo, + .textbox-contextmenu menuitem[cmd*="undo"], + #context_undoCloseTab, + #toolbar-context-undoCloseTab { + --menu-image: url("edit-undo.svg"); + } + + #context-redo, + .textbox-contextmenu menuitem[cmd*="redo"] { + --menu-image: url("edit-redo.svg"); + } + + #context-copy, + .textbox-contextmenu menuitem[cmd*="copy"], + #placesContext_copy { + --menu-image: url("edit-copy.svg"); + } + + #context-paste, + .textbox-contextmenu menuitem[cmd*="paste"], + #placesContext_paste_group { + --menu-image: url("edit-paste.svg"); + } + + #context-cut, + .textbox-contextmenu menuitem[cmd*="cut"], + #placesContext_cut { + --menu-image: url("edit-cut.svg"); + } + + #context-delete, + .customize-context-removeExtension, + .unified-extensions-context-menu-remove-extension, + .textbox-contextmenu menuitem[cmd*="delete"], + menuitem[id="placesContext_deleteBookmark"], + menuitem[id="placesContext_deleteFolder"], + menuitem[id="placesContext_delete"], + menuitem[id="placesContext_delete_history"], + menuitem[id="placesContext_deleteHost"] { + --menu-image: url("edit-delete.svg"); + } + + #paste-and-go { + --menu-image: url("paste-and-go.svg"); + } + + #context-print-selection { + --menu-image: url("print.svg"); + } + + #context-take-screenshot { + --menu-image: url("screenshot.svg"); + } + + #context-viewsource { + --menu-image: url("source-code.svg"); + } + + #context-inspect-a11y { + --menu-image: url("accessibility.svg"); + } + + #context-inspect { + --menu-image: url("inspect.svg"); + } + + #context-searchselect { + --menu-image: url("search-glass.svg"); + } + + #context-viewimage { + --menu-image: url("image-open.svg"); + } + + #context-saveimage, + #context-video-saveimage { + --menu-image: url("image-save.svg"); + } + + #context-savevideo { + --menu-image: url("video-save.svg"); + } + + #context-viewvideo { + --menu-image: url("video-open.svg") + } + + #context-saveaudio { + --menu-image: url("audio-save.svg"); + } + + #context-copyimage-contents { + --menu-image: url("image-copy.svg"); + } + + #context-copyimage, + #context-copyvideourl, + #context-copylink { + --menu-image: url("link.svg"); + } + + #context-sendimage, + #context-sendvideo, + #context-sendaudio { + --menu-image: url("mail.svg"); + } + + #context-setDesktopBackground, + .viewCustomizeToolbar { + --menu-image: url("customize.svg"); + } + + #context-reloadimage, + #context_reloadTab, + #context_reloadSelectedTabs, + #toolbar-context-reloadSelectedTab, + #toolbar-context-reloadSelectedTabs { --menu-image: url("reload.svg"); } - #context-stop { - --menu-image: url("close.svg"); + #context-sendlinktodevice, + #context_sendTabToDevice, + #context-sendpagetodevice { + --menu-image: url("send-to-device.svg"); } - #context-bookmarkpage { + #context-openlinkintab, + #context-openlinkincontainertab, + menuitem[id="placesContext_open:newtab"], + menuitem[id="placesContext_openLinks:tabs"], + menuitem[id="placesContext_openBookmarkLinks:tabs"], + menuitem[id="placesContext_openBookmarkContainer:tabs"] { + --menu-image: url("tab.svg"); + } + + #context_openANewTab, + #toolbar-context-openANewTab { + --menu-image: url("new-tab-image.svg"); + } + + #context-openlinkinusercontext-menu, + menu[id="placesContext_open:newcontainertab"], + menu[id="placesContext_openContainer:tabs"] { + --menu-image: url("container-tab.svg"); + } + + #context-openlink, + menuitem[id="placesContext_open:newwindow"] { + --menu-image: url("window.svg"); + } + + #context-openlinkprivate, + menuitem[id="placesContext_open:newprivatewindow"] { + --menu-image: url("private-window.svg"); + } + + #context-savelink { + --menu-image: url("downloads.svg"); + } + + #spell-add-to-dictionary { + --menu-image: url("add-to-dictionary.svg"); + } + + #manage-saved-logins { + --menu-image: url("passwords.svg"); + } + + #context-media-play, + #context_playTab, + #context_playSelectedTabs { + --menu-image: url("media-play.svg"); + } + + #context-media-pause { + --menu-image: url("media-pause.svg"); + } + + #context-media-mute, + #context_toggleMuteTab, + #context_toggleMuteSelectedTabs { + --menu-image: url("media-mute.svg"); + } + + #context-media-unmute, + #context_toggleMuteTab[muted], + #context_toggleMuteSelectedTabs[muted] { + --menu-image: url("media-unmute.svg"); + } + + #context-media-playbackrate { + --menu-image: url("media-speed.svg"); + } + + #context-video-fullscreen { + --menu-image: url("fullscreen.svg"); + } + + #context-leave-dom-fullscreen, + menuitem[contexttype="fullscreen"][label*="Exit"] { + --menu-image: url("fullscreen-exit.svg"); + } + + #context-media-hidecontrols, + #context-media-showcontrols { + --menu-image: url("permissions.svg"); + } + + #context_pinTab, + #context_unpinTab, + #context_pinSelectedTabs, + #context_unpinSelectedTabs, + .customize-context-moveToPanel { + --menu-image: url("pin.svg"); + } + + #context_duplicateTab, + #context_duplicateTabs { + --menu-image: url("duplicate-tab.svg"); + } + + #context_bookmarkTab, + #context_bookmarkSelectedTabs, + #toggle_PersonalToolbar, + #context-bookmarklink, + #toolbar-context-bookmarkSelectedTab, + #toolbar-context-bookmarkSelectedTabs { --menu-image: url("bookmark-hollow.svg"); } - #contentAreaContextMenu #context-bookmarkpage[starred] { - --menu-image: url("bookmark.svg"); - fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important; + menuitem[id="placesContext_show_bookmark:info"], + menuitem[id="placesContext_show_folder:info"], + menuitem[id="placesContext_show:info"] { + --menu-image: url("edit.svg"); } -} -#context-savepage { - --menu-image: url("save.svg"); -} + menuitem[id="placesContext_showAllBookmarks"], + #BMB_bookmarksShowAllTop, + #BMB_bookmarksShowAll, + .customize-context-manageExtension, + .unified-extensions-context-menu-manage-extension { + --menu-image: url("manage.svg"); + } -#context-selectall, -.textbox-contextmenu menuitem[cmd*="selectAll"], -#context_selectAllTabs, -#toolbar-context-selectAllTabs { - --menu-image: url("edit-select-all.svg"); -} + menuitem[id="placesContext_new:bookmark"], + menuitem[id="placesContext_new:folder"], + menuitem[id="placesContext_new:separator"] { + --menu-image: url("plus.svg"); + } -#context-undo, -.textbox-contextmenu menuitem[cmd*="undo"], -#context_undoCloseTab, -#toolbar-context-undoCloseTab { - --menu-image: url("edit-undo.svg"); -} + #context-savelinktopocket, + #context-pocket { + --menu-image: url("pocket-outline.svg"); + } -#context-redo, -.textbox-contextmenu menuitem[cmd*="redo"] { - --menu-image: url("edit-redo.svg"); -} + #context_moveTabOptions { + --menu-image: url("move-tab.svg"); + } -#context-copy, -.textbox-contextmenu menuitem[cmd*="copy"], -#placesContext_copy { - --menu-image: url("edit-copy.svg"); -} + .share-tab-url-item { + --menu-image: url("share.svg"); + } -#context-paste, -.textbox-contextmenu menuitem[cmd*="paste"], -#placesContext_paste_group { - --menu-image: url("edit-paste.svg"); -} + #context_reopenInContainer { + --menu-image: url("container-tab.svg"); + } -#context-cut, -.textbox-contextmenu menuitem[cmd*="cut"], -#placesContext_cut { - --menu-image: url("edit-cut.svg"); -} + #context_closeTab { + --menu-image: url("close.svg"); + } -#context-delete, -.customize-context-removeExtension, -.textbox-contextmenu menuitem[cmd*="delete"], -menuitem[id="placesContext_deleteBookmark"], -menuitem[id="placesContext_deleteFolder"], -menuitem[id="placesContext_delete"], -menuitem[id="placesContext_delete_history"], -menuitem[id="placesContext_deleteHost"] { - --menu-image: url("edit-delete.svg"); -} - -#paste-and-go { - --menu-image: url("paste-and-go.svg"); -} - -#context-print-selection { - --menu-image: url("print.svg"); -} - -#context-take-screenshot { - --menu-image: url("screenshot.svg"); -} - -#context-viewsource { - --menu-image: url("source-code.svg"); -} - -#context-inspect-a11y { - --menu-image: url("accessibility.svg"); -} - -#context-inspect { - --menu-image: url("inspect.svg"); -} - -#context-searchselect { - --menu-image: url("search-glass.svg"); -} - -#context-viewimage { - --menu-image: url("image-open.svg"); -} - -#context-saveimage, -#context-video-saveimage { - --menu-image: url("image-save.svg"); -} - -#context-savevideo { - --menu-image: url("video-save.svg"); -} - -#context-viewvideo { - --menu-image: url("video-open.svg") -} - -#context-saveaudio { - --menu-image: url("audio-save.svg"); -} - -#context-copyimage-contents { - --menu-image: url("image-copy.svg"); -} - -#context-copyimage, -#context-copyvideourl, -#context-copylink { - --menu-image: url("link.svg"); -} - -#context-sendimage, -#context-sendvideo, -#context-sendaudio { - --menu-image: url("mail.svg"); -} - -#context-setDesktopBackground, -.viewCustomizeToolbar { - --menu-image: url("customize.svg"); -} - -#context-reloadimage, -#context_reloadTab, -#context_reloadSelectedTabs, -#toolbar-context-reloadSelectedTab, -#toolbar-context-reloadSelectedTabs { - --menu-image: url("reload.svg"); -} - -#context-sendlinktodevice, -#context_sendTabToDevice, -#context-sendpagetodevice { - --menu-image: url("send-to-device.svg"); -} - -#context-openlinkintab, -#context-openlinkincontainertab, -menuitem[id="placesContext_open:newtab"], -menuitem[id="placesContext_openLinks:tabs"], -menuitem[id="placesContext_openBookmarkLinks:tabs"], -menuitem[id="placesContext_openBookmarkContainer:tabs"] { - --menu-image: url("tab.svg"); -} - -#context_openANewTab, -#toolbar-context-openANewTab { - --menu-image: url("new-tab-image.svg"); -} - -#context-openlinkinusercontext-menu, -menu[id="placesContext_open:newcontainertab"], -menu[id="placesContext_openContainer:tabs"] { - --menu-image: url("container-tab.svg"); -} - -#context-openlink, -menuitem[id="placesContext_open:newwindow"] { - --menu-image: url("window.svg"); -} - -#context-openlinkprivate, -menuitem[id="placesContext_open:newprivatewindow"] { - --menu-image: url("private-window.svg"); -} - -#context-savelink { - --menu-image: url("downloads.svg"); -} - -#spell-add-to-dictionary { - --menu-image: url("add-to-dictionary.svg"); -} - -#manage-saved-logins { - --menu-image: url("passwords.svg"); -} - -#context-media-play, -#context_playTab, -#context_playSelectedTabs { - --menu-image: url("media-play.svg"); -} - -#context-media-pause { - --menu-image: url("media-pause.svg"); -} - -#context-media-mute, -#context_toggleMuteTab, -#context_toggleMuteSelectedTabs { - --menu-image: url("media-mute.svg"); -} - -#context-media-unmute, -#context_toggleMuteTab[muted], -#context_toggleMuteSelectedTabs[muted] { - --menu-image: url("media-unmute.svg"); -} - -#context-media-playbackrate { - --menu-image: url("media-speed.svg"); -} - -#context-video-fullscreen { - --menu-image: url("fullscreen.svg"); -} - -#context-leave-dom-fullscreen, -menuitem[contexttype="fullscreen"][label*="Exit"] { - --menu-image: url("fullscreen-exit.svg"); -} - -#context-media-hidecontrols, -#context-media-showcontrols { - --menu-image: url("permissions.svg"); -} - -#context_pinTab, -#context_unpinTab, -#context_pinSelectedTabs, -#context_unpinSelectedTabs, -.customize-context-moveToPanel { - --menu-image: url("pin.svg"); -} - -#context_duplicateTab, -#context_duplicateTabs { - --menu-image: url("duplicate-tab.svg"); -} - -#context_bookmarkTab, -#context_bookmarkSelectedTabs, -#toggle_PersonalToolbar, -#context-bookmarklink, -#toolbar-context-bookmarkSelectedTab, -#toolbar-context-bookmarkSelectedTabs { - --menu-image: url("bookmark-hollow.svg"); -} - -menuitem[id="placesContext_show_bookmark:info"], -menuitem[id="placesContext_show_folder:info"], -menuitem[id="placesContext_show:info"] { - --menu-image: url("edit.svg"); -} - -menuitem[id="placesContext_showAllBookmarks"], -#BMB_bookmarksShowAllTop, -#BMB_bookmarksShowAll, -.customize-context-manageExtension { - --menu-image: url("manage.svg"); -} - -menuitem[id="placesContext_new:bookmark"], -menuitem[id="placesContext_new:folder"], -menuitem[id="placesContext_new:separator"] { - --menu-image: url("plus.svg"); -} - -#context-savelinktopocket, -#context-pocket { - --menu-image: url("pocket-outline.svg"); -} - -#context_moveTabOptions { - --menu-image: url("move-tab.svg"); -} - -.share-tab-url-item { - --menu-image: url("share.svg"); -} - -#context_reopenInContainer { - --menu-image: url("container-tab.svg"); -} - -#context_closeTab { - --menu-image: url("close.svg"); -} - -.customize-context-reportExtension { - --menu-image: url("report.svg"); -} + .customize-context-reportExtension, + .unified-extensions-context-menu-report-extension { + --menu-image: url("report.svg"); + } } /* header icons for the app menu sub menus (eg. fx account, history...) */ .panel-header>h1>span::before { content: ""; - --uc-padding: 16px; - --uc-margin: 8px; - background-image: var(--header-image); - background-size: 16px; - background-position: center; - background-repeat: no-repeat; + background: var(--header-image, none) center / 16px no-repeat; -moz-context-properties: fill, fill-opacity; fill: currentColor; + padding-inline-start: calc(var(--uc-enabled, 0) * 16px); + margin-inline-end: calc(var(--uc-enabled, 0) * 8px); } #PanelUI-fxa .panel-header>h1>span::before { --header-image: var(--avatar-image-url); + --uc-enabled: 1; transform: scale(1.25); border-radius: 99px; display: inline-block; height: 16px; - padding-inline-start: var(--uc-padding); - margin-inline-end: var(--uc-margin); } #PanelUI-bookmarks .panel-header>h1>span::before { --header-image: url("bookmark-star-on-tray.svg"); - padding-inline-start: var(--uc-padding); - margin-inline-end: var(--uc-margin); + --uc-enabled: 1; } #PanelUI-history .panel-header>h1>span::before { --header-image: url("history.svg"); - padding-inline-start: var(--uc-padding); - margin-inline-end: var(--uc-margin); + --uc-enabled: 1; } #PanelUI-helpView .panel-header>h1>span::before { --header-image: url("help.svg"); - padding-inline-start: var(--uc-padding); - margin-inline-end: var(--uc-margin); + --uc-enabled: 1; +} + +#appMenu-libraryView .panel-header>h1>span::before { + --header-image: url("library.svg"); + --uc-enabled: 1; +} + +#unified-extensions-panel .panel-header>h1>span::before { + --header-image: url("extension.svg"); + --uc-enabled: 1; } diff --git a/chrome/toolbar/navbar.css b/chrome/toolbar/navbar.css index fec2e88..b8d76f3 100644 --- a/chrome/toolbar/navbar.css +++ b/chrome/toolbar/navbar.css @@ -52,48 +52,6 @@ scale: 1.5 !important; } -:root[privatebrowsingmode] #fxa-toolbar-menu-button::before { - content: "Private" !important; - display: -moz-box !important; - font-size: 12px !important; -} - -:root[privatebrowsingmode] #fxa-toolbar-menu-button { - background: var(--uc-private-browsing-indicator, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention))) !important; - margin: 4px !important; - padding-inline: 8px 0 !important; - color: var(--uc-private-browding-indicator-text, var(--toolbar-bgcolor)) !important; - fill: currentColor !important; -} - -:root[privatebrowsingmode] #fxa-toolbar-menu-button:hover { - background: var(--uc-private-browding-indicator-hover, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 90%, transparent)) !important; -} - -:root[privatebrowsingmode] #fxa-toolbar-menu-button:not([disabled=true]):is([open], [checked], :hover:active) { - background: var(--uc-private-browding-indicator-active, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 70%, transparent)) !important; -} - -@media (-moz-gtk-csd-available) { - :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme) { - background: -moz-accent-color !important; - color: -moz-accent-color-foreground !important; - } - - :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme):hover { - background:color-mix(in srgb, black 8%, -moz-accent-color) !important; - } - - :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme):not([disabled=true]):is([open], [checked], :hover:active) { - background: color-mix(in srgb, black 16%, -moz-accent-color) !important; - } -} - -:root[privatebrowsingmode] #nav-bar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack { - background: transparent !important; - margin-inline: 0 !important; -} - /* button background transition */ @media not (prefers-reduced-motion) { .toolbarbutton-1>.toolbarbutton-icon, @@ -103,23 +61,21 @@ .urlbar-page-action, .identity-box-button, #tracking-protection-icon-container, - #fxa-toolbar-menu-button, panel button, panel menulist, .titlebar-button { transition: background-color 0.25s ease !important; } - .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, - :not(.panel-subview-body>toolbaritem)>.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), - #fxa-toolbar-menu-button:not([disabled=true]):is([open],[checked],:hover:active), - panel button:not([disabled=true]):is([open],[checked],:hover:active), - panel menulist:not([disabled=true]):is([open],[checked],:hover:active), + .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, + :not(.panel-subview-body>toolbaritem)>.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), + panel button:not([disabled=true]):is([open], [checked], :hover:active), + panel menulist:not([disabled=true]):is([open], [checked], :hover:active), .titlebar-button:not([disabled=true]):hover:active { transition-duration: 0s !important; } diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 1da2b43..dbd93c6 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -197,38 +197,30 @@ inset-inline-end: -6px !important; } -#tabbrowser-tabs[closebuttons="activetab"] :is( - .tab-icon-overlay[soundplaying]:not([crashed]), +#tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay[soundplaying]:not([crashed]), .tab-icon-overlay[muted]:not([crashed]), - .tab-icon-overlay[activemedia-blocked]:not([crashed]) -) { + .tab-icon-overlay[activemedia-blocked]:not([crashed])) { stroke: var(--tab-icon-overlay-stroke, white) !important; color: var(--tab-icon-overlay-fill, black) !important; fill-opacity: 1 !important; } -#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is( - .tab-icon-overlay[soundplaying]:not([crashed]), +#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay[soundplaying]:not([crashed]), .tab-icon-overlay[muted]:not([crashed]), - .tab-icon-overlay[activemedia-blocked]:not([crashed]) -) { + .tab-icon-overlay[activemedia-blocked]:not([crashed])) { stroke: var(--tab-icon-overlay-stroke, black) !important; color: var(--tab-icon-overlay-fill, white) !important; } -#tabbrowser-tabs[closebuttons="activetab"] :is( - .tab-icon-overlay:not([crashed])[soundplaying]:hover, +#tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay:not([crashed])[soundplaying]:hover, .tab-icon-overlay:not([crashed])[muted]:hover, - .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover -) { + .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover) { background-color: var(--tab-icon-overlay-stroke, white) !important; } -#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is( - .tab-icon-overlay:not([crashed])[soundplaying]:hover, +#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay:not([crashed])[soundplaying]:hover, .tab-icon-overlay:not([crashed])[muted]:hover, - .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover -) { + .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover) { background-color: var(--tab-icon-overlay-stroke, black) !important; } @@ -248,11 +240,11 @@ #TabsToolbar .toolbarbutton-1>.toolbarbutton-icon, #TabsToolbar .toolbarbutton-1>.toolbarbutton-badge-stack { border-radius: var(--toolbarbutton-border-radius) !important; - padding: var(--uc-toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important; + padding: var(--uc-toolbarbutton-inner-padding) calc(var(--uc-toolbarbutton-inner-padding) + 2px) !important; } #TabsToolbar .toolbarbutton-1>.toolbarbutton-icon { - width: calc(2 * var(--uc-toolbarbutton-inner-inline-padding) + 16px) !important; + width: calc(2 * (var(--uc-toolbarbutton-inner-padding) + 2px) + 16px) !important; height: calc(2 * var(--uc-toolbarbutton-inner-padding) + 16px) !important; } @@ -361,6 +353,7 @@ toolbarbutton[part="scrollbutton-down"] { #tabbrowser-tabs { margin-inline-start: -6px !important; + border-inline: none !important; } #TabsToolbar { @@ -375,22 +368,27 @@ toolbarbutton[part="scrollbutton-down"] { clip-path: inset(-4px -4px 0) !important; } -.tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background { - box-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2) !important; +:root { + --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset; + --uc-tab-shadow: + 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), + 0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2); +} + +:root[lwtheme-brighttext="true"] { + --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.75) inset inset; + --uc-tab-shadow: + 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), + 0 2px 4px rgba(0, 0, 0, 0.45), 0 0px 2px rgba(0, 0, 0, 0.2); +} + +.tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background, +#TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon { + box-shadow: var(--uc-tab-shadow) !important; } #titlebar { - box-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset !important; -} - -:root[lwtheme-brighttext="true"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background { - box-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0 2px 4px rgba(0, 0, 0, 0.45), 0 0px 2px rgba(0, 0, 0, 0.2) !important; -} - -:root[lwtheme-brighttext="true"] #titlebar { - box-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.75) inset !important; + box-shadow: var(--uc-titlebar-shadow) !important; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container { @@ -404,3 +402,64 @@ toolbarbutton[part="scrollbutton-down"] { .tab-content { padding-inline: var(--inline-tab-padding) 0 !important; } + +/* new private browsing indicator */ +:root[privatebrowsingmode="temporary"] #TabsToolbar .toolbar-items, +:root[privatebrowsingmode="temporary"] #TabsToolbar .titlebar-buttonbox-container { + position: relative; + z-index: 1; +} + +:root[privatebrowsingmode="temporary"] .titlebar-spacer[type="post-tabs"] { + display: none !important; +} + +#private-browsing-indicator-with-label { + position: relative !important; + isolation: isolate; + margin-inline: -16px -16px !important; + padding-inline: 32px 24px !important; + font-size: 12px; + color: var(--uc-private-browsing-indicator-text, var(--toolbar-bgcolor)) !important; + --uc-bg-color: var(--uc-private-browsing-indicator, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention))); + --uc-gradient: linear-gradient(to right, transparent, var(--uc-bg-color) 35%); + --uc-gradient-alt: linear-gradient(to right, transparent, var(--uc-bg-color) 25%, var(--uc-bg-color) 75%, transparent); + background: var(--uc-gradient); +} + +@media (-moz-gtk-csd-available) { + :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme) { + --uc-bg-color: -moz-accent-color !important; + color: -moz-accent-color-foreground !important; + } +} + +@media (-moz-platform: windows), +(-moz-gtk-csd-available) { + @media not (-moz-gtk-csd-reversed-placement) { + :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"])~#TabsToolbar #private-browsing-indicator-with-label { + background: var(--uc-gradient-alt); + } + } +} + +#private-browsing-indicator-with-label .private-browsing-indicator-icon { + height: 24px !important; + width: 24px !important; +} + +:root, +:root[lang^="en"] { + --uc-string-private: "Private"; +} + +/* Change "Private Browsing" text to "Private" (English locale only) */ +:root:is([lang^="en"]) #private-browsing-indicator-with-label>label { + display: none !important; +} + +:root:is([lang^="en"]) #private-browsing-indicator-with-label::after { + content: var(--uc-string-private); + margin-block: 1px 2px; + margin-inline: 6px 5px; +} diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css index e679749..e9f4bee 100644 --- a/chrome/toolbar/urlbar.css +++ b/chrome/toolbar/urlbar.css @@ -1,7 +1,7 @@ /* EdgeFr-Fox by bmFtZQ - urlbar.css */ :root { - --urlbar-min-height: 28px !important; + --urlbar-min-height: 24px !important; --urlbarView-item-inline-padding: 14px !important; --urlbar-icon-border-radius: var(--toolbarbutton-border-radius) !important; --urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important; @@ -192,10 +192,9 @@ } :is(:root:not(:-moz-lwtheme), -:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"], -:root[lwt-default-theme-in-dark-mode="true"], -:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] -) #urlbar-search-mode-indicator { + :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"], + :root[lwt-default-theme-in-dark-mode="true"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34)"]) #urlbar-search-mode-indicator { background-color: var(--urlbar-box-hover-bgcolor) !important; }