diff --git a/README.md b/README.md index f0673db..8373700 100644 --- a/README.md +++ b/README.md @@ -10,107 +10,97 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch 3. Go to about:config and change these preferences: ### For all operating systems: - * `toolkit.legacyUserProfileCustomizations.stylesheets` = `true` - * `svg.context-properties.content.enabled` = `true` - * `layout.css.color-mix.enabled` = `true` - - ### Firefox 119.0 and above: - * `layout.css.light-dark.enabled` = `true` + 1. `toolkit.legacyUserProfileCustomizations.stylesheets` = `true` + 2. `svg.context-properties.content.enabled` = `true` + 3. `layout.css.color-mix.enabled` = `true` ### On macOS: - * To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false` + 1. 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` + 1. `browser.tabs.tabMinWidth` = `66` + 2. `browser.tabs.tabClipWidth` = `86` ### Optional: - * To use the light theme in private browsing mode set `browser.theme.dark-private-windows` = `false` + 1. To use the light theme in private browsing mode set `browser.theme.dark-private-windows` = `false` - Additional tweaks can also be applied to the theme, such as Floating Tabs, rounded browser corners and more. See [Tweaks](#tweaks). + Additional tweaks can also be applied to the theme, such as Mica (Windows 11 Only), Floating Tabs and more. See [Tweaks](#tweaks). **Note: Most frequently tested on macOS** ## Screenshots -| Theme | Light | Dark | -| ----------------------------------- | ----------------------------- | ---------------------------- | -| Default (Windows 11) | ![Light][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] | +| Theme | Light | Dark | +| ----------------------------------- | --------------------------------------- | -------------------------------------- | +| Default (Windows 11) | ![Light][s-l] | ![Dark][s-d] | +| Floating Tabs (Windows 11) | ![Light, Floating Tabs][s-lf] | ![Dark, Floating Tabs][s-df] | +| Mica (Windows 11) | ![Light, Mica][s-lm] | ![Dark, Mica][s-dm] | +| Mica and Floating Tabs (Windows 11) | ![Light, Mica and Floating Tabs][s-lmf] | ![Dark, Mica and Floating Tabs][s-dmf] | +| GTK (GNOME 42, [adw-gtk3][1] theme) | ![Light, GTK][s-lgtk] | ![Dark, GTK][s-dgtk] | ## 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. -| 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 | +| use background image on newtab page | | -------------------------------------------------------------------------------------------------- | | **SETUP: Add an image named `background-0.(jpg/png)` to the `chrome` folder.** | | **OPTIONAL: Add a second image named `background-1.(jpg/png)` for seperate dark mode background.** | | `uc.tweak.newtab-background` | -| Hide forward button when it's disabled (like in Edge) | -| ------------------------------------------------------ | -| `uc.tweak.hide-forward-button` | - -| Hide Firefox logo on newtab page | +| hide Firefox logo on newtab page | | -------------------------------- | | `uc.tweak.hide-newtab-logo` | -| Disable drag space above tabs | +| disable drag space above tabs | | ----------------------------- | | `uc.tweak.disable-drag-space` | -| Force tab background colour to the same colour as the navbar background (useful for Proton themes) | +| enable Edge style floating tabs | +| ------------------------------- | +| `uc.tweak.floating-tabs` | + +| enable Mica toolbar background *(Windows 11 only)* | +| ------------------------------------------------------------------- | +| **See [Mica Tweak Instructions][3] for installation instructions.** | +| **NOTE: Only works on default theme: 'System theme - auto'** | +| `uc.tweak.win11-mica` | + +| force tab background colour to the same colour as the navbar background (useful for Proton themes) | | -------------------------------------------------------------------------------------------------- | | **NOTE: can cause readability issues with some themes! (eg. white text on white bg)** | | `uc.tweak.force-tab-colour` | | ![force tab colour example](screenshots/force-tab-colour.svg) (Left: OFF, Right: ON) | -| Show context menu navigation buttons (Back, Forward, Reload, Bookmark) vertically | -| --------------------------------------------------------------------------------- | -| **NOTE: labels are only shown in the English language.** | -| `uc.tweak.vertical-context-navigation` | +| Show context menu navigation buttons (Back, Forward, Reload, etc.) vertically | +| ----------------------------------------------------------------------------- | +| **NOTE: labels are only shown in the English language.** | +| `uc.tweak.vertical-context-navigation` | -| Remove tab separators | +| remove tab separators | | -------------------------------- | | `uc.tweak.remove-tab-separators` | -| Use Firefox's default context menu font-size (only applies to Windows) | +| use Firefox's default context menu font-size (only applies to Windows) | | ---------------------------------------------------------------------- | | `uc.tweak.smaller-context-menu-text` | -| Disable custom context menus | +| disable custom context menus | | ------------------------------ | | `uc.tweak.revert-context-menu` | -| If a tab's close button is hidden, show it when hovering over tab | +| if a tab's close button is hidden, show it when hovering over tab | | ----------------------------------------------------------------- | | `uc.tweak.show-tab-close-button-on-hover` | -## Mica Tweak 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 +## Mica Tweak Instructions (Windows 11 Only) +1. Download and install [Mica For Everyone][2]. +2. Create a custom process rule with the following: + 1. Name: `firefox` + 2. Titlebar Color: `System` + 3. Backdrop Type: `Mica` +3. Enable tweak in `about:config`: `uc.tweak.win11-mica` +4. Restart Firefox. ## Acknowledgements [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox) @@ -121,13 +111,19 @@ delete it [1]: https://github.com/lassekongo83/adw-gtk3 +[2]: https://github.com/MicaForEveryone/MicaForEveryone +[3]: #mica-tweak-instructions-windows-11-only [s-l]: screenshots/light.png [s-lf]: screenshots/light-floating-tabs.png +[s-lm]: screenshots/light-mica.png +[s-lmf]: screenshots/light-mica-floating-tabs.png [s-lgtk]: screenshots/gtk-light.png [s-d]: screenshots/dark.png [s-df]: screenshots/dark-floating-tabs.png +[s-dm]: screenshots/dark-mica.png +[s-dmf]: screenshots/dark-mica-floating-tabs.png [s-dgtk]: screenshots/gtk-dark.png diff --git a/chrome/content/common.css b/chrome/content/common.css index 7491148..b82a5b1 100644 --- a/chrome/content/common.css +++ b/chrome/content/common.css @@ -1,59 +1,84 @@ -/* Edge-Frfox - content/common.css */ +/* EdgeFr-Fox by bmFtZQ - content/common.css */ /* colours */ @-moz-document url-prefix(about:) { :root { - --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-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-border-invalid: var(--red-50) !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-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-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: 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-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-text-color: var(--in-content-page-color) !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; + 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; + } } } /* 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; @@ -71,9 +96,8 @@ url-prefix(about:addons) { background-color: var(--in-content-accent-color); border-radius: 3px; position: absolute; - left: 2px; - top: 50%; - translate: 0 -50%; + left: 0; + top: 12px; } button.tab-button:hover { @@ -84,16 +108,6 @@ url-prefix(about:addons) { button.tab-button[selected]:hover { border-block-color: transparent currentColor !important; } - - .toggle-button { - --toggle-dot-margin: 4px !important; - --toggle-width: 40px !important; - --toggle-height: 20px !important; - --toggle-background-color: transparent !important; - --toggle-dot-background-color: var(--in-content-page-color) !important; - --toggle-dot-background-color-on-pressed: #fff !important; - --toggle-dot-transform-x: calc(var(--toggle-width) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) - var(--toggle-dot-width)) !important; - } } /* fix page flashes when loading some websites */ diff --git a/chrome/content/newtab.css b/chrome/content/newtab.css index d8ec514..a092b93 100644 --- a/chrome/content/newtab.css +++ b/chrome/content/newtab.css @@ -1,10 +1,11 @@ -/* Edge-Frfox - content/newtab.css */ +/* EdgeFr-Fox by bmFtZQ - content/newtab.css */ /* colours */ @-moz-document url-prefix("about:newtab"), url-prefix("about:home"), url-prefix("about:firefoxview") { - :root:not([lwt-newtab], [lwt-newtab-brighttext]) { + body:not([lwt-newtab], [lwt-newtab-brighttext]), + body[style*="--newtab-background-color: rgb(249, 249, 251)"] { --newtab-background-color: #F7F7F7 !important; --newtab-background-color-secondary: #fff !important; --newtab-text-primary-color: #252525 !important; @@ -23,7 +24,7 @@ url-prefix("about:firefoxview") { --newtab-wordmark-color: #737373 !important; --newtab-status-success: #50B080 !important; --newtab-status-error: #FF848A !important; - --newtab-inner-box-shadow-color: rgb(0 0 0 / .1) !important; + --newtab-inner-box-shadow-color: rgba(0, 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; @@ -32,7 +33,8 @@ url-prefix("about:firefoxview") { --newtab-button-secondary-color: inherit !important; } - :root:not([style*="color"])[lwt-newtab-brighttext] { + body[style*="--newtab-background-color: rgb(43, 42, 51)"][lwt-newtab-brighttext], + body:not([style*="color"])[lwt-newtab-brighttext] { --newtab-background-color: #252525 !important; --newtab-background-color-secondary: #4A4A4A !important; --newtab-text-primary-color: #fff !important; @@ -73,7 +75,7 @@ url-prefix("about:home") { white-space: nowrap !important; text-overflow: ellipsis !important; --elevation: 4; - box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / .11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / .13) !important; + 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; } .search-handoff-button:hover { @@ -129,7 +131,7 @@ url-prefix("about:home") { .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; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important; } .card-outer .card-preview-image-outer, @@ -147,7 +149,7 @@ url-prefix("about:home") { padding: 30px !important; } - @media (-moz-bool-pref: "uc.tweak.hide-newtab-logo") { + @supports -moz-bool-pref("uc.tweak.hide-newtab-logo") { .logo-and-wordmark { display: none !important; } @@ -161,11 +163,24 @@ url-prefix("about:home") { /* private browsing newtab */ @-moz-document url-prefix(about:privatebrowsing) { :root { - --uc-wordmark-color: light-dark(#737373, #fff); - --uc-background-color-secondary: light-dark(#fff, #4a4a4a); + --uc-wordmark-color: #737373; + --uc-background-color-secondary: #fff; + } - @media (-moz-bool-pref: "browser.theme.dark-private-windows") { - color-scheme: dark !important; + @media (prefers-color-scheme: dark) { + :root { + --uc-wordmark-color: #fff; + --uc-background-color-secondary: #4a4a4a; + } + } + + @supports -moz-bool-pref("browser.theme.dark-private-windows") { + html.private { + --in-content-page-color: white !important; + --in-content-page-background: #252525 !important; + --in-content-focus-outline-color: #63ADE5 !important; + --uc-background-color-secondary: #4a4a4a !important; + --uc-wordmark-color: #fff !important; } } @@ -182,7 +197,7 @@ url-prefix("about:home") { border-radius: 99px !important; padding-inline-start: 48px !important; --elevation: 4; - box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / .11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / .13) !important; + 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; } .search-handoff-button:hover { @@ -225,18 +240,20 @@ url-prefix("about:home") { } } -@media (-moz-bool-pref: "uc.tweak.newtab-background") { +@supports -moz-bool-pref("uc.tweak.newtab-background") { @-moz-document url(about:newtab), url(about:home), url(about:privatebrowsing), url-prefix("about:firefoxview") { - :root body { + body:not([lwt-newtab]), + body[lwt-newtab], + body[lwt-newtab][lwt-newtab-brighttext] { /* 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; + --newtab-element-hover-color: rgba(239, 239, 239, 0.3) !important; + --newtab-element-active-color: rgba(239, 239, 239, 0.45) !important; --text-shadow: 0 1px 2px #000; --icon-shadow: drop-shadow(0 0.3px 0.6px #000); background-color: #252525 !important; @@ -246,14 +263,14 @@ url-prefix("about:home") { background-attachment: fixed !important; } - :root[lwt-newtab-brighttext] body, + body[lwt-newtab][lwt-newtab-brighttext], :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; + --newtab-element-hover-color: rgba(66, 66, 66, 0.4) !important; + --newtab-element-active-color: rgba(66, 66, 66, 0.55) !important; } - @media not (-moz-bool-pref: "browser.theme.dark-private-windows") { + @supports not -moz-bool-pref("browser.theme.dark-private-windows") { :root.private body { background-image: var(--bg-0) !important; } diff --git a/chrome/global/browser.css b/chrome/global/browser.css deleted file mode 100644 index dab9cb5..0000000 --- a/chrome/global/browser.css +++ /dev/null @@ -1,79 +0,0 @@ -/* 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 1254ddf..8623f46 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -1,83 +1,136 @@ -/* Edge-Frfox - colors.css */ +/* EdgeFr-Fox by bmFtZQ - colors.css */ -/* default colours (light & dark) */ +/* light */ :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; +:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] { + --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; --lwt-tab-text: var(--toolbar-color) !important; - --lwt-selected-tab-background-color: unset !important; + --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important; --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; - --toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important; - --toolbar-field-color: light-dark(#000, #fff) !important; - --toolbar-field-border-color: light-dark(#0000, #0000) !important; + --toolbar-field-background-color: #fff !important; + --toolbar-field-color: #000 !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: 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: light-dark(#0072C9, #75B6E8) !important; + --toolbar-field-focus-border-color: #0055D7 !important; + --urlbar-box-bgcolor: rgba(0, 0, 0, 0.09) !important; + --urlbar-box-hover-bgcolor: rgba(0, 0, 0, 0.09) !important; + --urlbar-box-focus-bgcolor: rgba(0, 0, 0, 0.22) !important; + --urlbar-icon-fill-opacity: 0.6 !important; + --urlbar-popup-url-color: #0072C9 !important; --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !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; + --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; + --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: #1c1c1c !important; + --panel-description-color: #000a !important; + --panel-disabled-color: #9E9E9E !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: #188038 !important; + --focus-outline-color: #0055D7 !important; --panel-shortcut-color: inherit !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-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.1); + --toolbarbutton-hover-background: rgba(0, 0, 0, 0.08) !important; + --toolbarbutton-active-background: rgba(0, 0, 0, 0.12) !important; --uc-private-browsing-indicator: var(--button-primary-bgcolor); --uc-private-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; + --tab-icon-overlay-stroke: #fff !important; + --tab-icon-overlay-fill: #252525 !important; } -/* 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; - } +/* dark */ +:root[lwt-default-theme-in-dark-mode="true"], +:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] { + --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-box-bgcolor: rgba(255, 255, 255, 0.11) !important; + --urlbar-box-hover-bgcolor: rgba(255, 255, 255, 0.11) !important; + --urlbar-box-focus-bgcolor: rgba(255, 255, 255, 0.28) !important; + --urlbar-icon-fill-opacity: 1 !important; + --urlbar-popup-url-color: #75B6E8 !important; + --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !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: #5C5C5C !important; + --button-hover-bgcolor: #646464 !important; + --button-active-bgcolor: #575757 !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: #81C995 !important; + --focus-outline-color: #63ADE5 !important; + --panel-shortcut-color: inherit !important; + --toolbarbutton-hover-background: rgba(255, 255, 255, 0.1) !important; + --toolbarbutton-active-background: rgba(255, 255, 255, 0.16) !important; + --uc-private-browsing-indicator: var(--button-primary-bgcolor); + --uc-private-browsing-indicator-text: var(--button-primary-color); + --tab-icon-overlay-stroke: #4b4b4b !important; + --tab-icon-overlay-fill: #fff !important; } #urlbar { @@ -87,24 +140,37 @@ } /* Change Colour of page when loading */ -:root:not(:-moz-lwtheme) #tabbrowser-tabpanels { - background-color: light-dark(#f7f7f7, #252525) !important; +:root:not(:-moz-lwtheme) #tabbrowser-tabpanels, +:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #tabbrowser-tabpanels { + background-color: #f7f7f7 !important; +} + +:root[lwt-default-theme-in-dark-mode="true"] #tabbrowser-tabpanels, +:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] #tabbrowser-tabpanels { + background-color: #252525 !important; } /* make the titlebar buttons black/white on default themes */ -:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox { - color: var(--toolbar-color) !important; +:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox, +:root[style*="--lwt-accent-color: rgb(240, 240, 244)"][tabsintitlebar] .titlebar-buttonbox { + color: #000 !important; +} + +:root[lwt-default-theme-in-dark-mode="true"][tabsintitlebar] .titlebar-buttonbox, +:root[style*="--lwt-accent-color: rgb(28, 27, 34)"][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; + box-shadow: 0 2px 5px #0004, 0 0 0 1px #0002 !important; +} - #statuspanel[mirror] & { - border-radius: 4px 0 0 0 !important; +@media (prefers-color-scheme: dark) { + #statuspanel-label { + box-shadow: 0 2px 5px #0004, 0 0 0 1px #0004 !important; } } @@ -138,78 +204,127 @@ /* 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; + --organizer-color: #000 !important; + --organizer-deemphasized-color: #666 !important; + --organizer-toolbar-background: #f7f7f7 !important; + --organizer-pane-background: #f7f7f7 !important; + --organizer-content-background: #f7f7f7 !important; + --organizer-hover-background: #00000025 !important; + --organizer-selected-background: #006CBE80 !important; + --organizer-outline-color: #0055D7a0 !important; + --organizer-toolbar-field-background: #fff !important; + --organizer-toolbar-field-background-focused: #fff !important; + --organizer-border-color: #bfbfbf !important; + scrollbar-color: #0006 #f7f7f740 !important; } #placesViewsBox #downloadsListBox richlistitem[selected="true"] { - background-color: light-dark(#006CBE, #006CBE) !important; - color: light-dark(#fff, #fff) !important; + background-color: #006CBE !important; + color: #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; + background-color: #f7f7f7 !important; + color: #000 !important; + border-inline-start: 1px solid #bfbfbf !important; + box-shadow: inset 0 -1px #bfbfbf !important; appearance: none !important; } #placeContentColumns :is(treecol, treecolpicker):where(:hover) { - background-color: light-dark(#cecece, #4A4A4A ) !important; - color: light-dark(#000, #fff) !important; + background-color: #cecece !important; + color: #000 !important; + } + + @media (prefers-color-scheme: dark) { + window#places { + --organizer-color: #fff !important; + --organizer-deemphasized-color: #bbb !important; + --organizer-toolbar-background: #3B3B3B !important; + --organizer-pane-background: #2B2B2B !important; + --organizer-content-background: #1C1C1C !important; + --organizer-hover-background: #ffffff25 !important; + --organizer-selected-background: #006CBE80 !important; + --organizer-outline-color: #63ADE5 !important; + --organizer-toolbar-field-background: #2B2B2B !important; + --organizer-toolbar-field-background-focused: #2B2B2B !important; + --organizer-border-color: #686868 !important; + scrollbar-color: #fff6 #2B2B2B40 !important; + } + + #placesViewsBox #downloadsListBox richlistitem[selected="true"] { + background-color: #006CBE !important; + color: #fff !important; + } + + #placeContentColumns :is(treecol, treecolpicker) { + background-color: #3B3B3B !important; + color: #fff !important; + border-inline-start: 1px solid #686868 !important; + box-shadow: inset 0 -1px #686868 !important; + } + + #placeContentColumns :is(treecol, treecolpicker):where(:hover) { + background-color: #4A4A4A !important; + color: #fff !important; + } } } /* side bar theme */ #sidebar-box:not([lwt-sidebar]) { - --sidebar-background-color: light-dark(#f7f7f7, #3b3b3b) !important; - --sidebar-text-color: light-dark(#000, #fff) !important; + --sidebar-background-color: #f7f7f7 !important; + --sidebar-text-color: #000 !important; appearance: none !important; } +#sidebar-box[style*="--sidebar-background-color: rgb(56, 56, 61"] { + --sidebar-background-color: #3B3B3B !important; + --sidebar-text-color: #fff !important; +} + #browser:not([style*="--sidebar-border-color"]) { - --sidebar-border-color: light-dark(#bfbfbf, #686868) !important; + --sidebar-border-color: #bfbfbf !important; +} + +#browser[style*="--sidebar-border-color: rgba(255, 255, 255"] { + --sidebar-border-color: #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; - } - } - } + color: #000 !important; } @-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml){ - body { - background: transparent !important; +body { + background: transparent !important; +} +} + +.sidebar-panel[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"], +body[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"] { + --lwt-sidebar-background-color: #3B3B3B !important; + --lwt-sidebar-text-color: #fff !important; + scrollbar-color: #fff6 #3B3B3B40 !important; +} + +@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: #fff !important; + color: inherit !important; + border: 1px solid #bfbfbf !important; + border-radius: 2px !important; + } + + .sidebar-panel[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"] #sidebar-search-container>#search-box, + .sidebar-panel[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"] #viewButton { + appearance: none !important; + background-color: #2B2B2B !important; + color: inherit !important; + border: 1px solid #686868 !important; + border-radius: 2px !important; } } diff --git a/chrome/global/popup.css b/chrome/global/popup.css index 49d949b..e0a3b04 100644 --- a/chrome/global/popup.css +++ b/chrome/global/popup.css @@ -1,4 +1,4 @@ -/* Edge-Frfox - popup.css */ +/* EdgeFr-Fox by bmFtZQ - popup.css */ :root { --panel-subview-body-padding: 2px 0 !important; @@ -73,7 +73,7 @@ /* firefox profile avatar in appmenu */ #appMenu-fxa-label2::before { content: ""; - display: flex; + display: -moz-box; height: 16px; width: 16px; background: var(--avatar-image-url) 0/16px; @@ -281,8 +281,6 @@ #downloadsListBox, .downloadsPanelFooterButton { margin: var(--arrowpanel-menuitem-margin) !important; - width: auto !important; - min-width: auto !important; } #downloadsPanel-blockedSubview, @@ -313,7 +311,6 @@ } #PopupAutoComplete .autocomplete-richlistitem[originaltype="loginsFooter"] { - justify-content: start !important; -moz-box-pack: start !important; color: inherit !important; background-color: transparent !important; @@ -382,7 +379,7 @@ panelview .toolbarbutton-1, } /* disable context menu when this tweak is applied */ -@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") { +@supports not -moz-bool-pref("uc.tweak.revert-context-menu") { /* Context Menu */ menupopup:not(.PanelUI-subView), menupopup:not(.PanelUI-subView) menuitem, @@ -405,7 +402,7 @@ panelview .toolbarbutton-1, panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox, .menupopup-arrowscrollbox { background: var(--arrowpanel-background) !important; - border: 1px solid light-dark(transparent, var(--panel-separator-color)) !important; + border: 0 !important; } /* make room for menu shadow */ @@ -450,6 +447,15 @@ panelview .toolbarbutton-1, box-shadow: var(--uc-box-shadow) !important; } + .popup-internal-box, + .menupopup-arrowscrollbox { + margin: 0 !important; + } + + .menupopup-arrowscrollbox { + margin: var(--uc-margin) !important; + } + .popup-internal-box { margin: 0 !important; } @@ -486,10 +492,6 @@ panelview .toolbarbutton-1, padding: 0 !important; background: none !important; border-top: 1px solid var(--panel-separator-color) !important; - - &::before { - content: unset !important; - } } #PlacesToolbar menupopup[placespopup="true"] menuseparator::before { @@ -564,14 +566,12 @@ panelview .toolbarbutton-1, width: 16px !important; } - menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before, - menupopup>menuitem::before, - menupopup>menuitem::after { + menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before { display: none !important; } menuitem:is([type="checkbox"], [checked="true"], [type="radio"])>.menu-iconic-left>.menu-iconic-icon { - display: flex !important; + display: -moz-box !important; } menuitem[checked="true"]>.menu-iconic-left, @@ -597,7 +597,6 @@ panelview .toolbarbutton-1, } #context-navigation>.menuitem-iconic { - justify-content: center !important; -moz-box-pack: center !important; } @@ -618,7 +617,7 @@ panelview .toolbarbutton-1, 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") { + @supports not -moz-bool-pref("uc.tweak.smaller-context-menu-text") { @media (-moz-platform: windows) { .menu-text, .menu-iconic-text, diff --git a/chrome/global/tree.css b/chrome/global/tree.css deleted file mode 100644 index 2bbffb4..0000000 --- a/chrome/global/tree.css +++ /dev/null @@ -1,87 +0,0 @@ -/* 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 126e378..212a37a 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -1,41 +1,48 @@ -/* Edge-Frfox - tweaks.css */ +/* EdgeFr-Fox by bmFtZQ - tweaks.css */ /* disable drag space above tabs */ -@media (-moz-bool-pref: "uc.tweak.disable-drag-space") { - :root { +@supports -moz-bool-pref("uc.tweak.disable-drag-space") { + :root #titlebar { --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.) */ -@media (-moz-bool-pref: "uc.tweak.force-tab-colour") { +@supports -moz-bool-pref("uc.tweak.force-tab-colour") { :root { --lwt-selected-tab-background-color: unset !important; } } /* remove tab separators */ -@media (-moz-bool-pref: "uc.tweak.remove-tab-separators") { - .tabbrowser-tab .tab-stack { - &::before, - &::after { - content: initial !important; - } +@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.floating-tabs") { +@supports -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; + :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] { + --lwt-accent-color: #f3f3f3 !important; --lwt-accent-color-inactive: unset !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; + --toolbar-bgcolor: #fff !important; + --lwt-tab-text: #262626 !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"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34)"] { + --lwt-accent-color: #202020 !important; + --toolbar-bgcolor: #4D4D4D !important; + --lwt-accent-color-inactive: unset !important; + --chrome-content-separator-color: #535353 !important; + --uc-tab-border-color: #ffffff0f !important; } @media (-moz-gtk-csd-available) { @@ -82,19 +89,29 @@ bugs with certain themes eg. dark text on dark background.) */ outline-offset: -1px !important; } + .tabbrowser-tab[selected] .tab-label { + font-weight: 500 !important; + } + + @media (-moz-platform: windows) { + .tabbrowser-tab[selected] .tab-label { + font-weight: 600 !important; + } + } + /* adjust spacing of area above tabs */ @media not (-moz-platform: macos) { - :root[sizemode="maximized"] { + :root[sizemode="maximized"] #titlebar { --tab-block-margin: 4px !important; } } - :root:is([inFullscreen], :not([tabsintitlebar])) { + :root:is([inFullscreen], :not([tabsintitlebar])) #titlebar { --tab-block-margin: 4px !important; } - @media (-moz-bool-pref: "uc.tweak.disable-drag-space") { - :root { + @supports -moz-bool-pref("uc.tweak.disable-drag-space") { + :root #titlebar { --tab-block-margin: 4px !important; } } @@ -125,31 +142,86 @@ bugs with certain themes eg. dark text on dark background.) */ :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); + 0 3.3px 3px rgba(0, 0, 0, 0.06), + 0 0 0 1px rgba(0, 0, 0, 0.11); } :root[lwtheme-brighttext="true"] { --uc-titlebar-shadow: none; - --uc-tab-shadow: 0 1px 2px rgb(0 0 0 / .08); + --uc-tab-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); + } +} + +@media (-moz-windows-compositor) { + @supports -moz-bool-pref("uc.tweak.win11-mica") { + /* enable mica appearance */ + #main-window:not([inFullscreen]):not(:-moz-lwtheme), + #main-window:not([inFullscreen])[lwt-default-theme-in-dark-mode="true"] { + appearance: -moz-win-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; + } + + /* force tab color (for the tab transparency) */ + .tab-background:is([selected], [multiselected]) { + background: var(--toolbar-bgcolor) !important; + } + + /* color adjustments */ + :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; + } + } + + /* line up buttons with duplicate icons from -moz-win-glass */ + :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-bool-pref: "uc.tweak.revert-context-menu") { - @media (-moz-bool-pref: "uc.tweak.vertical-context-navigation") { + @supports not -moz-bool-pref("uc.tweak.revert-context-menu") { + @supports -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; + display: -moz-box !important; } :root, @@ -190,7 +262,7 @@ bugs with certain themes eg. dark text on dark background.) */ } @media (-moz-windows-compositor) { - @media (-moz-bool-pref: "uc.tweak.revert-context-menu") { + @supports -moz-bool-pref("uc.tweak.revert-context-menu") { menupopup { --panel-color: var(--arrowpanel-color) !important; --panel-border-radius: 4px !important; @@ -206,103 +278,8 @@ bugs with certain themes eg. dark text on dark background.) */ } } -@media (-moz-bool-pref: "uc.tweak.show-tab-close-button-on-hover") { +@supports -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; + display: -moz-box !important; } } diff --git a/chrome/icons/arrow-filled-down.svg b/chrome/icons/arrow-filled-down.svg deleted file mode 100644 index bd111a7..0000000 --- a/chrome/icons/arrow-filled-down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/chrome/icons/arrow-filled-left.svg b/chrome/icons/arrow-filled-left.svg deleted file mode 100644 index c0f6945..0000000 --- a/chrome/icons/arrow-filled-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/chrome/icons/arrow-filled-right.svg b/chrome/icons/arrow-filled-right.svg deleted file mode 100644 index 2f65f5e..0000000 --- a/chrome/icons/arrow-filled-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/chrome/icons/firefox-view.svg b/chrome/icons/firefox-view.svg deleted file mode 100644 index 6288a1e..0000000 --- a/chrome/icons/firefox-view.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css index e99d62c..2868cb1 100644 --- a/chrome/icons/icons.css +++ b/chrome/icons/icons.css @@ -1,8 +1,8 @@ -/* Edge-Frfox - icons.css */ +/* EdgeFr-Fox by bmFtZQ - icons.css */ /* windows 11 style window controls (no known way to detect between windows 10 and 11 so applied to both) */ -@media (-moz-platform: windows), +@media (-moz-windows-compositor), (-moz-gtk-csd-available) { .titlebar-min { list-style-image: url("win11-minimize.svg") !important; @@ -23,7 +23,7 @@ and 11 so applied to both) */ /* darkmode icon that uses thicker strokes and is easier to see (only needed at 1x scale) */ @media (max-resolution: 1dppx) { - toolbar[brighttext] .titlebar-close, + :root[lwtheme-brighttext="true"] .titlebar-close, .titlebar-close:hover { list-style-image: url("win11-close-dark.svg") !important; } @@ -133,10 +133,6 @@ and 11 so applied to both) */ list-style-image: url("new-tab.svg") !important; } -#firefox-view-button { - list-style-image: url("firefox-view.svg") !important; -} - #sync-button, .urlbarView-row[source="tabs"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon, #urlbar-engine-one-off-item-tabs { @@ -172,11 +168,6 @@ and 11 so applied to both) */ list-style-image: url("search-page.svg") !important; } -#appMenu-translate-button, -#translations-button-icon { - list-style-image: url("translate.svg") !important; -} - #open-file-button { list-style-image: url("open.svg") !important; } @@ -370,9 +361,7 @@ and 11 so applied to both) */ .widget-overflow-list .subviewbutton-nav::after, .PanelUI-subView .subviewbutton-nav::after, .menu-right { - content: url("arrow-filled-right.svg") !important; - opacity: 0.6 !important; - scale: 0.75 !important; + content: url("arrow-right.svg") !important; } #PlacesChevron, @@ -561,7 +550,7 @@ and 11 so applied to both) */ } /* disable context menu icons when this tweak is applied */ -@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") { +@supports not -moz-bool-pref("uc.tweak.revert-context-menu") { /* Context Menu Icons */ menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon { @@ -944,67 +933,3 @@ and 11 so applied to both) */ --header-image: url("extension.svg"); --uc-enabled: 1; } - -/* Tree items used for side bar and library windows */ -treechildren::-moz-tree-image { - fill-opacity: 1 !important; -} - -treechildren::-moz-tree-image(title) { - list-style-image: url("page-portrait.svg") !important; -} - -/* default folder icon */ -treechildren::-moz-tree-image(title, container), -treechildren::-moz-tree-image(title, open) { - list-style-image: url("folder.svg") !important; -} - -/* bookmarks bar icon */ -treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { - list-style-image: url("bookmark-hollow.svg") !important; -} - -/* bookmarks menu icon */ -treechildren::-moz-tree-image(container, queryFolder_menu________) { - list-style-image: url("folder.svg") !important; -} - -/* smart folder icon */ -treechildren::-moz-tree-image(query) { - list-style-image: url("settings.svg") !important; -} - -/* bookmarks category icon */ -treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { - list-style-image: url("bookmark-hollow.svg") !important; -} - -/* downloads category icon */ -treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { - list-style-image: url("downloads.svg") !important; -} - -/* tags category icon */ -treechildren::-moz-tree-image(title, query, tagContainer), -treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { - list-style-image: url("tag.svg") !important; -} - -/* calendar icon for folders grouping items by date */ -treechildren::-moz-tree-image(title, query, dayContainer) { - list-style-image: url("history.svg") !important; -} - -treechildren::-moz-tree-image(title, query, hostContainer) { - list-style-image: url("folder.svg") !important; -} - -/* history category icon */ -treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { - list-style-image: url("history.svg") !important; -} - -treechildren::-moz-tree-image(title, query, folder) { - list-style-image: url("folder.svg") !important; -} diff --git a/chrome/icons/tag.svg b/chrome/icons/tag.svg deleted file mode 100644 index 8864d48..0000000 --- a/chrome/icons/tag.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/chrome/icons/translate.svg b/chrome/icons/translate.svg deleted file mode 100644 index 58e8c43..0000000 --- a/chrome/icons/translate.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/chrome/toolbar/findbar.css b/chrome/toolbar/findbar.css index 482985c..909b778 100644 --- a/chrome/toolbar/findbar.css +++ b/chrome/toolbar/findbar.css @@ -1,4 +1,4 @@ -/* Edge-Frfox - findbar.css */ +/* EdgeFr-Fox by bmFtZQ - findbar.css */ .findbar-find-previous, .findbar-find-next, @@ -32,11 +32,11 @@ .close-icon:not([disabled]):hover, .findbar-find-previous:not([disabled]):hover, .findbar-find-next:not([disabled]):hover { - background: var(--toolbarbutton-hover-background, rgb(190 190 190 / .2)) !important; + background: var(--toolbarbutton-hover-background, rgba(190,190,190,.2)) !important; } .close-icon:not([disabled]):hover:active, .findbar-find-previous:not([disabled]):hover:active, .findbar-find-next:not([disabled]):hover:active { - background: var(--toolbarbutton-active-background, rgb(190 190 190 / .4)) !important; + background: var(--toolbarbutton-active-background, rgba(190,190,190,.4)) !important; } diff --git a/chrome/toolbar/navbar.css b/chrome/toolbar/navbar.css index ef37b6c..b8d76f3 100644 --- a/chrome/toolbar/navbar.css +++ b/chrome/toolbar/navbar.css @@ -1,9 +1,9 @@ -/* Edge-Frfox - navbar.css */ +/* EdgeFr-Fox by bmFtZQ - navbar.css */ :root { - --toolbarbutton-border-radius: 4px !important; + --toolbarbutton-border-radius: 2px !important; --toolbarbutton-inner-padding: 7px !important; - --uc-toolbarbutton-inner-inline-padding: 10px !important; + --uc-toolbarbutton-inner-inline-padding: 12px !important; --tabs-navbar-shadow-size: 0 !important; } @@ -21,18 +21,13 @@ #reload-button>.toolbarbutton-animatable-box, #stop-button>.toolbarbutton-animatable-box { top: calc(50% - 10px) !important; + margin-inline-start: calc((16px + 2 * var(--uc-toolbarbutton-inner-inline-padding) - 20px) / 2) !important; } #nav-bar-customization-target :where(#reload-button, #stop-button)>.toolbarbutton-icon { padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important; } -@media (-moz-bool-pref: "uc.tweak.rounded-corners") { - #navigator-toolbox { - border-bottom: none !important; - } -} - /* account button */ #navigator-toolbox>toolbar #fxa-toolbar-menu-button, #navigator-toolbox>toolbar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack, @@ -46,7 +41,6 @@ } #fxa-toolbar-menu-button { - display: flex !important; display: -moz-box !important; } diff --git a/chrome/toolbar/personalbar.css b/chrome/toolbar/personalbar.css index 0215c1c..f7127ee 100644 --- a/chrome/toolbar/personalbar.css +++ b/chrome/toolbar/personalbar.css @@ -1,63 +1,42 @@ -/* Edge-Frfox - personalbar.css */ +/* EdgeFr-Fox by bmFtZQ - personalbar.css */ #PersonalToolbar { --bookmark-block-padding: 6px !important; } -/* Bookmarks bar item sizing */ #personal-toolbar-empty-description, #PersonalToolbar .toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton) { - margin-block: 2px 4px !important; - padding-block: var(--bookmark-block-padding) !important; - padding-inline: 6px !important; + margin-block: 0 4px !important; + padding: var(--bookmark-block-padding) 6px !important; font-size: 12px !important; - - /* Adjust vertical label position on Windows */ - @media (-moz-platform: windows) { - & .toolbarbutton-text { - margin-block: -1px 0 !important; - } - } } #PersonalToolbar .toolbarbutton-1 { padding: 0 !important; } -/* Bookmarks bar separators */ -#PlacesToolbarItems > toolbarseparator { - padding-inline: 1px !important; - - &::before { - content: ""; - display: block; - border-inline-start: 1px solid var(--toolbarseparator-color) !important; - margin-block: 8px 10px !important; - border-image-source: none !important; - } +#PlacesToolbarItems>toolbarseparator::before { + content: ""; + display: block; + border-inline-start: 1px solid var(--toolbarseparator-color) !important; + margin-block: 6px 10px !important; + border-image-source: none !important; } -/* Left and Right padding of bookmarks bar */ #PersonalToolbar { padding-inline: calc(var(--toolbar-start-end-padding) - 2px) calc(var(--toolbar-start-end-padding) + 6px) !important; } -/* Spacing between icon and label for bookmarks bar items */ #managed-bookmarks>.toolbarbutton-icon, #bookmarks-toolbar-placeholder>.toolbarbutton-icon, #PlacesToolbarItems>.bookmark-item>.toolbarbutton-icon[label]:not([label=""]), #OtherBookmarks.bookmark-item[container]>.toolbarbutton-icon { - margin-inline-end: 8px !important; + margin-inline-end: 6px !important; } -/* Sizing for bookmarks bar icons */ #PersonalToolbar .toolbarbutton-1>.toolbarbutton-icon { width: calc(2 * var(--bookmark-block-padding) + 16px) !important; height: calc(2 * var(--bookmark-block-padding) + 16px) !important; padding: var(--bookmark-block-padding) !important; } - -:root { - --bookmarks-toolbar-overlapping-browser-height: 34px !important; -} diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 9e4a820..dbd93c6 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -1,23 +1,15 @@ -/* Edge-Frfox - tabbar.css */ +/* EdgeFr-Fox 2 - tabbar */ -:root { +:root #titlebar { + --tab-min-height: 32px !important; + --inline-tab-padding: 11px !important; + --tab-border-radius: 4px !important; --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; - } + --uc-toolbarbutton-inner-padding: 6px !important; + --toolbarbutton-border-radius: 2px !important; + --tabs-navbar-shadow-size: 0 !important; + --tab-shadow-max-size: 0 !important; } /* tab open/close transition */ @@ -33,13 +25,13 @@ transition: transform 200ms cubic-bezier(0, .75, .25, 1) !important; } -:root:is([inFullscreen], :not([tabsintitlebar])) { +:root:is([inFullscreen], :not([tabsintitlebar])) #titlebar { --tab-block-margin: 0px !important; } /* hide space above tabs when maximised for non-macOS versions of Firefox */ @media not (-moz-platform: macos) { - :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]), + :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]) #titlebar, #toolbar-menubar:not([inactive])+#TabsToolbar { --tab-block-margin: 0px !important; } @@ -53,54 +45,60 @@ border: 0 !important; position: relative !important; --uc-tab-corner-bg: transparent; - - /* Rounded bottom corners */ - &::before, - &::after { - content: "" !important; - display: block !important; - position: absolute !important; - width: 8px !important; - height: 8px !important; - bottom: 0 !important; - pointer-events: none !important; - clip-path: inset(0); - } - - &::before { - border-bottom-right-radius: var(--tab-border-radius) !important; - left: 0 !important; - transform: translateX(-8px) !important; - box-shadow: 4px 4px 0 4px var(--uc-tab-corner-bg) !important; - } - - &::after { - border-bottom-left-radius: var(--tab-border-radius) !important; - right: 0 !important; - transform: translateX(8px) !important; - box-shadow: -4px 4px 0 4px var(--uc-tab-corner-bg) !important; - } } -.tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected]) .tab-background { - border-bottom-left-radius: var(--tab-border-radius) !important; +/* rounded bottom corners */ +.tab-background::before, +.tab-background::after { + content: "" !important; + display: block !important; + position: absolute !important; + width: 8px !important; + height: 8px !important; + bottom: 0 !important; + pointer-events: none !important; + clip-path: inset(0); +} - &::before { - --uc-tab-corner-bg: transparent !important; - } +.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; + right: 0 !important; + transform: translateX(8px) !important; + box-shadow: -4px 4px 0 4px var(--uc-tab-corner-bg) !important; +} + +.tabbrowser-tab[selected="true"] .tab-background { + --uc-tab-corner-bg: var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor)); } .tab-background:is([selected], [multiselected]) { - --uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor))); + --uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } -.tabbrowser-tab:hover .tab-background:not([selected], [multiselected]) { +#tabbrowser-tabs:not([movingtab])>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-background[multiselected="true"]:-moz-lwtheme, +#tabbrowser-tabs:not([movingtab])>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-background[selected="true"]:-moz-lwtheme { + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); + --uc-tab-corner-bg: var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor)); +} + +.tabbrowser-tab .tab-background:is([selected], [multiselected]) { + --uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); +} + +.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { background-color: color-mix(in srgb, currentColor 8%, transparent) !important; --uc-tab-corner-bg: color-mix(in srgb, currentColor 8%, transparent) !important; } -@media not (-moz-bool-pref: "uc.tweak.floating-tabs") { - #Tabstoolbar:not([brighttext]) .tabbrowser-tab:hover .tab-background:not([selected], [multiselected]) { +@supports not -moz-bool-pref("uc.tweak.floating-tabs") { + :root:not([lwtheme-brighttext="true"]) .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { background-color: color-mix(in srgb, white 30%, transparent) !important; --uc-tab-corner-bg: color-mix(in srgb, white 30%, transparent) !important; } @@ -124,15 +122,20 @@ margin: 0 !important; } -/* fix window background colours */ +/* fix colours */ @media not (-moz-gtk-csd-available) { - :root:not(:-moz-lwtheme) #navigator-toolbox { + #navigator-toolbox:not(:-moz-lwtheme) { background-color: var(--lwt-accent-color) !important; color: var(--lwt-text-color) !important; } - :root:not(:-moz-lwtheme) #navigator-toolbox:-moz-window-inactive { - background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; + /* force inactive window on default theme */ + @media not (-moz-platform: windows-win7) { + @media not (-moz-platform: windows-win8) { + #navigator-toolbox:-moz-window-inactive:not(:-moz-lwtheme) { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; + } + } } } @@ -150,10 +153,6 @@ color: var(--lwt-tab-text, var(--toolbar-color)) !important; } -.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme { - z-index: 1; -} - .tab-close-button { margin-inline-end: 8px !important; width: 17px !important; @@ -235,7 +234,7 @@ .tabbrowser-tab { font-size: 12px !important; padding-inline: 0 !important; - overflow-clip-margin: 8px !important; + overflow-clip-margin: 4px !important; } #TabsToolbar .toolbarbutton-1>.toolbarbutton-icon, @@ -244,11 +243,6 @@ padding: var(--uc-toolbarbutton-inner-padding) calc(var(--uc-toolbarbutton-inner-padding) + 2px) !important; } -#tabbrowser-tabs .toolbarbutton-1>.toolbarbutton-icon, -#tabbrowser-tabs .toolbarbutton-1>.toolbarbutton-badge-stack { - border-radius: var(--toolbarbutton-tabsline-border-radius) !important; -} - #TabsToolbar .toolbarbutton-1>.toolbarbutton-icon { width: calc(2 * (var(--uc-toolbarbutton-inner-padding) + 2px) + 16px) !important; height: calc(2 * var(--uc-toolbarbutton-inner-padding) + 16px) !important; @@ -269,19 +263,17 @@ padding: 0 12px !important; } -/* Tab container indicator */ -.tabbrowser-tab[usercontextid] .tab-background .tab-context-line { - height: 2px !important; - border-radius: 2px !important; - margin: 2px 7px 0 !important; -} - -.tabbrowser-tab[selected][usercontextid] .tab-background .tab-context-line { - margin-inline: 9px !important; +.tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line { + height: 8px !important; + clip-path: inset(0 0 6px) !important; + border-radius: var(--tab-border-radius) !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + margin: 0 !important; } .titlebar-spacer[type="post-tabs"] { - display: flex !important; + display: -moz-box !important; } .titlebar-spacer[type="pre-tabs"], @@ -300,48 +292,20 @@ toolbarbutton[part="scrollbutton-down"] { max-width: 240px !important; } -/* Tab separators */ -.tabbrowser-tab .tab-stack { - &::before, - &::after { - content: ""; - position: absolute; - height: 20px; - inset: 0 auto; - margin-block: auto; - border-left: 1px solid transparent; - } - - &::before { - left: 0; - } - - &::after { - right: 0; - } -} - -/* Set separator color */ -.tabbrowser-tab:not([selected], [multiselected], :hover) { - & .tab-stack::before, - &:last-of-type .tab-stack::after { - border-color: color-mix(in srgb, currentColor 34%, transparent); - } -} - -/* Hide separator when previous sibling is hovered or selected */ -.tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected], [multiselected], :hover) .tab-stack::before { - border-color: transparent !important; -} - -/* Hide first tab separator if there are no buttons before it (Such as Firefox View) */ -#TabsToolbar-customization-target > #tabbrowser-tabs:not(toolbarbutton:not(#fxa-toolbar-menu-button) + #tabbrowser-tabs) .tabbrowser-tab:first-of-type .tab-stack::before { - border-color: transparent !important; -} - -/* .tabbrowser-tab:not([last-visible-tab="true"]) { +/* tab separators */ +.tabbrowser-tab:not([last-visible-tab="true"]) { margin-inline-end: -1px !important; -} */ +} + +.tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after { + content: ""; + position: absolute; + display: block; + height: 20px; + right: 0; + top: 6px; + border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent); +} #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; @@ -383,20 +347,8 @@ toolbarbutton[part="scrollbutton-down"] { margin-top: calc(2px + var(--tab-block-margin)) !important; } -/* add margin to tabs if they are the first or last tab */ -#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab { - &:first-of-type { - margin-inline-start: 14px !important; - } - - &:last-of-type { - margin-inline-end: 6px !important; - } -} - -/* 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:not([overflow="true"]) .tabbrowser-tab[first-visible-tab] { + margin-inline-start: 8px !important; } #tabbrowser-tabs { @@ -413,25 +365,25 @@ toolbarbutton[part="scrollbutton-down"] { } #tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[pinned] { - clip-path: inset(-8px -8px 0) !important; + clip-path: inset(-4px -4px 0) !important; } :root { - --uc-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / .2) inset; + --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset; --uc-tab-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0px 2px 4px rgb(0 0 0 / .2), 0 4px 8px rgb(0 0 0 / .1); + 0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2); } :root[lwtheme-brighttext="true"] { - --uc-titlebar-shadow: 0 -3px 2px -3px rgb(0 0 0 / .75) inset inset; + --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.75) inset inset; --uc-tab-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0 2px 4px rgb(0 0 0 / .45), 0 0px 2px rgb(0 0 0 / .2); + 0 2px 4px rgba(0, 0, 0, 0.45), 0 0px 2px rgba(0, 0, 0, 0.2); } -#tabbrowser-tabs .tab-background:is([selected], [multiselected]), -#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon { +.tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background, +#TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon { box-shadow: var(--uc-tab-shadow) !important; } @@ -511,7 +463,3 @@ toolbarbutton[part="scrollbutton-down"] { margin-block: 1px 2px; margin-inline: 6px 5px; } - -#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) { - opacity: 1 !important; -} diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css index d9871fc..85bc718 100644 --- a/chrome/toolbar/urlbar.css +++ b/chrome/toolbar/urlbar.css @@ -1,9 +1,9 @@ -/* Edge-Frfox - urlbar.css */ +/* EdgeFr-Fox by bmFtZQ - urlbar.css */ :root { --urlbar-min-height: 30px !important; --urlbarView-item-inline-padding: 14px !important; - --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important; + --urlbar-icon-border-radius: var(--toolbarbutton-border-radius) !important; --urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important; --uc-urlbar-icon-inline-padding: calc(var(--uc-toolbarbutton-inner-inline-padding) - 2px) !important; --identity-box-margin-inline: 2px !important; @@ -17,8 +17,7 @@ @media not (-moz-gtk-csd-available) { #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background:not(:-moz-lwtheme), #searchbar:not(:-moz-lwtheme):focus-within { - --uc-outline-dimmed: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent); - outline-color: light-dark(var(--uc-outline-dimmed), var(--toolbar-field-focus-border-color)) !important; + outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important; } } @@ -117,23 +116,13 @@ #urlbar-background, #searchbar { - border-radius: var(--urlbar-icon-border-radius) !important; -} - -#urlbar:hover:not([suppress-focus-border])>#urlbar-background, -#searchbar:hover { - outline: 1.5px solid var(--urlbar-hover-highlight-color); + border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important; } /* move tracking protection button */ #tracking-protection-icon-container, #page-action-buttons { -moz-box-ordinal-group: 2 !important; - order: 2 !important; -} - -#urlbar, #searchbar { - padding: 0 4px !important; } #urlbar-container:not(:hover) #tracking-protection-icon-container:not([open]) { diff --git a/chrome/userChrome.css b/chrome/userChrome.css index a43d558..1053b75 100644 --- a/chrome/userChrome.css +++ b/chrome/userChrome.css @@ -1,4 +1,4 @@ -/* Edge-Frfox */ +/* EdgeFr-Fox by bmFtZQ */ @import url("icons/icons.css"); @import url("toolbar/tabbar.css"); @import url("toolbar/navbar.css"); @@ -8,8 +8,3 @@ @import url("global/colors.css"); @import url("global/popup.css"); @import url("global/tweaks.css"); -@import url("global/browser.css"); -@import url("global/tree.css"); - -/* import custom stylesheet instead of modifying Edge-Frfox theme files */ -@import url("custom.css"); diff --git a/chrome/userContent.css b/chrome/userContent.css index 3c5ab07..e1bf933 100644 --- a/chrome/userContent.css +++ b/chrome/userContent.css @@ -1,3 +1,3 @@ -/* Edge-Frfox */ +/* EdgeFr-Fox by bmFtZQ */ @import url("content/common.css"); @import url("content/newtab.css"); diff --git a/screenshots/dark-mica-floating-tabs.png b/screenshots/dark-mica-floating-tabs.png new file mode 100644 index 0000000..bd47f05 Binary files /dev/null and b/screenshots/dark-mica-floating-tabs.png differ diff --git a/screenshots/dark-mica.png b/screenshots/dark-mica.png new file mode 100644 index 0000000..d64f80a Binary files /dev/null and b/screenshots/dark-mica.png differ diff --git a/screenshots/light-mica-floating-tabs.png b/screenshots/light-mica-floating-tabs.png new file mode 100644 index 0000000..594a44c Binary files /dev/null and b/screenshots/light-mica-floating-tabs.png differ diff --git a/screenshots/light-mica.png b/screenshots/light-mica.png new file mode 100644 index 0000000..2deca54 Binary files /dev/null and b/screenshots/light-mica.png differ