diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md
new file mode 100644
index 0000000..de532d9
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug.md
@@ -0,0 +1,14 @@
+---
+name: 🐛 Bug
+about: Report a bug
+labels: bug
+---
+
+**Description**
+Include clear explaination of bug and how to reproduce.
+
+**Include screenshot / video recording if possible.**
+
+**Configuration**
+- Firefox Version:
+- OS: (eg. Windows, macOS, etc.)
diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md
new file mode 100644
index 0000000..d85f754
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature.md
@@ -0,0 +1,10 @@
+---
+name: ✨ Feature
+about: Request a new feature / enhancement
+labels: enhancement
+---
+
+**Description**
+Include clear explaination of the feature and how it works.
+
+**Include screenshot / video recording if possible.**
diff --git a/.gitignore b/.gitignore
index 29bc542..dd2cc3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,8 @@ inkscape-template.svg
/userContent.css
.vscode
/icons
+/chrome/background-0.jpg
+/chrome/background-1.jpg
+/chrome/background-0.png
+/chrome/background-1.png
+/custom/
diff --git a/README.md b/README.md
index 500199e..f0673db 100644
--- a/README.md
+++ b/README.md
@@ -1,81 +1,116 @@
# Edge-Frfox
A Firefox userChrome.css theme that aims to recreate the look and feel of the Chromium version of Microsoft Edge.
-
-###### Screenshot taken with macOS Monterey / Firefox Nightly 96.0a1 (2021-11-30)
+
+
## How to install
1. Go to `about:support` and click the "Open Folder/Show in Finder" button for the root directory of your browser profile/s.
2. Download and copy the `chrome` folder into the profile folder.
3. Go to about:config and change these preferences:
- ###### For all operating systems:
- 1. `toolkit.legacyUserProfileCustomizations.stylesheets` = `true`
- 2. `svg.context-properties.content.enabled` = `true`
- 3. `layout.css.color-mix.enabled` = `true`
- ###### On macOS:
- ~~1. To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false`~~ **(Not Implemented Yet!)**
+ ### For all operating systems:
+ * `toolkit.legacyUserProfileCustomizations.stylesheets` = `true`
+ * `svg.context-properties.content.enabled` = `true`
+ * `layout.css.color-mix.enabled` = `true`
- ##### Recommended:
- 1. `browser.tabs.tabMinWidth` = `66`
- 2. `browser.tabs.tabClipWidth` = `66`
+ ### Firefox 119.0 and above:
+ * `layout.css.light-dark.enabled` = `true`
- Additional tweaks can also be applied to the theme, such as Mica (Windows 11 Only), Floating Tabs and more. See [Tweaks](#tweaks).
+ ### On macOS:
+ * To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false`
+
+ ### Recommended:
+ * `browser.tabs.tabMinWidth` = `66`
+ * `browser.tabs.tabClipWidth` = `86`
+
+ ### 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 Floating Tabs, rounded browser corners and more. See [Tweaks](#tweaks).
**Note: Most frequently tested on macOS**
-## Screenshots (Windows)
-|Theme|Light|Dark|
-|-|-|-|
-|Default|||
-|Floating Tabs|||
-|Mica|||
-|Mica and Floating Tabs|||
+## 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] |
+| 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.
-|disable drag space above tabs|
-|-|
-|`uc.tweak.disable-drag-space`|
+| 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 Edge style floating tabs|
-|-|
-|`uc.tweak.floating-tabs`|
+| Enable rounded corners |
+| -------------------------- |
+| `uc.tweak.rounded-corners` |
-|enable Mica toolbar background (Windows 11 only)|
-|-|
-|**See [Mica Tweak Instructions (Windows 11 Only)](#mica-tweak-instructions-windows-11-only) for installation instructions.**|
-|`uc.tweak.win11-mica`|
+| 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` |
-|force tab background colour to `--toolbar-bg` (useful for Proton themes)|
-|-|
-|**NOTE: can cause readability issues with some themes! (eg. white text on white bg)**|
-|`uc.tweak.force-tab-colour`|
+| 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` |
-|only show Firefox account button when in private mode (useful as a private browsing indicator)|
-|-|
-|**NOTE: all functionality of this button can still be accessed from the app menu.**|
-|`uc.tweak.fxa-button-as-private-indicator`|
+| Hide forward button when it's disabled (like in Edge) |
+| ------------------------------------------------------ |
+| `uc.tweak.hide-forward-button` |
-|remove tab separators|
-|-|
-|`uc.tweak.remove-tab-separators`|
+| Hide Firefox logo on newtab page |
+| -------------------------------- |
+| `uc.tweak.hide-newtab-logo` |
-|remove extra padding from permissions button (older functionality)|
-|-|
-|`uc.tweak.less-permissions-button-padding`|
+| Disable drag space above tabs |
+| ----------------------------- |
+| `uc.tweak.disable-drag-space` |
-## Mica Tweak Instructions (Windows 11 Only)
-1. Download and install [Mica For Everyone](https://github.com/MicaForEveryone/MicaForEveryone).
-2. Create a custom process rule with the following:
- 1. Name: `firefox`
- 2. Titlebar Color: `System`
- 3. Backdrop Type: `Mica`
-3. Enable tweak in `about:config`: `uc.tweak.win11-mica`
-4. Restart Firefox.
+| 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, Bookmark) vertically |
+| --------------------------------------------------------------------------------- |
+| **NOTE: labels are only shown in the English language.** |
+| `uc.tweak.vertical-context-navigation` |
+
+| Remove tab separators |
+| -------------------------------- |
+| `uc.tweak.remove-tab-separators` |
+
+| Use Firefox's default context menu font-size (only applies to Windows) |
+| ---------------------------------------------------------------------- |
+| `uc.tweak.smaller-context-menu-text` |
+
+| Disable custom context menus |
+| ------------------------------ |
+| `uc.tweak.revert-context-menu` |
+
+| If a tab's close button is hidden, show it when hovering over tab |
+| ----------------------------------------------------------------- |
+| `uc.tweak.show-tab-close-button-on-hover` |
+
+## Mica Tweak 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)
@@ -84,6 +119,15 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse
[KibSquib48](https://github.com/KibSquib48) - [MicaFox](https://github.com/KibSquib48/MicaFox)
----
+
+[1]: https://github.com/lassekongo83/adw-gtk3
-Old version can be found [here](https://github.com/bmFtZQ/edge-frfox/tree/v91.0-archive).
+
+[s-l]: screenshots/light.png
+[s-lf]: screenshots/light-floating-tabs.png
+[s-lgtk]: screenshots/gtk-light.png
+
+
+[s-d]: screenshots/dark.png
+[s-df]: screenshots/dark-floating-tabs.png
+[s-dgtk]: screenshots/gtk-dark.png
diff --git a/chrome/content/common.css b/chrome/content/common.css
index b82a5b1..7491148 100644
--- a/chrome/content/common.css
+++ b/chrome/content/common.css
@@ -1,84 +1,59 @@
-/* EdgeFr-Fox by bmFtZQ - content/common.css */
+/* Edge-Frfox - content/common.css */
/* 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;
}
}
/* preferences */
-@-moz-document url-prefix(about:preferences), url-prefix(about:addons) {
+@-moz-document url-prefix(about:preferences),
+url-prefix(about:addons) {
.category[selected] {
position: relative !important;
border-radius: 4px !important;
@@ -96,8 +71,9 @@
background-color: var(--in-content-accent-color);
border-radius: 3px;
position: absolute;
- left: 0;
- top: 12px;
+ left: 2px;
+ top: 50%;
+ translate: 0 -50%;
}
button.tab-button:hover {
@@ -108,6 +84,16 @@
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 444b421..d8ec514 100644
--- a/chrome/content/newtab.css
+++ b/chrome/content/newtab.css
@@ -1,8 +1,10 @@
-/* EdgeFr-Fox by bmFtZQ - content/newtab.css */
+/* Edge-Frfox - content/newtab.css */
/* colours */
-@-moz-document url-prefix("about:newtab"), url-prefix("about:home") {
- body:not([lwt-newtab], [lwt-newtab-brighttext]) {
+@-moz-document url-prefix("about:newtab"),
+url-prefix("about:home"),
+url-prefix("about:firefoxview") {
+ :root:not([lwt-newtab], [lwt-newtab-brighttext]) {
--newtab-background-color: #F7F7F7 !important;
--newtab-background-color-secondary: #fff !important;
--newtab-text-primary-color: #252525 !important;
@@ -21,7 +23,7 @@
--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;
@@ -30,8 +32,7 @@
--newtab-button-secondary-color: inherit !important;
}
- body[style*="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1);"]:not([style*="--newtab-background-color-secondary"])[lwt-newtab-brighttext],
- body:not([style*="color"])[lwt-newtab-brighttext] {
+ :root:not([style*="color"])[lwt-newtab-brighttext] {
--newtab-background-color: #252525 !important;
--newtab-background-color-secondary: #4A4A4A !important;
--newtab-text-primary-color: #fff !important;
@@ -48,7 +49,8 @@
}
}
-@-moz-document url-prefix("about:newtab"), url-prefix("about:home") {
+@-moz-document url-prefix("about:newtab"),
+url-prefix("about:home") {
/* hide pin */
.icon.icon-pin-small {
display: none !important;
@@ -56,7 +58,7 @@
/* unpinned sites have lower opacity title */
.top-site-button .title:not(.pinned) {
- opacity: 0.6 !important;
+ opacity: 0.7 !important;
}
/* search bar */
@@ -71,7 +73,7 @@
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 {
@@ -109,7 +111,7 @@
.top-site-outer .default-icon,
.top-site-outer .search-topsite {
- background-size: 24px !important;
+ background-size: 16px !important;
height: 24px !important;
width: 24px !important;
}
@@ -119,29 +121,51 @@
}
/* card */
+ .card-outer,
.card-outer .card,
.ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
- border-radius: 4px !important;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
+ border-radius: 6px !important;
+ }
+
+ .card-outer .card,
+ .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
+ box-shadow: 0 1px 4px rgb(0 0 0 / .3) !important;
}
.card-outer .card-preview-image-outer,
.ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img {
- border-radius: 4px 4px 0 0 !important
+ border-radius: 6px 6px 0 0 !important
+ }
+
+ .fake-textbox {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ }
+
+ .outer-wrapper.only-search {
+ display: flex !important;
+ padding: 30px !important;
+ }
+
+ @media (-moz-bool-pref: "uc.tweak.hide-newtab-logo") {
+ .logo-and-wordmark {
+ display: none !important;
+ }
+
+ .outer-wrapper:not(.fixed-search) .search-wrapper {
+ padding-top: 0 !important;
+ }
}
}
/* private browsing newtab */
@-moz-document url-prefix(about:privatebrowsing) {
:root {
- --uc-wordmark-color: #737373 !important;
- --uc-background-color-secondary: #fff !important;
- }
+ --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 !important;
- --uc-background-color-secondary: #4a4a4a !important;
+ @media (-moz-bool-pref: "browser.theme.dark-private-windows") {
+ color-scheme: dark !important;
}
}
@@ -158,7 +182,7 @@
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 {
@@ -185,5 +209,108 @@
.info {
background-color: var(--uc-background-color-secondary) !important;
+ background-image: none !important;
+ position: relative !important;
+ }
+
+ .info::before {
+ content: "";
+ position: absolute;
+ left: 32px;
+ top: 20px;
+ height: 32px;
+ aspect-ratio: 1 / 1;
+ background: center / contain url("../icons/account-private.svg");
+ border-radius: 99px;
+ }
+}
+
+@media (-moz-bool-pref: "uc.tweak.newtab-background") {
+ @-moz-document url(about:newtab),
+ url(about:home),
+ url(about:privatebrowsing),
+ url-prefix("about:firefoxview") {
+ :root body {
+ /* specify both jpg and png file extensions, but jpg images will always
+ 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: 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;
+ background-image: var(--bg-0) !important;
+ background-position: center !important;
+ background-size: cover !important;
+ background-attachment: fixed !important;
+ }
+
+ :root[lwt-newtab-brighttext] body,
+ :root.private body {
+ background-image: var(--bg-1), var(--bg-0) !important;
+ --newtab-element-hover-color: rgb(66 66 66 / .4) !important;
+ --newtab-element-active-color: rgb(66 66 66 / .55) !important;
+ }
+
+ @media not (-moz-bool-pref: "browser.theme.dark-private-windows") {
+ :root.private body {
+ background-image: var(--bg-0) !important;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root.private body {
+ background-image: var(--bg-1), var(--bg-0) !important;
+ }
+ }
+ }
+
+ .top-site-outer .title,
+ .ds-header,
+ .ds-layout .section-title span,
+ .ds-navigation,
+ .page-section-header>h1,
+ .page-section-header>.section-description,
+ .closed-tab-li-main:not(:hover, :active),
+ .closed-tab-li-dismiss,
+ .brand-logo>.brand-feature-name,
+ #colorways-collection-title,
+ #colorways-collection-description,
+ .synced-tabs-container>.loading-content {
+ text-shadow: var(--text-shadow) !important;
+ color: #fff !important;
+ -moz-osx-font-smoothing: auto !important;
+ }
+
+ .wordmark,
+ .icon-settings,
+ .top-site-outer .context-menu-button,
+ .closed-tab-li-main:not(:hover, :active) .favicon,
+ .page-section-header:not(:hover)>.twisty,
+ .synced-tab-li-favicon,
+ .page-section-header:not(:hover)>.twisty,
+ .closed-tab-li-dismiss:not(:hover),
+ .synced-tabs-container>.loading-content .sync {
+ filter: var(--icon-shadow) !important;
+ color: #fff !important;
+ fill: currentColor !important
+ }
+
+ .section-top-bar .learn-more-link a,
+ .ds-navigation a {
+ color: #b3d4ff !important;
+ text-shadow: var(--text-shadow) !important;
+ -moz-osx-font-smoothing: auto !important;
+ }
+
+ .top-site-outer .title .sponsored-label,
+ .closed-tab-li-main:not(:hover, :active) :is(.closed-tab-li-url, .closed-tab-li-time) {
+ color: #eee !important;
+ }
+
+ .fixed-search .search-wrapper {
+ border-bottom: 0 !important;
+ background: transparent linear-gradient(#0004, transparent) !important;
+ }
}
}
diff --git a/chrome/global/browser.css b/chrome/global/browser.css
new file mode 100644
index 0000000..dab9cb5
--- /dev/null
+++ b/chrome/global/browser.css
@@ -0,0 +1,79 @@
+/* Edge-Frfox - browser.css */
+
+@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
+ :root {
+ --browser-frame-bgcolor: var(--lwt-accent-color);
+ }
+}
+
+@media not (-moz-bool-pref: "uc.tweak.floating-tabs") {
+ :root {
+ --browser-frame-bgcolor: var(--toolbar-bgcolor);
+ }
+}
+
+@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;
+ }
+
+ /* 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 3c35531..1254ddf 100644
--- a/chrome/global/colors.css
+++ b/chrome/global/colors.css
@@ -1,148 +1,312 @@
-/* EdgeFr-Fox by bmFtZQ - colors.css */
+/* Edge-Frfox - colors.css */
-/* light */
-:root:not(:-moz-lwtheme) {
- --lwt-accent-color: #cecece !important;
- --lwt-accent-color-inactive: #e8e8e8 !important;
- --lwt-text-color: #000 !important;
- --toolbar-bgcolor: #f7f7f7 !important;
- --toolbar-color: #000 !important;
- --toolbarbutton-icon-fill: #000 !important;
- --chrome-content-separator-color: #bfbfbf !important;
- --lwt-toolbarbutton-icon-fill-attention: #0078D4 !important;
- --toolbarbutton-icon-fill-attention: #0078D4 !important;
+/* default colours (light & dark) */
+:root:not(:-moz-lwtheme),
+:root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"] {
+ --lwt-accent-color: light-dark(#cecece, #1C1C1C) !important;
+ --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;
+ --lwt-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-selected-tab-background-color: var(--toolbar-bgcolor) !important;
+ --lwt-selected-tab-background-color: unset !important;
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
- --toolbar-field-background-color: #fff !important;
- --toolbar-field-color: #000 !important;
- --toolbar-field-border-color: #0000 !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: #0055D7 !important;
+ --toolbar-field-focus-border-color: light-dark(#0055D7, #63ADE5) !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: #0072C9 !important;
+ --urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important;
--lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
- --urlbar-box-bgcolor: #f7f7f7 !important;
- --autocomplete-popup-background: #fff !important;
- --autocomplete-popup-color: #fff !important;
- --autocomplete-popup-highlight-background: #f2f2f2 !important;
- --autocomplete-popup-hover-background: #e5e5e5 !important;
- --autocomplete-popup-separator-color: #dadada00 !important;
- --toolbarbutton-hover-background: #e0e0e0 !important;
- --toolbarbutton-active-background: #d5d5d5 !important;
- --button-bgcolor: #EDEDED !important;
- --button-hover-bgcolor: #e5e5e5 !important;
- --button-active-bgcolor: #d5d5d5 !important;
- --button-primary-bgcolor: #0078D4 !important;
- --button-primary-hover-bgcolor: #006CBE !important;
- --button-primary-active-bgcolor: #1683D8 !important;
- --button-primary-color: #fff !important;
- --error-text-color: #FF9AA2 !important;
- --input-bgcolor: #fff !important;
- --input-color: #2b2b2b !important;
- --input-border-color: #bebebe !important;
- --input-error-border-color: #FF848A !important;
- --zoom-controls-bgcolor: #4A4A4A !important;
- --arrowpanel-background: #fff !important;
- --arrowpanel-color: #000 !important;
- --panel-description-color: #000a !important;
- --panel-disabled-color: #0009 !important;
- --arrowpanel-dimmed: #565656 !important;
- --arrowpanel-dimmed-further: #707070 !important;
- --panel-item-hover-bgcolor: #eee !important;
- --panel-item-active-bgcolor: #ddd !important;
- --arrowpanel-border-color: #dadada !important;
- --panel-separator-color: #dadada !important;
- --panel-banner-item-update-supported-bgcolor: #50B080 !important;
- --focus-outline-color: #0055D7 !important;
+ --autocomplete-popup-background: light-dark(#fff, #4A4A4A) !important;
+ --autocomplete-popup-color: light-dark(#fff, #fff) !important;
+ --autocomplete-popup-highlight-background: light-dark(#f2f2f2, #383838) !important;
+ --autocomplete-popup-hover-background: light-dark(#e5e5e5, #444444) !important;
+ --autocomplete-popup-separator-color: light-dark(#dadada00, #63636300) !important;
+ --button-bgcolor: light-dark(#EDEDED, #5C5C5C) !important;
+ --button-hover-bgcolor: light-dark(#e5e5e5, #646464) !important;
+ --button-active-bgcolor: light-dark(#d5d5d5, #575757) !important;
+ --button-primary-bgcolor: light-dark(#0078D4, #006CBE) !important;
+ --button-primary-hover-bgcolor: light-dark(#006CBE, #0078D4) !important;
+ --button-primary-active-bgcolor: light-dark(#1683D8, #005CA3) !important;
+ --button-primary-color: light-dark(#fff, #fff) !important;
+ --error-text-color: light-dark(#FF9AA2, #FF9AA2) !important;
+ --input-bgcolor: light-dark(#fff, #4A4A4A) !important;
+ --input-color: light-dark(#2b2b2b, #fff) !important;
+ --input-border-color: light-dark(#bebebe, #8A8A8A) !important;
+ --input-error-border-color: light-dark(#FF848A, #FF848A) !important;
+ --zoom-controls-bgcolor: light-dark(#4A4A4A, #4A4A4A) !important;
+ --arrowpanel-background: light-dark(#fff, #4A4A4A) !important;
+ --arrowpanel-color: light-dark(#1c1c1c, #fff) !important;
+ --panel-description-color: light-dark(#000a, #fffb) !important;
+ --panel-disabled-color: light-dark(#9E9E9E, #ABABAA) !important;
+ --arrowpanel-dimmed: light-dark(#565656, #565656) !important;
+ --arrowpanel-dimmed-further: light-dark(#707070, #707070) !important;
+ --panel-item-hover-bgcolor: light-dark(#eee, #646464) !important;
+ --panel-item-active-bgcolor: light-dark(#ddd, #747474) !important;
+ --arrowpanel-border-color: light-dark(#dadada, #636363) !important;
+ --panel-separator-color: light-dark(#dadada, #636363) !important;
+ --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: #00000014 !important;
- --toolbarbutton-active-background: #00000021 !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-browding-indicator-hover: var(--button-primary-hover-bgcolor);
- --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
- --uc-private-browding-indicator-text: var(--button-primary-color);
+ --uc-private-browsing-indicator-text: var(--button-primary-color);
+ --tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important;
+ --tab-icon-overlay-fill: light-dark(#252525, #fff) !important;
+ --toolbarseparator-color: color-mix(in srgb, currentColor 40%, transparent) !important;
}
-/* dark */
-:root[lwt-default-theme-in-dark-mode="true"] {
- --lwt-accent-color: #1C1C1C !important;
- --lwt-accent-color-inactive: #2e2e2e !important;
- --lwt-text-color: #E5E5E5 !important;
- --toolbar-bgcolor: #3B3B3B !important;
- --toolbar-color: #fff !important;
- --toolbarbutton-icon-fill: #fff !important;
- --chrome-content-separator-color: #686868 !important;
- --lwt-toolbarbutton-icon-fill-attention: #4C98D1 !important;
- --toolbarbutton-icon-fill-attention: #4C98D1 !important;
- --lwt-tab-text: var(--toolbar-color) !important;
- --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
- --tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
- --toolbar-field-background-color: #2B2B2B !important;
- --toolbar-field-color: #fff !important;
- --toolbar-field-border-color: #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: #63ADE5 !important;
- --urlbar-icon-fill-opacity: 1 !important;
- --urlbar-popup-url-color: #75B6E8 !important;
- --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
- --urlbar-box-bgcolor: #3B3B3B !important;
- --autocomplete-popup-background: #4A4A4A !important;
- --autocomplete-popup-color: #fff !important;
- --autocomplete-popup-highlight-background: #383838 !important;
- --autocomplete-popup-hover-background: #444444 !important;
- --autocomplete-popup-separator-color: #63636300 !important;
- --button-bgcolor: #3B3B3B !important;
- --button-hover-bgcolor: #545454 !important;
- --button-active-bgcolor: #606060 !important;
- --button-primary-bgcolor: #006CBE !important;
- --button-primary-hover-bgcolor: #0078D4 !important;
- --button-primary-active-bgcolor: #005CA3 !important;
- --button-primary-color: #fff !important;
- --error-text-color: #FF9AA2 !important;
- --input-bgcolor: #4A4A4A !important;
- --input-color: #fff !important;
- --input-border-color: #8A8A8A !important;
- --input-error-border-color: #FF848A !important;
- --zoom-controls-bgcolor: #4A4A4A !important;
- --arrowpanel-background: #4A4A4A !important;
- --arrowpanel-color: #fff !important;
- --panel-description-color: #fffb !important;
- --panel-disabled-color: #ABABAA !important;
- --arrowpanel-dimmed: #565656 !important;
- --arrowpanel-dimmed-further: #707070 !important;
- --panel-item-hover-bgcolor: #646464 !important;
- --panel-item-active-bgcolor: #747474 !important;
- --arrowpanel-border-color: #636363 !important;
- --panel-separator-color: #636363 !important;
- --panel-banner-item-update-supported-bgcolor: #50B080 !important;
- --focus-outline-color: #63ADE5 !important;
- --panel-shortcut-color: inherit !important;
- --toolbarbutton-hover-background: #ffffff25 !important;
- --toolbarbutton-active-background: #ffffff32 !important;
- --uc-private-browsing-indicator: var(--button-primary-bgcolor);
- --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor);
- --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
- --uc-private-browding-indicator-text: var(--button-primary-color);
+/* ensure that dark mode is enabled completely in private browsing mode. */
+@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 {
+ --urlbar-box-bgcolor: inherit !important;
+ --urlbar-box-hover-bgcolor: inherit !important;
+ --urlbar-box-focus-bgcolor: inherit !important;
}
/* Change Colour of page when loading */
:root:not(:-moz-lwtheme) #tabbrowser-tabpanels {
- background-color: #f7f7f7 !important;
-}
-
-:root[lwt-default-theme-in-dark-mode="true"] #tabbrowser-tabpanels {
- background-color: #252525 !important;
+ background-color: light-dark(#f7f7f7, #252525) !important;
}
/* make the titlebar buttons black/white on default themes */
:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
- color: #000 !important;
+ color: var(--toolbar-color) !important;
}
-:root[lwt-default-theme-in-dark-mode="true"][tabsintitlebar] .titlebar-buttonbox {
- color: #fff !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 #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) {
+ tooltip {
+ background-color: var(--arrowpanel-background) !important;
+ color: var(--arrowpanel-color) !important;
+ border-color: var(--arrowpanel-border-color) !important;
+ }
+
+ .titlebar-button:not(.titlebar-close):hover {
+ background-color: color-mix(in srgb, currentColor 11%, transparent) !important;
+ }
+
+ .titlebar-button:hover:active {
+ background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
+ }
+
+ .titlebar-close:hover {
+ stroke: white !important;
+ background-color: #e81123 !important;
+ }
+
+ .titlebar-close:hover:active {
+ background-color: #EF6B76 !important;
+ }
+
+ toolbar[brighttext] .titlebar-close:hover:active {
+ background-color: #9C1420 !important;
+ }
+
+ /* library window theme */
+ window#places {
+ --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: light-dark(#006CBE, #006CBE) !important;
+ color: light-dark(#fff, #fff) !important;
+ }
+
+ #placeContentColumns :is(treecol, treecolpicker) {
+ 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: light-dark(#cecece, #4A4A4A ) !important;
+ color: light-dark(#000, #fff) !important;
+ }
+}
+
+/* side bar theme */
+#sidebar-box:not([lwt-sidebar]) {
+ --sidebar-background-color: light-dark(#f7f7f7, #3b3b3b) !important;
+ --sidebar-text-color: light-dark(#000, #fff) !important;
+ appearance: none !important;
+}
+
+#browser:not([style*="--sidebar-border-color"]) {
+ --sidebar-border-color: light-dark(#bfbfbf, #686868) !important;
+}
+
+.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){
+ body {
+ background: transparent !important;
+ }
+}
+
+/* Linux / GTK csd support */
+@media (-moz-gtk-csd-available) {
+ :root:not(:-moz-lwtheme) {
+ --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important;
+ --toolbar-bgimage: none !important;
+ --toolbar-color: -moz-dialogtext !important;
+ --tab-selected-bgimage: none !important;
+ --chrome-content-separator-color: ThreeDShadow !important;
+ --panel-separator-color: ThreeDShadow !important;
+ --button-bgcolor: color-mix(in srgb, currentColor 10%, transparent) !important;
+ --button-hover-bgcolor: color-mix(in srgb, currentColor 14%, transparent) !important;
+ --button-active-bgcolor: color-mix(in srgb, currentColor 20%, transparent) !important;
+ --button-color: currentColor !important;
+ --button-primary-bgcolor: -moz-accent-color !important;
+ --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, -moz-accent-color) !important;
+ --button-primary-active-bgcolor: color-mix(in srgb, black 20%, -moz-accent-color) !important;
+ --button-primary-color: -moz-accent-color-foreground !important;
+ --autocomplete-popup-hover-background: var(--arrowpanel-dimmed) !important;
+ --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent) !important;
+ --urlbar-box-bgcolor: var(--button-bgcolor) !important;
+ --urlbar-box-focus-bgcolor: var(--button-bgcolor) !important;
+ --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor) !important;
+ --urlbar-box-active-bgcolor: var(--button-active-bgcolor) !important;
+ --urlbar-box-text-color: inherit !important;
+ --urlbar-box-hover-text-color: var(--urlbar-box-text-color) !important;
+ --urlbar-icon-fill-opacity: 0.9 !important;
+ --urlbar-popup-url-color: -moz-nativehyperlinktext !important;
+ --lwt-brighttext-url-color: #00ddff !important;
+ --toolbarbutton-icon-fill-attention: -moz-nativehyperlinktext !important;
+ --focus-outline-color: -moz-accent-color !important;
+ --arrowpanel-background: Field !important;
+ --arrowpanel-color: FieldText !important;
+ --arrowpanel-border-color: ThreeDShadow !important;
+ --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important;
+ --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent) !important;
+ --panel-description-color: GrayText !important;
+ --panel-disabled-color: GrayText !important;
+ --toolbarbutton-icon-fill: currentColor !important;
+ --toolbar-field-background-color: Field !important;
+ --toolbar-field-color: FieldText !important;
+ --toolbar-field-border-color: ThreeDShadow !important;
+ --toolbar-field-focus-background-color: Field !important;
+ --toolbar-field-focus-color: FieldText !important;
+ --toolbar-field-focus-border-color: -moz-accent-color !important;
+ --toolbarbutton-hover-background: color-mix(in srgb, -moz-dialogtext 14%, transparent) !important;
+ --toolbarbutton-active-background: color-mix(in srgb, -moz-dialogtext 20%, transparent) !important;
+ --uc-urlbar-shadow: none;
+ --autocomplete-popup-highlight-color: FieldText !important;
+ --autocomplete-popup-highlight-background: color-mix(in srgb, currentColor 8%, transparent) !important;
+ --autocomplete-popup-hover-background: color-mix(in srgb, currentColor 12%, transparent) !important;
+ --autocomplete-popup-separator-color: #0000 !important;
+ --panel-item-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important;
+ --panel-item-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important;
+ --panel-separator-color: ThreeDShadow !important;
+ --panel-banner-item-update-supported-bgcolor: #1bba6b !important;
+ --focus-outline-color: -moz-accent-color !important;
+ --uc-private-browsing-indicator: -moz-accent-color !important;
+ --uc-private-browsing-indicator-text: var(--button-primary-color);
+ }
+
+ #sidebar-box:not([lwt-sidebar]) {
+ --sidebar-background-color: -moz-dialog !important;
+ --sidebar-text-color: -moz-dialog-text !important;
+ }
+
+ #browser:not([style*="--sidebar-border-color"]) {
+ --sidebar-border-color: ThreeDShadow !important;
+ }
+
+ .sidebar-panel:not([lwt-sidebar]) {
+ color: -moz-dialogtext !important;
+ }
+
+ @media (prefers-color-scheme: light) {
+ :root:not(:-moz-lwtheme) {
+ --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 65%, #fff) !important;
+ --urlbar-icon-fill-opacity: 0.7 !important;
+ --toolbar-field-border-color: transparent !important;
+ --toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
+ --toolbar-field-color: FieldText !important;
+ --toolbar-field-focus-background-color: Field !important;
+ --toolbar-field-focus-color: FieldText !important;
+ }
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root:not(:-moz-lwtheme) {
+ --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 90%, #fff) !important;
+ --urlbar-icon-fill-opacity: 1.0 !important;
+ --toolbar-field-border-color: transparent !important;
+ --toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
+ --toolbar-field-color: FieldText !important;
+ --toolbar-field-focus-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
+ --toolbar-field-focus-color: FieldText !important;
+ }
+ }
}
diff --git a/chrome/global/popup.css b/chrome/global/popup.css
index cc69bc0..49d949b 100644
--- a/chrome/global/popup.css
+++ b/chrome/global/popup.css
@@ -1,42 +1,66 @@
-/* EdgeFr-Fox by bmFtZQ - popup.css */
+/* Edge-Frfox - popup.css */
:root {
- --arrowpanel-border-radius: 4px !important;
- --panel-subview-body-padding: 4px 0 !important;
- --arrowpanel-menuitem-border-radius: 0 !important;
- --arrowpanel-menuitem-margin: 0 !important;
- --arrowpanel-menuitem-padding-block: 8px !important;
- --arrowpanel-menuitem-padding-inline: 14px !important;
+ --panel-subview-body-padding: 2px 0 !important;
+ --arrowpanel-border-radius: 8px !important;
+ --arrowpanel-menuitem-border-radius: 4px !important;
+ --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important;
+ --arrowpanel-menuitem-padding-block: 6px !important;
+ --arrowpanel-menuitem-padding-inline: 10px !important;
--uc-arrowpanel-menuicon-margin-inline: 14px;
- --panel-separator-margin-vertical: 4px !important;
+ --uc-arrowpanel-menuitem-margin-inline: 4px;
+ --uc-arrowpanel-menuitem-margin-block: 2px;
+ --panel-separator-margin-vertical: 2px !important;
--panel-separator-margin-horizontal: 0 !important;
+
--uc-panel-zoom-button-padding: 8px;
- --uc-panel-zoom-button-inline-padding: 13px;
+ --uc-panel-zoom-button-inline-padding: 9px;
+ --uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block));
+
--uc-autocomplete-panel-menuitem-margin: 4px;
- --uc-autocomplete-panel-menuicon-padding-inline: 12px;
+ --uc-autocomplete-panel-menuicon-padding-inline: 14px;
--uc-autocomplete-panel-separator-margin-vertical: 4px;
+
+ --uc-permission-itemcontainer-padding-block: 8px;
+ --uc-permission-item-margin-block: 4px;
+ --uc-permission-item-padding-inline: 16px;
+
+ --uc-contextmenu-border-radius: 8px;
+ --uc-contextmenu-padding: calc(4px - var(--uc-contextmenu-menuitem-border-width)) 0;
+ --uc-contextmenu-menuitem-border-radius: calc(4px + var(--uc-contextmenu-menuitem-border-width));
+ --uc-contextmenu-menuitem-padding-block: 6px;
+ --uc-contextmenu-menuitem-padding-inline: 10px;
+ --uc-contextmenu-menuitem-border-width: 2px;
+ --uc-contextmenu-menuicon-margin-inline: 12px;
+ --uc-contextmenu-menuitem-margin-inline: calc(4px - var(--uc-contextmenu-menuitem-border-width));
+ --uc-contextmenu-menuitem-margin-block: 0px;
+ --uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline);
+ --uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width));
+ --uc-contextmenu-separator-horizontal: 0;
}
/* app menu */
.addon-banner-item,
.panel-banner-item {
- margin: 0 4px 4px !important;
+ margin: 2px 4px 2px !important;
padding-inline: 4px 12px !important;
- border-radius: 2px !important;
+ padding-block: var(--arrowpanel-menuitem-padding-block) !important;
+ border-radius: var(--arrowpanel-menuitem-border-radius) !important;
}
-#appMenu-fxa-label2>vbox>label {
+#appMenu-fxa-label2 label,
+#PanelUI-fxa-menu-syncnow-button label {
margin-block: 0 !important;
}
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined)>.toolbarbutton-text,
-.subviewbutton:not(#appMenu-zoom-controls2 > .subviewbutton)>.toolbarbutton-icon+.toolbarbutton-text,
+.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton)>.toolbarbutton-icon+.toolbarbutton-text,
#appMenu-fxa-label2>vbox {
padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
}
/* special case menuitems with no icons */
-#appMenu-zoom-controls2>.toolbarbutton-text,
+#appMenu-zoom-controls>.toolbarbutton-text,
#fxa-manage-account-button>vbox,
#PanelUI-fxa-menu-syncnow-button>hbox {
padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline)) !important;
@@ -49,7 +73,7 @@
/* firefox profile avatar in appmenu */
#appMenu-fxa-label2::before {
content: "";
- display: -moz-box;
+ display: flex;
height: 16px;
width: 16px;
background: var(--avatar-image-url) 0/16px;
@@ -57,31 +81,49 @@
border-radius: 99px;
}
-
/* disable proton account separator */
#appMenu-fxa-separator {
border-image: none !important;
}
+#appMenu-fxa-status2:not([fxastatus]) {
+ padding-block: 0 !important;
+}
+
+#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 {
+ margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important;
+}
+
/* zoom controls */
-#appMenu-zoom-controls2 {
+#appMenu-zoom-controls {
border-top: 1px solid var(--panel-separator-color) !important;
- padding: 0 0 0 var(--arrowpanel-menuitem-padding-inline) !important;
+ padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline) !important;
+ padding-block: var(--uc-panel-zoom-padding-block) !important;
margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1) !important;
}
-#appMenu-zoom-controls2>.subviewbutton {
+#appMenu-zoom-controls>.subviewbutton {
padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding) !important;
margin: 0 !important;
}
-#appMenu-zoom-controls2>#appMenu-zoomReset-button2 {
+#appMenu-zoom-controls>#appMenu-zoomReset-button2 {
padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2) !important;
}
-#appMenu-zoomReduce-button2,
-#appMenu-fullscreen-button2 {
- border-inline-start: 1px solid var(--panel-separator-color) !important;
+/* #appMenu-zoomReduce-button2, */
+#appMenu-zoom-controls>#appMenu-fullscreen-button2 {
+ margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px) !important;
+}
+
+#appMenu-zoom-controls>#appMenu-fullscreen-button2::before {
+ content: "";
+ border-inline-start: 1px solid var(--panel-separator-color);
+ display: block;
+ position: relative;
+ height: 32px;
+ margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
+ transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px));
}
#appMenu-zoomReset-button2 {
@@ -89,23 +131,17 @@
min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
}
-#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
- background-color: var(--panel-item-hover-bgcolor) !important;
-}
-
-#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
- background-color: var(--panel-item-active-bgcolor) !important;
-}
-
#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover),
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover),
-#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover) {
+#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover),
+#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
background-color: var(--panel-item-hover-bgcolor) !important;
}
#appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active),
#appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active),
-#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active) {
+#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active),
+#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
background-color: var(--panel-item-active-bgcolor) !important;
}
@@ -115,8 +151,37 @@
stroke: none !important;
}
+#appMenu-zoomReset-button2>.toolbarbutton-text,
#appMenu-fullscreen-button2>.toolbarbutton-icon {
background-color: transparent !important;
+ padding: 0 !important;
+}
+
+.subviewbutton[shortcut]::after {
+ opacity: 0.7 !important;
+}
+
+#widget-overflow-mainView .panel-subview-body {
+ padding-bottom: 0 !important;
+}
+
+.PanelUI-subView>.panel-header+toolbarseparator {
+ margin-bottom: 0 !important;
+}
+
+.PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body {
+ padding-top: var(--panel-separator-margin-vertical) !important;
+}
+
+#identity-popup-security-button {
+ margin-bottom: var(--panel-separator-margin-vertical) !important;
+}
+
+#permission-popup-mainView-panel-header,
+#identity-popup-mainView-panel-header,
+#protections-popup-mainView-panel-header,
+.panel-header {
+ min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px) !important;
}
/* URL bar popup */
@@ -124,14 +189,6 @@
border-radius: 2px !important;
}
-#identity-popup-security-button {
- padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) - 4px) !important;
-}
-
-.identity-popup-security-connection>hbox {
- margin-inline-start: calc(20px + var(--uc-arrowpanel-menuicon-margin-inline)) !important;
-}
-
.identity-popup-security-connection>hbox>description {
margin-inline-start: 0 !important;
}
@@ -140,19 +197,53 @@
margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)) !important;
}
+#identity-popup-mainView-panel-header-span,
+#permission-popup-mainView-panel-header-span,
+#identity-popup-mainView-panel-header label,
+#permission-popup-mainView-panel-header label,
+#protections-popup-mainView-panel-header-span {
+ margin-block: 0 !important;
+}
+
+.permission-popup-section {
+ padding-block: var(--uc-permission-itemcontainer-padding-block) !important;
+}
+
+#permission-popup-permissions-content {
+ padding-inline: var(--uc-permission-item-padding-inline) !important;
+}
+
+.permission-popup-permission-item,
+#permission-popup-storage-access-permission-list-header {
+ margin-block: var(--uc-permission-item-margin-block) !important;
+}
+
+.permission-popup-permission-label,
+.permission-popup-permission-header-label {
+ margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
+}
+
+#editBookmarkPanel>#editBookmarkHeaderSeparator,
+#editBookmarkPanel>.panel-subview-body>#editBookmarkSeparator {
+ margin-inline: 0 !important;
+}
+
/* subview */
.panel-header {
- padding: 4px;
+ padding: 4px !important;
padding-top: 4px !important;
}
-.panel-header+toolbarseparator {
+.panel-header+toolbarseparator,
+#identity-popup-mainView-panel-header+toolbarseparator,
+#permission-popup-mainView-panel-header+toolbarseparator,
+#protections-popup-mainView-panel-header-section+toolbarseparator {
margin-block-start: 0 !important;
}
-.subviewbutton-back {
+.panel-header>.subviewbutton-back {
margin: 0 !important;
- border-radius: 2px !important;
+ padding: var(--arrowpanel-menuitem-padding-block) !important;
}
.panel-subview-footer-button {
@@ -184,34 +275,34 @@
#downloadsListBox>richlistitem {
padding-inline-end: 8px !important;
- border-radius: 0 !important;
+ border-radius: var(--arrowpanel-menuitem-border-radius) !important;
+}
+
+#downloadsListBox,
+.downloadsPanelFooterButton {
+ margin: var(--arrowpanel-menuitem-margin) !important;
+ width: auto !important;
+ min-width: auto !important;
}
#downloadsPanel-blockedSubview,
#downloadsPanel-mainView {
- padding: var(--panel-separator-margin-vertical) 0 0 !important;
+ padding: var(--panel-separator-margin-vertical) 0 !important;
}
#emptyDownloads {
padding: 1.5em 16px 1.7em !important;
}
-/* context menus */
-@media (-moz-windows-compositor) {
- menupopup {
- --panel-color: var(--arrowpanel-color) !important;
- --panel-border-radius: 4px !important;
- --panel-padding: 4px 0px !important;
- --panel-border-color: var(--arrowpanel-border-color) !important;
- --panel-background: var(--arrowpanel-background) !important;
- --nested-margin: -6px !important;
- --menuitem-hover-background-color: var(--panel-item-hover-bgcolor) !important;
- --menu-background-color: var(--arrowpanel-background) !important;
- --menu-color: var(--arrowpanel-color) !important;
- --menuitem-disabled-hover-background-color: #0000 !important;
- --menu-disabled-color: var(--panel-disabled-color) !important;
- --menu-border-color: var(--panel-separator-color) !important;
- }
+#downloadsHistory .button-text {
+ margin-block: 0 !important;
+ margin-inline: 0 !important;
+}
+
+.PanelUI-subView .subviewbutton-nav::after,
+#PlacesToolbar menu>.menu-right,
+.subviewbutton>.menu-right {
+ fill-opacity: 1 !important;
}
/* auto complete popup */
@@ -221,25 +312,329 @@
box-shadow: 0 0 0 1px inset var(--arrowpanel-border-color) !important;
}
-.autocomplete-richlistitem[originaltype="loginsFooter"] {
+#PopupAutoComplete .autocomplete-richlistitem[originaltype="loginsFooter"] {
+ justify-content: start !important;
-moz-box-pack: start !important;
color: inherit !important;
- border-color: var(--panel-separator-color) !important;
background-color: transparent !important;
- height: 40px !important;
- padding-inline-start: var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
+ height: 28px !important;
+ min-height: 28px !important;
+ padding-inline-start: var(--uc-contextmenu-menuitem-padding-inline) !important;
+ position: relative !important;
+ overflow: visible !important;
+ margin-top: calc(var(--uc-contextmenu-separator-vertical) * 2 + 1px) !important;
}
-.autocomplete-richlistitem:hover {
+.autocomplete-richlistitem[originaltype="loginsFooter"]::before {
+ content: "";
+ width: calc(100% + var(--uc-contextmenu-menuitem-margin-inline) * 2);
+ border-top: 1px solid var(--panel-separator-color);
+ position: absolute;
+ top: calc((var(--uc-contextmenu-separator-vertical) + var(--uc-contextmenu-menuitem-border-width)) * -1 - 1px);
+ left: calc(var(--uc-contextmenu-menuitem-margin-inline) * -1);
+}
+
+#PopupAutoComplete .autocomplete-richlistitem:hover {
background-color: var(--panel-item-hover-bgcolor) !important;
}
-.autocomplete-richlistitem[selected] {
+#PopupAutoComplete .autocomplete-richlistitem[selected] {
background-color: var(--panel-item-active-bgcolor) !important;
color: inherit !important;
}
.ac-site-icon {
fill: currentColor !important;
- margin: auto var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
+ margin-block: auto !important;
+ margin-inline: 0 var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
+}
+
+#PopupAutoComplete>richlistbox>richlistitem>.ac-title {
+ margin-inline: calc(16px + var(--uc-autocomplete-panel-menuicon-padding-inline)) !important;
+}
+
+/* workaround for inaccessible shadow-root element
+ moves the shadow-root element underneath, and away from panel edges */
+#PopupAutoComplete {
+ padding-block: 10px !important;
+ padding-inline: 2px !important;
+}
+
+panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox {
+ margin-block: -10px !important;
+ margin-inline: -2px !important;
+ padding: var(--uc-contextmenu-padding) !important;
+ border-radius: var(--uc-contextmenu-border-radius) !important;
+ color: inherit !important;
+}
+
+#PopupAutoComplete>richlistbox>richlistitem>.two-line-wrapper {
+ padding-block: 0 !important;
+ padding-inline-end: calc((var(--uc-autocomplete-panel-menuitem-margin) + var(--arrowpanel-menuitem-padding-inline)) * 2) !important;
+}
+
+#PlacesToolbar menuitem,
+#PlacesToolbar menu,
+panelview .toolbarbutton-1,
+.subviewbutton,
+.widget-overflow-list .toolbarbutton-1 {
+ min-height: calc(16px + var(--uc-contextmenu-menuitem-padding-block) * 2) !important;
+}
+
+/* disable context menu when this tweak is applied */
+@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
+ /* Context Menu */
+ menupopup:not(.PanelUI-subView),
+ menupopup:not(.PanelUI-subView) menuitem,
+ menupopup:not(.PanelUI-subView) menu,
+ menupopup:not(.PanelUI-subView) menuseparator,
+ panel {
+ appearance: none !important;
+ }
+
+ menupopup:not(.PanelUI-subView),
+ panel[type="autocomplete-richlistbox"],
+ menulist>menupopup:not(.PanelUI-subView)>menucaption {
+ -moz-window-shadow: none !important;
+ background: 0 !important;
+ border: 0 !important;
+ color: var(--arrowpanel-color) !important;
+ }
+
+ .popup-internal-box,
+ panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox,
+ .menupopup-arrowscrollbox {
+ background: var(--arrowpanel-background) !important;
+ border: 1px solid light-dark(transparent, var(--panel-separator-color)) !important;
+ }
+
+ /* make room for menu shadow */
+ menupopup:not(.PanelUI-subView) {
+ padding: 4px 12px 20px !important;
+ margin: -6px -12px -16px !important;
+ }
+
+ /* cut off shadow so it doesn't get in the way of the menubar items */
+ menubar menupopup {
+ padding: 1px 8px 20px !important;
+ margin: -1px -4px -16px !important;
+ }
+
+ menupopup {
+ --uc-margin: 0 !important;
+ --uc-box-shadow:
+ 0 8px 12px #0003,
+ 0 4px 5px #0002,
+ 0 2px 4px #0002,
+ 0 0 0 1px #0001;
+ }
+
+ @media (prefers-color-scheme:dark) {
+ menupopup {
+ --uc-box-shadow:
+ 0 8px 12px #0003,
+ 0 4px 5px #0003,
+ 0 2px 4px #0002,
+ 0 0 0 1px #0002;
+ }
+ }
+
+ /* use default shadow for subview menupopup (eg. bookmarks) */
+ menupopup.PanelUI-subView {
+ --uc-box-shadow: 0 0 0 1px var(--panel-border-color);
+ --uc-margin: 1px !important;
+ margin-top: -5px !important;
+ }
+
+ .menupopup-arrowscrollbox {
+ box-shadow: var(--uc-box-shadow) !important;
+ }
+
+ .popup-internal-box {
+ margin: 0 !important;
+ }
+
+ .popup-internal-box,
+ .menupopup-arrowscrollbox {
+ padding: var(--uc-contextmenu-padding) !important;
+ border-radius: var(--uc-contextmenu-border-radius) !important;
+ color: inherit !important;
+ }
+
+ menupopup menu[disabled="true"],
+ menupopup menuitem[disabled="true"] {
+ color: var(--panel-disabled-color) !important;
+ background: none !important;
+ }
+
+ menupopup menu:hover:not([disabled=true]),
+ menupopup menuitem:hover:not([disabled=true]),
+ menupopup menu[_moz-menuactive]:not([disabled=true]),
+ menupopup menuitem[_moz-menuactive]:not([disabled=true]) {
+ background-color: var(--panel-item-hover-bgcolor) !important;
+ color: inherit !important;
+ }
+
+ menupopup menuitem:hover:active:not([disabled=true]),
+ menupopup menu:hover:active:not([disabled=true]) {
+ background-color: var(--panel-item-active-bgcolor) !important;
+ color: inherit !important;
+ }
+
+ menupopup menuseparator {
+ margin: var(--uc-contextmenu-separator-vertical) 0 !important;
+ 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 {
+ display: none !important;
+ }
+
+ menupopup menu,
+ menupopup menuitem,
+ menupopup menucaption,
+ #PopupAutoComplete>richlistbox>richlistitem {
+ padding: var(--uc-contextmenu-menuitem-padding-block) var(--uc-contextmenu-menuitem-padding-inline) !important;
+ margin: var(--uc-contextmenu-menuitem-margin) !important;
+ border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
+ border: var(--uc-contextmenu-menuitem-border-width) solid transparent !important;
+ background-clip: padding-box !important;
+ min-height: calc(16px + (var(--uc-contextmenu-menuitem-padding-block) + var(--uc-contextmenu-menuitem-border-width)) * 2) !important;
+ }
+
+ :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
+ :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current),
+ :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menucaption {
+ padding-inline-start: calc(var(--uc-contextmenu-menuitem-padding-inline) + 16px + var(--uc-contextmenu-menuicon-margin-inline)) !important;
+ }
+
+ .menu-iconic-icon {
+ margin-block: 0 !important;
+ margin-inline-end: 0 !important;
+ margin-inline-start: 0 !important;
+ }
+
+ menu>.menu-iconic-text,
+ menuitem>.menu-iconic-text {
+ padding-inline-start: var(--uc-contextmenu-menuicon-margin-inline) !important;
+ }
+
+ .menu-text,
+ .menu-iconic-text {
+ margin-inline-start: 0 !important;
+ padding-block: 0 !important;
+ }
+
+ .menu-accel,
+ .menu-iconic-accel {
+ margin-inline-end: 0 !important;
+ padding-block: 0 !important;
+ opacity: 0.7 !important;
+ }
+
+ .menu-iconic>.menu-iconic-left,
+ .menuitem-iconic>.menu-iconic-left {
+ padding-inline-end: 0 !important;
+ padding-block: 0 !important;
+ }
+
+ menuitem:is(.menuitem-iconic:not([data-usercontextid]), [type="checkbox"], [type="radio"], [checked], [selected]) .menu-iconic-icon {
+ -moz-context-properties: fill !important;
+ fill: currentColor !important;
+ }
+
+ .menu-right,
+ .menu-accel-container {
+ appearance: none !important;
+ margin-inline-end: 0 !important;
+ -moz-context-properties: fill;
+ fill: currentColor !important;
+ }
+
+ menupopup menuitem:is([type="checkbox"], [type="radio"]) .menu-iconic-icon,
+ menulist>menupopup>menuitem .menu-iconic-icon,
+ menu .menu-right {
+ height: 16px !important;
+ width: 16px !important;
+ }
+
+ menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before,
+ menupopup>menuitem::before,
+ menupopup>menuitem::after {
+ display: none !important;
+ }
+
+ menuitem:is([type="checkbox"], [checked="true"], [type="radio"])>.menu-iconic-left>.menu-iconic-icon {
+ display: flex !important;
+ }
+
+ menuitem[checked="true"]>.menu-iconic-left,
+ .menu-iconic>.menu-iconic-left,
+ .menuitem-iconic>.menu-iconic-left {
+ margin: 0 !important;
+ }
+
+ #context-navigation:not([hidden]) {
+ padding: 0 !important;
+ --menuitem-min-width: calc(16px + var(--uc-contextmenu-menuitem-padding-inline) * 2) !important;
+ min-width: calc(4 * var(--menuitem-min-width));
+ }
+
+ #context-navigation>.menuitem-iconic>.menu-iconic-left>.menu-iconic-icon {
+ width: 16px !important;
+ height: 16px !important;
+ padding: 0 !important;
+ }
+
+ #context-navigation {
+ margin-inline: var(--uc-contextmenu-menuitem-margin-inline) !important;
+ }
+
+ #context-navigation>.menuitem-iconic {
+ justify-content: center !important;
+ -moz-box-pack: center !important;
+ }
+
+ #context-navigation>.menuitem-iconic {
+ margin: 0 !important;
+ }
+
+ #context-navigation>.menuitem-iconic {
+ flex-grow: 1 !important;
+ width: unset !important;
+ }
+
+ #context-navigation>.menuitem-iconic[_moz-menuactive="true"]>.menu-iconic-left>.menu-iconic-icon {
+ background-color: transparent !important;
+ }
+
+ #context-bookmarkpage[starred] .menu-iconic-icon {
+ fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
+ }
+
+ @media not (-moz-bool-pref: "uc.tweak.smaller-context-menu-text") {
+ @media (-moz-platform: windows) {
+ .menu-text,
+ .menu-iconic-text,
+ panel .toolbarbutton-text {
+ margin-inline-start: 0 !important;
+ margin-block: -3px -1px !important;
+ padding-block: 0 !important;
+ }
+
+ .menu-text,
+ .menu-iconic-text,
+ panel .toolbarbutton-text,
+ #appMenu-fxa-status2,
+ .panel-header {
+ font-size: 13.6px !important;
+ }
+ }
+ }
}
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 f556b11..126e378 100644
--- a/chrome/global/tweaks.css
+++ b/chrome/global/tweaks.css
@@ -1,61 +1,64 @@
-/* EdgeFr-Fox by bmFtZQ - tweaks.css */
+/* 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;
}
}
-/* hide firefox account button when not in private mode (useful as a private
-browsing indicator) */
-@supports -moz-bool-pref("uc.tweak.fxa-button-as-private-indicator") {
- :root:not([privatebrowsingmode]) #nav-bar:not([customizing]) #fxa-toolbar-menu-button {
- display: none !important;
- }
-}
-
/* remove tab separators */
-@supports -moz-bool-pref("uc.tweak.remove-tab-separators") {
- .tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after {
- 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.less-permissions-button-padding") {
- #identity-icon-box {
- padding-inline: var(--uc-toolbarbutton-inner-inline-padding) !important;
- }
-
- #identity-permission-box {
- padding-inline: 2px var(--uc-urlbar-icon-inline-padding) !important;
- margin-inline-start: -8px !important;
- }
-}
-
-@supports -moz-bool-pref("uc.tweak.floating-tabs") {
- :root:not(:-moz-lwtheme) {
- --lwt-accent-color: #f3f3f3 !important;
+@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;
--lwt-accent-color-inactive: unset !important;
- --toolbar-bgcolor: #fff !important;
+ --toolbar-bgcolor: light-dark(#fff, #4D4D4D) !important;
+ --lwt-tab-text: light-dark(#262626, #fff) !important;
+ --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;
}
- :root[lwt-default-theme-in-dark-mode="true"] {
- --toolbar-bgcolor: #4D4D4D !important;
- --lwt-accent-color-inactive: unset !important;
- --chrome-content-separator-color: #535353 !important;
+ @media (-moz-gtk-csd-available) {
+ :root:not(:-moz-lwtheme) {
+ --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important;
+ --toolbar-field-background-color: Field !important;
+ --lwt-tab-text: -moz-dialogtext !important;
+ --uc-tab-border-color: #ffffff0f !important;
+ }
+ }
+
+ .tabbrowser-tab,
+ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button,
+ #TabsToolbar #TabsToolbar-customization-target> :not(#tabbrowser-tabs) {
+ padding-top: 4px !important;
+ }
+
+ #tabbrowser-tabs {
+ margin-top: calc(var(--tab-block-margin) - 4px) !important;
+ }
+
+ #TabsToolbar #TabsToolbar-customization-target> :not(#tabbrowser-tabs) {
+ margin-top: calc(var(--tab-block-margin) - 2px) !important;
}
/* remove toolbar bg */
@@ -74,33 +77,28 @@ browsing indicator) */
border-radius: var(--tab-border-radius) !important;
}
+ .tab-background[selected] {
+ outline: 1px solid var(--uc-tab-border-color, var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent))) !important;
+ outline-offset: -1px !important;
+ }
+
/* adjust spacing of area above tabs */
- @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
- :root[sizemode="maximized"] #titlebar {
+ @media not (-moz-platform: macos) {
+ :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;
}
}
- :root #titlebar {
- --tab-min-height: 33px !important;
- }
-
- /* remove navbar shadow */
- #titlebar,
- :root[lwtheme-brighttext="true"] #titlebar {
- box-shadow: none !important;
- }
-
/* move tab shadow behind urlbar */
.tabbrowser-tab[visuallyselected="true"],
#nav-bar {
@@ -124,73 +122,187 @@ browsing indicator) */
margin-bottom: -8px !important;
}
- .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
- box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 0px 2px rgba(0, 0, 0, 0.1) !important;
+ :root {
+ --uc-titlebar-shadow: none;
+ --uc-tab-shadow:
+ 0 3.3px 3px rgb(0 0 0 / .06),
+ 0 0 0 1px rgb(0 0 0 / .11);
}
- :root[lwtheme-brighttext="true"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
- box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25), 0 0px 2px rgba(0, 0, 0, 0.1) !important;
+ :root[lwtheme-brighttext="true"] {
+ --uc-titlebar-shadow: none;
+ --uc-tab-shadow: 0 1px 2px rgb(0 0 0 / .08);
+ }
+}
+
+@media not (-moz-platform: macos) {
+ @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;
+ }
+
+ #context-navigation>.menuitem-iconic {
+ justify-content: start !important;
+ -moz-box-pack: start !important;
+ }
+
+ #context-navigation .menu-iconic-text {
+ display: flex !important;
+ }
+
+ :root,
+ :root[lang^="en"] {
+ --uc-string-back: "Back";
+ --uc-string-forward: "Forward";
+ --uc-string-reload: "Reload";
+ --uc-string-stop: "Stop";
+ --uc-string-bookmark-page: "Bookmark Page";
+ --uc-string-edit-bookmark: "Edit Bookmark";
+ }
+
+ #context-navigation>#context-back .menu-iconic-text::before {
+ content: var(--uc-string-back) !important;
+ }
+
+ #context-navigation>#context-forward .menu-iconic-text::before {
+ content: var(--uc-string-forward) !important;
+ }
+
+ #context-navigation>#context-reload .menu-iconic-text::before {
+ content: var(--uc-string-reload) !important;
+ }
+
+ #context-navigation>#context-stop .menu-iconic-text::before {
+ content: var(--uc-string-stop) !important;
+ }
+
+ #context-navigation>#context-bookmarkpage .menu-iconic-text::before {
+ content: var(--uc-string-bookmark-page) !important;
+ }
+
+ #context-navigation>#context-bookmarkpage[starred] .menu-iconic-text::before {
+ content: var(--uc-string-edit-bookmark) !important;
+ }
+ }
}
}
@media (-moz-windows-compositor) {
- @supports -moz-bool-pref("uc.tweak.win11-mica") {
- /* enable mica appearance */
- #main-window:not(:-moz-lwtheme),
- #main-window[lwt-default-theme-in-dark-mode="true"] {
- appearance: -moz-win-glass !important;
- background: transparent !important;
- }
-
- #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
- background: transparent !important;
- }
-
- @supports -moz-bool-pref("uc.tweak.floating-tabs") {
- #navigator-toolbox:not(:-moz-lwtheme),
- #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
- background: transparent !important;
- }
- }
-
- /* force tab color (for the tab transparency) */
- .tab-background:is([selected], [multiselected]) {
- background: var(--toolbar-bgcolor) !important;
- }
-
- /* color adjustments */
- :root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
- --lwt-accent-color: #00000020 !important;
- }
-
- @supports -moz-bool-pref("uc.tweak.floating-tabs") {
- :root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
- --toolbar-bgcolor: #ffffffcc !important;
- }
-
- :root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) {
- --toolbar-bgcolor: #ffffff20 !important;
- }
- }
-
- /* line up buttons with duplicate icons from -moz-win-glass */
- .titlebar-buttonbox-container {
- --uc-titlebar-button-size: 30px;
- --uc-titlebar-size: calc(var(--tab-min-height) + var(--tab-block-margin));
- margin-bottom: calc(var(--uc-titlebar-size) - var(--uc-titlebar-button-size)) !important;
- }
-
- .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) {
- list-style-image: none !important;
- }
-
- :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-button {
- padding-block: 7px 9px !important;
- }
-
- :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-close {
- padding-block: 7px 9px !important;
- padding-right: 19px !important;
+ @media (-moz-bool-pref: "uc.tweak.revert-context-menu") {
+ menupopup {
+ --panel-color: var(--arrowpanel-color) !important;
+ --panel-border-radius: 4px !important;
+ --panel-border-color: var(--arrowpanel-border-color) !important;
+ --panel-background: var(--arrowpanel-background) !important;
+ --menuitem-hover-background-color: var(--panel-item-hover-bgcolor) !important;
+ --menu-background-color: var(--arrowpanel-background) !important;
+ --menu-color: var(--arrowpanel-color) !important;
+ --menuitem-disabled-hover-background-color: #0000 !important;
+ --menu-disabled-color: var(--panel-disabled-color) !important;
+ --menu-border-color: var(--panel-separator-color) !important;
}
}
}
+
+@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/accessibility.svg b/chrome/icons/accessibility.svg
new file mode 100755
index 0000000..bfcf02a
--- /dev/null
+++ b/chrome/icons/accessibility.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/account-private.svg b/chrome/icons/account-private.svg
new file mode 100644
index 0000000..4c3040e
--- /dev/null
+++ b/chrome/icons/account-private.svg
@@ -0,0 +1,13 @@
+
diff --git a/chrome/icons/account.svg b/chrome/icons/account.svg
new file mode 100644
index 0000000..1400006
--- /dev/null
+++ b/chrome/icons/account.svg
@@ -0,0 +1,7 @@
+
diff --git a/chrome/icons/add-to-dictionary.svg b/chrome/icons/add-to-dictionary.svg
new file mode 100644
index 0000000..ebcb80f
--- /dev/null
+++ b/chrome/icons/add-to-dictionary.svg
@@ -0,0 +1,4 @@
+
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/arrow-left.svg b/chrome/icons/arrow-left.svg
new file mode 100644
index 0000000..1da2ba2
--- /dev/null
+++ b/chrome/icons/arrow-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/audio-save.svg b/chrome/icons/audio-save.svg
new file mode 100644
index 0000000..21b6752
--- /dev/null
+++ b/chrome/icons/audio-save.svg
@@ -0,0 +1,4 @@
+
diff --git a/chrome/icons/bookmark-star-on-tray.svg b/chrome/icons/bookmark-star-on-tray.svg
index 912cdc9..e35453e 100644
--- a/chrome/icons/bookmark-star-on-tray.svg
+++ b/chrome/icons/bookmark-star-on-tray.svg
@@ -1,4 +1,4 @@
-