├── screen-dark.jpg ├── screen-light.jpg ├── screen-dark-tahoe.jpg ├── screen-light-tahoe.jpg ├── screen-dark-transparent.jpg ├── screen-light-transparent.jpg ├── EXTENSIONS.md ├── icons.css ├── .gitignore ├── userContent.css ├── LICENSE ├── tabbar.css ├── navbar.css ├── TELEMETRY.md ├── README.md ├── urlbar.css └── userChrome.css /screen-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d0sse/macFox-theme/HEAD/screen-dark.jpg -------------------------------------------------------------------------------- /screen-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d0sse/macFox-theme/HEAD/screen-light.jpg -------------------------------------------------------------------------------- /screen-dark-tahoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d0sse/macFox-theme/HEAD/screen-dark-tahoe.jpg -------------------------------------------------------------------------------- /screen-light-tahoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d0sse/macFox-theme/HEAD/screen-light-tahoe.jpg -------------------------------------------------------------------------------- /screen-dark-transparent.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d0sse/macFox-theme/HEAD/screen-dark-transparent.jpg -------------------------------------------------------------------------------- /screen-light-transparent.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d0sse/macFox-theme/HEAD/screen-light-transparent.jpg -------------------------------------------------------------------------------- /EXTENSIONS.md: -------------------------------------------------------------------------------- 1 | # My favorite privacy extensions 2 | 3 | - [uBlock Origin](https://addons.mozilla.org/firefox/addon/ublock-origin/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search) 4 | - [DuckDuckGo Privacy Essentials](https://addons.mozilla.org/firefox/addon/duckduckgo-for-firefox/) — used for Email Protection (free relay) 5 | -------------------------------------------------------------------------------- /icons.css: -------------------------------------------------------------------------------- 1 | #nav-bar #back-button image { 2 | list-style-image: url("chrome://global/skin/icons/arrow-left.svg") !important; 3 | padding: 5px !important; 4 | } 5 | 6 | #nav-bar #forward-button image { 7 | list-style-image: url("chrome://global/skin/icons/arrow-right.svg") !important; 8 | padding: 5px !important; 9 | } 10 | 11 | #nav-bar #new-tab-button image { 12 | list-style-image: url("chrome://global/skin/icons/plus.svg") !important; 13 | padding-top: 4px !important; 14 | padding-bottom: 7px !important; 15 | padding-right: 5px !important; 16 | } 17 | 18 | #nav-bar #PanelUI-menu-button image { 19 | list-style-image: url("chrome://global/skin/icons/more.svg") !important; 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .vscode 3 | _ide_helper.php 4 | .env 5 | .phpstorm.meta.php 6 | .phpunit.result.cache 7 | npm-debug.log 8 | yarn-error.loc 9 | composer.lock 10 | package-lock.json 11 | *.sublime-workspace 12 | *.sublime-project 13 | sftp-config.json 14 | /bootstrap/cache/*.php 15 | .editorconfig 16 | ## MACOS Crapware 17 | # General 18 | .DS_Store 19 | .AppleDouble 20 | .LSOverride 21 | 22 | # Icon must end with two \r 23 | Icon 24 | 25 | # Thumbnails 26 | ._* 27 | 28 | # Files that might appear in the root of a volume 29 | .DocumentRevisions-V100 30 | .fseventsd 31 | .Spotlight-V100 32 | .TemporaryItems 33 | .Trashes 34 | .VolumeIcon.icns 35 | .com.apple.timemachine.donotpresent 36 | .vscode/settings.json 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | 44 | AGENTS.md -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | .customize-menu, 2 | .personalize-button { 3 | display: none !important; 4 | } 5 | 6 | html.private { 7 | --in-content-page-background: #323233 !important; 8 | } 9 | 10 | html.private>body { 11 | background-color: transparent !important; 12 | } 13 | 14 | html.b_firefox { 15 | background-color: #FEFEFE; 16 | } 17 | 18 | .search-inner-wrapper { 19 | display: none !important; 20 | } 21 | 22 | body { 23 | background-color: #FEFEFE; 24 | } 25 | 26 | @media (prefers-color-scheme: light) { 27 | body { 28 | background-color: #FEFEFE; 29 | } 30 | 31 | body.neterror, 32 | body#viewsource { 33 | background-color: white !important; 34 | } 35 | } 36 | 37 | @media (prefers-color-scheme: dark) { 38 | body { 39 | background-color: #323233; 40 | } 41 | 42 | body.neterror, 43 | body#viewsource { 44 | background-color: #323233 !important; 45 | } 46 | } 47 | 48 | body.gm-popup, 49 | body.pageCharlie { 50 | background-color: #FEFEFE !important; 51 | } 52 | 53 | @-moz-document url-prefix("about:") { 54 | body { 55 | background-color: transparent !important; 56 | } 57 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 d0sse 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /tabbar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Base color is always whatever the theme/extension gives us */ 3 | --tab-base-color: var(--toolbar-bgcolor); 4 | 5 | /* Overlays = transparent black or white depending on text contrast */ 6 | --tab-overlay-neutral: color-mix(in srgb, var(--toolbar-color) 5%, transparent); 7 | --tab-overlay-hover: color-mix(in srgb, var(--toolbar-color) 25%, transparent); 8 | --tab-overlay-active: color-mix(in srgb, var(--toolbar-color) 20%, transparent); 9 | 10 | /* Final colors you can use */ 11 | --tab-color: var(--tab-overlay-neutral); 12 | --tab-hover-color: var(--tab-overlay-hover); 13 | --tab-active-color: var(--tab-overlay-active); 14 | } 15 | 16 | /* Sets tab appearance */ 17 | .tab-background { 18 | background-color: var(--tab-color); 19 | background-image: none !important; 20 | border-radius: var(--border-circle) !important; 21 | outline: none !important; 22 | box-shadow: none !important; 23 | } 24 | 25 | .toolbarbutton-1 image { 26 | border-radius: var(--border-circle) !important; 27 | } 28 | 29 | .tab-close-button { 30 | border-radius: var(--border-circle) !important; 31 | } 32 | 33 | .tabbrowser-tab:hover:not([selected]):not([multiselected]) .tab-background { 34 | background-color: var(--tab-hover-color) !important; 35 | } 36 | 37 | .tab-background[selected], 38 | .tab-background[multiselected] { 39 | background-color: var(--tab-active-color) !important; 40 | } 41 | 42 | #tabbrowser-tabs { 43 | --tab-loading-fill: AccentColor !important; 44 | } 45 | 46 | .titlebar-spacer[type="pre-tabs"] { 47 | width: 15px !important; 48 | } 49 | 50 | body:has(.tabbrowser-tab):not(:has(#vertical-tabs .tabbrowser-tab)) .tabbrowser-tab { 51 | padding-inline: 4px !important; 52 | } 53 | 54 | #vertical-tabs { 55 | padding: 0 2px !important; 56 | } 57 | 58 | body:has(#vertical-tabs #tabs-newtab-button) #tabs-newtab-button { 59 | margin-top: 4px !important; 60 | border-radius: var(--border-circle) !important; 61 | } -------------------------------------------------------------------------------- /navbar.css: -------------------------------------------------------------------------------- 1 | #nav-bar { 2 | height: 42px !important; 3 | border: 0 !important; 4 | padding-left: 8px !important; 5 | padding-right: 8px !important; 6 | } 7 | 8 | #main-window[inFullscreen] #nav-bar { 9 | padding-left: 8px !important; 10 | } 11 | 12 | #nav-bar { 13 | background-color: transparent !important; 14 | } 15 | 16 | #navigator-toolbox[inFullscreen] { 17 | background-color: var(--background-color-primary) !important; 18 | } 19 | 20 | /* Toolbar button look */ 21 | :root { 22 | --button-hover-bgcolor: var(--hover-color-primary) !important; 23 | --toolbarbutton-inner-padding: 6px !important; 24 | --toolbarbutton-active-background: var(--hover-color-primary) !important; 25 | } 26 | 27 | #nav-bar .toolbarbutton-1 image, 28 | #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack { 29 | fill: var(--tint-color-primary) !important; 30 | border-radius: var(--border-circle) !important; 31 | } 32 | 33 | #nav-bar .toolbarbutton-1 { 34 | padding: 5px !important; 35 | } 36 | 37 | /* Compresses urlbar in navbar */ 38 | #nav-bar toolbarspring { 39 | max-width: none !important; 40 | -moz-box-flex: 300 !important; 41 | } 42 | 43 | /* width is nav-bar padding-left - padding-right*/ 44 | #nav-bar toolbarspring:last-of-type:before { 45 | -moz-box-flex: 1; 46 | display: -moz-box; 47 | content: ""; 48 | width: 82px; 49 | } 50 | 51 | #main-window[inFullscreen] #nav-bar toolbarspring:last-of-type:before { 52 | -moz-box-flex: 1; 53 | display: -moz-box; 54 | content: ""; 55 | width: 0px; 56 | } 57 | 58 | #reload-button image, 59 | #stop-button image, 60 | #downloads-button image { 61 | animation-duration: 0s !important; 62 | } 63 | 64 | /* center */ 65 | #nav-bar toolbarspring:last-of-type:before { 66 | display: block; 67 | content: ""; 68 | width: 158px; 69 | } 70 | 71 | #main-window[inFullscreen] #nav-bar toolbarspring:last-of-type:before { 72 | display: block; 73 | content: ""; 74 | width: 38px; 75 | } 76 | 77 | /* FindBar */ 78 | 79 | findbar { 80 | background-color: var(--background-color-primary) !important; 81 | } 82 | 83 | /* Style the FindBar text input */ 84 | .findbar-textbox { 85 | border: 1px solid var(--accent) !important; 86 | background-color: rgba(255, 255, 255, 0.2) !important; 87 | } -------------------------------------------------------------------------------- /TELEMETRY.md: -------------------------------------------------------------------------------- 1 | # Firefox Manual Telemetry & Mozilla Communication Disable List 2 | 3 | --- 4 | 5 | ## 1. Core Telemetry 6 | 7 | - `toolkit.telemetry.enabled` → **false** 8 | - `toolkit.telemetry.unified` → **false** 9 | - `toolkit.telemetry.bhrPing.enabled` → **false** 10 | - `toolkit.telemetry.hybridContent.enabled` → **false** 11 | - `toolkit.telemetry.server` → **** 12 | - `toolkit.telemetry.archive.enabled` → **false** 13 | - `toolkit.telemetry.newProfilePing.enabled` → **false** 14 | - `datareporting.policy.dataSubmissionEnabled` → **false** 15 | - `datareporting.healthreport.uploadEnabled` → **false** 16 | - `datareporting.healthreport.logging.consoleEnabled` → **false** 17 | 18 | --- 19 | 20 | ## 2. Normandy / Studies 21 | 22 | - `app.shield.optoutstudies.enabled` → **false** 23 | - `app.normandy.enabled` → **false** 24 | - `app.normandy.api_url` → **** 25 | - `shield.service.enabled` → **false** 26 | - `app.normandy.run_interval_seconds` → **0** 27 | 28 | --- 29 | 30 | ## 3. Crash Reports 31 | 32 | - `breakpad.reportURL` → **(empty string)** 33 | - `browser.tabs.crashReporting.sendReport` → **false** 34 | - `browser.crashReports.unsubmittedCheck.enabled` → **false** 35 | - `browser.crashReports.autoSubmit` → **false** 36 | 37 | --- 38 | 39 | ## 4. Ping & Upload Controls 40 | 41 | - `toolkit.telemetry.shutdownPingSender.enabled` → **false** 42 | - `toolkit.telemetry.firstShutdownPing.enabled` → **false** 43 | - `toolkit.telemetry.pioneer-new-studies.enabled` → **false** 44 | 45 | --- 46 | 47 | ## 5. Other Mozilla Communications 48 | 49 | - `diagnostics.support.url` → **(empty string)** 50 | - `app.support.baseURI` → **(empty string)** 51 | - `app.update.enabled` → **false** 52 | - `browser.startup.homepage_override.mstone` → **ignore** 53 | - `browser.aboutHomeSnippets.updateUrl` → **(empty string)** 54 | - `browser.messaging-system.whatsNewPanel.enabled` → **false** 55 | - `idle.lastDailyNotification` → **0** 56 | 57 | --- 58 | 59 | ## 6. Optional Network Layer Block 60 | 61 | Block the following domains at DNS or firewall level: 62 | 63 | - `incoming.telemetry.mozilla.org` 64 | - `normandy.cdn.mozilla.net` 65 | - `aus5.mozilla.org` 66 | - `updates.mozilla.org` 67 | - `snippets.cdn.mozilla.net` 68 | 69 | --- 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 👋 Welcome to MacFox-Theme 🖥️🦊 2 | 3 | ### Now updated for Tahoe UI 4 | 5 | ## Safari like, minimalistic theme 6 | 7 | Hi! I'm [d0sse](https://github.com/d0sse) and this is Minimalist Mac - Safari-like - Firefox theme. 8 | 9 | > 🚀 **UPDATED FOR FIREFOX 143** 10 | 11 | ## Features 12 | 13 | - Simple 14 | - Light / Dark Version 15 | - macOS Tint Background color 16 | - Now with automatic system macOS accent color! 🎨 17 | - 🎀 Compatible with [The Adaptive Tab Bar Color (ATBC)](https://github.com/easonwong-de/Adaptive-Tab-Bar-Colour) 18 | 19 | | Light Version | Dark Version | 20 | |---|---| 21 | |![Light Screenshot](screen-light.jpg "Screen")|![Dark Screenshot](screen-dark.jpg "Screen")| 22 | 23 | | Light Transparent Version | Dark Transparent Version | 24 | |---|---| 25 | |![Light Screenshot](screen-light-transparent.jpg "Screen")|![Dark Screenshot](screen-dark-transparent.jpg "Screen")| 26 | 27 | | Tahoe Light Transparent Version | Tahoe Dark Transparent Version | 28 | |---|---| 29 | |![Light Screenshot](screen-light-tahoe.jpg "Screen")|![Dark Screenshot](screen-dark-tahoe.jpg "Screen")| 30 | 31 | > **WARNING** 32 | > Tested Only on macOS! 33 | --- 34 | > This theme is now **compatible with [Adaptive Tab Bar Color (ATBC)](https://github.com/easonwong-de/Adaptive-Tab-Bar-Colour)**. 35 | 36 | ### How to install 37 | 38 | To start using MacFox, follow these steps: 39 | 40 | 1. Go to the following url address `about:config`. 41 | 2. Ensure the following properties are set to `true`: 42 | 43 | ```text 44 | toolkit.legacyUserProfileCustomizations.stylesheets 45 | svg.context-properties.content.enabled 46 | browser.tabs.allow_transparent_browser 47 | layout.css.color-mix.enabled 48 | browser.theme.native-theme 49 | ``` 50 | 51 | 3. If you want to enable the new UI for the closest match to Apple's macOS Tahoe design language, set this pref to `true`: 52 | 53 | ```text 54 | userChrome.tahoeUI.enabled 55 | ``` 56 | 57 | 4. If you want enable macOS traslucent windows set to `true`: 58 | 59 | ```text 60 | widget.macos.titlebar-blend-mode.behind-window 61 | ``` 62 | 63 | 5. Go to the following url address `about:support`. 64 | 6. Find "Profile Folder" section in the "Application Basics" list and copy the path (defined below as `$path`). 65 | 7. Open `terminal.app` and type: 66 | 67 | ```bash 68 | cd $path 69 | ``` 70 | 71 | 8. Type in the following command: 72 | 73 | ```bash 74 | git clone git@github.com:d0sse/macFox-theme.git chrome 75 | ``` 76 | 77 | 9. Apply `about blank` for New windows and new tabs. 78 | 79 | 10. Restart Firefox to apply changes. 80 | 81 | ## Privacy & Telemetry 82 | 83 | For complete instructions on disabling all Firefox telemetry, pings, and communications to Mozilla servers, see: 84 | 85 | ➡️ [TELEMETRY.md](TELEMETRY.md) 86 | 87 | Recommended Extensions 88 | 89 | ➡️ [EXTENSIONS.md](EXTENSIONS.md) 90 | 91 | ### Enjoy 🎉 92 | -------------------------------------------------------------------------------- /urlbar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --url-border-color: rgba(0, 0, 0, 0.15); 3 | --url-placeholder-color: rgba(0, 0, 0, 0.5); 4 | --url-bar-outline-color: AccentColor; 5 | --toolbar-field-focus-color: AccentColor; 6 | } 7 | 8 | @media (prefers-color-scheme: dark) { 9 | :root { 10 | --url-border-color: rgba(255, 255, 255, 0.15); 11 | --url-placeholder-color: rgba(255, 255, 255, 0.5); 12 | } 13 | } 14 | 15 | 16 | #urlbar-container { 17 | max-width: 50% !important; 18 | } 19 | 20 | #urlbar { 21 | min-height: 32px !important; 22 | font-size: 13px !important; 23 | margin-bottom: 2px !important; 24 | } 25 | 26 | #urlbar[open] { 27 | border-radius: var(--border-big) !important; 28 | box-shadow: 0px 2px 20px rgba(4, 2, 5, 0.2) !important; 29 | } 30 | 31 | /* Centers text in urlbar */ 32 | #urlbar:not([focused]) #urlbar-input { 33 | text-align: center !important; 34 | } 35 | 36 | /* Urlbar icons look */ 37 | .urlbar-page-action { 38 | height: 24px !important; 39 | border-radius: 5px !important; 40 | } 41 | 42 | .urlbar-page-action image { 43 | margin-top: -2px !important; 44 | transform: scale(0.9, 0.9) !important; 45 | } 46 | 47 | .identity-box-button { 48 | border-radius: 4px !important; 49 | } 50 | 51 | .identity-box-button image { 52 | transform: scale(0.9, 0.9) !important; 53 | } 54 | 55 | .urlbar-background { 56 | /* Solid background from ATBC or theme */ 57 | border-color: var(--url-border-color) !important; 58 | border-radius: var(--border-circle) !important; 59 | box-shadow: none !important; 60 | outline-width: 2px !important; 61 | outline-color: var(--url-bar-outline-color) !important; 62 | } 63 | 64 | #urlbar *|input::placeholder { 65 | color: var(--url-placeholder-color) !important; 66 | } 67 | 68 | #urlbar:not([open]) .urlbar-background { 69 | background-color: var(--url-bar-background-color) !important; 70 | } 71 | 72 | 73 | #urlbar[open] .urlbar-background { 74 | background-color: initial; 75 | border-radius: var(--border-big) !important; 76 | border-color: var(--url-border-color) !important; 77 | } 78 | 79 | /* Urlbar mode indicator look */ 80 | #urlbar-search-mode-indicator, 81 | #identity-box.chromeUI #identity-icon-box, 82 | #identity-box.extensionPage #identity-icon-box { 83 | background-color: var(--hover-color-primary) !important; 84 | } 85 | 86 | #tracking-protection-icon-container { 87 | display: none; 88 | } 89 | 90 | #identity-icon-box { 91 | margin: 2px !important; 92 | } 93 | 94 | #star-button-box { 95 | margin: 2px !important; 96 | } 97 | 98 | #star-button[starred="true"] { 99 | fill: AccentColor !important; 100 | } 101 | 102 | #urlbar-searchmode-switcher { 103 | background-color: transparent !important; 104 | } 105 | 106 | .identity-box-button, 107 | .urlbar-page-action { 108 | border-radius: var(--border-circle) !important; 109 | } 110 | 111 | .urlbar-revert-button { 112 | margin-right: 4px; 113 | border-radius: var(--border-circle) !important; 114 | } 115 | 116 | #urlbar[open] .urlbarView-row { 117 | border-radius: var(--border-big-2) !important; 118 | } -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* Firefox macOS style */ 2 | @import "navbar.css"; 3 | @import "urlbar.css"; 4 | @import "icons.css"; 5 | @import "tabbar.css"; 6 | 7 | 8 | :root { 9 | --accent: AccentColor; 10 | --lwt-accent-color: AccentColor; 11 | --tab-loading-fill: AccentColor !important; 12 | --button-primary-bgcolor: AccentColor !important; 13 | --border-circle: 8px; 14 | --border-big: 8px; 15 | --border-big-2: 8px; 16 | --tab-min-height: 32px !important; 17 | --tab-min-width: 66px !important; 18 | --fullscreen-color: #fafafa; 19 | --urlbar-solid-bg: #f2f2f2; 20 | --urlbar-base-color: var(--toolbar-bgcolor); 21 | --urlbar-overlay-active: color-mix(in srgb, var(--toolbar-color) 5%, transparent); 22 | --urlbar-overlay-non-active: color-mix(in srgb, var(--toolbar-color) 9%, transparent); 23 | } 24 | 25 | /* Enable Safari-like Tahoe UI when `userChrome.tahoeUI.enabled` is true in about:config */ 26 | @media -moz-pref("userChrome.tahoeUI.enabled") { 27 | :root { 28 | --border-circle: 99px; 29 | --border-big: 20px; 30 | --border-big-2: 16px; 31 | } 32 | } 33 | 34 | @media (prefers-color-scheme: dark) { 35 | :root { 36 | --fullscreen-color: #2a2a2a; 37 | --urlbar-solid-bg: #2b2b2b; 38 | } 39 | } 40 | 41 | /* If Firefox/ATBC provides a dynamic color, override the fallback */ 42 | :root { 43 | --urlbar-solid-bg: var(--toolbar-field-background-color, var(--urlbar-solid-bg)); 44 | } 45 | 46 | /* Active Window Styles */ 47 | #navigator-toolbox, 48 | #nav-bar, 49 | #TabsToolbar, 50 | #titlebar { 51 | background: -moz-mac-vibrancy-titlebar-light !important; 52 | /* Native macOS wallpaper tinting */ 53 | appearance: -moz-mac-vibrancy-titlebar-light !important; 54 | -moz-appearance: -moz-mac-vibrancy-titlebar-light !important; 55 | transition: background 0.2s ease-in-out; 56 | } 57 | 58 | #navigator-toolbox { 59 | border-bottom: none !important; 60 | } 61 | 62 | /* Inactive Window Styles */ 63 | :root:-moz-window-inactive #navigator-toolbox, 64 | :root:-moz-window-inactive #nav-bar, 65 | :root:-moz-window-inactive #TabsToolbar, 66 | :root:-moz-window-inactive #titlebar, 67 | :root:-moz-window-inactive browser { 68 | background: -moz-mac-vibrancy-underlay !important; 69 | /* Slightly desaturated tint */ 70 | -moz-appearance: -moz-mac-vibrancy-dark !important; 71 | opacity: 0.9; 72 | transition: background 0.2s ease-in-out; 73 | } 74 | 75 | /* Optional: Make the URL bar blend better */ 76 | #urlbar { 77 | border-radius: var(--border-circle) !important; 78 | backdrop-filter: blur(20px) !important; 79 | } 80 | 81 | 82 | 83 | #TabsToolbar .titlebar-buttonbox-container { 84 | margin-left: 6px !important; 85 | margin-top: 2px !important; 86 | } 87 | 88 | #unified-extensions-button { 89 | width: 0.1px; 90 | padding-inline: 0 !important 91 | } 92 | 93 | #unified-extensions-button>.toolbarbutton-icon { 94 | width: 0 !important; 95 | } 96 | 97 | #private-browsing-indicator-with-label { 98 | margin-right: 10px; 99 | } 100 | 101 | #private-browsing-indicator-with-label>label, 102 | .titlebar-spacer[type="post-tabs"] { 103 | display: none !important; 104 | } 105 | 106 | #nav-bar { 107 | padding-top: 3px !important; 108 | padding-bottom: 2px !important; 109 | } 110 | 111 | #TabsToolbar { 112 | padding-top: 3px !important; 113 | padding-left: 5px; 114 | padding-right: 10px; 115 | } 116 | 117 | :root[sizemode="fullscreen"] #sidebar-header, 118 | :root[sizemode="fullscreen"] #PersonalToolbar, 119 | :root[sizemode="fullscreen"] #TabsToolbar, 120 | :root[sizemode="fullscreen"] #nav-bar { 121 | background-color: var(--toolbar-bgcolor, var(--fullscreen-color)) !important; 122 | } 123 | 124 | #browser { 125 | transition: background 0.2s ease-in-out; 126 | -moz-default-appearance: -moz-window-titlebar; 127 | appearance: auto; 128 | } 129 | 130 | #tabbrowser-tabbox, 131 | #tabbrowser-tabpanels, 132 | .browserContainer, 133 | .browserSidebarContainer, 134 | .browserStack, 135 | browser { 136 | background-color: transparent !important; 137 | } 138 | 139 | .urlbar-page-action { 140 | margin: 2px !important; 141 | border-radius: var(--border-circle) !important; 142 | opacity: 0.3; 143 | } 144 | 145 | .urlbar-page-action:hover { 146 | margin: 2px !important; 147 | opacity: 1.0; 148 | } 149 | 150 | #notification-popup-box { 151 | opacity: 0.3; 152 | } 153 | 154 | #notification-popup-box:hover { 155 | opacity: 1.0; 156 | } 157 | 158 | .identity-box-button { 159 | margin: 2px !important; 160 | border-radius: var(--border-circle) !important; 161 | opacity: 0.3; 162 | } 163 | 164 | .identity-box-button:hover { 165 | opacity: 1.0; 166 | } 167 | 168 | #urlbar-searchmode-switcher { 169 | margin: 3px !important; 170 | border-radius: var(--border-circle) !important; 171 | opacity: 0.3; 172 | } 173 | 174 | #urlbar-searchmode-switcher:hover { 175 | opacity: 0.7; 176 | } 177 | 178 | .toolbar-items { 179 | padding-right: 6px; 180 | } 181 | 182 | #sidebar-button { 183 | margin-left: 8px; 184 | } 185 | 186 | #tabbrowser-tabbox[sidebar-shown=""] { 187 | margin: 0 8px 8px 0 !important; 188 | border-radius: var(--border-big-2) !important; 189 | overflow: hidden; 190 | } 191 | 192 | #tabbrowser-tabbox:not([sidebar-shown=""]) { 193 | margin: 0 !important; 194 | border-radius: 0 !important; 195 | } 196 | 197 | /* Inactive/default state */ 198 | #urlbar { 199 | background-color: var(--urlbar-overlay-active) !important; 200 | transition: background-color 0.2s ease; 201 | } 202 | 203 | :root:-moz-window-inactive #urlbar { 204 | background: var(--urlbar-overlay-non-active) !important; 205 | } --------------------------------------------------------------------------------