diff --git a/README.md b/README.md index f0673db..c8eefad 100644 --- a/README.md +++ b/README.md @@ -27,90 +27,93 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch ### Optional: * To use the light theme in private browsing mode set `browser.theme.dark-private-windows` = `false` - Additional tweaks can also be applied to the theme, such as 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 rounded corners | +| -------------------------- | +| `uc.tweak.rounded-corners` | + +| enable Edge style floating tabs | +| ---------------------------------------------------------------------------------------------------------------- | +| `uc.tweak.floating-tabs` | +| **OPTIONAL1: Make the top and bottom margins of the tab equal** | +| `uc.tweak.floating-tabs.equal-margin` | +| **OPTIONAL2: Hide the separator of adjacent tabs (need to wait for Firefox support, or forced enable with bug)** | +| `layout.css.has-selector.enabled` | + +| enable Mica toolbar background *(Windows 11 only)* | +| ------------------------------------------------------------------- | +| **BROKEN ON NEWER VERSIONS OF FIREFOX** | +| **See [Mica Tweak Instructions][3] for installation instructions.** | +| **NOTE: Only works on default theme: 'System theme - auto'** | +| `uc.tweak.win11-mica` | + +| force tab background colour to the same colour as the navbar background (useful for Proton themes) | | -------------------------------------------------------------------------------------------------- | | **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) +NOTE: Broken on newer versions of Firefox. +1. Download and install [Mica For Everyone][2]. +2. Create a custom process rule with the following: + 1. Name: `firefox` + 2. Titlebar Color: `System` + 3. Backdrop Type: `Mica` +3. Enable tweak in `about:config`: `uc.tweak.win11-mica` +4. Restart Firefox. ## Acknowledgements [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox) @@ -121,13 +124,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..46d324a 100644 --- a/chrome/content/common.css +++ b/chrome/content/common.css @@ -3,51 +3,77 @@ /* 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; + } } } @@ -84,16 +110,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..fceb069 100644 --- a/chrome/content/newtab.css +++ b/chrome/content/newtab.css @@ -23,7 +23,7 @@ url-prefix("about:firefoxview") { --newtab-wordmark-color: #737373 !important; --newtab-status-success: #50B080 !important; --newtab-status-error: #FF848A !important; - --newtab-inner-box-shadow-color: 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; @@ -73,7 +73,7 @@ url-prefix("about:home") { white-space: nowrap !important; text-overflow: ellipsis !important; --elevation: 4; - box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) 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 +129,7 @@ url-prefix("about:home") { .card-outer .card, .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - box-shadow: 0 1px 4px rgb(0 0 0 / .3) !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important; } .card-outer .card-preview-image-outer, @@ -161,11 +161,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; + } + } + + @media (-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 +195,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 { @@ -235,8 +248,8 @@ url-prefix("about:home") { have a higher priority */ --bg-0: url(../background-0.jpg), url(../background-0.png); --bg-1: url(../background-1.jpg), url(../background-1.png); - --newtab-element-hover-color: 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; @@ -249,8 +262,8 @@ url-prefix("about:home") { :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; + --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") { diff --git a/chrome/global/browser.css b/chrome/global/browser.css index dab9cb5..865902d 100644 --- a/chrome/global/browser.css +++ b/chrome/global/browser.css @@ -13,67 +13,15 @@ } @media (-moz-bool-pref: "uc.tweak.rounded-corners") { - /* Fix changes to the bookmarks bar made in Firefox 120 */ - :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel, - :root[BookmarksToolbarOverlapsBrowser] #sidebar-box { - padding-top: 0 !important; - } - - :root[BookmarksToolbarOverlapsBrowser] #appcontent, - :root[BookmarksToolbarOverlapsBrowser] #sidebar-box { - margin-top: var(--bookmarks-toolbar-overlapping-browser-height); - } - - :root { - --uc-tweak-rounded-corners-padding: 3px; - --uc-tweak-rounded-corners-border: 1px solid rgb(0 0 0 / .05); - --uc-tweak-rounded-corners-radius: 8px; - --uc-tweak-rounded-corners-shadow: 0px 1px 1px rgb(0 0 0 / .1); - - & #browser:not([style*="--sidebar-border-color"]) { - --sidebar-border-color: light-dark(#bfbfbf80, #595959) !important; - } - } - - /* disable rounded corners in fullscreen, only if the toolbar is hidden */ - :root[inFullscreen] #navigator-toolbox:where([style*="margin-top"], [fullscreenShouldAnimate]) + #browser, - :root[inDOMFullscreen] #browser { - --uc-tweak-rounded-corners-padding: 0; - --uc-tweak-rounded-corners-border: none; - --uc-tweak-rounded-corners-radius: 0; - --uc-tweak-rounded-corners-shadow: none; - } - - #appcontent { - margin-inline: var(--uc-tweak-rounded-corners-padding) !important; - margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; - border-radius: var(--uc-tweak-rounded-corners-radius) !important; - overflow: hidden !important; - border: var(--uc-tweak-rounded-corners-border) !important; - box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; + :root #browser>#appcontent { + margin: 0px 3px 3px 3px; + border-radius: 8px; + overflow: hidden; + border: 1.25px solid rgba(0, 0, 0, 0.05); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); } - /* 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 { + :root #browser { background-color: var(--browser-frame-bgcolor); } } diff --git a/chrome/global/colors.css b/chrome/global/colors.css index 1254ddf..e0cc054 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -15,18 +15,17 @@ --toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important; --lwt-tab-text: var(--toolbar-color) !important; --lwt-selected-tab-background-color: unset !important; - --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; + --tab-selected-bgcolor: unset !important; --toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important; --toolbar-field-color: light-dark(#000, #fff) !important; --toolbar-field-border-color: light-dark(#0000, #0000) !important; --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; --toolbar-field-focus-color: var(--toolbar-field-color) !important; --toolbar-field-focus-border-color: light-dark(#0055D7, #63ADE5) !important; - --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-hover-highlight-color: light-dark(rgba(192, 192, 192, 0.5), rgba(128, 128, 128, 0.5)) !important; + --urlbar-box-bgcolor: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.11)) !important; + --urlbar-box-hover-bgcolor: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.11)) !important; + --urlbar-box-focus-bgcolor: light-dark(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.28)) !important; --urlbar-icon-fill-opacity: 1 !important; --urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important; --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important; @@ -61,23 +60,20 @@ --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 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: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)) !important; + --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.16)) !important; --uc-private-browsing-indicator: var(--button-primary-bgcolor); --uc-private-browsing-indicator-text: var(--button-primary-color); --tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important; --tab-icon-overlay-fill: light-dark(#252525, #fff) !important; - --toolbarseparator-color: color-mix(in srgb, currentColor 40%, transparent) !important; } /* ensure that dark mode is enabled completely in private browsing mode. */ -@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; - } +:root[privatebrowsingmode="temporary"], +:root[privatebrowsingmode="temporary"] #nav-bar, +:root[privatebrowsingmode="temporary"] #PersonalToolbar { + color-scheme: dark !important; } #urlbar { @@ -93,19 +89,14 @@ /* make the titlebar buttons black/white on default themes */ :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox { - color: var(--toolbar-color) !important; + color: light-dark(#000, #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; - } + box-shadow: 0 2px 5px #0004, 0 0 0 1px light-dark(#0002, #0004) !important; } @media (-moz-platform: windows) { @@ -138,38 +129,70 @@ /* 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; + } } } @@ -187,24 +210,6 @@ .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){ @@ -213,6 +218,17 @@ } } +@media(-moz-platform: windows) { + .sidebar-panel:not([lwt-sidebar]) #sidebar-search-container>#search-box, + .sidebar-panel:not([lwt-sidebar]) #viewButton { + appearance: none !important; + background-color: light-dark(#fff, #2b2b2b) !important; + color: inherit !important; + border: 1px solid light-dark(#bfbfbf, #686868) !important; + border-radius: 2px !important; + } +} + /* Linux / GTK csd support */ @media (-moz-gtk-csd-available) { :root:not(:-moz-lwtheme) { diff --git a/chrome/global/popup.css b/chrome/global/popup.css index 49d949b..20f055b 100644 --- a/chrome/global/popup.css +++ b/chrome/global/popup.css @@ -281,8 +281,6 @@ #downloadsListBox, .downloadsPanelFooterButton { margin: var(--arrowpanel-menuitem-margin) !important; - width: auto !important; - min-width: auto !important; } #downloadsPanel-blockedSubview, @@ -405,7 +403,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 +448,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 +493,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,9 +567,7 @@ 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; } 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..97da1cb 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -2,7 +2,7 @@ /* disable drag space above tabs */ @media (-moz-bool-pref: "uc.tweak.disable-drag-space") { - :root { + :root #titlebar { --tab-block-margin: 0px !important; } } @@ -17,11 +17,12 @@ bugs with certain themes eg. dark text on dark background.) */ /* remove tab separators */ @media (-moz-bool-pref: "uc.tweak.remove-tab-separators") { - .tabbrowser-tab .tab-stack { - &::before, - &::after { - content: initial !important; - } + .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; } } @@ -84,17 +85,17 @@ bugs with certain themes eg. dark text on dark background.) */ /* adjust spacing of area above tabs */ @media not (-moz-platform: macos) { - :root[sizemode="maximized"] { + :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 { + :root #titlebar { --tab-block-margin: 4px !important; } } @@ -125,16 +126,69 @@ 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); } } +/* Mica broken on newer versions of Firefox */ +/* Uncomment to enable, only works for Firefox versions lower than 115 */ +/* @media (-moz-platform: windows) { + @media (-moz-bool-pref: "uc.tweak.win11-mica") { + #main-window:not([inFullscreen]):not(:-moz-lwtheme), + #main-window:not([inFullscreen])[lwt-default-theme-in-dark-mode="true"] { + appearance: -moz-win-borderless-glass !important; + background: transparent !important; + } + + #main-window:not([inFullscreen])[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) { + background: transparent !important; + } + + .tab-background:is([selected], [multiselected]) { + background: var(--toolbar-bgcolor) !important; + } + :root:not([inFullscreen]):not(:-moz-lwtheme):not(:-moz-window-inactive) { + --lwt-accent-color: #00000020 !important; + } + + @media (-moz-bool-pref: "uc.tweak.floating-tabs") { + :root:not([inFullscreen]):not(:-moz-lwtheme):not(:-moz-window-inactive) { + --toolbar-bgcolor: #ffffffcc !important; + --lwt-accent-color: #0000 !important; + } + + :root:not([inFullscreen])[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) { + --toolbar-bgcolor: #ffffff25 !important; + --lwt-accent-color: #0000 !important; + } + } + + :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-buttonbox-container { + --uc-titlebar-button-size: 30px; + --uc-titlebar-size: calc(var(--tab-min-height) + var(--tab-block-margin)); + margin-bottom: calc(var(--uc-titlebar-size) - var(--uc-titlebar-button-size)) !important; + } + + :root:not([inFullscreen]):is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) { + list-style-image: none !important; + } + + :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]):is([inFullscreen], [sizemode="maximized"]) .titlebar-button { + padding-block: 7px 9px !important; + } + + :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]):is([inFullscreen], [sizemode="maximized"]) .titlebar-close { + padding-right: 19px !important; + } + } +} */ + @media not (-moz-platform: macos) { @media not (-moz-bool-pref: "uc.tweak.revert-context-menu") { @media (-moz-bool-pref: "uc.tweak.vertical-context-navigation") { @@ -211,98 +265,3 @@ bugs with certain themes eg. dark text on dark background.) */ display: flex !important; } } - -@media (-moz-bool-pref: "uc.tweak.hide-tabs-bar") { - :root:not([customizing]) { - /* Height of navbar, used for determining height and position of window controls */ - --uc-navbar-height: 38px; - /* Drag space next to the window controls, allows you to move the window more easily */ - --uc-titlebar-drag-space: 40px; - - @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.only-when-maximised") { - /* Set containing block for the window buttons */ - & #titlebar { - position: relative !important; - } - - /* Hide the tabs */ - & #TabsToolbar { - visibility: collapse !important; - padding-inline-start: 0 !important; - } - - /* Add some padding to the top of the navbar */ - & #nav-bar { - padding-top: var(--tab-block-margin) !important; - } - } - - /* macOS specific positioning */ - @media (-moz-platform: macos) { - &[inFullscreen] { - /* Hide the tabs */ - & #TabsToolbar { - visibility: collapse !important; - padding-inline-start: 0 !important; - } - } - - @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.only-when-maximised") { - /* Offset navbar contents to make space for the window controls */ - &[tabsintitlebar] #nav-bar:not([inFullscreen]) { - padding-left: calc(84px + var(--uc-titlebar-drag-space)); - - /* Remove the padding from the side of the navbar */ - & #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child { - padding-inline-start: 0 !important; - } - } - - /* Positioning of the window controls */ - #TabsToolbar .titlebar-buttonbox { - --uc-position: calc((var(--uc-navbar-height) + var(--tab-block-margin)) / 2 - 8px); - visibility: visible !important; - position: absolute !important; - top: var(--uc-position); - left: var(--uc-position); - margin: 0 !important; - } - } - } - - /* Windows specific positioning */ - @media (-moz-platform: windows) { - /* Offset navbar contents to make space for the window controls */ - &:where([inFullscreen], [tabsintitlebar]) #nav-bar { - padding-right: calc(140px + var(--uc-titlebar-drag-space)); - - /* Remove the padding from the side of the navbar */ - & #PanelUI-menu-button { - padding-inline-end: 0 !important; - } - } - - /* Positioning of the window controls */ - & #toolbar-menubar[inactive] + #TabsToolbar .titlebar-buttonbox { - visibility: visible !important; - position: absolute !important; - top: 0; - right: 0; - height: calc(var(--uc-navbar-height) + var(--tab-block-margin)) !important; - } - - /* Set background colour of the menu bar to maintain consistency with the navbar */ - @media not (-moz-bool-pref: "uc.tweak.floating-tabs") { - #toolbar-menubar { - background-color: var(--toolbar-bgcolor) !important; - } - } - } - } -} - -@media (-moz-bool-pref: "uc.tweak.hide-forward-button") { - :root:not([customizing]) #forward-button[disabled] { - display: none !important; - } -} diff --git a/chrome/icons/arrow-filled-down.svg b/chrome/icons/arrow-filled-down.svg 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..00e2f5e 100644 --- a/chrome/icons/icons.css +++ b/chrome/icons/icons.css @@ -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, @@ -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..87bb8ba 100644 --- a/chrome/toolbar/findbar.css +++ b/chrome/toolbar/findbar.css @@ -32,11 +32,11 @@ .close-icon:not([disabled]):hover, .findbar-find-previous:not([disabled]):hover, .findbar-find-next:not([disabled]):hover { - background: var(--toolbarbutton-hover-background, 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..c6f4c1d 100644 --- a/chrome/toolbar/navbar.css +++ b/chrome/toolbar/navbar.css @@ -3,7 +3,7 @@ :root { --toolbarbutton-border-radius: 4px !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; } diff --git a/chrome/toolbar/personalbar.css b/chrome/toolbar/personalbar.css index 0215c1c..0051896 100644 --- a/chrome/toolbar/personalbar.css +++ b/chrome/toolbar/personalbar.css @@ -4,60 +4,39 @@ --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..cf83715 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -1,25 +1,29 @@ /* Edge-Frfox - tabbar.css */ -:root { - --tab-block-margin: 8px !important; - - & #titlebar { - --tab-min-height: 32px !important; - --inline-tab-padding: 11px !important; - --tab-border-radius: 4px !important; - - --uc-toolbarbutton-inner-padding: 6px !important; - --toolbarbutton-border-radius: 4px !important; - --toolbarbutton-tabsline-border-radius: 8px !important; - --tabs-navbar-shadow-size: 0 !important; - --tab-shadow-max-size: 0 !important; - } - - @media (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin") and (-moz-bool-pref: "uc.tweak.floating-tabs") { +@media (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin") and (-moz-bool-pref: "uc.tweak.floating-tabs") { + :root #titlebar { --tab-block-margin: 5px !important; } } +@media (not (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin")) or (not (-moz-bool-pref: "uc.tweak.floating-tabs")) { + :root #titlebar { + --tab-block-margin: 8px !important; + } +} + +:root #titlebar { + --tab-min-height: 32px !important; + --inline-tab-padding: 11px !important; + --tab-border-radius: 8px !important; + + --uc-toolbarbutton-inner-padding: 6px !important; + --toolbarbutton-border-radius: 4px !important; + --toolbarbutton-tabsline-border-radius: 8px !important; + --tabs-navbar-shadow-size: 0 !important; + --tab-shadow-max-size: 0 !important; +} + /* tab open/close transition */ .tabbrowser-tab:not([pinned]) { transition-property: min-width, max-width !important; @@ -33,13 +37,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,41 +57,33 @@ 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; } .tab-background:is([selected], [multiselected]) { @@ -269,15 +265,13 @@ 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"] { @@ -300,49 +294,26 @@ 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; - } +/* tab separators */ +.tabbrowser-tab:not([last-visible-tab="true"]) { + margin-inline-end: 3px !important; } -/* 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); - } +.tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after { + content: ""; + position: absolute; + display: block; + height: 20px; + right: -1px; + top: 6px; + border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent); } -/* 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; +/* need layout.css.has-selector.enabled */ +.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected="true"], :hover, [beforeselected-visible], [beforehovered])) .tab-stack::after { + display: none; } -/* Hide first tab separator if there are no buttons before it (Such as Firefox View) */ -#TabsToolbar-customization-target > #tabbrowser-tabs:not(toolbarbutton:not(#fxa-toolbar-menu-button) + #tabbrowser-tabs) .tabbrowser-tab:first-of-type .tab-stack::before { - border-color: transparent !important; -} - -/* .tabbrowser-tab:not([last-visible-tab="true"]) { - margin-inline-end: -1px !important; -} */ - #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; } @@ -383,20 +354,11 @@ 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; - } +#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab:first-of-type { + margin-inline-start: 14px !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:last-of-type { + margin-inline-end: 6px !important; } #tabbrowser-tabs { @@ -413,21 +375,21 @@ 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); + 0px 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1); } :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]), diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css index d9871fc..91a8a26 100644 --- a/chrome/toolbar/urlbar.css +++ b/chrome/toolbar/urlbar.css @@ -3,7 +3,7 @@ :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: calc(var(--toolbarbutton-border-radius) + 14px) !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; diff --git a/chrome/userChrome.css b/chrome/userChrome.css index a43d558..d8692d8 100644 --- a/chrome/userChrome.css +++ b/chrome/userChrome.css @@ -9,7 +9,6 @@ @import url("global/popup.css"); @import url("global/tweaks.css"); @import url("global/browser.css"); -@import url("global/tree.css"); /* import custom stylesheet instead of modifying Edge-Frfox theme files */ @import url("custom.css"); diff --git a/screenshots/dark-mica-floating-tabs.png b/screenshots/dark-mica-floating-tabs.png 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