diff --git a/README.md b/README.md index 01caae7..500199e 100644 --- a/README.md +++ b/README.md @@ -14,23 +14,42 @@ 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`~~ **(Not Implemented Yet!)** ##### Recommended: 1. `browser.tabs.tabMinWidth` = `66` 2. `browser.tabs.tabClipWidth` = `66` - + + 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** -## Tweaks -Certain tweaks can be applied to the theme, to enable them navigate to `about:config` and create a boolean key for each tweak and set it to `true` and restart the browser. +## Screenshots (Windows) +|Theme|Light|Dark| +|-|-|-| +|Default|![Light](screenshots/light.png)|![Dark](screenshots/dark.png)| +|Floating Tabs|![Light, Floating Tabs](screenshots/light-floating-tabs.png)|![Dark, Floating Tabs](screenshots/dark-floating-tabs.png)| +|Mica|![Light, Mica](screenshots/light-mica.png)|![Dark, Mica](screenshots/dark-mica.png)| +|Mica and Floating Tabs|![Light, Mica and Floating Tabs](screenshots/light-mica-floating-tabs.png)|![Dark, Mica and Floating Tabs](screenshots/dark-mica-floating-tabs.png)| -To disable a tweak, set the key to false or delete it and restart the browser. +## 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. |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.**| +|`uc.tweak.win11-mica`| + |force tab background colour to `--toolbar-bg` (useful for Proton themes)| |-| |**NOTE: can cause readability issues with some themes! (eg. white text on white bg)**| @@ -49,11 +68,22 @@ To disable a tweak, set the key to false or delete it and restart the browser. |-| |`uc.tweak.less-permissions-button-padding`| +## Mica Tweak Instructions (Windows 11 Only) +1. Download and install [Mica For Everyone](https://github.com/MicaForEveryone/MicaForEveryone). +2. Create a custom process rule with the following: + 1. Name: `firefox` + 2. Titlebar Color: `System` + 3. Backdrop Type: `Mica` +3. Enable tweak in `about:config`: `uc.tweak.win11-mica` +4. Restart Firefox. + ## Acknowledgements [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox) [Microsoft](https://github.com/microsoft) - [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) +[KibSquib48](https://github.com/KibSquib48) - [MicaFox](https://github.com/KibSquib48/MicaFox) + --- Old version can be found [here](https://github.com/bmFtZQ/edge-frfox/tree/v91.0-archive). diff --git a/chrome/global/colors.css b/chrome/global/colors.css index a365c91..3c35531 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -138,14 +138,6 @@ background-color: #252525 !important; } -/* needed for theming the private browsing indicator */ -/* :root:not([style*="--button-primary-bgcolor"]) { - --button-primary-bgcolor: unset !important; - --button-primary-hover-bgcolor: unset !important; - --button-primary-active-bgcolor: unset !important; - --button-primary-color: unset !important; -} */ - /* make the titlebar buttons black/white on default themes */ :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox { color: #000 !important; diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css index bb3c9cb..f556b11 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -44,3 +44,153 @@ browsing indicator) */ margin-inline-start: -8px !important; } } + +@supports -moz-bool-pref("uc.tweak.floating-tabs") { + :root:not(:-moz-lwtheme) { + --lwt-accent-color: #f3f3f3 !important; + --lwt-accent-color-inactive: unset !important; + --toolbar-bgcolor: #fff !important; + } + + :root[lwt-default-theme-in-dark-mode="true"] { + --toolbar-bgcolor: #4D4D4D !important; + --lwt-accent-color-inactive: unset !important; + --chrome-content-separator-color: #535353 !important; + } + + /* remove toolbar bg */ + #nav-bar, + #PersonalToolbar { + background-color: transparent !important; + } + + /* invert bottom corner radius for tabs */ + .tab-background::before, + .tab-background::after { + display: none !important; + } + + .tab-background { + border-radius: var(--tab-border-radius) !important; + } + + /* adjust spacing of area above tabs */ + @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root[sizemode="maximized"] #titlebar { + --tab-block-margin: 4px !important; + } + } + + :root:is([inFullscreen], :not([tabsintitlebar])) #titlebar { + --tab-block-margin: 4px !important; + } + + @supports -moz-bool-pref("uc.tweak.disable-drag-space") { + :root #titlebar { + --tab-block-margin: 4px !important; + } + } + + :root #titlebar { + --tab-min-height: 33px !important; + } + + /* remove navbar shadow */ + #titlebar, + :root[lwtheme-brighttext="true"] #titlebar { + box-shadow: none !important; + } + + /* move tab shadow behind urlbar */ + .tabbrowser-tab[visuallyselected="true"], + #nav-bar { + z-index: 2 !important; + } + + /* tab shadow adjustments */ + .tabbrowser-tab { + overflow-clip-margin: 8px !important; + } + + .tabbrowser-tab, + #TabsToolbar #tabs-newtab-button, + /* no ::part workaround - may have side effects */ + #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), + #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) { + margin-bottom: 8px !important; + } + + #tabbrowser-arrowscrollbox { + margin-bottom: -8px !important; + } + + .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background { + box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 0px 2px rgba(0, 0, 0, 0.1) !important; + } + + :root[lwtheme-brighttext="true"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background { + box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25), 0 0px 2px rgba(0, 0, 0, 0.1) !important; + } +} + +@media (-moz-windows-compositor) { + @supports -moz-bool-pref("uc.tweak.win11-mica") { + /* enable mica appearance */ + #main-window:not(:-moz-lwtheme), + #main-window[lwt-default-theme-in-dark-mode="true"] { + appearance: -moz-win-glass !important; + background: transparent !important; + } + + #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) { + background: transparent !important; + } + + @supports -moz-bool-pref("uc.tweak.floating-tabs") { + #navigator-toolbox:not(:-moz-lwtheme), + #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) { + background: transparent !important; + } + } + + /* force tab color (for the tab transparency) */ + .tab-background:is([selected], [multiselected]) { + background: var(--toolbar-bgcolor) !important; + } + + /* color adjustments */ + :root:not(:-moz-lwtheme):not(:-moz-window-inactive) { + --lwt-accent-color: #00000020 !important; + } + + @supports -moz-bool-pref("uc.tweak.floating-tabs") { + :root:not(:-moz-lwtheme):not(:-moz-window-inactive) { + --toolbar-bgcolor: #ffffffcc !important; + } + + :root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) { + --toolbar-bgcolor: #ffffff20 !important; + } + } + + /* line up buttons with duplicate icons from -moz-win-glass */ + .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; + } + + .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) { + list-style-image: none !important; + } + + :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-button { + padding-block: 7px 9px !important; + } + + :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-close { + padding-block: 7px 9px !important; + padding-right: 19px !important; + } + } +} diff --git a/screenshots/dark-floating-tabs.png b/screenshots/dark-floating-tabs.png new file mode 100644 index 0000000..85e6d8d Binary files /dev/null and b/screenshots/dark-floating-tabs.png differ diff --git a/screenshots/dark-mica-floating-tabs.png b/screenshots/dark-mica-floating-tabs.png new file mode 100644 index 0000000..bd47f05 Binary files /dev/null and b/screenshots/dark-mica-floating-tabs.png differ diff --git a/screenshots/dark-mica.png b/screenshots/dark-mica.png new file mode 100644 index 0000000..d64f80a Binary files /dev/null and b/screenshots/dark-mica.png differ diff --git a/screenshots/dark.png b/screenshots/dark.png new file mode 100644 index 0000000..74bb0e1 Binary files /dev/null and b/screenshots/dark.png differ diff --git a/screenshots/light-floating-tabs.png b/screenshots/light-floating-tabs.png new file mode 100644 index 0000000..c35af07 Binary files /dev/null and b/screenshots/light-floating-tabs.png differ diff --git a/screenshots/light-mica-floating-tabs.png b/screenshots/light-mica-floating-tabs.png new file mode 100644 index 0000000..594a44c Binary files /dev/null and b/screenshots/light-mica-floating-tabs.png differ diff --git a/screenshots/light-mica.png b/screenshots/light-mica.png new file mode 100644 index 0000000..2deca54 Binary files /dev/null and b/screenshots/light-mica.png differ diff --git a/screenshots/light.png b/screenshots/light.png new file mode 100644 index 0000000..4efd75e Binary files /dev/null and b/screenshots/light.png differ