diff --git a/README.md b/README.md
index c8eefad..f0673db 100644
--- a/README.md
+++ b/README.md
@@ -27,93 +27,90 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch
### Optional:
* 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).
+ Additional tweaks can also be applied to the theme, such as Floating Tabs, rounded browser corners and more. See [Tweaks](#tweaks).
**Note: Most frequently tested on macOS**
## Screenshots
-| 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] |
+| 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] |
+| 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 |
+| Enable Edge style floating tabs |
+| --------------------------------------------------------------- |
+| `uc.tweak.floating-tabs` |
+| **OPTIONAL1: Make the top and bottom margins of the tab equal** |
+| `uc.tweak.floating-tabs.equal-margin` |
+
+| Enable rounded corners |
+| -------------------------- |
+| `uc.tweak.rounded-corners` |
+
+| Hide Tabs Bar (Useful when using vertical tabs extensions such as Sidebery, Tree Style Tab, etc.) |
+| ------------------------------------------------------------------------------------------------- |
+| **NOTE: At the moment, this only supports macOS and Windows.** |
+| `uc.tweak.hide-tabs-bar` |
+| **OPTIONAL: Only enable in fullscreen mode (currently: macOS Only!)** |
+| `uc.tweak.hide-tabs-bar.only-when-maximised` |
+
+| 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 |
+| Hide forward button when it's disabled (like in Edge) |
+| ------------------------------------------------------ |
+| `uc.tweak.hide-forward-button` |
+
+| Hide Firefox logo on newtab page |
| -------------------------------- |
| `uc.tweak.hide-newtab-logo` |
-| disable drag space above tabs |
+| Disable drag space above tabs |
| ----------------------------- |
| `uc.tweak.disable-drag-space` |
-| enable rounded corners |
-| -------------------------- |
-| `uc.tweak.rounded-corners` |
-
-| enable Edge style floating tabs |
-| ---------------------------------------------------------------------------------------------------------------- |
-| `uc.tweak.floating-tabs` |
-| **OPTIONAL1: Make the top and bottom margins of the tab equal** |
-| `uc.tweak.floating-tabs.equal-margin` |
-| **OPTIONAL2: Hide the separator of adjacent tabs (need to wait for Firefox support, or forced enable with bug)** |
-| `layout.css.has-selector.enabled` |
-
-| enable Mica toolbar background *(Windows 11 only)* |
-| ------------------------------------------------------------------- |
-| **BROKEN ON NEWER VERSIONS OF FIREFOX** |
-| **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) |
+| 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` |
|  (Left: OFF, Right: ON) |
-| 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, Bookmark) vertically |
+| --------------------------------------------------------------------------------- |
+| **NOTE: labels are only shown in the English language.** |
+| `uc.tweak.vertical-context-navigation` |
-| remove tab separators |
+| Remove tab separators |
| -------------------------------- |
| `uc.tweak.remove-tab-separators` |
-| use Firefox's default context menu font-size (only applies to Windows) |
+| Use Firefox's default context menu font-size (only applies to Windows) |
| ---------------------------------------------------------------------- |
| `uc.tweak.smaller-context-menu-text` |
-| disable custom context menus |
+| Disable custom context menus |
| ------------------------------ |
| `uc.tweak.revert-context-menu` |
-| if a tab's close button is hidden, show it when hovering over tab |
+| 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)
-NOTE: Broken on newer versions of Firefox.
-1. Download and install [Mica For Everyone][2].
-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.
+## Mica Tweak Notice
+Mica is broken due to changes made in the Firefox 115 update, Mica has now been
+removed from this theme.
+
+If you still have `uc.tweak.win11-mica` set in `about:config` you can safely
+delete it
## Acknowledgements
[muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox)
@@ -124,19 +121,13 @@ NOTE: Broken on newer versions of Firefox.
[1]: https://github.com/lassekongo83/adw-gtk3
-[2]: https://github.com/MicaForEveryone/MicaForEveryone
-[3]: #mica-tweak-instructions-windows-11-only
[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/content/common.css b/chrome/content/common.css
index 46d324a..7491148 100644
--- a/chrome/content/common.css
+++ b/chrome/content/common.css
@@ -3,77 +3,51 @@
/* colours */
@-moz-document url-prefix(about:) {
:root {
- --in-content-page-color: #252525 !important;
- --in-content-page-background: #f7f7f7 !important;
- --in-content-deemphasized-text: #666 !important;
- --in-content-box-background: #fff !important;
- --in-content-box-background-odd: rgba(0, 0, 0, 0.05) !important;
- --in-content-box-info-background: #f7f7f7 !important;
- --in-content-icon-color: #666 !important;
- --in-content-accent-color: #006CBE !important;
- --in-content-accent-color-active: #1683D8 !important;
- --in-content-border-hover: rgba(0, 0, 0, 0.5) !important;
+ --in-content-page-color: light-dark(#252525, #fff) !important;
+ --in-content-page-background: light-dark(#f7f7f7, #252525) !important;
+ --in-content-deemphasized-text: light-dark(#666, #bbb) !important;
+ --in-content-box-background: light-dark(#fff, #333) !important;
+ --in-content-box-background-odd: light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .05)) !important;
+ --in-content-box-info-background: light-dark(#f7f7f7, rgb(255 255 255 / 0.15)) !important;
+ --in-content-icon-color: light-dark(#666, #fff) !important;
+ --in-content-accent-color: light-dark(#006CBE, #75B6E8) !important;
+ --in-content-accent-color-active: light-dark(#1683D8, #4C98D1) !important;
+ --in-content-border-hover: light-dark(rgb(0 0 0 / .5), rgb(255 255 255 / .3)) !important;
--in-content-border-invalid: var(--red-50) !important;
- --in-content-border-color: #bebebe !important;
- --in-content-error-text-color: #FF848A !important;
- --in-content-link-color: #0078D4 !important;
- --in-content-link-color-hover: #006CBE !important;
- --in-content-link-color-active: #0749AC !important;
- --in-content-link-color-visited: #0078D4 !important;
+ --in-content-border-color: light-dark(#bebebe, rgb(255 255 255 / .2)) !important;
+ --in-content-error-text-color: light-dark(#FF848A, #FF9AA2) !important;
+ --in-content-link-color: light-dark(#0078D4, #75B6E8) !important;
+ --in-content-link-color-hover: light-dark(#006CBE, #63ADE5) !important;
+ --in-content-link-color-active: light-dark(#0749AC, #4C98D1) !important;
+ --in-content-link-color-visited: light-dark(#0078D4, #75B6E8) !important;
+ --link-color: var(--in-content-link-color) !important;
+ --link-color-hover: var(--in-content-link-color-hover) !important;
+ --link-color-active: var(--in-content-link-color-active) !important;
+ --link-color-visited: var(--in-content-link-color-visited) !important;
--in-content-button-text-color: var(--in-content-text-color) !important;
--in-content-button-text-color-hover: var(--in-content-text-color) !important;
--in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important;
- --in-content-button-background: #EDEDED !important;
- --in-content-button-background-hover: #e5e5e5 !important;
- --in-content-button-background-active: #d5d5d5 !important;
- --in-content-primary-button-text-color: #fff !important;
- --in-content-primary-button-background: #0061e0 !important;
- --in-content-primary-button-background-hover: #0250bb !important;
- --in-content-primary-button-background-active: #053e94 !important;
- --in-content-danger-button-background: #DF4951 !important;
- --in-content-danger-button-background-hover: #EA656C !important;
- --in-content-danger-button-background-active: #BB353C !important;
- --in-content-focus-outline-color: color-mix(in srgb, #0055D7 50%, transparent) !important;
- --in-content-table-background: #f7f7f7 !important;
+ --in-content-button-background: light-dark(#EDEDED, #3B3B3B) !important;
+ --in-content-button-background-hover: light-dark(#e5e5e5, #545454) !important;
+ --in-content-button-background-active: light-dark(#d5d5d5, #606060) !important;
+ --in-content-primary-button-text-color: light-dark(#fff, #fff) !important;
+ --in-content-primary-button-background: light-dark(#0061e0, #006CBE) !important;
+ --in-content-primary-button-background-hover: light-dark(#0250bb, #0078D4) !important;
+ --in-content-primary-button-background-active: light-dark(#053e94, #005CA3) !important;
+ --color-accent-primary: light-dark(#0078D4, #006CBE) !important;
+ --color-accent-primary-hover: light-dark(#006CBE, #0078D4) !important;
+ --color-accent-primary-active: light-dark(#0749AC, #005CA3) !important;
+ --in-content-danger-button-background: light-dark(#DF4951, #E12424) !important;
+ --in-content-danger-button-background-hover: light-dark(#EA656C, #F94343) !important;
+ --in-content-danger-button-background-active: light-dark(#BB353C, #AA1E1E) !important;
+ --in-content-focus-outline-color: light-dark(rgb(0 85 215 / .5), #63ADE5) !important;
+ --focus-outline-color: var(--in-content-focus-outline-color) !important;
+ --in-content-table-background: light-dark(#f7f7f7, #252525) !important;
--in-content-text-color: var(--in-content-page-color) !important;
- scrollbar-color: rgba(37, 37, 37, 0.4) #f7f7f7 !important;
- }
-
- @media (prefers-color-scheme: dark) {
- :root {
- --in-content-page-background: #252525 !important;
- --in-content-page-color: #fff !important;
- --in-content-deemphasized-text: #bbb !important;
- --in-content-box-background: #333 !important;
- --in-content-box-background-odd: rgba(255, 255, 255, 0.05) !important;
- --in-content-box-info-background: rgba(255, 255, 255, 0.15) !important;
- --in-content-border-color: rgba(255, 255, 255, 0.2) !important;
- --in-content-border-hover: rgba(255, 255, 255, 0.3) !important;
- --in-content-border-invalid: rgb(255, 132, 139) !important;
- --in-content-error-text-color: #FF9AA2 !important;
- --in-content-button-background: #3B3B3B !important;
- --in-content-button-background-hover: #545454 !important;
- --in-content-button-background-active: #606060 !important;
- --in-content-icon-color: #fff !important;
- --in-content-primary-button-text-color: #fff !important;
- --in-content-primary-button-background: #006CBE !important;
- --in-content-primary-button-background-hover: #0078D4 !important;
- --in-content-primary-button-background-active: #005CA3 !important;
- --in-content-danger-button-background: #E12424 !important;
- --in-content-danger-button-background-hover: #F94343 !important;
- --in-content-danger-button-background-active: #AA1E1E !important;
- --in-content-focus-outline-color: #63ADE5 !important;
- --in-content-table-background: #252525 !important;
- --in-content-accent-color: #75B6E8 !important;
- --in-content-accent-color-active: #4C98D1 !important;
- --in-content-link-color: #75B6E8 !important;
- --in-content-link-color-hover: #63ADE5 !important;
- --in-content-link-color-active: #4C98D1 !important;
- --in-content-link-color-visited: var(--in-content-link-color) !important;
- --card-outline-color: #555 !important;
- --dialog-warning-text-color: var(--red-40) !important;
- scrollbar-color: rgba(255, 255, 255, .4) #252525 !important;
- }
+ --border-interactive-color: light-dark(#929292, #858585) !important;
+ scrollbar-color:
+ light-dark(rgb(37 37 37 / .4), rgb(255 255 255 / .4))
+ light-dark(#f7f7f7, #252525) !important;
}
}
@@ -110,6 +84,16 @@ url-prefix(about:addons) {
button.tab-button[selected]:hover {
border-block-color: transparent currentColor !important;
}
+
+ .toggle-button {
+ --toggle-dot-margin: 4px !important;
+ --toggle-width: 40px !important;
+ --toggle-height: 20px !important;
+ --toggle-background-color: transparent !important;
+ --toggle-dot-background-color: var(--in-content-page-color) !important;
+ --toggle-dot-background-color-on-pressed: #fff !important;
+ --toggle-dot-transform-x: calc(var(--toggle-width) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) - var(--toggle-dot-width)) !important;
+ }
}
/* fix page flashes when loading some websites */
diff --git a/chrome/content/newtab.css b/chrome/content/newtab.css
index 399cee2..d8ec514 100644
--- a/chrome/content/newtab.css
+++ b/chrome/content/newtab.css
@@ -23,7 +23,7 @@ url-prefix("about:firefoxview") {
--newtab-wordmark-color: #737373 !important;
--newtab-status-success: #50B080 !important;
--newtab-status-error: #FF848A !important;
- --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1) !important;
+ --newtab-inner-box-shadow-color: rgb(0 0 0 / .1) !important;
--newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent) !important;
--newtab-text-emphasis-background: #FFED32 !important;
--newtab-text-emphasis-text-color: #000 !important;
@@ -73,7 +73,7 @@ url-prefix("about:home") {
white-space: nowrap !important;
text-overflow: ellipsis !important;
--elevation: 4;
- box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, 0.11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, 0.13) !important;
+ box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / .11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / .13) !important;
}
.search-handoff-button:hover {
@@ -129,7 +129,7 @@ url-prefix("about:home") {
.card-outer .card,
.ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
+ box-shadow: 0 1px 4px rgb(0 0 0 / .3) !important;
}
.card-outer .card-preview-image-outer,
@@ -147,7 +147,7 @@ url-prefix("about:home") {
padding: 30px !important;
}
- @supports -moz-bool-pref("uc.tweak.hide-newtab-logo") {
+ @media (-moz-bool-pref: "uc.tweak.hide-newtab-logo") {
.logo-and-wordmark {
display: none !important;
}
@@ -161,24 +161,11 @@ url-prefix("about:home") {
/* private browsing newtab */
@-moz-document url-prefix(about:privatebrowsing) {
:root {
- --uc-wordmark-color: #737373;
- --uc-background-color-secondary: #fff;
- }
+ --uc-wordmark-color: light-dark(#737373, #fff);
+ --uc-background-color-secondary: light-dark(#fff, #4a4a4a);
- @media (prefers-color-scheme: dark) {
- :root {
- --uc-wordmark-color: #fff;
- --uc-background-color-secondary: #4a4a4a;
- }
- }
-
- @supports -moz-bool-pref("browser.theme.dark-private-windows") {
- html.private {
- --in-content-page-color: white !important;
- --in-content-page-background: #252525 !important;
- --in-content-focus-outline-color: #63ADE5 !important;
- --uc-background-color-secondary: #4a4a4a !important;
- --uc-wordmark-color: #fff !important;
+ @media (-moz-bool-pref: "browser.theme.dark-private-windows") {
+ color-scheme: dark !important;
}
}
@@ -195,7 +182,7 @@ url-prefix("about:home") {
border-radius: 99px !important;
padding-inline-start: 48px !important;
--elevation: 4;
- box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, 0.11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, 0.13) !important;
+ box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / .11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / .13) !important;
}
.search-handoff-button:hover {
@@ -238,7 +225,7 @@ url-prefix("about:home") {
}
}
-@supports -moz-bool-pref("uc.tweak.newtab-background") {
+@media (-moz-bool-pref: "uc.tweak.newtab-background") {
@-moz-document url(about:newtab),
url(about:home),
url(about:privatebrowsing),
@@ -248,8 +235,8 @@ url-prefix("about:home") {
have a higher priority */
--bg-0: url(../background-0.jpg), url(../background-0.png);
--bg-1: url(../background-1.jpg), url(../background-1.png);
- --newtab-element-hover-color: rgba(239, 239, 239, 0.3) !important;
- --newtab-element-active-color: rgba(239, 239, 239, 0.45) !important;
+ --newtab-element-hover-color: rgb(239 239 239 / .3) !important;
+ --newtab-element-active-color: rgb(239 239 239 / .45) !important;
--text-shadow: 0 1px 2px #000;
--icon-shadow: drop-shadow(0 0.3px 0.6px #000);
background-color: #252525 !important;
@@ -259,15 +246,14 @@ url-prefix("about:home") {
background-attachment: fixed !important;
}
- body[lwt-newtab][lwt-newtab-brighttext],
- :root[lwt-newtab][lwt-newtab-brighttext] body,
+ :root[lwt-newtab-brighttext] body,
:root.private body {
background-image: var(--bg-1), var(--bg-0) !important;
- --newtab-element-hover-color: rgba(66, 66, 66, 0.4) !important;
- --newtab-element-active-color: rgba(66, 66, 66, 0.55) !important;
+ --newtab-element-hover-color: rgb(66 66 66 / .4) !important;
+ --newtab-element-active-color: rgb(66 66 66 / .55) !important;
}
- @supports not -moz-bool-pref("browser.theme.dark-private-windows") {
+ @media not (-moz-bool-pref: "browser.theme.dark-private-windows") {
:root.private body {
background-image: var(--bg-0) !important;
}
diff --git a/chrome/global/browser.css b/chrome/global/browser.css
index 647a4bd..dab9cb5 100644
--- a/chrome/global/browser.css
+++ b/chrome/global/browser.css
@@ -1,27 +1,79 @@
/* Edge-Frfox - browser.css */
-@supports (-moz-bool-pref("uc.tweak.floating-tabs")) {
+@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
:root {
--browser-frame-bgcolor: var(--lwt-accent-color);
}
}
-@supports (not -moz-bool-pref("uc.tweak.floating-tabs")) {
+@media not (-moz-bool-pref: "uc.tweak.floating-tabs") {
:root {
--browser-frame-bgcolor: var(--toolbar-bgcolor);
}
}
-@supports (-moz-bool-pref("uc.tweak.rounded-corners")) {
- :root #browser>#appcontent {
- margin: 0px 3px 3px 3px;
- border-radius: 8px;
- overflow: hidden;
- border: 1.25px solid rgba(0, 0, 0, 0.05);
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
+ /* Fix changes to the bookmarks bar made in Firefox 120 */
+ :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel,
+ :root[BookmarksToolbarOverlapsBrowser] #sidebar-box {
+ padding-top: 0 !important;
+ }
+
+ :root[BookmarksToolbarOverlapsBrowser] #appcontent,
+ :root[BookmarksToolbarOverlapsBrowser] #sidebar-box {
+ margin-top: var(--bookmarks-toolbar-overlapping-browser-height);
+ }
+
+ :root {
+ --uc-tweak-rounded-corners-padding: 3px;
+ --uc-tweak-rounded-corners-border: 1px solid rgb(0 0 0 / .05);
+ --uc-tweak-rounded-corners-radius: 8px;
+ --uc-tweak-rounded-corners-shadow: 0px 1px 1px rgb(0 0 0 / .1);
+
+ & #browser:not([style*="--sidebar-border-color"]) {
+ --sidebar-border-color: light-dark(#bfbfbf80, #595959) !important;
+ }
+ }
+
+ /* disable rounded corners in fullscreen, only if the toolbar is hidden */
+ :root[inFullscreen] #navigator-toolbox:where([style*="margin-top"], [fullscreenShouldAnimate]) + #browser,
+ :root[inDOMFullscreen] #browser {
+ --uc-tweak-rounded-corners-padding: 0;
+ --uc-tweak-rounded-corners-border: none;
+ --uc-tweak-rounded-corners-radius: 0;
+ --uc-tweak-rounded-corners-shadow: none;
+ }
+
+ #appcontent {
+ margin-inline: var(--uc-tweak-rounded-corners-padding) !important;
+ margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
+ border-radius: var(--uc-tweak-rounded-corners-radius) !important;
+ overflow: hidden !important;
+ border: var(--uc-tweak-rounded-corners-border) !important;
+ box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
}
- :root #browser {
+ /* apply rounded corners to sidebar */
+ #sidebar-box {
+ margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
+ margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
+ border-radius: var(--uc-tweak-rounded-corners-radius) !important;
+ overflow: hidden !important;
+ border: var(--uc-tweak-rounded-corners-border) !important;
+ box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
+
+ &[positionend] {
+ margin-inline-start: 0 !important;
+ margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
+ }
+ }
+
+ /* remove sidebar border */
+ #sidebar-splitter {
+ border-inline-width: 0 !important;
+ }
+
+ #browser {
background-color: var(--browser-frame-bgcolor);
}
}
diff --git a/chrome/global/colors.css b/chrome/global/colors.css
index a4219dd..1254ddf 100644
--- a/chrome/global/colors.css
+++ b/chrome/global/colors.css
@@ -7,6 +7,7 @@
--lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important;
--lwt-text-color: light-dark(#000, #E5E5E5) !important;
--toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important;
+ --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important;
--toolbar-color: light-dark(#000, #fff) !important;
--toolbarbutton-icon-fill: light-dark(#000, #fff) !important;
--chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important;
@@ -14,17 +15,18 @@
--toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important;
--lwt-tab-text: var(--toolbar-color) !important;
--lwt-selected-tab-background-color: unset !important;
- --tab-selected-bgcolor: unset !important;
+ --tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
--toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important;
--toolbar-field-color: light-dark(#000, #fff) !important;
--toolbar-field-border-color: light-dark(#0000, #0000) !important;
--toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
--toolbar-field-focus-color: var(--toolbar-field-color) !important;
--toolbar-field-focus-border-color: light-dark(#0055D7, #63ADE5) !important;
- --urlbar-hover-highlight-color: light-dark(rgba(192, 192, 192, 0.5), rgba(128, 128, 128, 0.5)) !important;
- --urlbar-box-bgcolor: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.11)) !important;
- --urlbar-box-hover-bgcolor: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.11)) !important;
- --urlbar-box-focus-bgcolor: light-dark(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.28)) !important;
+ --link-color: light-dark(#0078D4, #75B6E8) !important;
+ --urlbar-hover-highlight-color: light-dark(rgb(192 192 192 / .5), rgb(128 128 128 / .5)) !important;
+ --urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important;
+ --urlbar-box-hover-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important;
+ --urlbar-box-focus-bgcolor: light-dark(rgb(0 0 0 / .22), rgb(255 255 255 / .28)) !important;
--urlbar-icon-fill-opacity: 1 !important;
--urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important;
--lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
@@ -59,20 +61,23 @@
--panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important;
--focus-outline-color: light-dark(#0055D7, #63ADE5) !important;
--panel-shortcut-color: inherit !important;
- --uc-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
- --toolbarbutton-hover-background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)) !important;
- --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.16)) !important;
+ --uc-urlbar-shadow: 0 0 4px rgb(0 0 0 / .1);
+ --toolbarbutton-hover-background: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .1)) !important;
+ --toolbarbutton-active-background: light-dark(rgb(0 0 0 / .12), rgb(255 255 255 / .16)) !important;
--uc-private-browsing-indicator: var(--button-primary-bgcolor);
--uc-private-browsing-indicator-text: var(--button-primary-color);
--tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important;
--tab-icon-overlay-fill: light-dark(#252525, #fff) !important;
+ --toolbarseparator-color: color-mix(in srgb, currentColor 40%, transparent) !important;
}
/* ensure that dark mode is enabled completely in private browsing mode. */
-:root[privatebrowsingmode="temporary"],
-:root[privatebrowsingmode="temporary"] #nav-bar,
-:root[privatebrowsingmode="temporary"] #PersonalToolbar {
- color-scheme: dark !important;
+@media (-moz-bool-pref: "browser.theme.dark-private-windows") {
+ :root[privatebrowsingmode="temporary"],
+ :root[privatebrowsingmode="temporary"] #nav-bar,
+ :root[privatebrowsingmode="temporary"] #PersonalToolbar {
+ color-scheme: dark !important;
+ }
}
#urlbar {
@@ -88,14 +93,19 @@
/* make the titlebar buttons black/white on default themes */
:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
- color: light-dark(#000, #fff) !important;
+ color: var(--toolbar-color) !important;
}
#statuspanel-label {
background-color: var(--toolbar-field-focus-background-color) !important;
color: var(--toolbar-field-focus-color) !important;
border-color: transparent !important;
- box-shadow: 0 2px 5px #0004, 0 0 0 1px light-dark(#0002, #0004) !important;
+ box-shadow: 0 2px 5px #0002, 0 0 0 1px light-dark(#0001, #0002) !important;
+ border-radius: 0 4px 0 0 !important;
+
+ #statuspanel[mirror] & {
+ border-radius: 4px 0 0 0 !important;
+ }
}
@media (-moz-platform: windows) {
@@ -128,70 +138,38 @@
/* library window theme */
window#places {
- --organizer-color: #000 !important;
- --organizer-deemphasized-color: #666 !important;
- --organizer-toolbar-background: #f7f7f7 !important;
- --organizer-pane-background: #f7f7f7 !important;
- --organizer-content-background: #f7f7f7 !important;
- --organizer-hover-background: #00000025 !important;
- --organizer-selected-background: #006CBE80 !important;
- --organizer-outline-color: #0055D7a0 !important;
- --organizer-toolbar-field-background: #fff !important;
- --organizer-toolbar-field-background-focused: #fff !important;
- --organizer-border-color: #bfbfbf !important;
- scrollbar-color: #0006 #f7f7f740 !important;
+ --organizer-color: light-dark(#000, #fff) !important;
+ --organizer-deemphasized-color: light-dark(#666, #bbb) !important;
+ --organizer-toolbar-background: light-dark(#f7f7f7, #3B3B3B) !important;
+ --organizer-pane-background: light-dark(#f7f7f7, #2B2B2B) !important;
+ --organizer-content-background: light-dark(#f7f7f7, #1C1C1C) !important;
+ --organizer-hover-background: light-dark(#00000025, #ffffff25) !important;
+ --organizer-selected-background: light-dark(#006CBE80, #006CBE80) !important;
+ --organizer-outline-color: light-dark(#0055D7a0, #63ADE5) !important;
+ --organizer-toolbar-field-background: light-dark(#fff, #2B2B2B) !important;
+ --organizer-toolbar-field-background-focused: light-dark(#fff, #2B2B2B) !important;
+ --organizer-border-color: light-dark(#bfbfbf, #686868) !important;
+ scrollbar-color:
+ light-dark(#0006, #fff6)
+ light-dark(#f7f7f740, #2B2B2B40) !important;
}
#placesViewsBox #downloadsListBox richlistitem[selected="true"] {
- background-color: #006CBE !important;
- color: #fff !important;
+ background-color: light-dark(#006CBE, #006CBE) !important;
+ color: light-dark(#fff, #fff) !important;
}
#placeContentColumns :is(treecol, treecolpicker) {
- background-color: #f7f7f7 !important;
- color: #000 !important;
- border-inline-start: 1px solid #bfbfbf !important;
- box-shadow: inset 0 -1px #bfbfbf !important;
+ background-color: light-dark(#f7f7f7, #3B3B3B) !important;
+ color: light-dark(#000, #fff) !important;
+ border-inline-start: 1px solid light-dark(#bfbfbf, #686868) !important;
+ box-shadow: inset 0 -1px light-dark(#bfbfbf, #686868) !important;
appearance: none !important;
}
#placeContentColumns :is(treecol, treecolpicker):where(:hover) {
- background-color: #cecece !important;
- color: #000 !important;
- }
-
- @media (prefers-color-scheme: dark) {
- window#places {
- --organizer-color: #fff !important;
- --organizer-deemphasized-color: #bbb !important;
- --organizer-toolbar-background: #3B3B3B !important;
- --organizer-pane-background: #2B2B2B !important;
- --organizer-content-background: #1C1C1C !important;
- --organizer-hover-background: #ffffff25 !important;
- --organizer-selected-background: #006CBE80 !important;
- --organizer-outline-color: #63ADE5 !important;
- --organizer-toolbar-field-background: #2B2B2B !important;
- --organizer-toolbar-field-background-focused: #2B2B2B !important;
- --organizer-border-color: #686868 !important;
- scrollbar-color: #fff6 #2B2B2B40 !important;
- }
-
- #placesViewsBox #downloadsListBox richlistitem[selected="true"] {
- background-color: #006CBE !important;
- color: #fff !important;
- }
-
- #placeContentColumns :is(treecol, treecolpicker) {
- background-color: #3B3B3B !important;
- color: #fff !important;
- border-inline-start: 1px solid #686868 !important;
- box-shadow: inset 0 -1px #686868 !important;
- }
-
- #placeContentColumns :is(treecol, treecolpicker):where(:hover) {
- background-color: #4A4A4A !important;
- color: #fff !important;
- }
+ background-color: light-dark(#cecece, #4A4A4A ) !important;
+ color: light-dark(#000, #fff) !important;
}
}
@@ -209,6 +187,24 @@
.sidebar-panel:not([lwt-sidebar]) {
color: light-dark(#000, #fff) !important;
scrollbar-color: light-dark(#0006, #fff6) light-dark(#f7f7f740, #3b3b3b40) !important;
+
+ /* Sidebar search box (Windows) */
+ @media(-moz-platform: windows) {
+ & #sidebar-search-container>#search-box,
+ & #viewButton {
+ appearance: none !important;
+ background-color: light-dark(#fff, #2b2b2b) !important;
+ color: inherit !important;
+ border: 1px solid light-dark(#bfbfbf, #686868) !important;
+ border-radius: 4px !important;
+ padding: 6px 8px !important;
+
+ &:focus {
+ border-width: 2px !important;
+ padding: 5px 7px !important;
+ }
+ }
+ }
}
@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml){
@@ -217,17 +213,6 @@
}
}
-@media(-moz-platform: windows) {
- .sidebar-panel:not([lwt-sidebar]) #sidebar-search-container>#search-box,
- .sidebar-panel:not([lwt-sidebar]) #viewButton {
- appearance: none !important;
- background-color: light-dark(#fff, #2b2b2b) !important;
- color: inherit !important;
- border: 1px solid light-dark(#bfbfbf, #686868) !important;
- border-radius: 2px !important;
- }
-}
-
/* Linux / GTK csd support */
@media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) {
diff --git a/chrome/global/popup.css b/chrome/global/popup.css
index 73c1976..49d949b 100644
--- a/chrome/global/popup.css
+++ b/chrome/global/popup.css
@@ -281,6 +281,8 @@
#downloadsListBox,
.downloadsPanelFooterButton {
margin: var(--arrowpanel-menuitem-margin) !important;
+ width: auto !important;
+ min-width: auto !important;
}
#downloadsPanel-blockedSubview,
@@ -380,7 +382,7 @@ panelview .toolbarbutton-1,
}
/* disable context menu when this tweak is applied */
-@supports not -moz-bool-pref("uc.tweak.revert-context-menu") {
+@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
/* Context Menu */
menupopup:not(.PanelUI-subView),
menupopup:not(.PanelUI-subView) menuitem,
@@ -403,7 +405,7 @@ panelview .toolbarbutton-1,
panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox,
.menupopup-arrowscrollbox {
background: var(--arrowpanel-background) !important;
- border: 0 !important;
+ border: 1px solid light-dark(transparent, var(--panel-separator-color)) !important;
}
/* make room for menu shadow */
@@ -448,15 +450,6 @@ panelview .toolbarbutton-1,
box-shadow: var(--uc-box-shadow) !important;
}
- .popup-internal-box,
- .menupopup-arrowscrollbox {
- margin: 0 !important;
- }
-
- .menupopup-arrowscrollbox {
- margin: var(--uc-margin) !important;
- }
-
.popup-internal-box {
margin: 0 !important;
}
@@ -493,6 +486,10 @@ panelview .toolbarbutton-1,
padding: 0 !important;
background: none !important;
border-top: 1px solid var(--panel-separator-color) !important;
+
+ &::before {
+ content: unset !important;
+ }
}
#PlacesToolbar menupopup[placespopup="true"] menuseparator::before {
@@ -567,7 +564,9 @@ panelview .toolbarbutton-1,
width: 16px !important;
}
- menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before {
+ menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before,
+ menupopup>menuitem::before,
+ menupopup>menuitem::after {
display: none !important;
}
@@ -619,7 +618,7 @@ panelview .toolbarbutton-1,
fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
}
- @supports not -moz-bool-pref("uc.tweak.smaller-context-menu-text") {
+ @media not (-moz-bool-pref: "uc.tweak.smaller-context-menu-text") {
@media (-moz-platform: windows) {
.menu-text,
.menu-iconic-text,
diff --git a/chrome/global/tree.css b/chrome/global/tree.css
new file mode 100644
index 0000000..2bbffb4
--- /dev/null
+++ b/chrome/global/tree.css
@@ -0,0 +1,87 @@
+/* Edge-Frfox - tree.css */
+
+/* Change height of tree items and add rounded corners */
+treechildren::-moz-tree-row,
+treecol:not([hideheader="true"]),
+.tree-columnpicker-button {
+ min-height: max(28px, 1.3em) !important;
+ border-radius: 2px !important;
+}
+
+/* Change the background colour on hover */
+@media not (prefers-contrast) {
+ treechildren::-moz-tree-row(hover) {
+ background-color: var(--toolbarbutton-hover-background) !important;
+ }
+}
+
+/* Change the background colour when pressed */
+treechildren::-moz-tree-row(selected) {
+ background-color: var(--toolbarbutton-active-background) !important;
+}
+
+/* Change the background colour when focused */
+treechildren::-moz-tree-row(selected, focus) {
+ background-color: var(--button-primary-bgcolor) !important;
+}
+
+treechildren::-moz-tree-row(current, focus) {
+ outline: var(--default-focusring);
+ outline-color: var(--button-primary-bgcolor) !important;
+ outline-offset: calc(-1 * var(--default-focusring-width));
+}
+
+treechildren::-moz-tree-image(selected),
+treechildren::-moz-tree-twisty(selected),
+treechildren::-moz-tree-cell-text(selected) {
+ color: inherit !important;
+}
+
+treechildren::-moz-tree-image(selected, focus),
+treechildren::-moz-tree-twisty(selected, focus),
+treechildren::-moz-tree-cell-text(selected, focus) {
+ color: var(--button-primary-color) !important;
+}
+
+/* Spacing between icon and label */
+treechildren::-moz-tree-image {
+ margin-inline-end: 8px !important;
+}
+
+/* Separator appearance */
+treechildren::-moz-tree-separator {
+ border-top: 1px solid var(--toolbarseparator-color) !important;
+ border-bottom: none !important;
+}
+
+/* Change the colour of the drop feedback elements */
+treechildren::-moz-tree-cell-text(primary, dropOn) {
+ background-color: var(--button-primary-bgcolor) !important;
+ color: var(--button-primary-color) !important;
+}
+
+treechildren::-moz-tree-drop-feedback {
+ background-color: var(--toolbarbutton-icon-fill-attention) !important;
+ border-radius: 2px !important;
+}
+
+/* Change the appearance for the expandable items */
+treechildren::-moz-tree-twisty {
+ padding-top: 0 !important;
+ padding-inline: 4px !important;
+ width: 16px !important;
+ list-style-image: url("../icons/arrow-filled-right.svg") !important;
+}
+
+treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
+ list-style-image: url("../icons/arrow-filled-left.svg") !important;
+}
+
+treechildren::-moz-tree-twisty(open) {
+ list-style-image: url("../icons/arrow-filled-down.svg") !important;
+}
+
+/* Change the identation of child items */
+treechildren::-moz-tree-indentation {
+ width: 16px !important;
+}
diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css
index baf00d5..126e378 100644
--- a/chrome/global/tweaks.css
+++ b/chrome/global/tweaks.css
@@ -1,32 +1,31 @@
/* Edge-Frfox - tweaks.css */
/* disable drag space above tabs */
-@supports -moz-bool-pref("uc.tweak.disable-drag-space") {
- :root #titlebar {
+@media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
+ :root {
--tab-block-margin: 0px !important;
}
}
/* force tabs to toolbar bg (useful for proton themes) (might experience some
bugs with certain themes eg. dark text on dark background.) */
-@supports -moz-bool-pref("uc.tweak.force-tab-colour") {
+@media (-moz-bool-pref: "uc.tweak.force-tab-colour") {
:root {
--lwt-selected-tab-background-color: unset !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 {
- display: none !important;
- }
-
- .tabbrowser-tab:not([last-visible-tab="true"]) {
- margin-inline-end: 0px !important;
+@media (-moz-bool-pref: "uc.tweak.remove-tab-separators") {
+ .tabbrowser-tab .tab-stack {
+ &::before,
+ &::after {
+ content: initial !important;
+ }
}
}
-@supports -moz-bool-pref("uc.tweak.floating-tabs") {
+@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
:root:not(:-moz-lwtheme),
:root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"] {
--lwt-accent-color: light-dark(#f3f3f3, #202020) !important;
@@ -36,6 +35,7 @@ bugs with certain themes eg. dark text on dark background.) */
--chrome-content-separator-color: light-dark(#bfbfbf, #535353) !important;
--uc-urlbar-shadow: none !important;
--uc-tab-border-color: light-dark(#0000, #fff1) !important;
+ --toolbar-non-lwt-bgcolor: var(--lwt-accent-color) !important;
}
@media (-moz-gtk-csd-available) {
@@ -84,17 +84,17 @@ bugs with certain themes eg. dark text on dark background.) */
/* adjust spacing of area above tabs */
@media not (-moz-platform: macos) {
- :root[sizemode="maximized"] #titlebar {
+ :root[sizemode="maximized"] {
--tab-block-margin: 4px !important;
}
}
- :root:is([inFullscreen], :not([tabsintitlebar])) #titlebar {
+ :root:is([inFullscreen], :not([tabsintitlebar])) {
--tab-block-margin: 4px !important;
}
- @supports -moz-bool-pref("uc.tweak.disable-drag-space") {
- :root #titlebar {
+ @media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
+ :root {
--tab-block-margin: 4px !important;
}
}
@@ -125,72 +125,19 @@ bugs with certain themes eg. dark text on dark background.) */
: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);
+ 0 3.3px 3px rgb(0 0 0 / .06),
+ 0 0 0 1px rgb(0 0 0 / .11);
}
:root[lwtheme-brighttext="true"] {
--uc-titlebar-shadow: none;
- --uc-tab-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+ --uc-tab-shadow: 0 1px 2px rgb(0 0 0 / .08);
}
}
-/* Mica broken on newer versions of Firefox */
-/* Uncomment to enable, only works for Firefox versions lower than 115 */
-/* @media (-moz-platform: windows) {
- @supports -moz-bool-pref("uc.tweak.win11-mica") {
- #main-window:not([inFullscreen]):not(:-moz-lwtheme),
- #main-window:not([inFullscreen])[lwt-default-theme-in-dark-mode="true"] {
- appearance: -moz-win-borderless-glass !important;
- background: transparent !important;
- }
-
- #main-window:not([inFullscreen])[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
- background: transparent !important;
- }
-
- .tab-background:is([selected], [multiselected]) {
- background: var(--toolbar-bgcolor) !important;
- }
- :root:not([inFullscreen]):not(:-moz-lwtheme):not(:-moz-window-inactive) {
- --lwt-accent-color: #00000020 !important;
- }
-
- @supports -moz-bool-pref("uc.tweak.floating-tabs") {
- :root:not([inFullscreen]):not(:-moz-lwtheme):not(:-moz-window-inactive) {
- --toolbar-bgcolor: #ffffffcc !important;
- --lwt-accent-color: #0000 !important;
- }
-
- :root:not([inFullscreen])[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) {
- --toolbar-bgcolor: #ffffff25 !important;
- --lwt-accent-color: #0000 !important;
- }
- }
-
- :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;
- }
-
- :root:not([inFullscreen]):is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) {
- list-style-image: none !important;
- }
-
- :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]):is([inFullscreen], [sizemode="maximized"]) .titlebar-button {
- padding-block: 7px 9px !important;
- }
-
- :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]):is([inFullscreen], [sizemode="maximized"]) .titlebar-close {
- padding-right: 19px !important;
- }
- }
-} */
-
@media not (-moz-platform: macos) {
- @supports not -moz-bool-pref("uc.tweak.revert-context-menu") {
- @supports -moz-bool-pref("uc.tweak.vertical-context-navigation") {
+ @media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
+ @media (-moz-bool-pref: "uc.tweak.vertical-context-navigation") {
#context-navigation {
flex-direction: column !important;
-moz-box-orient: vertical !important;
@@ -243,7 +190,7 @@ bugs with certain themes eg. dark text on dark background.) */
}
@media (-moz-windows-compositor) {
- @supports -moz-bool-pref("uc.tweak.revert-context-menu") {
+ @media (-moz-bool-pref: "uc.tweak.revert-context-menu") {
menupopup {
--panel-color: var(--arrowpanel-color) !important;
--panel-border-radius: 4px !important;
@@ -259,8 +206,103 @@ bugs with certain themes eg. dark text on dark background.) */
}
}
-@supports -moz-bool-pref("uc.tweak.show-tab-close-button-on-hover") {
+@media (-moz-bool-pref: "uc.tweak.show-tab-close-button-on-hover") {
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned], [selected]):hover .tab-close-button {
display: flex !important;
}
}
+
+@media (-moz-bool-pref: "uc.tweak.hide-tabs-bar") {
+ :root:not([customizing]) {
+ /* Height of navbar, used for determining height and position of window controls */
+ --uc-navbar-height: 38px;
+ /* Drag space next to the window controls, allows you to move the window more easily */
+ --uc-titlebar-drag-space: 40px;
+
+ @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.only-when-maximised") {
+ /* Set containing block for the window buttons */
+ & #titlebar {
+ position: relative !important;
+ }
+
+ /* Hide the tabs */
+ & #TabsToolbar {
+ visibility: collapse !important;
+ padding-inline-start: 0 !important;
+ }
+
+ /* Add some padding to the top of the navbar */
+ & #nav-bar {
+ padding-top: var(--tab-block-margin) !important;
+ }
+ }
+
+ /* macOS specific positioning */
+ @media (-moz-platform: macos) {
+ &[inFullscreen] {
+ /* Hide the tabs */
+ & #TabsToolbar {
+ visibility: collapse !important;
+ padding-inline-start: 0 !important;
+ }
+ }
+
+ @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.only-when-maximised") {
+ /* Offset navbar contents to make space for the window controls */
+ &[tabsintitlebar] #nav-bar:not([inFullscreen]) {
+ padding-left: calc(84px + var(--uc-titlebar-drag-space));
+
+ /* Remove the padding from the side of the navbar */
+ & #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
+ padding-inline-start: 0 !important;
+ }
+ }
+
+ /* Positioning of the window controls */
+ #TabsToolbar .titlebar-buttonbox {
+ --uc-position: calc((var(--uc-navbar-height) + var(--tab-block-margin)) / 2 - 8px);
+ visibility: visible !important;
+ position: absolute !important;
+ top: var(--uc-position);
+ left: var(--uc-position);
+ margin: 0 !important;
+ }
+ }
+ }
+
+ /* Windows specific positioning */
+ @media (-moz-platform: windows) {
+ /* Offset navbar contents to make space for the window controls */
+ &:where([inFullscreen], [tabsintitlebar]) #nav-bar {
+ padding-right: calc(140px + var(--uc-titlebar-drag-space));
+
+ /* Remove the padding from the side of the navbar */
+ & #PanelUI-menu-button {
+ padding-inline-end: 0 !important;
+ }
+ }
+
+ /* Positioning of the window controls */
+ & #toolbar-menubar[inactive] + #TabsToolbar .titlebar-buttonbox {
+ visibility: visible !important;
+ position: absolute !important;
+ top: 0;
+ right: 0;
+ height: calc(var(--uc-navbar-height) + var(--tab-block-margin)) !important;
+ }
+
+ /* Set background colour of the menu bar to maintain consistency with the navbar */
+ @media not (-moz-bool-pref: "uc.tweak.floating-tabs") {
+ #toolbar-menubar {
+ background-color: var(--toolbar-bgcolor) !important;
+ }
+ }
+ }
+ }
+}
+
+@media (-moz-bool-pref: "uc.tweak.hide-forward-button") {
+ :root:not([customizing]) #forward-button[disabled] {
+ display: none !important;
+ }
+}
diff --git a/chrome/icons/arrow-filled-down.svg b/chrome/icons/arrow-filled-down.svg
new file mode 100644
index 0000000..bd111a7
--- /dev/null
+++ b/chrome/icons/arrow-filled-down.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/arrow-filled-left.svg b/chrome/icons/arrow-filled-left.svg
new file mode 100644
index 0000000..c0f6945
--- /dev/null
+++ b/chrome/icons/arrow-filled-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/arrow-filled-right.svg b/chrome/icons/arrow-filled-right.svg
new file mode 100644
index 0000000..2f65f5e
--- /dev/null
+++ b/chrome/icons/arrow-filled-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/firefox-view.svg b/chrome/icons/firefox-view.svg
new file mode 100644
index 0000000..6288a1e
--- /dev/null
+++ b/chrome/icons/firefox-view.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css
index 101cea3..e99d62c 100644
--- a/chrome/icons/icons.css
+++ b/chrome/icons/icons.css
@@ -133,6 +133,10 @@ and 11 so applied to both) */
list-style-image: url("new-tab.svg") !important;
}
+#firefox-view-button {
+ list-style-image: url("firefox-view.svg") !important;
+}
+
#sync-button,
.urlbarView-row[source="tabs"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon,
#urlbar-engine-one-off-item-tabs {
@@ -168,6 +172,11 @@ and 11 so applied to both) */
list-style-image: url("search-page.svg") !important;
}
+#appMenu-translate-button,
+#translations-button-icon {
+ list-style-image: url("translate.svg") !important;
+}
+
#open-file-button {
list-style-image: url("open.svg") !important;
}
@@ -361,7 +370,9 @@ and 11 so applied to both) */
.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after,
.menu-right {
- content: url("arrow-right.svg") !important;
+ content: url("arrow-filled-right.svg") !important;
+ opacity: 0.6 !important;
+ scale: 0.75 !important;
}
#PlacesChevron,
@@ -550,7 +561,7 @@ and 11 so applied to both) */
}
/* disable context menu icons when this tweak is applied */
-@supports not -moz-bool-pref("uc.tweak.revert-context-menu") {
+@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
/* Context Menu Icons */
menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon {
@@ -933,3 +944,67 @@ and 11 so applied to both) */
--header-image: url("extension.svg");
--uc-enabled: 1;
}
+
+/* Tree items used for side bar and library windows */
+treechildren::-moz-tree-image {
+ fill-opacity: 1 !important;
+}
+
+treechildren::-moz-tree-image(title) {
+ list-style-image: url("page-portrait.svg") !important;
+}
+
+/* default folder icon */
+treechildren::-moz-tree-image(title, container),
+treechildren::-moz-tree-image(title, open) {
+ list-style-image: url("folder.svg") !important;
+}
+
+/* bookmarks bar icon */
+treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
+ list-style-image: url("bookmark-hollow.svg") !important;
+}
+
+/* bookmarks menu icon */
+treechildren::-moz-tree-image(container, queryFolder_menu________) {
+ list-style-image: url("folder.svg") !important;
+}
+
+/* smart folder icon */
+treechildren::-moz-tree-image(query) {
+ list-style-image: url("settings.svg") !important;
+}
+
+/* bookmarks category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
+ list-style-image: url("bookmark-hollow.svg") !important;
+}
+
+/* downloads category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
+ list-style-image: url("downloads.svg") !important;
+}
+
+/* tags category icon */
+treechildren::-moz-tree-image(title, query, tagContainer),
+treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
+ list-style-image: url("tag.svg") !important;
+}
+
+/* calendar icon for folders grouping items by date */
+treechildren::-moz-tree-image(title, query, dayContainer) {
+ list-style-image: url("history.svg") !important;
+}
+
+treechildren::-moz-tree-image(title, query, hostContainer) {
+ list-style-image: url("folder.svg") !important;
+}
+
+/* history category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
+ list-style-image: url("history.svg") !important;
+}
+
+treechildren::-moz-tree-image(title, query, folder) {
+ list-style-image: url("folder.svg") !important;
+}
diff --git a/chrome/icons/tag.svg b/chrome/icons/tag.svg
new file mode 100644
index 0000000..8864d48
--- /dev/null
+++ b/chrome/icons/tag.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/translate.svg b/chrome/icons/translate.svg
new file mode 100644
index 0000000..58e8c43
--- /dev/null
+++ b/chrome/icons/translate.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/toolbar/findbar.css b/chrome/toolbar/findbar.css
index 87bb8ba..482985c 100644
--- a/chrome/toolbar/findbar.css
+++ b/chrome/toolbar/findbar.css
@@ -32,11 +32,11 @@
.close-icon:not([disabled]):hover,
.findbar-find-previous:not([disabled]):hover,
.findbar-find-next:not([disabled]):hover {
- background: var(--toolbarbutton-hover-background, rgba(190,190,190,.2)) !important;
+ background: var(--toolbarbutton-hover-background, rgb(190 190 190 / .2)) !important;
}
.close-icon:not([disabled]):hover:active,
.findbar-find-previous:not([disabled]):hover:active,
.findbar-find-next:not([disabled]):hover:active {
- background: var(--toolbarbutton-active-background, rgba(190,190,190,.4)) !important;
+ background: var(--toolbarbutton-active-background, rgb(190 190 190 / .4)) !important;
}
diff --git a/chrome/toolbar/navbar.css b/chrome/toolbar/navbar.css
index 1eba8a2..ef37b6c 100644
--- a/chrome/toolbar/navbar.css
+++ b/chrome/toolbar/navbar.css
@@ -27,7 +27,7 @@
padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important;
}
-@supports (-moz-bool-pref("uc.tweak.rounded-corners")) {
+@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
#navigator-toolbox {
border-bottom: none !important;
}
diff --git a/chrome/toolbar/personalbar.css b/chrome/toolbar/personalbar.css
index 0051896..0215c1c 100644
--- a/chrome/toolbar/personalbar.css
+++ b/chrome/toolbar/personalbar.css
@@ -4,39 +4,60 @@
--bookmark-block-padding: 6px !important;
}
+/* Bookmarks bar item sizing */
#personal-toolbar-empty-description,
#PersonalToolbar .toolbarbutton-1,
toolbarbutton.bookmark-item:not(.subviewbutton) {
- margin-block: 0 4px !important;
- padding: var(--bookmark-block-padding) 6px !important;
+ margin-block: 2px 4px !important;
+ padding-block: var(--bookmark-block-padding) !important;
+ padding-inline: 6px !important;
font-size: 12px !important;
+
+ /* Adjust vertical label position on Windows */
+ @media (-moz-platform: windows) {
+ & .toolbarbutton-text {
+ margin-block: -1px 0 !important;
+ }
+ }
}
#PersonalToolbar .toolbarbutton-1 {
padding: 0 !important;
}
-#PlacesToolbarItems>toolbarseparator::before {
- content: "";
- display: block;
- border-inline-start: 1px solid var(--toolbarseparator-color) !important;
- margin-block: 6px 10px !important;
- border-image-source: none !important;
+/* Bookmarks bar separators */
+#PlacesToolbarItems > toolbarseparator {
+ padding-inline: 1px !important;
+
+ &::before {
+ content: "";
+ display: block;
+ border-inline-start: 1px solid var(--toolbarseparator-color) !important;
+ margin-block: 8px 10px !important;
+ border-image-source: none !important;
+ }
}
+/* Left and Right padding of bookmarks bar */
#PersonalToolbar {
padding-inline: calc(var(--toolbar-start-end-padding) - 2px) calc(var(--toolbar-start-end-padding) + 6px) !important;
}
+/* Spacing between icon and label for bookmarks bar items */
#managed-bookmarks>.toolbarbutton-icon,
#bookmarks-toolbar-placeholder>.toolbarbutton-icon,
#PlacesToolbarItems>.bookmark-item>.toolbarbutton-icon[label]:not([label=""]),
#OtherBookmarks.bookmark-item[container]>.toolbarbutton-icon {
- margin-inline-end: 6px !important;
+ margin-inline-end: 8px !important;
}
+/* Sizing for bookmarks bar icons */
#PersonalToolbar .toolbarbutton-1>.toolbarbutton-icon {
width: calc(2 * var(--bookmark-block-padding) + 16px) !important;
height: calc(2 * var(--bookmark-block-padding) + 16px) !important;
padding: var(--bookmark-block-padding) !important;
}
+
+:root {
+ --bookmarks-toolbar-overlapping-browser-height: 34px !important;
+}
diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css
index 30e5668..9e4a820 100644
--- a/chrome/toolbar/tabbar.css
+++ b/chrome/toolbar/tabbar.css
@@ -1,29 +1,25 @@
/* Edge-Frfox - tabbar.css */
-@supports -moz-bool-pref("uc.tweak.floating-tabs.equal-margin") and -moz-bool-pref("uc.tweak.floating-tabs") {
- :root #titlebar {
+:root {
+ --tab-block-margin: 8px !important;
+
+ & #titlebar {
+ --tab-min-height: 32px !important;
+ --inline-tab-padding: 11px !important;
+ --tab-border-radius: 4px !important;
+
+ --uc-toolbarbutton-inner-padding: 6px !important;
+ --toolbarbutton-border-radius: 4px !important;
+ --toolbarbutton-tabsline-border-radius: 8px !important;
+ --tabs-navbar-shadow-size: 0 !important;
+ --tab-shadow-max-size: 0 !important;
+ }
+
+ @media (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin") and (-moz-bool-pref: "uc.tweak.floating-tabs") {
--tab-block-margin: 5px !important;
}
}
-@supports (not -moz-bool-pref("uc.tweak.floating-tabs.equal-margin")) or (not -moz-bool-pref("uc.tweak.floating-tabs")) {
- :root #titlebar {
- --tab-block-margin: 8px !important;
- }
-}
-
-:root #titlebar {
- --tab-min-height: 32px !important;
- --inline-tab-padding: 11px !important;
- --tab-border-radius: 4px !important;
-
- --uc-toolbarbutton-inner-padding: 6px !important;
- --toolbarbutton-border-radius: 4px !important;
- --toolbarbutton-tabsline-border-radius: 8px !important;
- --tabs-navbar-shadow-size: 0 !important;
- --tab-shadow-max-size: 0 !important;
-}
-
/* tab open/close transition */
.tabbrowser-tab:not([pinned]) {
transition-property: min-width, max-width !important;
@@ -37,13 +33,13 @@
transition: transform 200ms cubic-bezier(0, .75, .25, 1) !important;
}
-:root:is([inFullscreen], :not([tabsintitlebar])) #titlebar {
+:root:is([inFullscreen], :not([tabsintitlebar])) {
--tab-block-margin: 0px !important;
}
/* hide space above tabs when maximised for non-macOS versions of Firefox */
@media not (-moz-platform: macos) {
- :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]) #titlebar,
+ :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]),
#toolbar-menubar:not([inactive])+#TabsToolbar {
--tab-block-margin: 0px !important;
}
@@ -57,33 +53,41 @@
border: 0 !important;
position: relative !important;
--uc-tab-corner-bg: transparent;
+
+ /* Rounded bottom corners */
+ &::before,
+ &::after {
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ width: 8px !important;
+ height: 8px !important;
+ bottom: 0 !important;
+ pointer-events: none !important;
+ clip-path: inset(0);
+ }
+
+ &::before {
+ border-bottom-right-radius: var(--tab-border-radius) !important;
+ left: 0 !important;
+ transform: translateX(-8px) !important;
+ box-shadow: 4px 4px 0 4px var(--uc-tab-corner-bg) !important;
+ }
+
+ &::after {
+ border-bottom-left-radius: var(--tab-border-radius) !important;
+ right: 0 !important;
+ transform: translateX(8px) !important;
+ box-shadow: -4px 4px 0 4px var(--uc-tab-corner-bg) !important;
+ }
}
-/* rounded bottom corners */
-.tab-background::before,
-.tab-background::after {
- content: "" !important;
- display: block !important;
- position: absolute !important;
- width: 8px !important;
- height: 8px !important;
- bottom: 0 !important;
- pointer-events: none !important;
- clip-path: inset(0);
-}
-
-.tab-background::before {
- border-bottom-right-radius: var(--tab-border-radius) !important;
- left: 0 !important;
- transform: translateX(-8px) !important;
- box-shadow: 4px 4px 0 4px var(--uc-tab-corner-bg) !important;
-}
-
-.tab-background::after {
+.tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected]) .tab-background {
border-bottom-left-radius: var(--tab-border-radius) !important;
- right: 0 !important;
- transform: translateX(8px) !important;
- box-shadow: -4px 4px 0 4px var(--uc-tab-corner-bg) !important;
+
+ &::before {
+ --uc-tab-corner-bg: transparent !important;
+ }
}
.tab-background:is([selected], [multiselected]) {
@@ -95,7 +99,7 @@
--uc-tab-corner-bg: color-mix(in srgb, currentColor 8%, transparent) !important;
}
-@supports not -moz-bool-pref("uc.tweak.floating-tabs") {
+@media not (-moz-bool-pref: "uc.tweak.floating-tabs") {
#Tabstoolbar:not([brighttext]) .tabbrowser-tab:hover .tab-background:not([selected], [multiselected]) {
background-color: color-mix(in srgb, white 30%, transparent) !important;
--uc-tab-corner-bg: color-mix(in srgb, white 30%, transparent) !important;
@@ -265,13 +269,15 @@
padding: 0 12px !important;
}
-.tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line {
- height: 8px !important;
- clip-path: inset(0 0 6px) !important;
- border-radius: var(--tab-border-radius) !important;
- border-bottom-left-radius: 0 !important;
- border-bottom-right-radius: 0 !important;
- margin: 0 !important;
+/* Tab container indicator */
+.tabbrowser-tab[usercontextid] .tab-background .tab-context-line {
+ height: 2px !important;
+ border-radius: 2px !important;
+ margin: 2px 7px 0 !important;
+}
+
+.tabbrowser-tab[selected][usercontextid] .tab-background .tab-context-line {
+ margin-inline: 9px !important;
}
.titlebar-spacer[type="post-tabs"] {
@@ -294,26 +300,49 @@ toolbarbutton[part="scrollbutton-down"] {
max-width: 240px !important;
}
-/* tab separators */
-.tabbrowser-tab:not([last-visible-tab="true"]) {
- margin-inline-end: 3px !important;
+/* Tab separators */
+.tabbrowser-tab .tab-stack {
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ height: 20px;
+ inset: 0 auto;
+ margin-block: auto;
+ border-left: 1px solid transparent;
+ }
+
+ &::before {
+ left: 0;
+ }
+
+ &::after {
+ right: 0;
+ }
}
-.tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after {
- content: "";
- position: absolute;
- display: block;
- height: 20px;
- right: -1px;
- top: 6px;
- border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent);
+/* Set separator color */
+.tabbrowser-tab:not([selected], [multiselected], :hover) {
+ & .tab-stack::before,
+ &:last-of-type .tab-stack::after {
+ border-color: color-mix(in srgb, currentColor 34%, transparent);
+ }
}
-/* need layout.css.has-selector.enabled */
-.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected="true"], :hover, [beforeselected-visible], [beforehovered])) .tab-stack::after {
- display: none;
+/* Hide separator when previous sibling is hovered or selected */
+.tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected], [multiselected], :hover) .tab-stack::before {
+ border-color: transparent !important;
}
+/* Hide first tab separator if there are no buttons before it (Such as Firefox View) */
+#TabsToolbar-customization-target > #tabbrowser-tabs:not(toolbarbutton:not(#fxa-toolbar-menu-button) + #tabbrowser-tabs) .tabbrowser-tab:first-of-type .tab-stack::before {
+ border-color: transparent !important;
+}
+
+/* .tabbrowser-tab:not([last-visible-tab="true"]) {
+ margin-inline-end: -1px !important;
+} */
+
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !important;
}
@@ -354,11 +383,20 @@ toolbarbutton[part="scrollbutton-down"] {
margin-top: calc(2px + var(--tab-block-margin)) !important;
}
-#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab:first-of-type {
- margin-inline-start: 14px !important;
+/* add margin to tabs if they are the first or last tab */
+#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab {
+ &:first-of-type {
+ margin-inline-start: 14px !important;
+ }
+
+ &:last-of-type {
+ margin-inline-end: 6px !important;
+ }
}
-#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab:last-of-type {
- margin-inline-end: 6px !important;
+
+/* remove gap between pinned and unpinned tabs */
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
+ margin-inline-start: 0 !important;
}
#tabbrowser-tabs {
@@ -375,21 +413,21 @@ toolbarbutton[part="scrollbutton-down"] {
}
#tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[pinned] {
- clip-path: inset(-4px -4px 0) !important;
+ clip-path: inset(-8px -8px 0) !important;
}
:root {
- --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset;
+ --uc-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / .2) inset;
--uc-tab-shadow:
0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)),
- 0px 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
+ 0px 2px 4px rgb(0 0 0 / .2), 0 4px 8px rgb(0 0 0 / .1);
}
:root[lwtheme-brighttext="true"] {
- --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.75) inset inset;
+ --uc-titlebar-shadow: 0 -3px 2px -3px rgb(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);
+ 0 2px 4px rgb(0 0 0 / .45), 0 0px 2px rgb(0 0 0 / .2);
}
#tabbrowser-tabs .tab-background:is([selected], [multiselected]),
diff --git a/chrome/userChrome.css b/chrome/userChrome.css
index d8692d8..a43d558 100644
--- a/chrome/userChrome.css
+++ b/chrome/userChrome.css
@@ -9,6 +9,7 @@
@import url("global/popup.css");
@import url("global/tweaks.css");
@import url("global/browser.css");
+@import url("global/tree.css");
/* import custom stylesheet instead of modifying Edge-Frfox theme files */
@import url("custom.css");
diff --git a/screenshots/dark-mica-floating-tabs.png b/screenshots/dark-mica-floating-tabs.png
deleted file mode 100644
index bd47f05..0000000
Binary files a/screenshots/dark-mica-floating-tabs.png and /dev/null differ
diff --git a/screenshots/dark-mica.png b/screenshots/dark-mica.png
deleted file mode 100644
index d64f80a..0000000
Binary files a/screenshots/dark-mica.png and /dev/null differ
diff --git a/screenshots/light-mica-floating-tabs.png b/screenshots/light-mica-floating-tabs.png
deleted file mode 100644
index 594a44c..0000000
Binary files a/screenshots/light-mica-floating-tabs.png and /dev/null differ
diff --git a/screenshots/light-mica.png b/screenshots/light-mica.png
deleted file mode 100644
index 2deca54..0000000
Binary files a/screenshots/light-mica.png and /dev/null differ