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

Merge branch 'upstream'

Browse source
This commit is contained in:
Hydroxycarbamide 2023-11-25 00:08:23 +01:00
commit 5eb6f0fe6b
24 changed files with 697 additions and 418 deletions
Download patch file Download diff file Expand all files Collapse all files

99
README.md
View file

@ -27,93 +27,90 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch
### Optional: ### Optional:
* To use the light theme in private browsing mode set `browser.theme.dark-private-windows` = `false` * 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** **Note: Most frequently tested on macOS**
## Screenshots ## Screenshots
| Theme | Light | Dark | | Theme | Light | Dark |
| ----------------------------------- | --------------------------------------- | -------------------------------------- | | ----------------------------------- | ----------------------------- | ---------------------------- |
| Default (Windows 11) | ![Light][s-l] | ![Dark][s-d] | | Default (Windows 11) | ![Light][s-l] | ![Dark][s-d] |
| Floating Tabs (Windows 11) | ![Light, Floating Tabs][s-lf] | ![Dark, Floating Tabs][s-df] | | 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] | | GTK (GNOME 42, [adw-gtk3][1] theme) | ![Light, GTK][s-lgtk] | ![Dark, GTK][s-dgtk] |
| 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 ## 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. 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. 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.** | | **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.** | | **OPTIONAL: Add a second image named `background-1.(jpg/png)` for seperate dark mode background.** |
| `uc.tweak.newtab-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` | | `uc.tweak.hide-newtab-logo` |
| disable drag space above tabs | | Disable drag space above tabs |
| ----------------------------- | | ----------------------------- |
| `uc.tweak.disable-drag-space` | | `uc.tweak.disable-drag-space` |
| enable rounded corners | | Force tab background colour to the same colour as the navbar background (useful for Proton themes) |
| -------------------------- |
| `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) |
| -------------------------------------------------------------------------------------------------- | | -------------------------------------------------------------------------------------------------- |
| **NOTE: can cause readability issues with some themes! (eg. white text on white bg)** | | **NOTE: can cause readability issues with some themes! (eg. white text on white bg)** |
| `uc.tweak.force-tab-colour` | | `uc.tweak.force-tab-colour` |
| ![force tab colour example](screenshots/force-tab-colour.svg) (Left: OFF, Right: ON) | | ![force tab colour example](screenshots/force-tab-colour.svg) (Left: OFF, Right: ON) |
| Show context menu navigation buttons (Back, Forward, Reload, etc.) vertically | | Show context menu navigation buttons (Back, Forward, Reload, Bookmark) vertically |
| ----------------------------------------------------------------------------- | | --------------------------------------------------------------------------------- |
| **NOTE: labels are only shown in the English language.** | | **NOTE: labels are only shown in the English language.** |
| `uc.tweak.vertical-context-navigation` | | `uc.tweak.vertical-context-navigation` |
| remove tab separators | | Remove tab separators |
| -------------------------------- | | -------------------------------- |
| `uc.tweak.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` | | `uc.tweak.smaller-context-menu-text` |
| disable custom context menus | | Disable custom context menus |
| ------------------------------ | | ------------------------------ |
| `uc.tweak.revert-context-menu` | | `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` | | `uc.tweak.show-tab-close-button-on-hover` |
## Mica Tweak Instructions (Windows 11 Only) ## Mica Tweak Notice
NOTE: Broken on newer versions of Firefox. Mica is broken due to changes made in the Firefox 115 update, Mica has now been
1. Download and install [Mica For Everyone][2]. removed from this theme.
2. Create a custom process rule with the following:
1. Name: `firefox` If you still have `uc.tweak.win11-mica` set in `about:config` you can safely
2. Titlebar Color: `System` delete it
3. Backdrop Type: `Mica`
3. Enable tweak in `about:config`: `uc.tweak.win11-mica`
4. Restart Firefox.
## Acknowledgements ## Acknowledgements
[muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox) [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox)
@ -124,19 +121,13 @@ NOTE: Broken on newer versions of Firefox.
<!-- links --> <!-- links -->
[1]: https://github.com/lassekongo83/adw-gtk3 [1]: https://github.com/lassekongo83/adw-gtk3
[2]: https://github.com/MicaForEveryone/MicaForEveryone
[3]: #mica-tweak-instructions-windows-11-only
<!-- light mode screenshot links --> <!-- light mode screenshot links -->
[s-l]: screenshots/light.png [s-l]: screenshots/light.png
[s-lf]: screenshots/light-floating-tabs.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-lgtk]: screenshots/gtk-light.png
<!-- dark mode screenshot links --> <!-- dark mode screenshot links -->
[s-d]: screenshots/dark.png [s-d]: screenshots/dark.png
[s-df]: screenshots/dark-floating-tabs.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 [s-dgtk]: screenshots/gtk-dark.png

116
chrome/content/common.css
View file

@ -3,77 +3,51 @@
/* colours */ /* colours */
@-moz-document url-prefix(about:) { @-moz-document url-prefix(about:) {
:root { :root {
--in-content-page-color: #252525 !important; --in-content-page-color: light-dark(#252525, #fff) !important;
--in-content-page-background: #f7f7f7 !important; --in-content-page-background: light-dark(#f7f7f7, #252525) !important;
--in-content-deemphasized-text: #666 !important; --in-content-deemphasized-text: light-dark(#666, #bbb) !important;
--in-content-box-background: #fff !important; --in-content-box-background: light-dark(#fff, #333) !important;
--in-content-box-background-odd: rgba(0, 0, 0, 0.05) !important; --in-content-box-background-odd: light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .05)) !important;
--in-content-box-info-background: #f7f7f7 !important; --in-content-box-info-background: light-dark(#f7f7f7, rgb(255 255 255 / 0.15)) !important;
--in-content-icon-color: #666 !important; --in-content-icon-color: light-dark(#666, #fff) !important;
--in-content-accent-color: #006CBE !important; --in-content-accent-color: light-dark(#006CBE, #75B6E8) !important;
--in-content-accent-color-active: #1683D8 !important; --in-content-accent-color-active: light-dark(#1683D8, #4C98D1) !important;
--in-content-border-hover: rgba(0, 0, 0, 0.5) !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-invalid: var(--red-50) !important;
--in-content-border-color: #bebebe !important; --in-content-border-color: light-dark(#bebebe, rgb(255 255 255 / .2)) !important;
--in-content-error-text-color: #FF848A !important; --in-content-error-text-color: light-dark(#FF848A, #FF9AA2) !important;
--in-content-link-color: #0078D4 !important; --in-content-link-color: light-dark(#0078D4, #75B6E8) !important;
--in-content-link-color-hover: #006CBE !important; --in-content-link-color-hover: light-dark(#006CBE, #63ADE5) !important;
--in-content-link-color-active: #0749AC !important; --in-content-link-color-active: light-dark(#0749AC, #4C98D1) !important;
--in-content-link-color-visited: #0078D4 !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: var(--in-content-text-color) !important;
--in-content-button-text-color-hover: 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-text-color-active: var(--in-content-button-text-color-hover) !important;
--in-content-button-background: #EDEDED !important; --in-content-button-background: light-dark(#EDEDED, #3B3B3B) !important;
--in-content-button-background-hover: #e5e5e5 !important; --in-content-button-background-hover: light-dark(#e5e5e5, #545454) !important;
--in-content-button-background-active: #d5d5d5 !important; --in-content-button-background-active: light-dark(#d5d5d5, #606060) !important;
--in-content-primary-button-text-color: #fff !important; --in-content-primary-button-text-color: light-dark(#fff, #fff) !important;
--in-content-primary-button-background: #0061e0 !important; --in-content-primary-button-background: light-dark(#0061e0, #006CBE) !important;
--in-content-primary-button-background-hover: #0250bb !important; --in-content-primary-button-background-hover: light-dark(#0250bb, #0078D4) !important;
--in-content-primary-button-background-active: #053e94 !important; --in-content-primary-button-background-active: light-dark(#053e94, #005CA3) !important;
--in-content-danger-button-background: #DF4951 !important; --color-accent-primary: light-dark(#0078D4, #006CBE) !important;
--in-content-danger-button-background-hover: #EA656C !important; --color-accent-primary-hover: light-dark(#006CBE, #0078D4) !important;
--in-content-danger-button-background-active: #BB353C !important; --color-accent-primary-active: light-dark(#0749AC, #005CA3) !important;
--in-content-focus-outline-color: color-mix(in srgb, #0055D7 50%, transparent) !important; --in-content-danger-button-background: light-dark(#DF4951, #E12424) !important;
--in-content-table-background: #f7f7f7 !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; --in-content-text-color: var(--in-content-page-color) !important;
scrollbar-color: rgba(37, 37, 37, 0.4) #f7f7f7 !important; --border-interactive-color: light-dark(#929292, #858585) !important;
} scrollbar-color:
light-dark(rgb(37 37 37 / .4), rgb(255 255 255 / .4))
@media (prefers-color-scheme: dark) { light-dark(#f7f7f7, #252525) !important;
: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;
}
} }
} }
@ -110,6 +84,16 @@ url-prefix(about:addons) {
button.tab-button[selected]:hover { button.tab-button[selected]:hover {
border-block-color: transparent currentColor !important; 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 */ /* fix page flashes when loading some websites */

46
chrome/content/newtab.css
View file

@ -23,7 +23,7 @@ url-prefix("about:firefoxview") {
--newtab-wordmark-color: #737373 !important; --newtab-wordmark-color: #737373 !important;
--newtab-status-success: #50B080 !important; --newtab-status-success: #50B080 !important;
--newtab-status-error: #FF848A !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-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent) !important;
--newtab-text-emphasis-background: #FFED32 !important; --newtab-text-emphasis-background: #FFED32 !important;
--newtab-text-emphasis-text-color: #000 !important; --newtab-text-emphasis-text-color: #000 !important;
@ -73,7 +73,7 @@ url-prefix("about:home") {
white-space: nowrap !important; white-space: nowrap !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
--elevation: 4; --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 { .search-handoff-button:hover {
@ -129,7 +129,7 @@ url-prefix("about:home") {
.card-outer .card, .card-outer .card,
.ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { .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, .card-outer .card-preview-image-outer,
@ -147,7 +147,7 @@ url-prefix("about:home") {
padding: 30px !important; padding: 30px !important;
} }
@supports -moz-bool-pref("uc.tweak.hide-newtab-logo") { @media (-moz-bool-pref: "uc.tweak.hide-newtab-logo") {
.logo-and-wordmark { .logo-and-wordmark {
display: none !important; display: none !important;
} }
@ -161,24 +161,11 @@ url-prefix("about:home") {
/* private browsing newtab */ /* private browsing newtab */
@-moz-document url-prefix(about:privatebrowsing) { @-moz-document url-prefix(about:privatebrowsing) {
:root { :root {
--uc-wordmark-color: #737373; --uc-wordmark-color: light-dark(#737373, #fff);
--uc-background-color-secondary: #fff; --uc-background-color-secondary: light-dark(#fff, #4a4a4a);
}
@media (prefers-color-scheme: dark) { @media (-moz-bool-pref: "browser.theme.dark-private-windows") {
:root { color-scheme: dark !important;
--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;
} }
} }
@ -195,7 +182,7 @@ url-prefix("about:home") {
border-radius: 99px !important; border-radius: 99px !important;
padding-inline-start: 48px !important; padding-inline-start: 48px !important;
--elevation: 4; --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 { .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), @-moz-document url(about:newtab),
url(about:home), url(about:home),
url(about:privatebrowsing), url(about:privatebrowsing),
@ -248,8 +235,8 @@ url-prefix("about:home") {
have a higher priority */ have a higher priority */
--bg-0: url(../background-0.jpg), url(../background-0.png); --bg-0: url(../background-0.jpg), url(../background-0.png);
--bg-1: url(../background-1.jpg), url(../background-1.png); --bg-1: url(../background-1.jpg), url(../background-1.png);
--newtab-element-hover-color: rgba(239, 239, 239, 0.3) !important; --newtab-element-hover-color: rgb(239 239 239 / .3) !important;
--newtab-element-active-color: rgba(239, 239, 239, 0.45) !important; --newtab-element-active-color: rgb(239 239 239 / .45) !important;
--text-shadow: 0 1px 2px #000; --text-shadow: 0 1px 2px #000;
--icon-shadow: drop-shadow(0 0.3px 0.6px #000); --icon-shadow: drop-shadow(0 0.3px 0.6px #000);
background-color: #252525 !important; background-color: #252525 !important;
@ -259,15 +246,14 @@ url-prefix("about:home") {
background-attachment: fixed !important; background-attachment: fixed !important;
} }
body[lwt-newtab][lwt-newtab-brighttext], :root[lwt-newtab-brighttext] body,
:root[lwt-newtab][lwt-newtab-brighttext] body,
:root.private body { :root.private body {
background-image: var(--bg-1), var(--bg-0) !important; background-image: var(--bg-1), var(--bg-0) !important;
--newtab-element-hover-color: rgba(66, 66, 66, 0.4) !important; --newtab-element-hover-color: rgb(66 66 66 / .4) !important;
--newtab-element-active-color: rgba(66, 66, 66, 0.55) !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 { :root.private body {
background-image: var(--bg-0) !important; background-image: var(--bg-0) !important;
} }

72
chrome/global/browser.css
View file

@ -1,27 +1,79 @@
/* Edge-Frfox - browser.css */ /* Edge-Frfox - browser.css */
@supports (-moz-bool-pref("uc.tweak.floating-tabs")) { @media (-moz-bool-pref: "uc.tweak.floating-tabs") {
:root { :root {
--browser-frame-bgcolor: var(--lwt-accent-color); --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 { :root {
--browser-frame-bgcolor: var(--toolbar-bgcolor); --browser-frame-bgcolor: var(--toolbar-bgcolor);
} }
} }
@supports (-moz-bool-pref("uc.tweak.rounded-corners")) { @media (-moz-bool-pref: "uc.tweak.rounded-corners") {
:root #browser>#appcontent { /* Fix changes to the bookmarks bar made in Firefox 120 */
margin: 0px 3px 3px 3px; :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel,
border-radius: 8px; :root[BookmarksToolbarOverlapsBrowser] #sidebar-box {
overflow: hidden; padding-top: 0 !important;
border: 1.25px solid rgba(0, 0, 0, 0.05); }
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
: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); background-color: var(--browser-frame-bgcolor);
} }
} }

143
chrome/global/colors.css
View file

@ -7,6 +7,7 @@
--lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important; --lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important;
--lwt-text-color: light-dark(#000, #E5E5E5) !important; --lwt-text-color: light-dark(#000, #E5E5E5) !important;
--toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important; --toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important;
--toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important;
--toolbar-color: light-dark(#000, #fff) !important; --toolbar-color: light-dark(#000, #fff) !important;
--toolbarbutton-icon-fill: light-dark(#000, #fff) !important; --toolbarbutton-icon-fill: light-dark(#000, #fff) !important;
--chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important; --chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important;
@ -14,17 +15,18 @@
--toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important; --toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important;
--lwt-tab-text: var(--toolbar-color) !important; --lwt-tab-text: var(--toolbar-color) !important;
--lwt-selected-tab-background-color: unset !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-background-color: light-dark(#fff, #2B2B2B) !important;
--toolbar-field-color: light-dark(#000, #fff) !important; --toolbar-field-color: light-dark(#000, #fff) !important;
--toolbar-field-border-color: light-dark(#0000, #0000) !important; --toolbar-field-border-color: light-dark(#0000, #0000) !important;
--toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
--toolbar-field-focus-color: var(--toolbar-field-color) !important; --toolbar-field-focus-color: var(--toolbar-field-color) !important;
--toolbar-field-focus-border-color: light-dark(#0055D7, #63ADE5) !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; --link-color: light-dark(#0078D4, #75B6E8) !important;
--urlbar-box-bgcolor: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.11)) !important; --urlbar-hover-highlight-color: light-dark(rgb(192 192 192 / .5), rgb(128 128 128 / .5)) !important;
--urlbar-box-hover-bgcolor: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.11)) !important; --urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important;
--urlbar-box-focus-bgcolor: light-dark(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.28)) !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-icon-fill-opacity: 1 !important;
--urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important; --urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important;
--lwt-brighttext-url-color: var(--urlbar-popup-url-color) !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; --panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important;
--focus-outline-color: light-dark(#0055D7, #63ADE5) !important; --focus-outline-color: light-dark(#0055D7, #63ADE5) !important;
--panel-shortcut-color: inherit !important; --panel-shortcut-color: inherit !important;
--uc-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.1); --uc-urlbar-shadow: 0 0 4px rgb(0 0 0 / .1);
--toolbarbutton-hover-background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)) !important; --toolbarbutton-hover-background: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .1)) !important;
--toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.16)) !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: var(--button-primary-bgcolor);
--uc-private-browsing-indicator-text: var(--button-primary-color); --uc-private-browsing-indicator-text: var(--button-primary-color);
--tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important; --tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important;
--tab-icon-overlay-fill: light-dark(#252525, #fff) !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. */ /* ensure that dark mode is enabled completely in private browsing mode. */
:root[privatebrowsingmode="temporary"], @media (-moz-bool-pref: "browser.theme.dark-private-windows") {
:root[privatebrowsingmode="temporary"] #nav-bar, :root[privatebrowsingmode="temporary"],
:root[privatebrowsingmode="temporary"] #PersonalToolbar { :root[privatebrowsingmode="temporary"] #nav-bar,
color-scheme: dark !important; :root[privatebrowsingmode="temporary"] #PersonalToolbar {
color-scheme: dark !important;
}
} }
#urlbar { #urlbar {
@ -88,14 +93,19 @@
/* make the titlebar buttons black/white on default themes */ /* make the titlebar buttons black/white on default themes */
:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox { :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
color: light-dark(#000, #fff) !important; color: var(--toolbar-color) !important;
} }
#statuspanel-label { #statuspanel-label {
background-color: var(--toolbar-field-focus-background-color) !important; background-color: var(--toolbar-field-focus-background-color) !important;
color: var(--toolbar-field-focus-color) !important; color: var(--toolbar-field-focus-color) !important;
border-color: transparent !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) { @media (-moz-platform: windows) {
@ -128,70 +138,38 @@
/* library window theme */ /* library window theme */
window#places { window#places {
--organizer-color: #000 !important; --organizer-color: light-dark(#000, #fff) !important;
--organizer-deemphasized-color: #666 !important; --organizer-deemphasized-color: light-dark(#666, #bbb) !important;
--organizer-toolbar-background: #f7f7f7 !important; --organizer-toolbar-background: light-dark(#f7f7f7, #3B3B3B) !important;
--organizer-pane-background: #f7f7f7 !important; --organizer-pane-background: light-dark(#f7f7f7, #2B2B2B) !important;
--organizer-content-background: #f7f7f7 !important; --organizer-content-background: light-dark(#f7f7f7, #1C1C1C) !important;
--organizer-hover-background: #00000025 !important; --organizer-hover-background: light-dark(#00000025, #ffffff25) !important;
--organizer-selected-background: #006CBE80 !important; --organizer-selected-background: light-dark(#006CBE80, #006CBE80) !important;
--organizer-outline-color: #0055D7a0 !important; --organizer-outline-color: light-dark(#0055D7a0, #63ADE5) !important;
--organizer-toolbar-field-background: #fff !important; --organizer-toolbar-field-background: light-dark(#fff, #2B2B2B) !important;
--organizer-toolbar-field-background-focused: #fff !important; --organizer-toolbar-field-background-focused: light-dark(#fff, #2B2B2B) !important;
--organizer-border-color: #bfbfbf !important; --organizer-border-color: light-dark(#bfbfbf, #686868) !important;
scrollbar-color: #0006 #f7f7f740 !important; scrollbar-color:
light-dark(#0006, #fff6)
light-dark(#f7f7f740, #2B2B2B40) !important;
} }
#placesViewsBox #downloadsListBox richlistitem[selected="true"] { #placesViewsBox #downloadsListBox richlistitem[selected="true"] {
background-color: #006CBE !important; background-color: light-dark(#006CBE, #006CBE) !important;
color: #fff !important; color: light-dark(#fff, #fff) !important;
} }
#placeContentColumns :is(treecol, treecolpicker) { #placeContentColumns :is(treecol, treecolpicker) {
background-color: #f7f7f7 !important; background-color: light-dark(#f7f7f7, #3B3B3B) !important;
color: #000 !important; color: light-dark(#000, #fff) !important;
border-inline-start: 1px solid #bfbfbf !important; border-inline-start: 1px solid light-dark(#bfbfbf, #686868) !important;
box-shadow: inset 0 -1px #bfbfbf !important; box-shadow: inset 0 -1px light-dark(#bfbfbf, #686868) !important;
appearance: none !important; appearance: none !important;
} }
#placeContentColumns :is(treecol, treecolpicker):where(:hover) { #placeContentColumns :is(treecol, treecolpicker):where(:hover) {
background-color: #cecece !important; background-color: light-dark(#cecece, #4A4A4A ) !important;
color: #000 !important; color: light-dark(#000, #fff) !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;
}
} }
} }
@ -209,6 +187,24 @@
.sidebar-panel:not([lwt-sidebar]) { .sidebar-panel:not([lwt-sidebar]) {
color: light-dark(#000, #fff) !important; color: light-dark(#000, #fff) !important;
scrollbar-color: light-dark(#0006, #fff6) light-dark(#f7f7f740, #3b3b3b40) !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){ @-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 */ /* Linux / GTK csd support */
@media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) { :root:not(:-moz-lwtheme) {

25
chrome/global/popup.css
View file

@ -281,6 +281,8 @@
#downloadsListBox, #downloadsListBox,
.downloadsPanelFooterButton { .downloadsPanelFooterButton {
margin: var(--arrowpanel-menuitem-margin) !important; margin: var(--arrowpanel-menuitem-margin) !important;
width: auto !important;
min-width: auto !important;
} }
#downloadsPanel-blockedSubview, #downloadsPanel-blockedSubview,
@ -380,7 +382,7 @@ panelview .toolbarbutton-1,
} }
/* disable context menu when this tweak is applied */ /* 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 */ /* Context Menu */
menupopup:not(.PanelUI-subView), menupopup:not(.PanelUI-subView),
menupopup:not(.PanelUI-subView) menuitem, menupopup:not(.PanelUI-subView) menuitem,
@ -403,7 +405,7 @@ panelview .toolbarbutton-1,
panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox, panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox,
.menupopup-arrowscrollbox { .menupopup-arrowscrollbox {
background: var(--arrowpanel-background) !important; background: var(--arrowpanel-background) !important;
border: 0 !important; border: 1px solid light-dark(transparent, var(--panel-separator-color)) !important;
} }
/* make room for menu shadow */ /* make room for menu shadow */
@ -448,15 +450,6 @@ panelview .toolbarbutton-1,
box-shadow: var(--uc-box-shadow) !important; 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 { .popup-internal-box {
margin: 0 !important; margin: 0 !important;
} }
@ -493,6 +486,10 @@ panelview .toolbarbutton-1,
padding: 0 !important; padding: 0 !important;
background: none !important; background: none !important;
border-top: 1px solid var(--panel-separator-color) !important; border-top: 1px solid var(--panel-separator-color) !important;
&::before {
content: unset !important;
}
} }
#PlacesToolbar menupopup[placespopup="true"] menuseparator::before { #PlacesToolbar menupopup[placespopup="true"] menuseparator::before {
@ -567,7 +564,9 @@ panelview .toolbarbutton-1,
width: 16px !important; 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; display: none !important;
} }
@ -619,7 +618,7 @@ panelview .toolbarbutton-1,
fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important; 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) { @media (-moz-platform: windows) {
.menu-text, .menu-text,
.menu-iconic-text, .menu-iconic-text,

87
chrome/global/tree.css Normal file
View file

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

192
chrome/global/tweaks.css
View file

@ -1,32 +1,31 @@
/* Edge-Frfox - tweaks.css */ /* Edge-Frfox - tweaks.css */
/* disable drag space above tabs */ /* disable drag space above tabs */
@supports -moz-bool-pref("uc.tweak.disable-drag-space") { @media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
:root #titlebar { :root {
--tab-block-margin: 0px !important; --tab-block-margin: 0px !important;
} }
} }
/* force tabs to toolbar bg (useful for proton themes) (might experience some /* force tabs to toolbar bg (useful for proton themes) (might experience some
bugs with certain themes eg. dark text on dark background.) */ 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 { :root {
--lwt-selected-tab-background-color: unset !important; --lwt-selected-tab-background-color: unset !important;
} }
} }
/* remove tab separators */ /* remove tab separators */
@supports -moz-bool-pref("uc.tweak.remove-tab-separators") { @media (-moz-bool-pref: "uc.tweak.remove-tab-separators") {
.tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after { .tabbrowser-tab .tab-stack {
display: none !important; &::before,
} &::after {
content: initial !important;
.tabbrowser-tab:not([last-visible-tab="true"]) { }
margin-inline-end: 0px !important;
} }
} }
@supports -moz-bool-pref("uc.tweak.floating-tabs") { @media (-moz-bool-pref: "uc.tweak.floating-tabs") {
:root:not(:-moz-lwtheme), :root:not(:-moz-lwtheme),
:root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"] { :root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"] {
--lwt-accent-color: light-dark(#f3f3f3, #202020) !important; --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; --chrome-content-separator-color: light-dark(#bfbfbf, #535353) !important;
--uc-urlbar-shadow: none !important; --uc-urlbar-shadow: none !important;
--uc-tab-border-color: light-dark(#0000, #fff1) !important; --uc-tab-border-color: light-dark(#0000, #fff1) !important;
--toolbar-non-lwt-bgcolor: var(--lwt-accent-color) !important;
} }
@media (-moz-gtk-csd-available) { @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 */ /* adjust spacing of area above tabs */
@media not (-moz-platform: macos) { @media not (-moz-platform: macos) {
:root[sizemode="maximized"] #titlebar { :root[sizemode="maximized"] {
--tab-block-margin: 4px !important; --tab-block-margin: 4px !important;
} }
} }
:root:is([inFullscreen], :not([tabsintitlebar])) #titlebar { :root:is([inFullscreen], :not([tabsintitlebar])) {
--tab-block-margin: 4px !important; --tab-block-margin: 4px !important;
} }
@supports -moz-bool-pref("uc.tweak.disable-drag-space") { @media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
:root #titlebar { :root {
--tab-block-margin: 4px !important; --tab-block-margin: 4px !important;
} }
} }
@ -125,72 +125,19 @@ bugs with certain themes eg. dark text on dark background.) */
:root { :root {
--uc-titlebar-shadow: none; --uc-titlebar-shadow: none;
--uc-tab-shadow: --uc-tab-shadow:
0 3.3px 3px rgba(0, 0, 0, 0.06), 0 3.3px 3px rgb(0 0 0 / .06),
0 0 0 1px rgba(0, 0, 0, 0.11); 0 0 0 1px rgb(0 0 0 / .11);
} }
:root[lwtheme-brighttext="true"] { :root[lwtheme-brighttext="true"] {
--uc-titlebar-shadow: none; --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) { @media not (-moz-platform: macos) {
@supports not -moz-bool-pref("uc.tweak.revert-context-menu") { @media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
@supports -moz-bool-pref("uc.tweak.vertical-context-navigation") { @media (-moz-bool-pref: "uc.tweak.vertical-context-navigation") {
#context-navigation { #context-navigation {
flex-direction: column !important; flex-direction: column !important;
-moz-box-orient: vertical !important; -moz-box-orient: vertical !important;
@ -243,7 +190,7 @@ bugs with certain themes eg. dark text on dark background.) */
} }
@media (-moz-windows-compositor) { @media (-moz-windows-compositor) {
@supports -moz-bool-pref("uc.tweak.revert-context-menu") { @media (-moz-bool-pref: "uc.tweak.revert-context-menu") {
menupopup { menupopup {
--panel-color: var(--arrowpanel-color) !important; --panel-color: var(--arrowpanel-color) !important;
--panel-border-radius: 4px !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 { #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned], [selected]):hover .tab-close-button {
display: flex !important; 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;
}
}

3
chrome/icons/arrow-filled-down.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path transform="rotate(90)" transform-origin="center" d="M6.479 2.729 11.1 7.35a.92.92 0 0 1 0 1.3l-4.621 4.621a.72.72 0 0 1-1.229-.509V3.237a.72.72 0 0 1 1.229-.508z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 300 B

3
chrome/icons/arrow-filled-left.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path transform="rotate(180)" transform-origin="center" d="M6.479 2.729 11.1 7.35a.92.92 0 0 1 0 1.3l-4.621 4.621a.72.72 0 0 1-1.229-.509V3.237a.72.72 0 0 1 1.229-.508z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 301 B

3
chrome/icons/arrow-filled-right.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M6.479 2.729 11.1 7.35a.92.92 0 0 1 0 1.3l-4.621 4.621a.72.72 0 0 1-1.229-.509V3.237a.72.72 0 0 1 1.229-.508z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 251 B

3
chrome/icons/firefox-view.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M5.5 7a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5zM4 2c-.736 0-1.381.404-1.729 1h11.46c-.347-.596-.993-1-1.729-1zM3 4c-1.099 0-2 .9-2 2v7c0 1.099.9 2 2 2h10c1.099 0 2-.9 2-2V6c0-1.099-.9-2-2-2zm0 1h10c.563 0 1 .437 1 1v7c0 .563-.437 1-1 1H3c-.563 0-1-.437-1-1V6c0-.563.437-1 1-1z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 444 B

79
chrome/icons/icons.css
View file

@ -133,6 +133,10 @@ and 11 so applied to both) */
list-style-image: url("new-tab.svg") !important; list-style-image: url("new-tab.svg") !important;
} }
#firefox-view-button {
list-style-image: url("firefox-view.svg") !important;
}
#sync-button, #sync-button,
.urlbarView-row[source="tabs"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon, .urlbarView-row[source="tabs"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon,
#urlbar-engine-one-off-item-tabs { #urlbar-engine-one-off-item-tabs {
@ -168,6 +172,11 @@ and 11 so applied to both) */
list-style-image: url("search-page.svg") !important; list-style-image: url("search-page.svg") !important;
} }
#appMenu-translate-button,
#translations-button-icon {
list-style-image: url("translate.svg") !important;
}
#open-file-button { #open-file-button {
list-style-image: url("open.svg") !important; list-style-image: url("open.svg") !important;
} }
@ -361,7 +370,9 @@ and 11 so applied to both) */
.widget-overflow-list .subviewbutton-nav::after, .widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after, .PanelUI-subView .subviewbutton-nav::after,
.menu-right { .menu-right {
content: url("arrow-right.svg") !important; content: url("arrow-filled-right.svg") !important;
opacity: 0.6 !important;
scale: 0.75 !important;
} }
#PlacesChevron, #PlacesChevron,
@ -550,7 +561,7 @@ and 11 so applied to both) */
} }
/* disable context menu icons when this tweak is applied */ /* 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 */ /* Context Menu Icons */
menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon { 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"); --header-image: url("extension.svg");
--uc-enabled: 1; --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;
}

3
chrome/icons/tag.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M12 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM9.129 0a2.003 2.003 0 0 0-1.426.584L1.021 7.249a2 2 0 0 0-.002 2.83l4.948 4.948a2 2 0 0 0 2.828 0l6.631-6.631a2 2 0 0 0 .586-1.417l-.007-4.95A2 2 0 0 0 14.018.032zm-.72 1.292A1 1 0 0 1 9.123 1l4.89.032a1 1 0 0 1 .994.999l.007 4.95a1 1 0 0 1-.293.708L8.09 14.32a1 1 0 0 1-1.415 0L1.727 9.372a1 1 0 0 1 .001-1.415z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 489 B

3
chrome/icons/translate.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M3.453 3.115c-.973 0-1.88.34-2.533.78a.5.5 0 0 0 .559.83c.487-.328 1.244-.61 1.975-.61.835 0 1.537.219 1.979.65.368.36.568.929.568 1.924v.08c-.728-.221-1.415-.359-2.199-.359-.895 0-1.815.273-2.543.816C.531 7.77.001 8.622.001 9.666c0 1.845 1.375 3.255 3.051 3.255 1.094 0 2.143-.543 2.949-1.11v.61a.5.5 0 0 0 1 0V6.69c0-1.135-.247-2.032-.87-2.641-.692-.677-1.67-.934-2.677-.934zm.348 4.295c.764 0 1.405.146 2.199.408v2.73c-.75.608-2.013 1.373-2.95 1.373-1.13 0-2.05-.886-2.05-2.256 0-.718.33-1.245.857-1.639.527-.394 1.258-.617 1.943-.617zm7.648-5.406a.5.5 0 0 0-.428.354 28.188 28.188 0 0 0-.47 1.814c-.485.033-.99.038-1.519.003a.5.5 0 0 0-.53.467.5.5 0 0 0 .464.531c.476.031.935.031 1.377.01a22.568 22.568 0 0 0-.262 1.812c-.315.17-.627.378-.93.635-.862.732-1.39 1.665-1.582 2.572-.192.907-.057 1.82.51 2.445.273.3.672.445 1.068.445s.802-.122 1.205-.342c.195-.105.39-.235.582-.386.036.081.07.16.098.234a.5.5 0 0 0 .644.29.5.5 0 0 0 .29-.645c-.08-.211-.17-.413-.264-.621.326-.381.635-.834.91-1.36.458-.873.693-1.791.803-2.647 1.003.383 1.619 1.313 1.619 2.385 0 1.445-1.142 2.572-2.24 3.068a.5.5 0 0 0-.25.662.5.5 0 0 0 .662.25c1.374-.622 2.828-2.026 2.828-3.98a3.563 3.563 0 0 0-2.54-3.404c.003-.08.004-.157.005-.235a.5.5 0 0 0-.496-.502.5.5 0 0 0-.504.496l-.002.075a4.885 4.885 0 0 0-1.356.15c.062-.48.144-.98.242-1.488.82-.105 1.568-.275 2.244-.455a.5.5 0 0 0 .354-.611.5.5 0 0 0-.611-.356c-.55.146-1.136.283-1.762.381.111-.476.235-.95.37-1.408a.5.5 0 0 0-.337-.621.5.5 0 0 0-.194-.018zm.912 5.424.07.002c-.096.782-.305 1.611-.703 2.371a6.595 6.595 0 0 1-.45.738 6.652 6.652 0 0 1-.263-1.52c-.025-.398-.018-.861.018-1.368.432-.159.87-.222 1.328-.222zm-2.357.803c-.006.298-.004.583.013.85.064.996.28 1.735.506 2.321-.223.203-.442.36-.646.471-.292.158-.55.22-.727.22s-.263-.042-.33-.116c-.283-.312-.415-.889-.271-1.566.143-.679.555-1.428 1.25-2.018.068-.059.137-.11.205-.163z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

4
chrome/toolbar/findbar.css
View file

@ -32,11 +32,11 @@
.close-icon:not([disabled]):hover, .close-icon:not([disabled]):hover,
.findbar-find-previous:not([disabled]):hover, .findbar-find-previous:not([disabled]):hover,
.findbar-find-next: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, .close-icon:not([disabled]):hover:active,
.findbar-find-previous:not([disabled]):hover:active, .findbar-find-previous:not([disabled]):hover:active,
.findbar-find-next: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;
} }

2
chrome/toolbar/navbar.css
View file

@ -27,7 +27,7 @@
padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important; 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 { #navigator-toolbox {
border-bottom: none !important; border-bottom: none !important;
} }

39
chrome/toolbar/personalbar.css
View file

@ -4,39 +4,60 @@
--bookmark-block-padding: 6px !important; --bookmark-block-padding: 6px !important;
} }
/* Bookmarks bar item sizing */
#personal-toolbar-empty-description, #personal-toolbar-empty-description,
#PersonalToolbar .toolbarbutton-1, #PersonalToolbar .toolbarbutton-1,
toolbarbutton.bookmark-item:not(.subviewbutton) { toolbarbutton.bookmark-item:not(.subviewbutton) {
margin-block: 0 4px !important; margin-block: 2px 4px !important;
padding: var(--bookmark-block-padding) 6px !important; padding-block: var(--bookmark-block-padding) !important;
padding-inline: 6px !important;
font-size: 12px !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 { #PersonalToolbar .toolbarbutton-1 {
padding: 0 !important; padding: 0 !important;
} }
#PlacesToolbarItems>toolbarseparator::before { /* Bookmarks bar separators */
content: ""; #PlacesToolbarItems > toolbarseparator {
display: block; padding-inline: 1px !important;
border-inline-start: 1px solid var(--toolbarseparator-color) !important;
margin-block: 6px 10px !important; &::before {
border-image-source: none !important; 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 { #PersonalToolbar {
padding-inline: calc(var(--toolbar-start-end-padding) - 2px) calc(var(--toolbar-start-end-padding) + 6px) !important; 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, #managed-bookmarks>.toolbarbutton-icon,
#bookmarks-toolbar-placeholder>.toolbarbutton-icon, #bookmarks-toolbar-placeholder>.toolbarbutton-icon,
#PlacesToolbarItems>.bookmark-item>.toolbarbutton-icon[label]:not([label=""]), #PlacesToolbarItems>.bookmark-item>.toolbarbutton-icon[label]:not([label=""]),
#OtherBookmarks.bookmark-item[container]>.toolbarbutton-icon { #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 { #PersonalToolbar .toolbarbutton-1>.toolbarbutton-icon {
width: calc(2 * var(--bookmark-block-padding) + 16px) !important; width: calc(2 * var(--bookmark-block-padding) + 16px) !important;
height: calc(2 * var(--bookmark-block-padding) + 16px) !important; height: calc(2 * var(--bookmark-block-padding) + 16px) !important;
padding: var(--bookmark-block-padding) !important; padding: var(--bookmark-block-padding) !important;
} }
:root {
--bookmarks-toolbar-overlapping-browser-height: 34px !important;
}

192
chrome/toolbar/tabbar.css
View file

@ -1,29 +1,25 @@
/* Edge-Frfox - tabbar.css */ /* Edge-Frfox - tabbar.css */
@supports -moz-bool-pref("uc.tweak.floating-tabs.equal-margin") and -moz-bool-pref("uc.tweak.floating-tabs") { :root {
:root #titlebar { --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; --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 */ /* tab open/close transition */
.tabbrowser-tab:not([pinned]) { .tabbrowser-tab:not([pinned]) {
transition-property: min-width, max-width !important; transition-property: min-width, max-width !important;
@ -37,13 +33,13 @@
transition: transform 200ms cubic-bezier(0, .75, .25, 1) !important; 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; --tab-block-margin: 0px !important;
} }
/* hide space above tabs when maximised for non-macOS versions of Firefox */ /* hide space above tabs when maximised for non-macOS versions of Firefox */
@media not (-moz-platform: macos) { @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 { #toolbar-menubar:not([inactive])+#TabsToolbar {
--tab-block-margin: 0px !important; --tab-block-margin: 0px !important;
} }
@ -57,33 +53,41 @@
border: 0 !important; border: 0 !important;
position: relative !important; position: relative !important;
--uc-tab-corner-bg: transparent; --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 */ .tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected]) .tab-background {
.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 {
border-bottom-left-radius: var(--tab-border-radius) !important; border-bottom-left-radius: var(--tab-border-radius) !important;
right: 0 !important;
transform: translateX(8px) !important; &::before {
box-shadow: -4px 4px 0 4px var(--uc-tab-corner-bg) !important; --uc-tab-corner-bg: transparent !important;
}
} }
.tab-background:is([selected], [multiselected]) { .tab-background:is([selected], [multiselected]) {
@ -95,7 +99,7 @@
--uc-tab-corner-bg: color-mix(in srgb, currentColor 8%, transparent) !important; --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]) { #Tabstoolbar:not([brighttext]) .tabbrowser-tab:hover .tab-background:not([selected], [multiselected]) {
background-color: color-mix(in srgb, white 30%, transparent) !important; background-color: color-mix(in srgb, white 30%, transparent) !important;
--uc-tab-corner-bg: 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; padding: 0 12px !important;
} }
.tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line { /* Tab container indicator */
height: 8px !important; .tabbrowser-tab[usercontextid] .tab-background .tab-context-line {
clip-path: inset(0 0 6px) !important; height: 2px !important;
border-radius: var(--tab-border-radius) !important; border-radius: 2px !important;
border-bottom-left-radius: 0 !important; margin: 2px 7px 0 !important;
border-bottom-right-radius: 0 !important; }
margin: 0 !important;
.tabbrowser-tab[selected][usercontextid] .tab-background .tab-context-line {
margin-inline: 9px !important;
} }
.titlebar-spacer[type="post-tabs"] { .titlebar-spacer[type="post-tabs"] {
@ -294,26 +300,49 @@ toolbarbutton[part="scrollbutton-down"] {
max-width: 240px !important; max-width: 240px !important;
} }
/* tab separators */ /* Tab separators */
.tabbrowser-tab:not([last-visible-tab="true"]) { .tabbrowser-tab .tab-stack {
margin-inline-end: 3px !important; &::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 { /* Set separator color */
content: ""; .tabbrowser-tab:not([selected], [multiselected], :hover) {
position: absolute; & .tab-stack::before,
display: block; &:last-of-type .tab-stack::after {
height: 20px; border-color: color-mix(in srgb, currentColor 34%, transparent);
right: -1px; }
top: 6px;
border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent);
} }
/* need layout.css.has-selector.enabled */ /* Hide separator when previous sibling is hovered or selected */
.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected="true"], :hover, [beforeselected-visible], [beforehovered])) .tab-stack::after { .tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected], [multiselected], :hover) .tab-stack::before {
display: none; 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] { #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !important; margin-inline-start: 0 !important;
} }
@ -354,11 +383,20 @@ toolbarbutton[part="scrollbutton-down"] {
margin-top: calc(2px + var(--tab-block-margin)) !important; margin-top: calc(2px + var(--tab-block-margin)) !important;
} }
#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab:first-of-type { /* add margin to tabs if they are the first or last tab */
margin-inline-start: 14px !important; #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 { #tabbrowser-tabs {
@ -375,21 +413,21 @@ toolbarbutton[part="scrollbutton-down"] {
} }
#tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[pinned] { #tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[pinned] {
clip-path: inset(-4px -4px 0) !important; clip-path: inset(-8px -8px 0) !important;
} }
:root { :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: --uc-tab-shadow:
0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), 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"] { :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: --uc-tab-shadow:
0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), 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]), #tabbrowser-tabs .tab-background:is([selected], [multiselected]),

1
chrome/userChrome.css
View file

@ -9,6 +9,7 @@
@import url("global/popup.css"); @import url("global/popup.css");
@import url("global/tweaks.css"); @import url("global/tweaks.css");
@import url("global/browser.css"); @import url("global/browser.css");
@import url("global/tree.css");
/* import custom stylesheet instead of modifying Edge-Frfox theme files */ /* import custom stylesheet instead of modifying Edge-Frfox theme files */
@import url("custom.css"); @import url("custom.css");

BIN
screenshots/dark-mica-floating-tabs.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 139 KiB

BIN
screenshots/dark-mica.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 133 KiB

BIN
screenshots/light-mica-floating-tabs.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 163 KiB

BIN
screenshots/light-mica.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 156 KiB