Siklos/edge-frfox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add new private browsing indicator

Browse source 
also:
 - removes tweaks "fxa-button-as-private-indicator" and
   "less-permissions-button-padding"
 - reformat README.md to become easier to read
 - add unified extensions icon (beta and nightly)
 - better integrate Firefox view button
This commit is contained in:
bmFtZQ 2022-12-14 23:28:51 +08:00
parent 49ea90b007
commit 5ed069c80a
7 changed files with 564 additions and 572 deletions
Download patch file Download diff file Expand all files Collapse all files

82
README.md
View file

@ -1,37 +1,41 @@
# 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)
<!-- use <img> element to set a maximum width -->
<img src="screenshots/thumbnail.png" alt="thumbnail screenshot" title="Screenshot taken with macOS Monterey / Firefox Nightly 96.0a1 (2021-11-30)" width="800">
## 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)|
| ----------------------------------- | --------------------------------------- | -------------------------------------- |
| 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.
@ -39,67 +43,58 @@ Certain tweaks can be applied to the theme, to enable them navigate to `about:co
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` |
| hide Firefox logo on newtab page |
|-|
| -------------------------------- |
| `uc.tweak.hide-newtab-logo` |
| disable drag space above tabs |
|-|
| ----------------------------- |
| `uc.tweak.disable-drag-space` |
| 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.**|
| 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) |
|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` |
| remove tab separators |
|-|
| -------------------------------- |
| `uc.tweak.remove-tab-separators` |
|remove extra padding from permissions button (older functionality)|
|-|
|`uc.tweak.less-permissions-button-padding`|
| 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` |
## 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)
---
<!-- links -->
[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).
<!-- light mode screenshot links -->
[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
<!-- dark mode screenshot links -->
[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

12
chrome/global/colors.css
View file

@ -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;
}
@ -389,9 +385,7 @@ 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]) {

79
chrome/global/tweaks.css
View file

@ -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;
}
}
}

81
chrome/icons/icons.css
View file

@ -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,6 +545,10 @@ 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") {
@ -646,6 +645,7 @@ menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon {
#context-delete,
.customize-context-removeExtension,
.unified-extensions-context-menu-remove-extension,
.textbox-contextmenu menuitem[cmd*="delete"],
menuitem[id="placesContext_deleteBookmark"],
menuitem[id="placesContext_deleteFolder"],
@ -852,7 +852,8 @@ menuitem[id="placesContext_show:info"] {
menuitem[id="placesContext_showAllBookmarks"],
#BMB_bookmarksShowAllTop,
#BMB_bookmarksShowAll,
.customize-context-manageExtension {
.customize-context-manageExtension,
.unified-extensions-context-menu-manage-extension {
--menu-image: url("manage.svg");
}
@ -883,7 +884,8 @@ menuitem[id="placesContext_new:separator"] {
--menu-image: url("close.svg");
}
.customize-context-reportExtension {
.customize-context-reportExtension,
.unified-extensions-context-menu-report-extension {
--menu-image: url("report.svg");
}
}
@ -891,40 +893,43 @@ menuitem[id="placesContext_new:separator"] {
/* 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;
}

44
chrome/toolbar/navbar.css
View file

@ -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,7 +61,6 @@
.urlbar-page-action,
.identity-box-button,
#tracking-protection-icon-container,
#fxa-toolbar-menu-button,
panel button,
panel menulist,
.titlebar-button {
@ -117,7 +74,6 @@
.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),
.titlebar-button:not([disabled=true]):hover:active {

121
chrome/toolbar/tabbar.css
View file

@ -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;
}

5
chrome/toolbar/urlbar.css
View file

@ -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;
@ -194,8 +194,7 @@
: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(28, 27, 34)"]) #urlbar-search-mode-indicator {
background-color: var(--urlbar-box-hover-bgcolor) !important;
}