├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── 1-bug.yml │ ├── 2-feature.yml │ └── config.yml └── workflows │ ├── release.yml │ └── test.yml ├── .gitignore ├── LICENSE ├── README.md ├── configuration ├── extensions │ └── tab-center-reborn.css └── user.js ├── icon.svg ├── screenshot.png ├── scripts ├── auto-install.sh ├── generate-pkgbuild.sh ├── install-by-curl.sh ├── install.sh └── rebase-branches.sh ├── theme ├── colors │ ├── black.css │ ├── dark.css │ └── light.css ├── extensions │ ├── adaptive-tab-bar-colour.css │ └── tab-center-reborn.css ├── gnome-theme.css ├── icons │ ├── custom │ │ ├── bullet-symbolic.svg │ │ ├── firefox-symbolic.svg │ │ └── select-symbolic.svg │ ├── gen_icons_css.py │ ├── icons.css │ ├── icons.yml │ ├── spinner-dark.png │ └── spinner.png ├── pages │ ├── newtab.css │ └── privatebrowsing.css ├── parts │ ├── buttons-fixes.css │ ├── buttons.css │ ├── controls.css │ ├── csd.css │ ├── dialogs.css │ ├── entries.css │ ├── findbar.css │ ├── headerbar.css │ ├── icons.css │ ├── lists.css │ ├── popups-contents.css │ ├── popups.css │ ├── remove-white-flash.css │ ├── sidebar.css │ ├── tabsbar.css │ ├── toolbox.css │ ├── urlbar.css │ └── video-player.css ├── platforms │ └── windows.css ├── symbolic-tab-icons.css ├── system-icons.css └── variables.css ├── userChrome.css └── userContent.css /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: rafaelmardojai 4 | patreon: rafaelmardojai 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: rafaelmardojai 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: ['https://rafaelmardojai.com/donate/'] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/1-bug.yml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: Report a bug in the theme 3 | title: "[Bug] " 4 | labels: [bug] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | > [!IMPORTANT] 10 | > Note that extension support is maintained by the community, so extension bug reports will be closed. If you want to report something, use [Discussions](https://github.com/rafaelmardojai/firefox-gnome-theme/discussions). 11 | - type: textarea 12 | attributes: 13 | label: Describe the bug 14 | description: A clear and concise description of what the bug is. Include screenshots if needed. 15 | validations: 16 | required: true 17 | - type: textarea 18 | attributes: 19 | label: Steps to reproduce 20 | description: Write steps to reproduce the behavior if possible. 21 | - type: textarea 22 | attributes: 23 | label: Expected behavior 24 | description: A clear and concise description of what you expected to happen. 25 | - type: input 26 | attributes: 27 | label: Operating System 28 | description: e.g. Fedora, Ubuntu 29 | validations: 30 | required: true 31 | - type: dropdown 32 | attributes: 33 | label: Firefox installation method 34 | options: 35 | - Distro package 36 | - Flatpak 37 | - Snap 38 | validations: 39 | required: true 40 | - type: input 41 | attributes: 42 | label: Firefox version 43 | validations: 44 | required: true 45 | - type: input 46 | attributes: 47 | label: Theme version 48 | description: e.g. v108, master branch, specific commit 49 | validations: 50 | required: true 51 | - type: checkboxes 52 | attributes: 53 | label: Optional features enabled 54 | description: Select the features you have enabled in `about:config`. 55 | options: 56 | - label: gnomeTheme.hideSingleTab 57 | - label: gnomeTheme.normalWidthTabs 58 | - label: gnomeTheme.swapTabClose 59 | - label: gnomeTheme.bookmarksToolbarUnderTabs 60 | - label: gnomeTheme.activeTabContrast 61 | - label: gnomeTheme.closeOnlySelectedTabs 62 | - label: gnomeTheme.systemIcons 63 | - label: gnomeTheme.noThemedIcons 64 | - label: gnomeTheme.symbolicTabIcons 65 | - label: gnomeTheme.hideWebrtcIndicator 66 | - label: gnomeTheme.hideUnifiedExtensions 67 | - label: gnomeTheme.dragWindowHeaderbarButtons 68 | - label: gnomeTheme.tabsAsHeaderbar 69 | - label: gnomeTheme.oledBlack 70 | - label: gnomeTheme.allTabsButtonOnOverflow 71 | - label: gnomeTheme.allTabsButton 72 | - label: gnomeTheme.tabAlignLeft 73 | - label: gnomeTheme.bookmarksOnFullscreen 74 | - type: textarea 75 | attributes: 76 | label: Additional information 77 | 78 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/2-feature.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Suggest an idea for this project 3 | title: "[Feature] " 4 | labels: [enhancement] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | > [!IMPORTANT] 10 | > Note that requests for support of specific Firefox extensions are not allowed and will be closed. 11 | - type: textarea 12 | attributes: 13 | label: Is your feature request related to a problem? Please describe. 14 | description: | 15 | A clear and concise description of what the problem is. 16 | Ex. I'm always frustrated when [...] 17 | validations: 18 | required: true 19 | - type: textarea 20 | attributes: 21 | label: Describe the solution you'd like 22 | description: A clear and concise description of what you want to happen. 23 | validations: 24 | required: true 25 | - type: textarea 26 | attributes: 27 | label: Describe alternatives you've considered 28 | description: A clear and concise description of any alternative solutions or features you've considered. 29 | - type: textarea 30 | attributes: 31 | label: Additional information 32 | 33 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: General Questions and Chat 4 | url: https://matrix.to/#/#firefox-gnome-theme:matrix.org 5 | about: Ask and chat about the theme in Matrix 6 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | publish_aur_package: 9 | name: Publish AUR package 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/checkout@v4 14 | 15 | - name: Generate PKGBUILD 16 | env: 17 | RELEASE: ${{ github.event.release.tag_name }} 18 | run: ./scripts/generate-pkgbuild.sh 19 | 20 | - name: Publish firefox-gnome-theme to the AUR 21 | uses: KSXGitHub/github-actions-deploy-aur@v2.7.2 22 | with: 23 | pkgname: firefox-gnome-theme 24 | pkgbuild: ./PKGBUILD 25 | commit_username: ${{ secrets.AUR_USERNAME }} 26 | commit_email: ${{ secrets.AUR_EMAIL }} 27 | ssh_private_key: ${{ secrets.AUR_SSH_PRIVATE_KEY }} 28 | commit_message: ${{ github.event.release.tag_name }} 29 | updpkgsums: true 30 | test: true 31 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: [push] 4 | 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | name: Smoke test 9 | steps: 10 | - name: Setup - Install Firefox.deb 11 | run: | 12 | sudo add-apt-repository ppa:mozillateam/ppa 13 | echo ' 14 | Package: * 15 | Pin: release o=LP-PPA-mozillateam 16 | Pin-Priority: 1001 17 | ' | sudo tee /etc/apt/preferences.d/mozilla-firefox 18 | echo 'Unattended-Upgrade::Allowed-Origins:: "LP-PPA-mozillateam:${distro_codename}";' | sudo tee /etc/apt/apt.conf.d/51unattended-upgrades-firefox 19 | sudo apt update 20 | sudo apt install firefox 21 | 22 | - name: Setup 1 - create a Firefox profile 23 | run: firefox --headless --createprofile test 24 | 25 | - name: Test 1 - Run a web installer as in README 26 | run: curl -s -o- https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install-by-curl.sh | bash 27 | 28 | - name: Teardown 1 29 | run: rm -rf ls ~/.mozilla/firefox/ 30 | 31 | - name: Setup 2 - create a new Firefox profile 32 | run: firefox --headless --createprofile test 33 | 34 | - name: Setup 2 - checkout the repo 35 | uses: actions/checkout@v3 36 | 37 | - name: Test 2 - Run a regular installer 38 | run: ./scripts/install.sh 39 | 40 | - name: Teardown 2 41 | run: rm -rf ls ~/.mozilla/firefox/ 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | customChrome.css 2 | customContent.css 3 | PKGBUILD 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Firefox GNOME theme 2 | 3 | # Firefox GNOME theme 4 | 5 | [![GitHub](https://img.shields.io/github/license/rafaelmardojai/firefox-gnome-theme.svg)](https://github.com/rafaelmardojai/firefox-gnome-theme/blob/master/LICENSE) 6 | [![Donate](https://img.shields.io/badge/PayPal-Donate-gray.svg?style=flat&logo=paypal&colorA=0071bb&logoColor=fff)](https://paypal.me/RafaelMardojaiCM) 7 | [![Liberapay](https://img.shields.io/liberapay/receives/rafaelmardojai.svg?logo=liberapay)](https://liberapay.com/rafaelmardojai/donate) 8 | 9 |
10 | 11 | **A GNOME theme for Firefox** 12 | 13 | This theme follows latest GNOME Adwaita style. 14 | 15 | > [!WARNING] 16 | > ### Disclaimer: 17 | > Be aware that this theme might do things that are not supported by upstream Firefox. If you face an issue while using this theme, report it here first or test if it is reproducible in vanilla Firefox. 18 | > 19 | > If you are a software distribution maintainer, please do not ship these changes by default to your users unless you make it extremely clear that they are using a modified version of the Firefox UI. 20 | 21 | ![Screenshot of the theme](screenshot.png) 22 | 23 | ## Description 24 | 25 | This is a bunch of CSS code to make Firefox look closer to GNOME's native apps. 26 | 27 | ### Getting in Touch 28 | 29 | Matrix room: [#firefox-gnome-theme:matrix.org](https://matrix.to/#/#firefox-gnome-theme:matrix.org) 30 | 31 | ### Firefox versions support 32 | 33 | The `master` branch of this repo supports the current Firefox stable release `137`. 34 | 35 | Theme versions compatible with older Firefox releases are preserved as git tags. 36 | 37 | We also have the `beta` and `nightly` branches for fixes only applicable to the current Firefox beta and nightly versions. 38 | 39 | # Installation 40 | 41 | The most friendly way to get this theme is using the **Add Water** app. 42 | 43 | 44 | Get it on Flathub 45 | 46 | 47 | ## One command install with curl 48 | 49 | To install this theme, you can run this command, which uses *curl* to download a script that will also download the latest released version of the theme (not the master version) and run the **auto-install** script for you. 50 | 51 | > [!WARNING] 52 | > Always be careful when running scripts from the Internet. 53 | 54 | ```sh 55 | curl -s -o- https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install-by-curl.sh | bash 56 | ``` 57 | 58 | ## Installation scripts 59 | 60 | If you want to use other version of the theme than the stable one you can manually download the theme and run its install scripts. 61 | 62 | First you need to grab a fresh copy of the theme repository by cloning it with git. 63 | 64 | 1. Clone this repo and enter folder: 65 | 66 | ```sh 67 | git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git 68 | cd firefox-gnome-theme 69 | ``` 70 | 2. Checkout a git branch or tag if needed, otherwise use `master` and ignore this step. 71 | ```sh 72 | git checkout beta # Set beta branch 73 | git checkout v78.1 # Set v78.1 tag 74 | ``` 75 | 76 | This theme provides two installation scripts in addition to the curled one. 77 | 78 | ### Auto install script 79 | 80 | This script will look for Firefox profiles from various known locations (`~/.mozilla/firefox/`, Flatpak, Snap, etc) and install the theme in each one. 81 | 82 | You can execute it by running: 83 | 84 | ```sh 85 | ./scripts/auto-install.sh 86 | ``` 87 | 88 | ### Manual install script 89 | 90 | This script will only install the theme into the profiles found in the default Firefox folder `~/.mozilla/firefox/`. The script accepts various flags to change its behavior. 91 | 92 | Here are some examples of how to use it: 93 | 94 | ```sh 95 | ./scripts/install.sh # Standard 96 | ./scripts/install.sh -p pc8577yz.default-release # Only install in a profile named pc8577yz.default-release 97 | ./scripts/install.sh -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak 98 | ./scripts/install.sh -f ~/snap/firefox/common/.mozilla/firefox #Snap 99 | ``` 100 | 101 | #### Script options 102 | - `-f ` *optional* 103 | - Set custom Firefox folder path, for example `~/.mozilla/icecat/`. 104 | - Default: `~/.mozilla/firefox/` 105 | 106 | - `-p ` *optional* 107 | - Set custom profile name, for example `e0j6yb0p.default-nightly`. 108 | - Default: All the profiles found in the firefox folder 109 | 110 | ### Advanced notes 111 |
112 | Expand 113 | 114 | If you want to checkout the theme version tag matching you Firefox version you can run: 115 | 116 | ```sh 117 | git checkout v$(firefox --version | cut -d ' ' -f 3 | cut -d '.' -f 1) # Using Firefox version 118 | ``` 119 |
120 | 121 | ## Package managers 122 | 123 | ### Arch Linux 124 | 125 | 1. Install the [AUR package](https://aur.archlinux.org/packages/firefox-gnome-theme) `firefox-gnome-theme` 126 | 2. Follow the instructions at `cat /usr/share/doc/firefox-gnome-theme/INSTALL.md` 127 | 128 | ## Manual installation 129 |
130 | Expand 131 | 132 | 1. Go to `about:support` in Firefox. 133 | 134 | 2. Application Basics > Profile Directory > Open Directory. 135 | 136 | 3. Open directory in a terminal. 137 | 138 | 4. Create a `chrome` directory if it doesn't exist: 139 | 140 | ```sh 141 | mkdir -p chrome 142 | cd chrome 143 | ``` 144 | 145 | 5. Clone this repo to a subdirectory: 146 | 147 | ```sh 148 | git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git 149 | ``` 150 | 151 | 6. Create single-line user CSS files if non-existent or empty (at least one line is needed for `sed`): 152 | 153 | ```sh 154 | [[ -s userChrome.css ]] || echo >> userChrome.css 155 | [[ -s userContent.css ]] || echo >> userContent.css 156 | ``` 157 | 158 | 7. Import this theme at the beginning of the CSS files (all `@import`s must come before any existing `@namespace` declarations): 159 | 160 | ```sh 161 | sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css 162 | sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css 163 | ``` 164 | 165 | 8. Symlink preferences file: 166 | 167 | ```sh 168 | cd .. # Go back to the profile directory 169 | ln -fs chrome/firefox-gnome-theme/configuration/user.js user.js 170 | ``` 171 | 172 | 9. Restart Firefox. 173 | 174 | 10. Open Firefox customization panel and move the new tab button to headerbar. 175 | 176 | 11. Be happy with your new gnomish Firefox. 177 |
178 | 179 | ## Required Firefox preferences 180 | We provide a **user.js** configuration file in `configuration/user.js` that enables some preferences required by this theme to work. 181 | 182 | You should already have this file installed if you followed one of the installation methods, but in any case be sure this preferences are enabled under `about:config`: 183 | 184 | - `toolkit.legacyUserProfileCustomizations.stylesheets` 185 | 186 | This preference is required to load the custom CSS in Firefox, otherwise the theme wouldn't work. 187 | 188 | - `svg.context-properties.content.enabled` 189 | 190 | This preference is required to recolor the icons, otherwise you will get black icons everywhere. 191 | 192 | > For other non essential preferences checkout `configuration/user.js`. 193 | 194 | ## Updating 195 | 196 | You can follow the installation script steps again to update the theme. 197 | 198 | ## Uninstalling 199 | 1. Go to your profile folder. (Go to `about:support` in Firefox > Application Basics > Profile Directory > Open Directory) 200 | 2. Remove `chrome` folder. 201 | 3. Remove the unwanted preferences from your `user.js` inside your profile folder. The install script append the needed prefs in that file, you can check what preferences does it append by checking `configuration/user.js` in this repo. 202 | 203 | ## Enabling optional features 204 | Optional features can be enabled by creating new `boolean` preferences in `about:config`. 205 | 206 | 1. Go to the `about:config` page 207 | 2. Type the key of the feature you want to enable 208 | 3. Set it as a `boolean` and click on the add button 209 | 4. Restart Firefox 210 | 211 | ### Features 212 | 213 | - **Hide single tab** `gnomeTheme.hideSingleTab` 214 | 215 | Hide the tab bar when only one tab is open. 216 | 217 | > **Note:** You should move the new tab button out of the tabbar or it will be hidden when there is only one tab. You can rearrange the toolbars doing a right-click on any toolbar and selecting "Customize Toolbar…". 218 | 219 | - **Normal width tabs** `gnomeTheme.normalWidthTabs` 220 | 221 | Use normal width tabs as default Firefox. 222 | 223 | - **Swap tab close button position** `gnomeTheme.swapTabClose` 224 | 225 | By default the tab close buttons follows the position of the window controls, this preference reverts that behavior. 226 | 227 | - **Bookmarks toolbar under tabs** `gnomeTheme.bookmarksToolbarUnderTabs` 228 | 229 | Move Bookmarks toolbar under tabs. 230 | 231 | - **Active tab contrast** `gnomeTheme.activeTabContrast` 232 | 233 | Add more contrast to the active tab. 234 | 235 | - **Close only selected tabs** `gnomeTheme.closeOnlySelectedTabs` 236 | 237 | Show the close button on the selected tab only. 238 | 239 | - **System icons** `gnomeTheme.systemIcons` 240 | 241 | Use system theme icons instead of Adwaita icons included by theme. 242 | 243 | > **Note:** This feature has a [known color bug](#icons-color-broken-with-system-icons). 244 | 245 | 246 | - **No themed Icons** `gnomeTheme.noThemedIcons` 247 | 248 | Use default Firefox icons instead of the included icons. 249 | 250 | 251 | - **Symbolic tab icons** `gnomeTheme.symbolicTabIcons` 252 | 253 | Make all tab icons look kinda like symbolic icons. 254 | 255 | - **Hide WebRTC indicator** `gnomeTheme.hideWebrtcIndicator` 256 | 257 | Hide redundant WebRTC indicator since GNOME provides their own privacy icons in the top right. 258 | 259 | - **Hide unified extensions button** `gnomeTheme.hideUnifiedExtensions` 260 | 261 | Hide unified extensions button from the navbar, you can also use `extensions.unifiedExtensions.enabled` instead, which is only going to work till Firefox 111. 262 | 263 | - **Drag window from headerbar buttons** `gnomeTheme.dragWindowHeaderbarButtons` 264 | 265 | Allow dragging the window from headerbar buttons. 266 | 267 | > **Note:** This feature is BUGGED. It can activate the button with unpleasant behavior. 268 | 269 | - **Tabs as headerbar** `gnomeTheme.tabsAsHeaderbar` 270 | 271 | Place the tabs on the top of the window, and use the tabs bar to hold the window controls, like Firefox's standard tab bar. 272 | 273 | > **Note:** Enabling with `gnomeTheme.hideSingleTab` will replace the single tab with a title bar. 274 | 275 | - **OLED black theme** `gnomeTheme.oledBlack` 276 | 277 | Change the dark theme into the black variant. 278 | 279 | - **Show "List All Tabs" button on overflow** `gnomeTheme.allTabsButtonOnOverflow` 280 | 281 | Show the `List All Tabs` button when the tabs bar is overflowing (when you have too many tabs that the width of the tabs no longer shrinks when new tabs are added). 282 | 283 | - **Show "List All Tabs" button** `gnomeTheme.allTabsButton` 284 | 285 | Show the `List All Tabs` button all the time, like stock Firefox. 286 | 287 | - **Align tab title and icon to left** `gnomeTheme.tabAlignLeft` 288 | 289 | Align the tab title and favicon to left of tab in place of center. 290 | 291 | - **Bookmarks bar in fullscreen** `gnomeTheme.bookmarksOnFullscreen` 292 | 293 | Show the bookmarks bar while in fullscreen. 294 | 295 | ### Extensions support 296 | 297 | We also have optional features to enable support for some Firefox extensions. 298 | 299 | > [!WARNING] 300 | > Note that extension support is maintained by the community, so requests to support new extensions are not allowed, and the included extensions may be broken until someone shows up to fix them. 301 | 302 | - **Tab center reborn support** `gnomeTheme.extensions.tabCenterReborn` 303 | 304 | Enable the vertical tab trough the extension : [Tab Center Reborn](https://addons.mozilla.org/en-US/firefox/addon/tabcenter-reborn/). 305 | 306 | > **Note:** You also need to copy the contents of the file `configuration/extensions/tab-center-reborn.css` into the settings page of Tabcenter-reborn..\ 307 | > **Note2:** You can also maintain the vertical tab always open with `gnomeTheme.extensions.tabCenterReborn.alwaysOpen` 308 | > **Note2:** You can disable animation by disabling animation into the extension and adding the flags `gnomeTheme.extensions.tabCenterReborn.animationDisabled` 309 | 310 | - **Adaptive Tab Bar Colour support** `gnomeTheme.extensions.adaptiveTabBarColour` 311 | 312 | > **Note:** Adaptive Tab Bar Colour presently hard-codes the colours for the home page (both normal as well as private windows). When navigating from the home page to any other page, the colour of the UI might momentarily switch to the original firefox home page colour before switching back to the expected colour (this is especially noticeable in private windows). This only happens when navigating from the homepage to another page, subsequent navigations should be unaffected. 313 | 314 | ## Known bugs 315 | 316 | ### CSD have sharp corners 317 | See upstream [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1408360). 318 | 319 | #### Wayland fix: 320 | 1. Go to the `about:config` page 321 | 2. Search for the `layers.acceleration.force-enabled` preference and set it to true. 322 | 3. Now restart Firefox, and it should look good! 323 | 324 | #### X11 fix: 325 | 1. Go to the `about:config` page 326 | 2. Type `mozilla.widget.use-argb-visuals` 327 | 3. Set it as a `boolean` and click on the add button 328 | 4. Now restart Firefox, and it should look good! 329 | 330 | ### Icons color broken with System icons 331 | Icons might appear black where they should be white on some systems. I have no idea why, but you can adjust them directly in the `system-icons.css` file, look for `--gnome-icons-hack-filter` & `--gnome-window-icons-hack-filter` vars and play with css filters. 332 | 333 | ## Development 334 | 335 | If you wanna mess around the styles and change something, you might find these 336 | things useful. 337 | 338 | To use the Inspector to debug the UI, open the developer tools (F12) on any 339 | page, go to options, check both of those: 340 | 341 | - Enable browser chrome and add-on debugging toolboxes 342 | - Enable remote debugging 343 | 344 | Now you can close those tools and press Ctrl+Alt+Shift+I to Inspect the browser 345 | UI. 346 | 347 | Also you can inspect any GTK3 application, for example type this into a terminal 348 | and it will run Epiphany with the GTK Inspector, so you can check the CSS styles 349 | of its elements too. 350 | 351 | ```sh 352 | GTK_DEBUG=interactive epiphany 353 | ``` 354 | 355 | Feel free to use any parts of my code to develop your own themes, I don't force 356 | any specific license on your code. 357 | 358 | ## Credits 359 | Developed by **[Rafael Mardojai CM](https://github.com/rafaelmardojai)** and [contributors](https://github.com/rafaelmardojai/firefox-gnome-theme/graphs/contributors). Based on **[Luna Kurame](https://github.com/lunakurame/firefox-gnome-theme)**'s original work. 360 | 361 | ## Donate 362 | If you want to support development, consider donating via [PayPal](https://paypal.me/RafaelMardojaiCM). Also consider donating upstream, [Firefox](https://donate.mozilla.org/) & [GNOME](https://www.gnome.org/donate/). 363 | -------------------------------------------------------------------------------- /configuration/extensions/tab-center-reborn.css: -------------------------------------------------------------------------------- 1 | /* CSS to add in tab center reborn Settings pages */ 2 | 3 | :root { 4 | --tab-separator: transparent; 5 | --tab-selected-line: transparent; 6 | --tablist-separator: #cccccc; 7 | } 8 | 9 | @media (prefers-color-scheme: dark) { 10 | :root { 11 | --background: #303030; 12 | --icons: rgb(251,251,254); 13 | --tab-separator: transparent; 14 | --tab-active-background: rgb(62,62,62); 15 | --tab-active-text: rgb(251,251,254); 16 | --tab-text: #fbfbfe; 17 | --toolbar-background: rgb(43,42,51); 18 | --toolbar-text: rgb(251, 251, 254); 19 | --input-background: rgb(28,27,34); 20 | --input-border: transparent; 21 | --input-background-focus: rgb(66,65,77); 22 | --input-selected-text: rgb(251,251,254); 23 | --input-text: rgb(251,251,254); 24 | --input-text-focus: rgb(251,251,254); 25 | --identity-color-toolbar: rgb(251,251,254); 26 | --tablist-separator: #333333; 27 | } 28 | } 29 | /* fix autoscrolling bug when middle clicking */ 30 | :root, 31 | body { 32 | overflow: hidden; 33 | } 34 | 35 | /* Move topmenu to bottom */ 36 | #topmenu { 37 | order: 2; 38 | background: transparent; 39 | border: none; 40 | } 41 | 42 | #newtab { 43 | margin-left: 6px; 44 | } 45 | 46 | #settings { 47 | margin-right: 2px; 48 | } 49 | 50 | /* Hide filterbox & settings icon */ 51 | #filterbox-icon, 52 | #filterbox-input, 53 | #settings { 54 | display: none; 55 | } 56 | 57 | #tablist-wrapper { 58 | height: auto; 59 | margin-inline: 6px; 60 | /* adds margin above tabs to make the spacing even */ 61 | margin-top: 5px; 62 | } 63 | 64 | /* fix glitch with spacing in-between pinned tabs */ 65 | #pinnedtablist:not(.compact) { 66 | display: flex; 67 | flex-direction: column; 68 | } 69 | 70 | #tablist-wrapper::after { 71 | content: ""; 72 | margin: 2px 0; 73 | border: 1px solid var(--tablist-separator); 74 | } 75 | 76 | #newtab { 77 | width: 95%; 78 | } 79 | 80 | .tab, 81 | .tab.active { 82 | border-radius: 4px; 83 | border-bottom: none !important; 84 | margin: 1px 0; 85 | } 86 | 87 | #pinnedtablist:not(.compact) .tab, 88 | #tablist .tab { 89 | padding: 0; 90 | } 91 | 92 | #newtab::after { 93 | content: "New tab"; 94 | margin-left: 10px; 95 | white-space: nowrap; 96 | overflow: hidden; 97 | } 98 | 99 | #newtab-icon { 100 | min-width: 16px; 101 | } 102 | 103 | /* the @media rule only allows these settings apply when the sidebar is expanded */ 104 | @media (min-width: 49px) { 105 | /* Move close button to left side */ 106 | /*.tab-close { 107 | left: 0; 108 | margin-left: 3px; 109 | }*/ 110 | 111 | /* Fix title gradient */ 112 | /*#tablist .tab:hover > .tab-title-wrapper { 113 | mask-image: linear-gradient(to left, transparent 0, black 2em); 114 | }*/ 115 | 116 | /* Move tab text to right when hovering to accomodate for the close button */ 117 | /*#tablist .tab:hover > .tab-title-wrapper { 118 | margin-left: 28px; 119 | transition: all 0.2s ease; 120 | }*/ 121 | 122 | /* Move favicon to right when hovering to accomodate for the close button */ 123 | /*#tablist .tab:hover > .tab-meta-image { 124 | padding-left: 25px; 125 | transition: all 0.2s ease; 126 | }*/ 127 | } 128 | 129 | 130 | /*** Move container indicators to left ***/ 131 | #tablist-wrapper { 132 | margin-left: 0px; 133 | padding-left: 6px; 134 | } 135 | #tablist, 136 | #pinnedtablist:not(.compact) { 137 | margin-left: -6px; 138 | padding-left: 6px; 139 | } 140 | .tab { 141 | overflow: visible; 142 | } 143 | #tablist .tab[data-identity-color] .tab-context, 144 | #pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context { 145 | box-shadow: none !important; 146 | } 147 | #tablist .tab[data-identity-color] .tab-context::before, 148 | #pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context::before { 149 | content: ""; 150 | position: absolute; 151 | top: 6px; 152 | left: -6px; 153 | bottom: 6px; 154 | width: 3px; 155 | border-radius: 0 5px 5px 0; 156 | background: var(--identity-color); 157 | transition: inset .1s; 158 | } 159 | 160 | #tablist .tab.active[data-identity-color] .tab-context::before, 161 | #pinnedtablist:not(.compact) .tab.active[data-identity-color] .tab-context::before { 162 | top: 1px; 163 | bottom: 1px; 164 | } 165 | 166 | /* center favicons within the tab */ 167 | #tablist-wrapper.shrinked>:not(#pinnedtablist.compact) .tab-meta-image { 168 | margin-left: 6px !important; 169 | } 170 | 171 | /* hide certain items when collapsed */ 172 | @media (max-width: 64px) { 173 | /* using 64px minimum width to give the tab favicons more room during the transition */ 174 | .tab-close, 175 | .tab-pin { 176 | visibility: collapse !important; 177 | } 178 | 179 | /* hide scrollbar when sidebar is collapsed */ 180 | #tablist { 181 | scrollbar-width: none; 182 | } 183 | } 184 | 185 | @media (max-width: 48px) { 186 | #settings-icon, 187 | #tablist-wrapper .tab-title-wrapper, 188 | #newtab::after, 189 | #settings { 190 | visibility: hidden !important; 191 | } 192 | } 193 | 194 | 195 | /*** Better support for non-compact mode ***/ 196 | #tablist-wrapper:not(.shrinked) .tab-meta-image { 197 | display: flex; 198 | align-items: center; 199 | 200 | width: 58px; 201 | border: 0 !important; 202 | margin-right: 4px; 203 | border-radius: inherit; 204 | background-position: center; 205 | min-width: 0px !important; 206 | background-color: var(--toolbar-background) !important; 207 | transition: margin .4s; 208 | } 209 | #tablist-wrapper:not(.shrinked) .tab-icon-wrapper { 210 | transition: margin .1s; 211 | z-index: 2; 212 | } 213 | #tablist-wrapper:not(.shrinked) .tab-icon-overlay { 214 | top: unset !important; 215 | bottom: 8px; 216 | left: 25px !important; 217 | z-index: 4; 218 | transition: inset .1s; 219 | } 220 | 221 | /* If you want to disable the website previews, 222 | comment out the @media line below and its closing bracket */ 223 | @media (max-width: 49px) { 224 | #tablist-wrapper:not(.shrinked) .tab-meta-image { 225 | background-color: inherit !important; 226 | border-width: 0 !important; 227 | box-shadow: none !important; 228 | height: 0 !important; 229 | width: 26px; 230 | margin-right: 0px; 231 | } 232 | #tablist-wrapper:not(.shrinked) .tab-icon-wrapper { 233 | background-color: transparent !important; 234 | margin-top: 0 !important; 235 | margin-left: 3px !important; 236 | box-shadow: none !important; 237 | } 238 | #tablist-wrapper:not(.shrinked) .tab-icon-overlay { 239 | bottom: 12px; 240 | left: 16px !important; 241 | } 242 | } 243 | 244 | /* middle click newtab workaround */ 245 | 246 | /* allows the #spacer element to take up more space */ 247 | #spacer { 248 | min-height: 100vh; 249 | } 250 | 251 | /* moves the new tab button to the original position */ 252 | #tablist-wrapper { 253 | margin-bottom: -100vh; 254 | } 255 | 256 | /* moves the new tab button separator to the original position */ 257 | #tablist-wrapper::after { 258 | transform: translateY(-100vh); 259 | } 260 | -------------------------------------------------------------------------------- /configuration/user.js: -------------------------------------------------------------------------------- 1 | /* user.js 2 | * https://github.com/rafaelmardojai/firefox-gnome-theme/ 3 | */ 4 | 5 | // Enable customChrome.css 6 | user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); 7 | 8 | // Set UI density to normal 9 | user_pref("browser.uidensity", 0); 10 | 11 | // Enable SVG context-propertes 12 | user_pref("svg.context-properties.content.enabled", true); 13 | 14 | // Disable private window dark theme 15 | user_pref("browser.theme.dark-private-windows", false); 16 | 17 | // Enable rounded bottom window corners 18 | user_pref("widget.gtk.rounded-bottom-corners.enabled", true); 19 | 20 | -------------------------------------------------------------------------------- /icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 15 | 17 | 36 | 43 | 48 | 53 | 54 | 62 | 67 | 72 | 73 | 79 | 84 | 85 | 87 | 90 | 97 | 98 | 99 | 101 | 107 | 108 | 110 | 113 | 120 | 121 | 122 | 124 | 130 | 131 | 133 | 136 | 143 | 144 | 145 | 147 | 153 | 154 | 159 | 164 | 169 | 174 | 179 | 184 | 189 | 194 | 199 | 204 | 209 | 214 | 219 | 224 | 229 | 234 | 239 | 240 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/4eb2714fbed2b80e234312611a947d6cb7d70caf/screenshot.png -------------------------------------------------------------------------------- /scripts/auto-install.sh: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env bash 2 | 3 | firefoxInstallationPaths=( 4 | # Firefox 5 | ~/.mozilla/firefox # Package 6 | ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak 7 | ~/snap/firefox/common/.mozilla/firefox # Snap 8 | "$HOME/Library/Application Support/Firefox" # MacOS Package 9 | ~/AppData/Roaming/Mozilla/Firefox # Microsoft Windows 10 | 11 | # Librewolf 12 | ~/.librewolf # Package 13 | ~/.var/app/io.gitlab.librewolf-community/.librewolf # Flatpak 14 | 15 | # Floorp 16 | ~/.floorp # Package 17 | ~/.var/app/one.ablaze.floorp/.floorp # Flatpak 18 | 19 | # Waterfox 20 | ~/.var/app/net.waterfox.waterfox/.waterfox # Flatpak 21 | 22 | ) 23 | 24 | installScript="./scripts/install.sh" 25 | folderArg="" 26 | foldersFoundCount=0 27 | 28 | eval "chmod +x ${installScript}" 29 | 30 | for folder in "${firefoxInstallationPaths[@]}"; do 31 | if [ -d "$folder" ]; then 32 | echo Firefox installation folder found 33 | 34 | folderArg=" -f \"$folder\"" 35 | eval ${installScript}${folderArg} 36 | foldersFoundCount+=1 37 | 38 | fi 39 | 40 | done 41 | 42 | if [ $foldersFoundCount = 0 ];then 43 | echo No firefox folder found ; 44 | fi 45 | -------------------------------------------------------------------------------- /scripts/generate-pkgbuild.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # Exit on error 4 | set -e 5 | 6 | if [ -z "$RELEASE" ]; then 7 | echo "\$RELEASE not set, aborting" 8 | exit 1 9 | fi 10 | 11 | pkgver=$(echo "$RELEASE" | sed 's/v//') 12 | 13 | cat << EOF > ./PKGBUILD 14 | # Maintainer: Marko Korhonen 15 | # Based on the existing AUR package firefox-gnome-theme-git 16 | # This PKGBUILD is automatically generated by https://github.com/rafaelmardojai/firefox-gnome-theme/blob/$RELEASE/scripts/generate-pkgbuild.sh 17 | # when a release is published on GitHub. Do not edit this file directly. 18 | 19 | pkgname=firefox-gnome-theme 20 | pkgver=$pkgver 21 | pkgrel=1 22 | pkgdesc='A GNOME theme for Firefox' 23 | arch=('any') 24 | url="https://github.com/rafaelmardojai/\$pkgname" 25 | license=('Unlicense') 26 | optdepends=('firefox: primary compatible browser' 'librewolf: alternative compatible browser') 27 | conflicts=("\$pkgname-git") 28 | install="\$pkgname.install" 29 | source=("\$pkgname-\$pkgver.tar.gz::https://github.com/rafaelmardojai/\$pkgname/archive/refs/tags/v\$pkgver.tar.gz" "INSTALL.md") 30 | md5sums=('TO_BE_GENERATED' 31 | '25f18456221ffc91f472b1abff8aae84') 32 | 33 | package() { 34 | cd "\$srcdir/\$pkgname-\$pkgver" 35 | install -d "\$pkgdir/usr/lib/\$pkgname" 36 | cp -ra theme userChrome.css userContent.css configuration "\$pkgdir/usr/lib/\$pkgname" 37 | 38 | # Install docs 39 | install -Dm644 README.md "\$pkgdir/usr/share/doc/\$pkgname/README.md" 40 | install -Dm644 "\$srcdir/INSTALL.md" "\$pkgdir/usr/share/doc/\$pkgname/INSTALL.md" 41 | } 42 | EOF 43 | -------------------------------------------------------------------------------- /scripts/install-by-curl.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | VERSION=$(curl --silent "https://api.github.com/repos/rafaelmardojai/firefox-gnome-theme/releases/latest" | grep tag_name | cut -d'"' -f4) 4 | FILENAME=firefox-gnome-theme-$VERSION.tar.gz 5 | 6 | ( 7 | 8 | cd $(mktemp -d) || exit 1 9 | mkdir firefox-gnome-theme 10 | cd firefox-gnome-theme 11 | 12 | curl -LJo $FILENAME https://github.com/rafaelmardojai/firefox-gnome-theme/tarball/$VERSION 13 | 14 | tar -xzf $FILENAME --strip-components=1 15 | 16 | chmod +x scripts/auto-install.sh 17 | 18 | ./scripts/auto-install.sh 19 | 20 | ) 21 | -------------------------------------------------------------------------------- /scripts/install.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | THEMEDIRECTORY=$(cd "$(dirname $0)" && cd .. && pwd) 4 | FIREFOXFOLDER=~/.mozilla/firefox 5 | PROFILENAME="" 6 | 7 | 8 | # Get options. 9 | while getopts 'f:p:t:' flag; do 10 | case "${flag}" in 11 | f) FIREFOXFOLDER="${OPTARG}" ;; 12 | p) PROFILENAME="${OPTARG}" ;; 13 | *) 14 | echo "Gnome Theme Install Script:" 15 | echo " -f . Set custom Firefox folder path." 16 | echo " -p . Set custom profile name." 17 | echo " -h to show this message." 18 | exit 0 19 | ;; 20 | esac 21 | done 22 | 23 | # A wrapper around the `sed` command to handle platform-specific differences. 24 | # 25 | # sed in BSD platforms need this extra argument when using '-i' to specify no backup file. 26 | function _sed(){ 27 | if [[ "$OSTYPE" == *"linux"* ]] || [[ "$OSTYPE" == *msys* ]]; then 28 | sed "$@" 29 | return $? 30 | fi 31 | 32 | if [[ "$1" == "-i" ]]; then 33 | shift 1 34 | sed -i '' "$@" 35 | return $? 36 | fi 37 | 38 | sed "$@" 39 | } 40 | 41 | function saveProfile(){ 42 | local PROFILE_PATH="$1" 43 | 44 | cd "$FIREFOXFOLDER/$PROFILE_PATH" || { echo "FAIL, Firefox profile path was not found."; exit 1; } 45 | # Create a chrome directory if it doesn't exist. 46 | mkdir -p chrome 47 | cd chrome || { echo "FAIL, couldn't create chrome dir in $PWD, please check if there's something else named 'chrome'."; exit 1; } 48 | 49 | # Copy theme repo inside 50 | echo "Copying repo in $PWD" >&2 51 | [ -e ./firefox-gnome-theme ] || mkdir firefox-gnome-theme 52 | cp -fR "$THEMEDIRECTORY/." "$PWD/firefox-gnome-theme/" || { echo "FAIL, couldn't copy to $PWD/chrome, please check if there's something named 'chrome' or 'chrome/firefox-gnome-theme', that is not a dir."; exit 1; } 53 | 54 | # Create single-line user CSS files if non-existent or empty. 55 | if [ -s userChrome.css ]; then 56 | # Remove older theme imports 57 | _sed 's/@import "firefox-gnome-theme.*.//g' userChrome.css | _sed '/^\s*$/d' > tmpfile && mv tmpfile userChrome.css 58 | echo >> userChrome.css 59 | else 60 | echo >> userChrome.css 61 | fi 62 | 63 | # Import this theme at the beginning of the CSS files. 64 | _sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css 65 | 66 | # Check if the import was set correctly 67 | if ! cat userChrome.css | grep "firefox-gnome-theme" > /dev/null; then 68 | echo "Unable to add the main import in 'userChrome.css', it needs to be set manually." >&2 69 | fi 70 | 71 | # Create single-line user content CSS files if non-existent or empty. (userContent) 72 | if [ -s userContent.css ]; then 73 | # Remove older theme imports 74 | _sed 's/@import "firefox-gnome-theme.*.//g' userContent.css | _sed '/^\s*$/d' > tmpfile1 && mv tmpfile1 userContent.css 75 | echo >> userContent.css 76 | else 77 | echo >> userContent.css 78 | fi 79 | 80 | # Import this theme at the beginning of the CSS files. (userContent) 81 | _sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css 82 | 83 | # Check if the import was set correctly (userContent) 84 | if ! cat userContent.css | grep "firefox-gnome-theme" > /dev/null; then 85 | echo "Unable to add the main import in 'userContent.css', it needs to be set manually." >&2 86 | fi 87 | 88 | cd .. 89 | 90 | echo "Set configuration to user.js file" >&2 91 | 92 | theme_prefs=() 93 | while IFS= read -r line; do 94 | theme_prefs+=("$line") 95 | done < <(grep "user_pref" chrome/firefox-gnome-theme/configuration/user.js) 96 | 97 | theme_prefs_unvalued=() 98 | while IFS= read -r line; do 99 | theme_prefs_unvalued+=("$line") 100 | done < <(grep "user_pref" chrome/firefox-gnome-theme/configuration/user.js | cut -d'"' -f 2) 101 | 102 | if [ ! -f "user.js" ]; then 103 | mv chrome/firefox-gnome-theme/configuration/user.js . 104 | else 105 | cp user.js user.js.bak 106 | OLDIFS=$IFS 107 | IFS='/' 108 | for t in "${theme_prefs_unvalued[@]}"; do 109 | _sed -i "/$t/d" "user.js" 110 | done 111 | for f in "${theme_prefs[@]}"; do 112 | echo "$f" >> "user.js" 113 | done 114 | IFS=$OLDIFS 115 | fi 116 | echo "Done." >&2 117 | cd .. 118 | } 119 | 120 | PROFILES_FILE="${FIREFOXFOLDER}/profiles.ini" 121 | if [ ! -f "${PROFILES_FILE}" ]; then 122 | >&2 echo "FAIL, please check Firefox installation, unable to find 'profile.ini' at ${FIREFOXFOLDER}." 123 | exit 1 124 | fi 125 | echo "'profiles.ini' found in ${FIREFOXFOLDER}" 126 | 127 | PROFILES_PATHS=($(grep -E "^Path=" "${PROFILES_FILE}" | tr -d '\n' | _sed -e 's/\s\+/SPACECHARACTER/g' | _sed 's/Path=/::/g' )) 128 | PROFILES_PATHS+=:: 129 | 130 | PROFILES_ARRAY=() 131 | if [ "${PROFILENAME}" != "" ]; 132 | then 133 | echo "Using ${PROFILENAME} profile" 134 | PROFILES_ARRAY+=${PROFILENAME} 135 | else 136 | echo "Finding all available profiles"; 137 | while [[ "$PROFILES_PATHS" ]]; do 138 | PROFILES_ARRAY+=( "${PROFILES_PATHS%%::*}" ) 139 | PROFILES_PATHS=${PROFILES_PATHS#*::} 140 | done 141 | fi 142 | 143 | 144 | if [ ${#PROFILES_ARRAY[@]} -eq 0 ]; then 145 | echo "FAIL, no Firefox profile found in $PROFILES_FILE".; 146 | 147 | else 148 | for i in "${PROFILES_ARRAY[@]}" 149 | do 150 | if [[ -n "$i" ]]; 151 | then 152 | echo "Installing theme for $(sed 's/SPACECHARACTER/ /g' <<< $i) profile."; 153 | saveProfile "$(sed 's/SPACECHARACTER/ /g' <<< $i)" 154 | fi; 155 | done 156 | fi 157 | -------------------------------------------------------------------------------- /scripts/rebase-branches.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | git checkout beta 4 | git rebase master 5 | git push origin beta -f 6 | 7 | git checkout nightly 8 | git rebase beta 9 | git push origin nightly -f 10 | 11 | git checkout master 12 | 13 | -------------------------------------------------------------------------------- /theme/colors/black.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* Variables that start with --gnome- are added by me and are assigned 4 | * to elements somewhere in this code. The rest of the variables are 5 | * built-in in Firefox, so you need to add an !important if you wanna 6 | * override them. */ 7 | @media (prefers-color-scheme: dark) { 8 | :root { 9 | /* Accent */ 10 | --gnome-accent-bg: #1161CB; 11 | --gnome-accent: #1161CB; 12 | 13 | --gnome-toolbar-star-button: var(--gnome-palette-yellow-1); 14 | 15 | /* Window */ 16 | --gnome-window-background: #000000; 17 | --gnome-window-color: white; 18 | --gnome-view-background: #1e1e1e; 19 | --gnome-sidebar-background: #303030; 20 | --gnome-secondary-sidebar-background: #2a2a2a; 21 | 22 | /* Card */ 23 | --gnome-card-background: rgba(255, 255, 255, 0.08); 24 | --gnome-card-shade-color: color-mix(in srgb, black 36%, transparent); 25 | 26 | /* Menu */ 27 | --gnome-menu-background: #303030; 28 | 29 | /* Header bar */ 30 | --gnome-headerbar-background: #000000; 31 | --gnome-headerbar-shade-color: rgba(0, 0, 0, 0.9); 32 | 33 | /* Toolbars */ 34 | --gnome-toolbar-icon-fill: #eeeeec; 35 | 36 | /* Tabs */ 37 | --gnome-tabbar-tab-hover-background: #252524; /* Hardcoded color */ 38 | --gnome-tabbar-tab-active-background: #191918; /* Hardcoded color */ 39 | --gnome-tabbar-tab-active-background-contrast: #4F4F4F; /* Hardcoded color */ 40 | --gnome-tabbar-tab-active-hover-background: #272725; /* Hardcoded color */ 41 | 42 | --gnome-tabbar-identity-color-green: var(--gnome-palette-green-1); 43 | --gnome-tabbar-identity-color-yellow: var(--gnome-palette-yellow-2); 44 | --gnome-tabbar-identity-color-orange: var(--gnome-palette-orange-3); 45 | --gnome-tabbar-identity-color-red: var(--gnome-palette-red-1); 46 | --gnome-tabbar-identity-color-purple: var(--gnome-palette-purple-1); 47 | 48 | /* Text color for Firefox Logo in new private tab */ 49 | --gnome-private-wordmark: #FBFBFE; 50 | /* New private tab background */ 51 | --gnome-private-in-content-page-background: #242424; 52 | /* Private browsing info box */ 53 | --gnome-private-text-primary-color: #FBFBFE; 54 | } 55 | 56 | /* Backdrop colors */ 57 | :root:-moz-window-inactive { 58 | --gnome-tabbar-tab-hover-background: #2c2c2c; /* Hardcoded color */ 59 | --gnome-tabbar-tab-active-background: #2e2e2e; /* Hardcoded color */ 60 | } 61 | 62 | /* Private colors */ 63 | :root[privatebrowsingmode="temporary"] { 64 | --gnome-accent-fg: #78aeed; 65 | /* Headerbar */ 66 | --gnome-headerbar-background: #252F49 !important; 67 | /* Tabs */ 68 | --gnome-tabbar-tab-hover-background: #343e56; /* Hardcoded color */ 69 | --gnome-tabbar-tab-active-background: #343e56; /* Hardcoded color */ 70 | --gnome-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */ 71 | --gnome-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */ 72 | } 73 | 74 | /* Private and backdrop colors */ 75 | :root[privatebrowsingmode="temporary"]:-moz-window-inactive { 76 | --gnome-headerbar-background: #252F49 !important; 77 | --gnome-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */ 78 | --gnome-tabbar-tab-active-background: #272e41; /* Hardcoded color */ 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /theme/colors/dark.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* Variables that start with --gnome- are added by me and are assigned 4 | * to elements somewhere in this code. The rest of the variables are 5 | * built-in in Firefox, so you need to add an !important if you wanna 6 | * override them. */ 7 | @media (prefers-color-scheme: dark) { 8 | :root { 9 | /* Colors */ 10 | --gnome-standalone-color-oklab: max(l, 0.85) a b; 11 | --gnome-destructive-bg: var(--gnome-palette-red-4); 12 | --gnome-success-bg: var(--gnome-palette-green-5); 13 | --gnome-warning-bg: #cd9309; 14 | --gnome-error-bg: var(--gnome-palette-red-4); 15 | 16 | --gnome-toolbar-star-button: var(--gnome-palette-yellow-1); 17 | 18 | /* Window */ 19 | --gnome-window-background: #222226; 20 | --gnome-window-color: white; 21 | --gnome-view-background: #1e1e1e; 22 | --gnome-sidebar-background: #2e2e32; 23 | --gnome-secondary-sidebar-background: #28282c; 24 | 25 | /* Card */ 26 | --gnome-card-background: rgba(255, 255, 255, 0.08); 27 | --gnome-card-shade-color: rgba(0, 0, 6, 0.36); 28 | 29 | /* Menu */ 30 | --gnome-menu-background: #36363a; 31 | 32 | /* Header bar */ 33 | --gnome-headerbar-background: #2e2e32; 34 | --gnome-headerbar-shade-color: rgba(0, 0, 0, 0.9); 35 | 36 | /* Toolbars */ 37 | --gnome-toolbar-icon-fill: #ffffff; 38 | 39 | /* Tabs */ 40 | --gnome-tabbar-tab-hover-background: #3d3d40; /* Hardcoded color */ 41 | --gnome-tabbar-tab-active-background: #434346; /* Hardcoded color */ 42 | --gnome-tabbar-tab-active-background-contrast: #4F4F4F; /* Hardcoded color */ 43 | --gnome-tabbar-tab-active-hover-background: #49494d; /* Hardcoded color */ 44 | 45 | --gnome-tabbar-identity-color-green: var(--gnome-palette-green-1); 46 | --gnome-tabbar-identity-color-yellow: var(--gnome-palette-yellow-2); 47 | --gnome-tabbar-identity-color-orange: var(--gnome-palette-orange-3); 48 | --gnome-tabbar-identity-color-red: var(--gnome-palette-red-1); 49 | --gnome-tabbar-identity-color-purple: var(--gnome-palette-purple-1); 50 | 51 | /* Miscellaneous */ 52 | --gnome-shade-color: rgba(0, 0, 6, 0.25); 53 | 54 | /* Text color for Firefox Logo in new private tab */ 55 | --gnome-private-wordmark: #FBFBFE; 56 | /* New private tab background */ 57 | --gnome-private-in-content-page-background: #222226; 58 | /* Private browsing info box */ 59 | --gnome-private-text-primary-color: #FBFBFE; 60 | 61 | /* Backdrop colors */ 62 | &:-moz-window-inactive { 63 | --gnome-tabbar-tab-hover-background: #2a2a2e; /* Hardcoded color */ 64 | --gnome-tabbar-tab-active-background: #2d2d31; /* Hardcoded color */ 65 | --gnome-sidebar-background: #28282c; 66 | --gnome-secondary-sidebar-background: #252529; 67 | --gnome-selection-bg: color-mix(in srgb, var(--gnome-view-color) 10%, transparent); 68 | } 69 | 70 | /* Private browsing colors */ 71 | &[privatebrowsingmode="temporary"] { 72 | /* Headerbar */ 73 | --gnome-headerbar-background: var(--gnome-accent-bg) !important; 74 | /* Tabs */ 75 | --gnome-tabbar-tab-hover-background: #6C438C; /* Hardcoded color */ 76 | --gnome-tabbar-tab-active-background: #70498F; /* Hardcoded color */ 77 | --gnome-tabbar-tab-active-background-contrast: #86689e; /* Hardcoded color */ 78 | --gnome-tabbar-tab-active-hover-background: #754F93; /* Hardcoded color */ 79 | 80 | /* Private and backdrop colors */ 81 | &:-moz-window-inactive { 82 | --gnome-tabbar-tab-hover-background: #673C87; /* Hardcoded color */ 83 | --gnome-tabbar-tab-active-background: #683F89; /* Hardcoded color */ 84 | } 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /theme/colors/light.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* Variables that start with --gnome- are added by me and are assigned 4 | * to elements somewhere in this code. The rest of the variables are 5 | * built-in in Firefox, so you need to add an !important if you wanna 6 | * override them. */ 7 | 8 | :root { 9 | /* Pallete */ 10 | --gnome-palette-blue-1: #99c1f1; 11 | --gnome-palette-blue-2: #62a0ea; 12 | --gnome-palette-blue-3: #3584e4; 13 | --gnome-palette-blue-4: #1c71d8; 14 | --gnome-palette-blue-5: #1a5fb4; 15 | --gnome-palette-green-1: #8ff0a4; 16 | --gnome-palette-green-2: #57e389; 17 | --gnome-palette-green-3: #33d17a; 18 | --gnome-palette-green-4: #2ec27e; 19 | --gnome-palette-green-5: #26a269; 20 | --gnome-palette-yellow-1: #f9f06b; 21 | --gnome-palette-yellow-2: #f8e45c; 22 | --gnome-palette-yellow-3: #f6d32d; 23 | --gnome-palette-yellow-4: #f5c211; 24 | --gnome-palette-yellow-5: #e5a50a; 25 | --gnome-palette-orange-1: #ffbe6f; 26 | --gnome-palette-orange-2: #ffa348; 27 | --gnome-palette-orange-3: #ff7800; 28 | --gnome-palette-orange-4: #e66100; 29 | --gnome-palette-orange-5: #c64600; 30 | --gnome-palette-red-1: #f66151; 31 | --gnome-palette-red-2: #ed333b; 32 | --gnome-palette-red-3: #e01b24; 33 | --gnome-palette-red-4: #c01c28; 34 | --gnome-palette-red-5: #a51d2d; 35 | --gnome-palette-purple-1: #dc8add; 36 | --gnome-palette-purple-2: #c061cb; 37 | --gnome-palette-purple-3: #9141ac; 38 | --gnome-palette-purple-4: #813d9c; 39 | --gnome-palette-purple-5: #613583; 40 | --gnome-palette-brown-1: #cdab8f; 41 | --gnome-palette-brown-2: #b5835a; 42 | --gnome-palette-brown-3: #986a44; 43 | --gnome-palette-brown-4: #865e3c; 44 | --gnome-palette-brown-5: #63452c; 45 | --gnome-palette-light-1: #ffffff; 46 | --gnome-palette-light-2: #f6f5f4; 47 | --gnome-palette-light-3: #deddda; 48 | --gnome-palette-light-4: #c0bfbc; 49 | --gnome-palette-light-5: #9a9996; 50 | --gnome-palette-dark-1: #77767b; 51 | --gnome-palette-dark-2: #5e5c64; 52 | --gnome-palette-dark-3: #3d3846; 53 | --gnome-palette-dark-4: #241f31; 54 | --gnome-palette-dark-5: #000000; 55 | 56 | /* Colors */ 57 | --gnome-standalone-color-oklab: min(l, 0.5) a b; 58 | --gnome-accent-bg: AccentColor; 59 | --gnome-accent: oklab(from var(--gnome-accent-bg) var(--gnome-standalone-color-oklab)); 60 | --gnome-destructive-bg: var(--gnome-palette-red-3); 61 | --gnome-destructive: oklab(from var(--gnome-destructive-bg) var(--gnome-standalone-color-oklab)); 62 | --gnome-success-bg: var(--gnome-palette-green-4); 63 | --gnome-success: oklab(from var(--gnome-success-bg) var(--gnome-standalone-color-oklab)); 64 | --gnome-warning-bg: var(--gnome-palette-yellow-5); 65 | --gnome-warning: oklab(from var(--gnome-warning-bg) var(--gnome-standalone-color-oklab)); 66 | --gnome-error-bg: var(--gnome-palette-red-3); 67 | --gnome-error: oklab(from var(--gnome-error-bg) var(--gnome-standalone-color-oklab)); 68 | --gnome-focus-border-color: color-mix(in srgb, var(--gnome-accent) 50%, transparent); 69 | 70 | --gnome-selection-bg: color-mix(in srgb, var(--gnome-accent-bg) 30%, transparent); 71 | --gnome-toolbar-star-button: var(--gnome-palette-yellow-5); 72 | 73 | /* Window */ 74 | --gnome-window-background: #fafafb; 75 | --gnome-window-color: rgba(0, 0, 6, 0.8); 76 | --gnome-view-background: #ffffff; 77 | --gnome-view-color: var(--gnome-window-color); 78 | --gnome-view-selected-background: color-mix(in srgb, var(--gnome-accent-bg) 25%, transparent); 79 | --gnome-view-selected-hover-background: color-mix(in srgb, var(--gnome-accent-bg) 32%, transparent); 80 | --gnome-view-selected-active-background: color-mix(in srgb, var(--gnome-accent-bg) 39%, transparent); 81 | --gnome-sidebar-background: #ebebed; 82 | --gnome-secondary-sidebar-background: #f3f3f5; 83 | 84 | /* Card */ 85 | --gnome-card-background: #ffffff; 86 | --gnome-card-shade-color: rgba(0, 0, 6, 0.07); 87 | 88 | /* Menu */ 89 | --gnome-menu-background: #ffffff; 90 | --gnome-menu-color: var(--gnome-window-color); 91 | --gnome-menu-shadow: 0 1px 5px 1px rgba(0, 0, 0, .09), 0 2px 14px 3px rgba(0, 0, 0, .05); 92 | --gnome-menu-button-hover-background: var(--gnome-button-background); 93 | --gnome-menu-separator-color: var(--gnome-border-color); 94 | 95 | /* Header bar */ 96 | --gnome-headerbar-background: #ffffff; 97 | --gnome-headerbar-shade-color: rgba(0, 0, 0, 0.12); 98 | 99 | /* Toolbars */ 100 | --gnome-toolbar-background: var(--gnome-headerbar-background); 101 | --gnome-toolbar-border-color: var(--gnome-headerbar-shade-color); 102 | --gnome-toolbar-icon-fill: #2f2f2f; 103 | 104 | /* Elements */ 105 | --gnome-border-color: color-mix(in srgb, currentColor 15%, transparent); 106 | --gnome-hover-color: color-mix(in srgb, currentColor 7%, transparent); 107 | --gnome-active-color: color-mix(in srgb, currentColor 16%, transparent); 108 | --gnome-selected-color: color-mix(in srgb, currentColor 10%, transparent); 109 | --gnome-selected-hover-color: color-mix(in srgb, currentColor 13%, transparent); 110 | --gnome-selected-active-color: color-mix(in srgb, currentColor 19%, transparent); 111 | --gnome-trough-background: color-mix(in srgb, currentColor 15%, transparent); 112 | --gnome-trough-hover-background: color-mix(in srgb, currentColor 20%, transparent); 113 | --gnome-trough-active-background: color-mix(in srgb, currentColor 25%, transparent); 114 | 115 | /* Buttons */ 116 | --gnome-button-background: color-mix(in srgb, currentColor 10%, transparent); 117 | --gnome-button-hover-background: color-mix(in srgb, currentColor 15%, transparent); 118 | --gnome-button-active-background: color-mix(in srgb, currentColor 30%, transparent); 119 | --gnome-button-checked-background: var(--gnome-button-active-background); 120 | --gnome-button-checked-hover-background: color-mix(in srgb, currentColor 35%, transparent); 121 | --gnome-button-checked-active-background: color-mix(in srgb, currentColor 40%, transparent); 122 | --gnome-button-suggested-background: var(--gnome-accent-bg); 123 | --gnome-button-destructive-background: color-mix(in srgb, currentColor 15%, transparent); 124 | --gnome-button-destructive-hover-background: color-mix(in srgb, currentColor 20%, transparent); 125 | --gnome-button-destructive-active-background: color-mix(in srgb, currentColor 35%, transparent); 126 | 127 | /* Entries */ 128 | --gnome-entry-background: var(--gnome-button-background); 129 | --gnome-entry-color: var(--gnome-view-color); 130 | --gnome-entry-focused-border-color: color-mix(in srgb, var(--gnome-accent) 50%, transparent); 131 | --gnome-entry-error-focused-border-color: color-mix(in srgb, var(--gnome-error) 50%, transparent); 132 | 133 | /* Tabs */ 134 | --gnome-tabbar-background: var(--gnome-headerbar-background); 135 | --gnome-tabbar-tab-separator-color: var(--gnome-border-color); 136 | --gnome-tabbar-tab-hover-background: #f1f1f1; /* Hardcoded color */ 137 | --gnome-tabbar-tab-active-background: #ebebeb; /* Hardcoded color */ 138 | --gnome-tabbar-tab-active-background-contrast: #c0c0c0; /* Hardcoded color */ 139 | --gnome-tabbar-tab-active-hover-background: #e4e4e4; /* Hardcoded color */ 140 | --gnome-tabbar-tab-needs-attetion: var(--gnome-palette-blue-2); 141 | 142 | --gnome-tabbar-identity-color-blue: var(--gnome-accent); 143 | --gnome-tabbar-identity-color-turquoise: #00c79a; 144 | --gnome-tabbar-identity-color-green: var(--gnome-palette-green-5); 145 | --gnome-tabbar-identity-color-yellow: #ae7b03; 146 | --gnome-tabbar-identity-color-orange: var(--gnome-palette-orange-4); 147 | --gnome-tabbar-identity-color-red: var(--gnome-palette-red-3); 148 | --gnome-tabbar-identity-color-pink: #ff4b84; 149 | --gnome-tabbar-identity-color-purple: var(--gnome-palette-purple-4); 150 | 151 | /* Miscellaneous */ 152 | --gnome-shade-color: rgba(0, 0, 6, 0.07); 153 | 154 | /* Text color for Firefox Logo in new private tab */ 155 | --gnome-private-wordmark: #20123A; 156 | /* New private tab background */ 157 | --gnome-private-in-content-page-background: #FAFAFA; 158 | /* Private browsing info box */ 159 | --gnome-private-text-primary-color: #15141A; 160 | 161 | /* Backdrop colors */ 162 | &:-moz-window-inactive { 163 | --gnome-headerbar-background: var(--gnome-window-background); 164 | --gnome-tabbar-tab-hover-background: #f3f3f3; /* Hardcoded color */ 165 | --gnome-tabbar-tab-active-background: #f0f0f0; /* Hardcoded color */ 166 | --gnome-sidebar-background: #f2f2f4; 167 | --gnome-secondary-sidebar-background: #f6f6fa; 168 | --gnome-selection-bg: color-mix(in srgb, var(--gnome-view-color) 10%, transparent); 169 | } 170 | 171 | /* Private browsing colors */ 172 | &[privatebrowsingmode="temporary"] { 173 | --gnome-accent-bg: var(--gnome-palette-purple-5) !important; 174 | /* Headerbar */ 175 | --gnome-headerbar-background: #ebd1ff !important; 176 | /* Tabs */ 177 | --gnome-tabbar-tab-hover-background: #DEC6F1; /* Hardcoded color */ 178 | --gnome-tabbar-tab-active-background: #D9C1EB; /* Hardcoded color */ 179 | --gnome-tabbar-tab-active-background-contrast: #c895ed; /* Hardcoded color */ 180 | --gnome-tabbar-tab-active-hover-background: #D3BCE6; /* Hardcoded color */ 181 | 182 | /* Private and backdrop colors */ 183 | &:-moz-window-inactive { 184 | --gnome-tabbar-tab-hover-background: #E5CBF8; /* Hardcoded color */ 185 | --gnome-tabbar-tab-active-background: #E2C9F5; /* Hardcoded color */ 186 | } 187 | } 188 | } 189 | -------------------------------------------------------------------------------- /theme/extensions/adaptive-tab-bar-colour.css: -------------------------------------------------------------------------------- 1 | :root, 2 | :root[privatebrowsingmode="temporary"], 3 | :is(:root, :root[privatebrowsingmode="temporary"]):-moz-window-inactive { 4 | /* Colors */ 5 | --gnome-accent-bg: AccentColor !important; 6 | /* Window */ 7 | --gnome-window-color: var(--lwt-text-color); 8 | --gnome-window-background: var(--lwt-accent-color); 9 | --gnome-sidebar-background: var(--lwt-accent-color); 10 | --gnome-secondary-sidebar-background: var(--sidebar-background-color); 11 | /* Menu */ 12 | --gnome-menu-background: var(--arrowpanel-background); 13 | --gnome-menu-color: var(--lwt-text-color); 14 | /* Header bar */ 15 | --gnome-headerbar-background: var(--toolbar-bgcolor) !important; 16 | /* Toolbars */ 17 | --gnome-toolbar-border-color: transparent; 18 | --gnome-toolbar-background: var(--toolbar-bgcolor); 19 | --gnome-toolbar-icon-fill: var(--toolbarbutton-icon-fill); 20 | /* Entries */ 21 | --gnome-entry-background: var(--toolbar-field-background-color); 22 | --gnome-entry-color: var(--toolbar-field-color); 23 | --gnome-inactive-entry-color: hsl(from var(--gnome-entry-color) h s calc(l + 5%)); 24 | --gnome-entry-focused-border-color: var(--gnome-selection-bg); 25 | /* Tabs */ 26 | --gnome-tabbar-background: var(--gnome-headerbar-background); 27 | --gnome-tabbar-tab-hover-background: color-mix(in oklab, var(--gnome-tabbar-background), var(--lwt-text-color) 10%); 28 | --gnome-tabbar-tab-active-background: var(--tab-selected-bgcolor); 29 | --gnome-tabbar-tab-active-hover-background: color-mix(in oklab, var(--gnome-tabbar-tab-active-background), var(--lwt-text-color) 10%); 30 | 31 | /* 'New Tab' and 'New Private Tab' pages */ 32 | &:has( 33 | tab:where( 34 | [image="chrome://branding/content/icon32.png"], 35 | [image="chrome://browser/skin/privatebrowsing/favicon.svg"] 36 | )[selected] 37 | ) { 38 | --lwt-accent-color: var(--gnome-private-in-content-page-background) !important; 39 | 40 | --lwt-text-color: rgba(0, 0, 0, 0.8) !important; 41 | --sidebar-background-color: #f3f3f3 !important; 42 | 43 | @media (prefers-color-scheme: dark) { 44 | --lwt-text-color: white !important; 45 | --sidebar-background-color: #2a2a2a !important; 46 | } 47 | 48 | --toolbar-bgcolor: var(--lwt-accent-color) !important; 49 | --toolbar-color: var(--lwt-text-color) !important; 50 | --toolbar-field-color: var(--lwt-text-color) !important; 51 | --toolbarbutton-icon-fill: var(--lwt-text-color) !important; 52 | --toolbar-field-focus-background-color: Field !important; 53 | --arrowpanel-background: color-mix(in oklab, var(--toolbar-bgcolor), var(--lwt-text-color) 10%) !important; 54 | --toolbar-field-background-color: var(--arrowpanel-background) !important; 55 | --tab-selected-bgcolor: color-mix(in oklab, var(--gnome-tabbar-background), var(--lwt-text-color) 20%) !important; 56 | --lwt-tab-line-color: var(--tab-selected-bgcolor) !important; 57 | } 58 | } 59 | 60 | .menupopup-arrowscrollbox, window[role="dialog"] { 61 | --gnome-menu-background: Menu; 62 | --gnome-window-color: MenuText; 63 | --gnome-toolbar-icon-fill: MenuText; 64 | } 65 | 66 | .urlbarView-url { 67 | --gnome-headerbar-mix: color-mix(in oklch, var(--gnome-headerbar-background), var(--lwt-text-color) 60%); 68 | --gnome-accent: oklch(from var(--gnome-headerbar-mix) l calc(c + 0.01) h); 69 | } 70 | 71 | #sidebar-launcher-splitter, #sidebar-splitter { 72 | background-color: color-mix(in oklab, var(--lwt-accent-color), var(--lwt-text-color) 10%) !important; 73 | } 74 | -------------------------------------------------------------------------------- /theme/extensions/tab-center-reborn.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --tab-center-reborn-width: 48px; 3 | --tab-center-reborn-hover-width: 200px; 4 | 5 | &[inFullscreen] { 6 | --tab-center-reborn-width: 0px; 7 | } 8 | 9 | @media -moz-pref("gnomeTheme.extensions.tabCenterReborn.alwaysOpen") { 10 | --tab-center-reborn-width: var(--tab-center-reborn-hover-width); 11 | } 12 | 13 | @media (width >= 1200px) { 14 | --tab-center-reborn-hover-width: 250px; 15 | } 16 | 17 | @media (width >= 2000px) { 18 | --tab-center-reborn-hover-width: 400px; 19 | } 20 | } 21 | 22 | #tabbrowser-tabs { 23 | display: none !important; 24 | } 25 | 26 | #browser { 27 | position: relative; 28 | } 29 | 30 | #tabbrowser-tabbox { 31 | z-index: 0 !important; 32 | } 33 | 34 | #sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] { 35 | border-right: 1px solid var(--chrome-content-separator-color) !important; 36 | min-width: var(--tab-center-reborn-width) !important; 37 | max-width: var(--tab-center-reborn-width) !important; 38 | overflow: hidden; 39 | position: absolute; 40 | top: 0; 41 | bottom: 0; 42 | z-index: 1 !important; 43 | 44 | &:hover #sidebar, 45 | &:hover { 46 | min-width: var(--tab-center-reborn-hover-width) !important; 47 | max-width: var(--tab-center-reborn-hover-width) !important; 48 | animation-timing-function: linear; 49 | transition: all var(--gnome-animation-time) ease 0s; 50 | } 51 | 52 | &:not(:hover) #sidebar, 53 | &:not(:hover) { 54 | animation-timing-function: linear; 55 | transition: all var(--gnome-animation-time) ease 0s; 56 | } 57 | 58 | :root[inFullscreen] & { 59 | visibility: collapse; 60 | animation: var(--gnome-animation-time) fadeOut; 61 | animation-fill-mode: forwards; 62 | } 63 | 64 | &:not([hidden]) ~ #tabbrowser-tabbox { 65 | margin-left: var(--tab-center-reborn-width) !important; 66 | } 67 | 68 | #sidebar-header, 69 | & ~ #sidebar-splitter { 70 | display: none; 71 | } 72 | } 73 | 74 | @keyframes fadeOut { 75 | 0% { 76 | visibility: visible; 77 | opacity: 1; 78 | } 79 | 80 | 100% { 81 | opacity: 0; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /theme/gnome-theme.css: -------------------------------------------------------------------------------- 1 | /* Variables */ 2 | @import "variables.css"; 3 | @import "icons/icons.css"; 4 | @import "colors/light.css"; 5 | @import "colors/dark.css"; 6 | @import "colors/black.css" screen and -moz-pref("gnomeTheme.oledBlack"); 7 | 8 | /* Core */ 9 | @import "parts/toolbox.css"; 10 | @import "parts/headerbar.css"; 11 | @import "parts/csd.css"; 12 | @import "parts/urlbar.css"; 13 | @import "parts/tabsbar.css"; 14 | @import "parts/findbar.css"; 15 | @import "parts/sidebar.css"; 16 | @import "parts/lists.css"; 17 | 18 | @import "parts/buttons.css"; 19 | @import "parts/buttons-fixes.css"; 20 | @import "parts/entries.css"; 21 | @import "parts/controls.css"; 22 | @import "parts/icons.css"; 23 | 24 | @import "parts/popups.css"; 25 | @import "parts/popups-contents.css"; 26 | @import "parts/dialogs.css"; 27 | 28 | @import "parts/remove-white-flash.css"; 29 | 30 | /* Platforms */ 31 | @import "platforms/windows.css" screen and (-moz-platform: windows); 32 | 33 | /* Extensions support */ 34 | @import "extensions/tab-center-reborn.css" screen and -moz-pref("gnomeTheme.extensions.tabCenterReborn"); 35 | @import "extensions/adaptive-tab-bar-colour.css" screen and -moz-pref("gnomeTheme.extensions.adaptiveTabBarColour"); 36 | 37 | /* Optional */ 38 | @import "system-icons.css" screen and -moz-pref("gnomeTheme.systemIcons"); 39 | @import "symbolic-tab-icons.css" screen and -moz-pref("gnomeTheme.symbolicTabIcons"); 40 | 41 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 42 | 43 | /* Set theme version text in customization panel */ 44 | #customization-footer::before { 45 | background: url(../icon.svg) no-repeat; 46 | background-size: contain; 47 | content: "Firefox GNOME theme v137"; 48 | padding: 9px 9px 9px 50px; 49 | } 50 | -------------------------------------------------------------------------------- /theme/icons/custom/bullet-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /theme/icons/custom/firefox-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /theme/icons/custom/select-symbolic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /theme/icons/gen_icons_css.py: -------------------------------------------------------------------------------- 1 | # Generate stylesheet with GNOME SVG icons as CSS variables. 2 | # 3 | # Fetch icons from official git repos and convert them to inline CSS variables 4 | # adding support for reoloring in Firefox in the process. 5 | # 6 | # Git is required to run the script. 7 | # 8 | # Partially inspired by https://gitlab.gnome.org/World/design/icon-library/-/blob/master/update-icons.py 9 | 10 | import glob 11 | import logging 12 | import os 13 | import shutil 14 | import subprocess 15 | import yaml 16 | import xml.etree.ElementTree as ET 17 | from typing import TypedDict 18 | from urllib.parse import quote 19 | 20 | ABS_PATH = os.path.dirname(os.path.abspath(__file__)) 21 | ICONS_FILE = os.path.join(ABS_PATH, "icons.yml") 22 | CSS_FILE = os.path.join(ABS_PATH, "icons.css") 23 | ICONS_REPO_URL = "https://gitlab.gnome.org/GNOME/adwaita-icon-theme.git" 24 | ICONS_REPO_PATH = os.path.join(ABS_PATH, "adwaita-icon-theme") 25 | ICONS_KIT_REPO_URL = "https://gitlab.gnome.org/Teams/Design/icon-development-kit-www.git" 26 | ICONS_KIT_REPO_PATH = os.path.join(ABS_PATH, "icon-development-kit-www") 27 | 28 | ET.register_namespace("", "http://www.w3.org/2000/svg") 29 | 30 | class IconsDefinition(TypedDict): 31 | icons: list[str] 32 | 33 | def main(): 34 | # Get icons repositories 35 | if not os.path.exists(ICONS_REPO_PATH): 36 | subprocess.call(["git", "clone", "--depth", "1", ICONS_REPO_URL], cwd=ABS_PATH) 37 | if not os.path.exists(ICONS_KIT_REPO_PATH): 38 | subprocess.call(["git", "clone", "--depth", "1", ICONS_KIT_REPO_URL], cwd=ABS_PATH) 39 | 40 | # Get icons name to path mappings 41 | icon_paths = { 42 | **lookup_icons(f"{ICONS_KIT_REPO_PATH}/img/symbolic"), # Extra GNOME icons kit 43 | **lookup_icons(f"{ICONS_REPO_PATH}/Adwaita/symbolic"), # Core GNOME icons 44 | **lookup_icons(f"{ABS_PATH}/custom", False) # Custom icons 45 | } 46 | 47 | # Load definition of icons needed by the theme 48 | with open(ICONS_FILE, "r") as f: 49 | icons_def: IconsDefinition = yaml.safe_load(f) 50 | 51 | # Process icons SVGs for CSS 52 | icons_svg: dict[str, str] = {} 53 | for icon in icons_def["icons"]: 54 | if icon not in icon_paths: 55 | logging.warning(f"No icon file found for '{icon}'") 56 | continue 57 | 58 | text = process_svg(icon_paths[icon]) 59 | svg = quote(text, safe=' =:/\'') # URL encode the icon, omitting some characters 60 | icons_svg[icon] = svg 61 | 62 | # Write CSS file 63 | with open(CSS_FILE, "w") as css: 64 | css.write(":root {\n") 65 | for name, svg in icons_svg.items(): 66 | css.write(f'\t--gnome-icon-{name}: url("data:image/svg+xml,{svg}");\n') 67 | css.write("}") 68 | 69 | # Remove repos dirs 70 | shutil.rmtree(ICONS_REPO_PATH) 71 | shutil.rmtree(ICONS_KIT_REPO_PATH) 72 | 73 | def lookup_icons(icons_folder: str, has_subdirs = True) -> dict[str, str]: 74 | lookup: dict[str, str] = {} 75 | 76 | for path in glob.glob(f"{icons_folder}/{ "**/" if has_subdirs else "" }*-symbolic.svg"): 77 | filename = os.path.basename(path) 78 | name = filename.replace(".svg", "") 79 | lookup[name] = path 80 | 81 | return lookup 82 | 83 | def process_svg(filename: str) -> str: 84 | """ 85 | Process SVG's XML to be one liner and add Mozilla's SVG coloring properties 86 | """ 87 | tree = ET.parse(filename) 88 | root = tree.getroot() 89 | 90 | # Set context-* values for fill and fill-opacity 91 | # Needed for icon recolor from CSS 92 | for tag in ("{http://www.w3.org/2000/svg}g", "{http://www.w3.org/2000/svg}path"): 93 | for elem in root.iter(tag): 94 | if "class" not in elem.attrib: # Paths with class name are colored overlays 95 | if "fill" in elem.attrib: 96 | elem.set("fill", "context-fill") 97 | elem.set("fill-opacity", "context-fill-opacity") 98 | if "stroke" in elem.attrib: 99 | elem.set("stroke", "context-stroke") 100 | elem.set("stroke-opacity", "context-stroke-opacity") 101 | 102 | # Strip line breasks and indentation 103 | for elem in root.iter("*"): 104 | if elem.text is not None: 105 | elem.text = elem.text.strip() 106 | if elem.tail is not None: 107 | elem.tail = elem.tail.strip() 108 | 109 | text = ET.tostring(root, "unicode") 110 | text = text.replace('"', "'") # Use single quotes 111 | 112 | return text 113 | 114 | main() 115 | -------------------------------------------------------------------------------- /theme/icons/icons.yml: -------------------------------------------------------------------------------- 1 | icons: 2 | - application-x-addon-symbolic 3 | - applications-engineering-symbolic 4 | - audio-volume-muted-symbolic 5 | - audio-speakers-symbolic 6 | - build-configure-symbolic 7 | - bullet-symbolic 8 | - chain-link-symbolic 9 | - channel-insecure-symbolic 10 | - channel-secure-symbolic 11 | - chat-symbolic 12 | - edit-clear-symbolic 13 | - edit-copy-symbolic 14 | - edit-cut-symbolic 15 | - edit-find-symbolic 16 | - edit-paste-symbolic 17 | - eye-not-looking-symbolic 18 | - firefox-symbolic 19 | - folder-download-symbolic 20 | - folder-symbolic 21 | - general-properties-symbolic 22 | - go-down-symbolic 23 | - go-next-symbolic 24 | - go-previous-symbolic 25 | - go-up-symbolic 26 | - history-undo-symbolic 27 | - info-outline-symbolic 28 | - key-symbolic 29 | - list-add-symbolic 30 | - mail-unread-symbolic 31 | - newspaper-symbolic 32 | - non-starred-symbolic 33 | - open-menu-symbolic 34 | - pan-down-symbolic 35 | - pan-end-symbolic 36 | - pan-start-symbolic 37 | - pan-up-symbolic 38 | - pip-in-symbolic 39 | - pip-out-symbolic 40 | - play-large-disabled-symbolic 41 | - preferences-system-symbolic 42 | - preferences-system-time-symbolic 43 | - printer-symbolic 44 | - process-stop-symbolic 45 | - security-high-symbolic 46 | - security-low-symbolic 47 | - select-symbolic 48 | - settings-symbolic 49 | - sidebar-show-symbolic 50 | - sidebar-show-right-symbolic 51 | - starred-symbolic 52 | - tab-new-symbolic 53 | - tab-symbolic 54 | - user-home-symbolic 55 | - view-fullscreen-symbolic 56 | - view-more-horizontal-symbolic 57 | - view-refresh-symbolic 58 | - view-restore-symbolic 59 | - window-close-symbolic 60 | - window-maximize-symbolic 61 | - window-minimize-symbolic 62 | - window-new-symbolic 63 | - window-restore-symbolic 64 | - zoom-in-symbolic 65 | - zoom-out-symbolic 66 | -------------------------------------------------------------------------------- /theme/icons/spinner-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/4eb2714fbed2b80e234312611a947d6cb7d70caf/theme/icons/spinner-dark.png -------------------------------------------------------------------------------- /theme/icons/spinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/4eb2714fbed2b80e234312611a947d6cb7d70caf/theme/icons/spinner.png -------------------------------------------------------------------------------- /theme/pages/newtab.css: -------------------------------------------------------------------------------- 1 | /* about:newtab */ 2 | 3 | @-moz-document url("about:newtab"), url("about:home") { 4 | body { 5 | --newtab-background-color: var(--gnome-window-background) !important; 6 | --newtab-background-color-secondary: var(--gnome-menu-background) !important; 7 | --newtab-primary-action-background: var(--gnome-accent) !important; 8 | 9 | background-color: var(--gnome-window-background) !important; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /theme/pages/privatebrowsing.css: -------------------------------------------------------------------------------- 1 | /* about:privatebrowsing */ 2 | 3 | @-moz-document url("about:privatebrowsing") { 4 | html.private { 5 | --in-content-page-background: var(--gnome-private-in-content-page-background) !important; 6 | 7 | /* Used by headings in promo boxes Firefox shows (like an ad for Firefox Focus) */ 8 | --in-content-text-color: var(--gnome-private-text-primary-color) !important; 9 | } 10 | .wordmark { 11 | fill: var(--gnome-private-wordmark) !important; 12 | } 13 | .showPrivate { 14 | color: var(--gnome-private-text-primary-color); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /theme/parts/buttons-fixes.css: -------------------------------------------------------------------------------- 1 | /* Buttons Issues/Glitches fixes */ 2 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 3 | 4 | /* Menulist */ 5 | link[href="chrome://global/skin/menulist.css"] ~ dropmarker { 6 | align-items: center !important; 7 | justify-content: center !important; 8 | } 9 | 10 | .button-menu-dropmarker { 11 | appearance: none !important; 12 | margin: 0 !important; 13 | margin-inline-start: 6px !important; 14 | } 15 | 16 | /* Remove the header bar buttons' hover styles */ 17 | #nav-bar { 18 | --toolbarbutton-active-background: transparent !important; 19 | --toolbarbutton-hover-background: transparent !important; 20 | } 21 | 22 | /* Fix notification dropmarker */ 23 | .popup-notification-dropmarker dropmarker { 24 | margin-inline-start: 0 !important; 25 | } 26 | .popup-notification-dropmarker > .button-box > hbox { 27 | display: -moz-box !important; 28 | } 29 | 30 | /* Fix subviewbutton icon buttons alignment */ 31 | .subviewbutton.subviewbutton-iconic:not(.subviewbutton-back, .unified-extensions-item-action-button) { 32 | justify-content: center !important; 33 | } 34 | 35 | /* Fix hover background */ 36 | #appMenu-fullscreen-button2 > .toolbarbutton-icon { 37 | background: transparent !important; 38 | } 39 | 40 | /* Fix unified-extensions-item margin */ 41 | toolbar .unified-extensions-item { 42 | margin-inline: 0 3px !important; 43 | } 44 | 45 | /* menulist */ 46 | #label-box:not([native]) { 47 | font-weight: 400 !important; 48 | padding: 0 8px; 49 | } 50 | dropmarker:not([native]) { 51 | margin-right: 8px; 52 | } 53 | 54 | /* Bookmark buttons */ 55 | #nav-bar toolbarbutton.bookmark-item { 56 | width: auto !important; 57 | } 58 | #nav-bar toolbarbutton.bookmark-item .toolbarbutton-icon { 59 | margin-left: 6px; 60 | } 61 | #nav-bar toolbarbutton.bookmark-item .toolbarbutton-text { 62 | padding-right: 6px; 63 | } 64 | 65 | /* Fix library animation */ 66 | #library-animatable-box { 67 | --library-button-height: 46px !important; 68 | --library-icon-x: 1716px !important; 69 | /*--library-icon-x: 1715.9833984375px !important;*/ 70 | } 71 | #library-button[animate] > .toolbarbutton-icon { 72 | fill: transparent !important; 73 | } 74 | 75 | /* Fix toolbars close icons */ 76 | .close-icon:not(.tab-close-button) .toolbarbutton-icon { 77 | height: 16px !important; 78 | width: 16px !important; 79 | margin: 6px !important; 80 | padding: 0 !important; 81 | } 82 | button.close { 83 | margin: 0 !important; 84 | } 85 | 86 | /* */ 87 | #appMenu-popup .panel-banner-item[notificationid="update-restart"]::after { 88 | display: none !important; 89 | } 90 | 91 | /* Identity site popover buttons */ 92 | .identity-popup-preferences-button:not(#hack) { 93 | list-style-image: url("chrome://browser/skin/settings.svg") !important; 94 | } 95 | #tracking-protection-preferences-button > .toolbarbutton-text { 96 | padding-inline-end: 0 !important; 97 | } 98 | .protections-popup-footer-button-label { 99 | margin-inline-start: 3px !important; 100 | } 101 | 102 | /* Fix findbar buttons issues */ 103 | .findbar-container .findbar-find-previous image, 104 | .findbar-container .findbar-find-next image { 105 | margin: 6px !important; 106 | opacity: 1 !important; 107 | } 108 | .findbar-container toolbarbutton:focus { 109 | outline: 0 !important; 110 | } 111 | 112 | /* Sidebar header button reset font size */ 113 | #sidebar-header { 114 | font-size: 1em !important; 115 | } 116 | /* Sidebar header button sizing */ 117 | #sidebar-switcher-target { 118 | flex: unset !important; 119 | } 120 | /* Sidebar header button arrow opacity */ 121 | #sidebar-switcher-arrow { 122 | opacity: 1 !important; 123 | } 124 | 125 | /* Sidebar history view */ 126 | #viewButton { 127 | margin: 0 !important; 128 | margin-inline-start: 6px !important; 129 | } 130 | 131 | /* Menulist */ 132 | #identity-popup-popup-menulist { 133 | margin-right: 0 !important; 134 | } 135 | 136 | /* Auto complete popup button*/ 137 | .autocomplete-richlistitem[type="loginsFooter"] { 138 | margin: 4px 4px 0 4px !important; 139 | } 140 | 141 | /* Identity popup tracking protection button */ 142 | .tracking-protection-button { 143 | margin-inline-end: 0 !important; 144 | } 145 | 146 | /* Identity popup delete permission button */ 147 | .identity-popup-permission-remove-button { 148 | opacity: 1 !important; 149 | } 150 | 151 | /* Identity popup expander button */ 152 | #identity-popup-security { 153 | -moz-box-align: center; 154 | } 155 | #identity-popup-security-expander { 156 | width: 34px !important; 157 | } 158 | #identity-popup-security-expander .button-icon { 159 | margin: 0 !important; 160 | } 161 | 162 | /* Protections popup */ 163 | #protections-popup-info-button { 164 | margin: 0 !important; 165 | margin-inline-end: 0 !important; 166 | } 167 | .protections-popup-footer-icon { 168 | display: none !important; 169 | } 170 | .protections-popup-footer-button-label { 171 | margin-inline-start: 0 !important; 172 | } 173 | #protections-popup-footer-protection-type-label { 174 | margin-inline-end: 0 !important; 175 | margin-block: 0 !important; 176 | } 177 | 178 | /* Close button */ 179 | .close-icon:not(.tab-close-button) .toolbarbutton-icon { 180 | outline: 0 !important; 181 | } 182 | 183 | /* Downloads button */ 184 | #downloads-indicator-progress-inner { 185 | background: conic-gradient(var(--gnome-toolbar-icon-fill) var(--download-progress-pcent), transparent var(--download-progress-pcent)) !important; 186 | background-color: var(--gnome-button-active-background) !important; 187 | } 188 | #downloads-indicator-progress-outer, 189 | #downloads-indicator-start-image, 190 | #downloads-indicator-finish-image { 191 | border: 0 !important; 192 | padding: 0 !important; 193 | border-radius: 100% !important; 194 | } 195 | #downloads-indicator-progress-outer, 196 | #downloads-indicator-start-image { 197 | background: var(--gnome-toolbar-border-color) !important; 198 | } 199 | #downloads-indicator-finish-image { 200 | background: var(--gnome-toolbar-icon-fill) !important; 201 | } 202 | 203 | #downloads-button[progress="true"] #downloads-indicator-progress-outer { 204 | visibility: visible !important; 205 | } 206 | #downloads-button:not([progress="true"]) #downloads-indicator-icon { 207 | visibility: visible !important; 208 | } 209 | 210 | /* Stop/Reload button */ 211 | #stop-reload-button .toolbarbutton-icon { 212 | margin-top: -2px !important; 213 | } 214 | 215 | /* Toolbar Animations */ 216 | #downloads-button .toolbarbutton-animatable-box { 217 | top: 8px !important; 218 | left: 8px !important; 219 | } 220 | #downloads-button .toolbarbutton-animatable-box, 221 | #downloads-button .toolbarbutton-animatable-image, 222 | #downloads-indicator-progress-inner { 223 | height: 16px !important; 224 | width: 16px !important; 225 | } 226 | #downloads-button .toolbarbutton-animatable-image, 227 | #stop-reload-button .toolbarbutton-animatable-image:not(#hack), 228 | #nav-bar-overflow-button .toolbarbutton-animatable-image:not(#hack) { 229 | --anim-steps: 1 !important; 230 | transform: none !important; 231 | list-style-image: none !important; 232 | display: none !important; 233 | } 234 | 235 | /* Panel banner */ 236 | #appMenu-popup .panel-banner-item { 237 | margin: 0 0 6px !important; 238 | } 239 | #appMenu-popup .panel-banner-item > .toolbarbutton-text { 240 | margin-inline: 0 !important; 241 | } 242 | 243 | /* User menu */ 244 | #fxa-toolbar-menu-button .toolbarbutton-badge-stack { 245 | padding: 0 !important; 246 | } 247 | #fxa-avatar-image { 248 | min-height: 24px !important; 249 | width: 24px !important; 250 | } 251 | 252 | /* Translation */ 253 | #select-translations-panel-settings-button > .toolbarbutton-text { 254 | display: none !important; 255 | } 256 | 257 | /* OPTIONAL: Hide unified-extensions-button */ 258 | @media -moz-pref("gnomeTheme.hideUnifiedExtensions") { 259 | #unified-extensions-button { 260 | display: none; 261 | } 262 | } 263 | -------------------------------------------------------------------------------- /theme/parts/buttons.css: -------------------------------------------------------------------------------- 1 | /* Buttons */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Override vars */ 6 | :root { 7 | /* moz-button */ 8 | --button-border-radius: var(--gnome-button-radius) !important; 9 | --button-background-color: var(--gnome-button-background) !important; 10 | --button-background-color-hover: var(--gnome-button-hover-background) !important; 11 | --button-background-color-active: var(--gnome-button-active-background) !important; 12 | --button-background-color-ghost-hover: var(--gnome-hover-color) !important; 13 | --button-background-color-ghost-active: var(--gnome-active-color) !important; 14 | } 15 | 16 | /* Hide buttons separator */ 17 | #nav-bar .toolbaritem-combined-buttons separator { 18 | display: none !important; 19 | } 20 | #appMenu-popup .toolbaritem-combined-buttons toolbarseparator { 21 | border: 0 !important; 22 | } 23 | 24 | /* Buttons */ 25 | menulist, 26 | .customizationmode-button, 27 | #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.titlebar-button), 28 | :root[inFullscreen] .titlebar-button.titlebar-restore, 29 | .subviewbutton.panel-subview-footer, 30 | .panel-footer button, 31 | #downloadsPanel-mainView .download-state .downloadButton, 32 | #appMenu-popup .panel-banner-item, 33 | #appMenu-popup .toolbaritem-combined-buttons toolbarbutton:not(#appMenu-fxa-label), 34 | #context-navigation menuitem, 35 | .identity-popup-preferences-button:not(#hack), 36 | .findbar-container toolbarbutton, 37 | #sidebar-switcher-target, 38 | #viewButton, 39 | .close-icon:not(.tab-close-button), 40 | button.close, 41 | .menulist-label-box, 42 | .expander-down, .expander-up, 43 | .notification-button, 44 | #identity-popup-security-expander, 45 | .panel-info-button, 46 | .panel-button, 47 | #PanelUI-panic-view-button, 48 | .tracking-protection-button, 49 | .dialog-button, 50 | .autocomplete-richlistitem[type="loginsFooter"], 51 | .dialog-button-box button, 52 | .searchbar-engine-one-off-item, 53 | .permission-popup-permission-remove-button, 54 | .button.connect-device, 55 | #item-choose button, 56 | #editBMPanel_newFolderButton, 57 | .unified-extensions-item-menu-button { 58 | -moz-appearance: none !important; 59 | align-items: center !important; 60 | background-color: var(--gnome-button-background) !important; 61 | border-radius: var(--gnome-button-radius) !important; 62 | border: 0 !important; 63 | color: var(--gnome-window-color) !important; 64 | font: menu !important; 65 | font-weight: bold !important; 66 | max-height: var(--gnome-button-size) !important; 67 | min-height: var(--gnome-button-size) !important; 68 | min-width: var(--gnome-button-size) !important; 69 | outline: 0 !important; 70 | padding: 0 1px !important; 71 | transition: background var(--gnome-animation-time); 72 | -moz-box-align: center !important; 73 | 74 | &:not([disabled="true"]) { 75 | /* Hover buttons */ 76 | &:hover { 77 | outline: 0 !important; 78 | background-color: var(--gnome-button-hover-background) !important; 79 | } 80 | /* Active buttons */ 81 | &:active, &.active { 82 | background-color: var(--gnome-button-active-background) !important; 83 | } 84 | /* Checked buttons */ 85 | &[selected], &[checked], &[open] { 86 | background-color: var(--gnome-button-checked-background) !important; 87 | 88 | &:hover { 89 | background-color: var(--gnome-button-checked-hover-background) !important; 90 | } 91 | &:active { 92 | background-color: var(--gnome-button-checked-active-background) !important; 93 | } 94 | } 95 | } 96 | 97 | /* Disabled buttons */ 98 | &[disabled="true"] { 99 | opacity: 0.5 !important; 100 | } 101 | } 102 | .subviewbutton-iconic { 103 | -moz-box-pack: center !important; 104 | } 105 | 106 | /* Flat Buttons */ 107 | #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.titlebar-button), 108 | :root[inFullscreen] .titlebar-button.titlebar-restore, 109 | .close-icon:not(.tab-close-button), 110 | button.close, 111 | .panel-info-button, 112 | .permission-popup-permission-remove-button, 113 | .unified-extensions-item-menu-button { 114 | background-color: transparent !important; 115 | transition: background var(--gnome-animation-time); 116 | 117 | &:not([disabled="true"]) { 118 | /* Hover buttons */ 119 | &:hover { 120 | background-color: var(--gnome-hover-color) !important; 121 | } 122 | /* Active buttons */ 123 | &:active { 124 | background-color: var(--gnome-active-color) !important; 125 | } 126 | /* Checked buttons */ 127 | &[selected], &[checked], &[open] { 128 | background-color: var(--gnome-selected-color) !important; 129 | 130 | &:hover { 131 | background-color: var(--gnome-selected-hover-color) !important; 132 | } 133 | &:active { 134 | background-color: var(--gnome-selected-active-color) !important; 135 | } 136 | } 137 | } 138 | 139 | /* Disabled buttons */ 140 | &[disabled="true"] { 141 | opacity: 0.3 !important; 142 | } 143 | } 144 | 145 | /* Buttons with suggested action */ 146 | #appMenu-popup .panel-banner-item[notificationid="update-restart"], 147 | button.popup-notification-primary-button:not(#hack), 148 | #editBookmarkPanelDoneButton, 149 | #tracking-action-block, 150 | .button.connect-device { 151 | &:not(#hack):not(#hack) { 152 | background-color: var(--gnome-button-suggested-background) !important; 153 | color: white !important; 154 | } 155 | 156 | &:not([disabled="true"]):not(#hack):not(#hack) { 157 | &:hover { 158 | background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) !important; 159 | } 160 | &:active { 161 | background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)) !important; 162 | } 163 | } 164 | } 165 | 166 | /* Buttons with destructive action */ 167 | .panel-footer button#editBookmarkPanelRemoveButton, 168 | #PanelUI-panic-view-button { 169 | background-color: var(--gnome-button-destructive-background) !important; 170 | color: var(--gnome-destructive) !important; 171 | 172 | &:not([disabled="true"]):not(#hack):not(#hack) { 173 | &:hover { 174 | background-color: var(--gnome-button-destructive-hover-background) !important; 175 | } 176 | &:active { 177 | background-color: var(--gnome-button-destructive-active-background) !important; 178 | } 179 | } 180 | } 181 | 182 | /* Buttons with margins */ 183 | #nav-bar toolbarbutton:not(#urlbar-zoom-button, #urlbar-searchmode-switcher):not(.subviewbutton):not(.titlebar-button), 184 | .notification-button, 185 | .subviewbutton.panel-subview-footer:not(:only-of-type), 186 | .panel-footer button:not(:only-of-type) { 187 | margin: 0 calc(var(--gnome-toolbar-spacing) / 2) !important; 188 | } 189 | .close-icon:not(.tab-close-button) { 190 | margin-left: var(--gnome-toolbar-spacing) !important; 191 | } 192 | 193 | /* Text buttons */ 194 | menulist, 195 | .customizationmode-button, 196 | #sidebar-switcher-target, 197 | .subviewbutton.panel-subview-footer, 198 | .panel-footer button, 199 | #appMenu-popup .panel-banner-item, 200 | #appMenu-popup #appMenu-zoomReset-button2:not(#hack), 201 | #tracking-protection-preferences-button:not(#hack), 202 | .findbar-container toolbarbutton.findbar-button, 203 | .notification-button, 204 | #PanelUI-panic-view-button, 205 | .tracking-protection-button, 206 | .panel-button, 207 | .dialog-button, 208 | .autocomplete-richlistitem[type="loginsFooter"], 209 | .dialog-button-box button, 210 | .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > #appMenu-fxa-label2:not(#hack), 211 | .button.connect-device, 212 | #item-choose button, 213 | #editBMPanel_newFolderButton { 214 | padding: 2px 9px !important; 215 | } 216 | .subviewbutton.panel-subview-footer label, 217 | .panel-footer button, 218 | #appMenu-popup .panel-banner-item .toolbarbutton-text, 219 | #appMenu-popup #appMenu-zoomReset-button2:not(#hack), 220 | #tracking-protection-preferences-button:not(#hack), 221 | .findbar-container toolbarbutton.findbar-button, 222 | .notification-button, 223 | #PanelUI-panic-view-button, 224 | .tracking-protection-button, 225 | .dialog-button, 226 | .autocomplete-richlistitem[type="loginsFooter"], 227 | .dialog-button-box button, 228 | .button.connect-device, 229 | #item-choose button { 230 | text-align: center !important; 231 | } 232 | 233 | /* Circle buttons */ 234 | #downloadsPanel-mainView .download-state .downloadButton, 235 | .permission-popup-permission-remove-button:not(#hack) { 236 | border-radius: 100% !important; 237 | } 238 | 239 | /* Combined buttons */ 240 | #nav-bar .toolbaritem-combined-buttons:not(.unified-extensions-item) toolbarbutton:not(:last-of-type):not(#hack), 241 | #appMenu-popup .toolbaritem-combined-buttons:not(.unified-extensions-item) toolbarbutton:not(:last-of-type):not(#appMenu-zoomEnlarge-button), 242 | #context-navigation menuitem:not(:last-of-type), 243 | .findbar-container toolbarbutton.findbar-find-previous, 244 | .findbar-button:not(:last-of-type), 245 | .search-panel-one-offs .searchbar-engine-one-off-item:not(:last-child), 246 | .popup-notification-secondary-button:not([dropmarkerhidden="true"]):not(#hack) { 247 | border-start-end-radius: 0 !important; 248 | border-end-end-radius: 0 !important; 249 | border-right-width: 0 !important; 250 | margin-inline-end: 0 !important; 251 | } 252 | 253 | #nav-bar .toolbaritem-combined-buttons:not(.unified-extensions-item) toolbarbutton:not(:first-of-type):not(#hack), 254 | #appMenu-popup .toolbaritem-combined-buttons:not(.unified-extensions-item) toolbarbutton:not(:first-of-type):not(#appMenu-fullscreen-button), 255 | #context-navigation menuitem:not(:first-of-type), 256 | .findbar-container toolbarbutton.findbar-find-previous, 257 | .findbar-container toolbarbutton.findbar-find-next, 258 | .findbar-button:not(:first-of-type), 259 | .search-panel-one-offs .searchbar-engine-one-off-item:not(:first-child), 260 | .popup-notification-dropmarker:not(#hack) { 261 | border-end-start-radius: 0 !important; 262 | border-start-start-radius: 0 !important; 263 | margin-inline-start: 0 !important; 264 | } 265 | 266 | #nav-bar .toolbaritem-combined-buttons:not(.unified-extensions-item) { 267 | margin-left: 0 !important; 268 | margin-right: 0 !important; 269 | } 270 | -------------------------------------------------------------------------------- /theme/parts/controls.css: -------------------------------------------------------------------------------- 1 | /* Controls */ 2 | /* Switchers, Checkboxes, etc. */ 3 | 4 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 5 | 6 | /* Checkbox */ 7 | input[type="checkbox"], 8 | checkbox:not(.treenode-checkbox) > .checkbox-check { 9 | appearance: none !important; 10 | border: 0 !important; 11 | border-radius: 6px !important; 12 | color: var(--gnome-window-color) !important; 13 | height: 20px !important; 14 | width: 20px !important; 15 | } 16 | input[type="checkbox"]:not(:checked), 17 | checkbox:not(.treenode-checkbox) > .checkbox-check:not([checked]) { 18 | background-color: transparent !important; 19 | box-shadow: inset 0 0 0 2px var(--gnome-trough-background); 20 | } 21 | input[type="checkbox"]:not(:checked):hover, 22 | checkbox:not(.treenode-checkbox) > .checkbox-check:not([checked]):hover { 23 | box-shadow: inset 0 0 0 2px var(--gnome-trough-hover-background); 24 | } 25 | input[type="checkbox"]:checked, 26 | checkbox:not(.treenode-checkbox) > .checkbox-check[checked] { 27 | background-color: var(--gnome-accent-bg) !important; 28 | /* NOTE: var(--gnome-icon-select-symbolic) doesn't load in modal dialogs */ 29 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 0 16 16' width='16px'%3E%3Cpath d='m 15 3.484375 l -1 -1 l -7.46875 7.515625 l -3.414062 -3.476562 l -2 2 l 5.414062 5.476562 l 9.46875 -9.515625 z m 0 0' fill='context-fill' fill-opacity='context-fill-opacity' /%3E%3C/svg%3E") !important; 30 | background-size: 14px !important; 31 | background-repeat: no-repeat; 32 | background-position: center; 33 | fill: white !important; 34 | -moz-context-properties: fill; 35 | } 36 | 37 | /* Radio */ 38 | input[type="radio"], 39 | radio > .radio-check { 40 | appearance: none !important; 41 | border: 0 !important; 42 | border-radius: 50% !important; 43 | color: var(--gnome-window-color) !important; 44 | height: 20px !important; 45 | padding: 3px !important; 46 | width: 20px !important; 47 | 48 | radiogroup:focus-visible radio[focused] > & { 49 | outline: 2px solid var(--gnome-focus-border-color) !important; 50 | outline-offset: 2px !important; 51 | } 52 | } 53 | input[type="radio"][aria-checked="false"], 54 | radio > .radio-check:not([selected]) { 55 | background-color: transparent !important; 56 | box-shadow: inset 0 0 0 2px var(--gnome-trough-background); 57 | } 58 | input[type="radio"][aria-checked="false"]:hover, 59 | radio > .radio-check:not([selected]):hover { 60 | box-shadow: inset 0 0 0 2px var(--gnome-trough-hover-background); 61 | } 62 | input[type="radio"][aria-checked="true"], 63 | radio > .radio-check[selected] { 64 | background-color: var(--gnome-accent-bg) !important; 65 | background-image: var(--gnome-icon-bullet-symbolic) !important; 66 | background-repeat: no-repeat; 67 | background-position: center; 68 | fill: white !important; 69 | -moz-context-properties: fill; 70 | } 71 | 72 | .radio-label-box { 73 | outline: 0 !important; 74 | } 75 | 76 | .radio-label { 77 | margin-inline-start: 3px !important; 78 | } 79 | 80 | /* Switchers */ 81 | .toggle-button { 82 | --toggle-height: 26px !important; 83 | --toggle-width: 48px !important; 84 | --toggle-border-radius: 24px !important; 85 | --toggle-border-color: var(--gnome-trough-background) !important; 86 | --toggle-background-color: var(--gnome-trough-background) !important; 87 | --toggle-background-color-pressed: var(--gnome-accent-bg) !important; 88 | --toggle-dot-height: 22px !important; 89 | --toggle-dot-width: 22px !important; 90 | --toggle-dot-background-color: #FFF !important; 91 | --toggle-dot-background-color-on-pressed: #FFF !important; 92 | --toggle-dot-transform-x: calc(var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)) !important; 93 | 94 | border: 0 !important; 95 | } 96 | .toggle-button::before { 97 | box-shadow: 0 2px 4px rgba(0, 0, 0, .2); 98 | } 99 | 100 | link[href="chrome://global/content/elements/moz-toggle.css"] ~ .description { 101 | --input-space-offset: calc(48px + 8px) !important; 102 | margin-block-start: 0 !important; 103 | } 104 | -------------------------------------------------------------------------------- /theme/parts/csd.css: -------------------------------------------------------------------------------- 1 | /* GNOME CSD styles for headerbar on Firefox */ 2 | 3 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 4 | 5 | :root[customtitlebar] { 6 | /* Headerbar top border corners rounded */ 7 | &[sizemode="normal"]:not([gtktiledwindow="true"]) #nav-bar { 8 | border-radius: env(-moz-gtk-csd-titlebar-radius, 8px) env(-moz-gtk-csd-titlebar-radius, 8px) 0 0 !important; 9 | } 10 | 11 | /* Always show nav bar window buttons*/ 12 | #nav-bar > .titlebar-buttonbox-container { 13 | display: flex !important; 14 | } 15 | 16 | #toolbar-menubar { 17 | /* Prevent menubar from breaking */ 18 | &:not([inactive=true]) { 19 | height: 30px !important; 20 | margin-bottom: 8px; 21 | } 22 | 23 | /* Always hide menu bar window buttons*/ 24 | & > .titlebar-buttonbox-container { 25 | display: none !important; 26 | } 27 | } 28 | 29 | &[inFullscreen] { 30 | /* Remove close and minimize buttons from fullscreen buttons */ 31 | .titlebar-buttonbox-container .titlebar-min, 32 | .titlebar-buttonbox-container .titlebar-close { 33 | display: none !important; 34 | } 35 | 36 | /* Force the restore button to appear regardless of maximize button's status */ 37 | &:not([inDOMFullscreen]) { 38 | .titlebar-buttonbox-container { 39 | visibility: visible !important; 40 | } 41 | .titlebar-restore { 42 | display: inherit !important; 43 | } 44 | } 45 | } 46 | 47 | &:not([inFullscreen]) { 48 | .titlebar-buttonbox-container { 49 | padding: 0 8px; 50 | } 51 | 52 | /* Window buttons style */ 53 | .titlebar-button { 54 | background: var(--gnome-button-background) !important; 55 | border-radius: 100% !important; 56 | height: 24px !important; 57 | transition: background var(--gnome-animation-time); 58 | width: 24px !important; 59 | 60 | &:not([disabled]):hover { 61 | background: var(--gnome-button-hover-background) !important; 62 | 63 | & > .toolbarbutton-icon { 64 | background: none !important; 65 | } 66 | } 67 | 68 | &:not([disabled]):active { 69 | background: var(--gnome-button-active-background) !important; 70 | } 71 | 72 | &::-moz-window-inactive { 73 | filter: opacity(0.5); 74 | } 75 | } 76 | } 77 | 78 | .titlebar-buttonbox-container { 79 | align-items: center; 80 | padding: 0 3px; 81 | 82 | .titlebar-buttonbox { 83 | appearance: none !important; 84 | gap: 13px; 85 | 86 | .titlebar-button { 87 | padding: 0 !important; 88 | margin: 0 !important; 89 | 90 | &:hover > .toolbarbutton-icon { 91 | background: none !important; 92 | } 93 | 94 | @media not -moz-pref("gnomeTheme.noThemedIcons") { 95 | & > .toolbarbutton-icon { 96 | appearance: none !important; 97 | height: 16px !important; 98 | padding: 0 !important; 99 | stroke: none !important; 100 | width: 16px !important; 101 | -moz-context-properties: fill, fill-opacity !important; 102 | } 103 | } 104 | 105 | @media -moz-pref("widget.gtk.non-native-titlebar-buttons.enabled") { 106 | &:-moz-lwtheme { /* Override config */ 107 | & > .toolbarbutton-icon { 108 | appearance: auto !important 109 | } 110 | } 111 | } 112 | } 113 | } 114 | } 115 | 116 | .titlebar-spacer { 117 | display: none; 118 | } 119 | } 120 | 121 | /* OPTIONAL: Allow draging the window from headerbar buttons */ 122 | @media -moz-pref("gnomeTheme.dragWindowHeaderbarButtons") { 123 | :root[customtitlebar] #nav-bar *, 124 | :root[customtitlebar] #titlebar .titlebar-button { 125 | -moz-window-dragging: drag; 126 | } 127 | 128 | /* Avoid window dragging from urlbar */ 129 | :root[customtitlebar] #nav-bar .urlbar-input-box, 130 | :root[customtitlebar] #nav-bar .urlbar-input-box * { 131 | -moz-window-dragging: no-drag !important; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /theme/parts/dialogs.css: -------------------------------------------------------------------------------- 1 | /* Dialogs */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | window { 6 | padding: 0 !important; 7 | width: initial !important; 8 | } 9 | 10 | dialog { 11 | padding: var(--gnome-dialog-padding) !important; 12 | } 13 | 14 | /* Dialog box */ 15 | .dialogBox { 16 | border-radius: var(--gnome-dialog-radius) !important; 17 | margin-top: 0 !important; 18 | } 19 | .dialogBox[resizable="true"] { 20 | margin-top: var(--gnome-dialog-padding) !important; 21 | } 22 | 23 | .dialogOverlay[topmost="true"]:not(.dialogOverlay-window-modal-dialog-subdialog), #window-modal-dialog::backdrop { 24 | background-color: rgba(0, 0, 0, .5) !important; 25 | } 26 | 27 | /* Modal dialogs */ 28 | #window-modal-dialog { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | height: 100vh; 33 | } 34 | 35 | window[role="dialog"] { 36 | background: var(--gnome-menu-background) !important; 37 | border: 0 !important; 38 | box-shadow: var(--gnome-menu-shadow) !important; 39 | padding: 0 !important; 40 | } 41 | 42 | dialog#handling { 43 | display: flex; 44 | flex-direction: column; 45 | } 46 | 47 | .tab-prompt-dialog .dialogOverlay { 48 | justify-content: center; 49 | } 50 | 51 | /* Content */ 52 | dialog { 53 | &:not(.sizeDetermined) { 54 | display: grid !important; 55 | justify-content: stretch; 56 | min-width: fit-content; 57 | } 58 | 59 | #titleContainer { 60 | justify-content: center !important; 61 | } 62 | 63 | #titleCropper { 64 | &[overflown] { 65 | mask-image: none !important; 66 | 67 | #titleText { 68 | display: inline-block !important; 69 | max-width: 100% !important; 70 | overflow: hidden !important; 71 | text-overflow: ellipsis; 72 | } 73 | } 74 | 75 | &:not([nomaskfade]) { 76 | display: initial !important; 77 | } 78 | } 79 | 80 | #titleText { 81 | font-size: 20px !important; 82 | font-weight: 800 !important; 83 | text-align: center !important; 84 | white-space: initial !important; 85 | } 86 | 87 | .titleIcon { 88 | display: none; 89 | } 90 | 91 | #description-box { 92 | text-align: center; 93 | #description { 94 | font-size: 20px !important; 95 | font-weight: 800 !important; 96 | } 97 | } 98 | 99 | #infoContainer { 100 | text-align: center; 101 | } 102 | 103 | #checkboxContainer { 104 | align-items: center !important; 105 | } 106 | } 107 | 108 | /* Buttons */ 109 | .dialog-button-box { 110 | background: transparent !important; 111 | display: flex !important; 112 | gap: 12px; 113 | margin-top: auto; 114 | padding: 0 !important; 115 | 116 | /* if dialog has at least 3 buttons */ 117 | &:has(button:not([hidden])[dlgtype="extra1"]) { 118 | min-width: 40rem; 119 | } 120 | 121 | button { 122 | min-height: 44px !important; 123 | max-height: unset !important; 124 | padding: 10px 14px !important; 125 | margin: 0 !important; 126 | border-radius: 12px !important; 127 | flex: 1; 128 | border-bottom: 0 !important; 129 | 130 | .button-box { 131 | max-width: 100%; 132 | .button-text { 133 | max-width: 100%; 134 | &::before { 135 | max-width: 100% !important; 136 | overflow: hidden !important; 137 | text-overflow: ellipsis; 138 | } 139 | } 140 | } 141 | } 142 | 143 | .button-spacer { 144 | display: none; 145 | } 146 | } 147 | 148 | /* Browser dialogs */ 149 | #dialogGrid { 150 | padding-bottom: 8px !important; 151 | } 152 | 153 | /* Bookmark dialog */ 154 | #editBookmarkPanelContent { 155 | padding-bottom: var(--gnome-dialog-padding) !important; 156 | } 157 | 158 | /* Hadler dialog */ 159 | #os-default-handler { 160 | image { 161 | display: none !important; 162 | } 163 | .name { 164 | font-weight: normal !important; 165 | } 166 | } 167 | 168 | /* Fullscreen warning */ 169 | #fullscreen-warning { 170 | background: rgba(0, 0, 0, 0.7) !important; 171 | border-radius: 150px !important; 172 | border: none !important; 173 | color: rgba(255, 255, 255, .9) !important; 174 | padding: 6px 12px !important; 175 | 176 | &::before { 177 | background-image: var(--gnome-icon-channel-secure-symbolic) !important; 178 | height: 16px !important; 179 | width: 16px !important; 180 | } 181 | 182 | .pointerlockfswarning-domain-text { 183 | font-size: 16px !important; 184 | font-weight: normal !important; 185 | margin: 0 12px 0 6px !important; 186 | } 187 | } 188 | 189 | #fullscreen-exit-button { 190 | appearance: none !important; 191 | background-color: rgba(255, 255, 255, .09) !important; 192 | border-radius: var(--gnome-button-radius) !important; 193 | border: 0 !important; 194 | padding: 2px 16px !important; 195 | height: var(--gnome-button-size) !important; 196 | min-height: var(--gnome-button-size) !important; 197 | color: rgba(255, 255, 255, .9) !important; 198 | font-weight: bold !important; 199 | transition: background var(--gnome-animation-time); 200 | 201 | &:hover { 202 | background-color: rgba(255, 255, 255, .135) !important; 203 | } 204 | &:active { 205 | background-color: rgba(255, 255, 255, .27) !important; 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /theme/parts/entries.css: -------------------------------------------------------------------------------- 1 | /* Entries */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Entries */ 6 | input[type="text"]:not(.tree-input), 7 | input[type="password"], 8 | #urlbar, 9 | #searchbar, 10 | #search-box, 11 | .findbar-textbox, 12 | .tabsFilter, 13 | .popup-notification-body input { 14 | -moz-appearance: none !important; 15 | background: var(--gnome-entry-background) !important; 16 | outline: 2px solid transparent !important; 17 | border: 0 !important; 18 | border-radius: var(--gnome-entry-radius) !important; 19 | box-shadow: none !important; 20 | color: var(--gnome-entry-color) !important; 21 | height: var(--gnome-entry-height) !important; 22 | max-height: var(--gnome-entry-height) !important; 23 | margin: 0 !important; 24 | padding: 6px !important; 25 | box-sizing: border-box; 26 | transition-property: outline, outline-offset; 27 | transition-duration: var(--gnome-animation-time); 28 | 29 | /* Error */ 30 | &[status="notfound"] { 31 | color: var(--gnome-error) !important; 32 | } 33 | 34 | &:-moz-window-inactive { 35 | color: var(--gnome-inactive-entry-color) !important; 36 | outline: 2px solid transparent !important; 37 | } 38 | } 39 | 40 | /* Entries focused */ 41 | input[type="text"]:not(.tree-input):focus, 42 | input[type="password"]:focus, 43 | #urlbar[breakout][breakout-extend], 44 | #urlbar[focused]:not([suppress-focus-border]), 45 | #searchbar:focus-within, 46 | #search-box[focused], 47 | .findbar-textbox[focused], 48 | .findbar-textbox:focus, 49 | .tabsFilter[focused], 50 | .popup-notification-body input:focus { 51 | outline: 2px solid var(--gnome-entry-focused-border-color) !important; 52 | outline-offset: -2px; 53 | 54 | /* Error */ 55 | &[status="notfound"] { 56 | outline-color: var(--gnome-entry-error-focused-border-color) !important; 57 | } 58 | } 59 | 60 | /* Entries combined */ 61 | .findbar-textbox:not(.minimal) { 62 | border-top-right-radius: 0 !important; 63 | border-bottom-right-radius: 0 !important; 64 | border-right-width: 0 !important; 65 | } 66 | 67 | /* Entry button */ 68 | .identity-box-button, 69 | #tracking-protection-icon-container, 70 | #notification-popup-box, 71 | .urlbar-page-action, 72 | .urlbar-icon { 73 | fill-opacity: 0.8 !important; 74 | transition-property: fil, fill-opacity, opacity; 75 | transition-duration: var(--gnome-animation-time); 76 | } 77 | 78 | .identity-box-button:hover:not([open="true"]), 79 | #tracking-protection-icon-container:hover:not([open="true"]), 80 | #notification-popup-box:hover:not([open="true"]), 81 | .urlbar-page-action:hover:not([open="true"]), 82 | .urlbar-page-action:hover:not([open="true"]) .urlbar-icon, 83 | .urlbar-icon:not([disabled]):hover { 84 | background: none !important; 85 | fill-opacity: 1 !important; 86 | } 87 | 88 | .identity-box-button:hover:active, 89 | .identity-box-button[open=true], 90 | #tracking-protection-icon-container:hover:active, 91 | #tracking-protection-icon-container[open=true], 92 | #notification-popup-box:hover:active, 93 | #notification-popup-box[open=true], 94 | .urlbar-page-action:hover:active, 95 | .urlbar-page-action[open=true], 96 | .urlbar-page-action:hover:active .urlbar-icon, 97 | .urlbar-page-action[open=true] .urlbar-icon { 98 | background: none !important; 99 | fill-opacity: 1 !important; 100 | } 101 | 102 | /* Entries fixes */ 103 | #urlbar-container, #search-container { 104 | padding: 0 !important; 105 | margin: 0 !important; 106 | } 107 | .urlbar-input-container { 108 | background: transparent !important; 109 | border: 0 !important; 110 | } 111 | #urlbar, #searchbar { 112 | margin: 0 calc(var(--gnome-toolbar-spacing) / 2) !important; 113 | padding: 0 3px !important; 114 | &[unifiedsearchbutton-available=""] { 115 | padding-inline-start: 0 !important; 116 | } 117 | 118 | } 119 | .searchbar-textbox { 120 | border: 0 !important; 121 | padding: 0 !important; 122 | margin: 0 !important; 123 | min-height: auto !important; 124 | } 125 | #searchbar > .searchbar-textbox[focused] .searchbar-search-button:not(#hack) { 126 | margin: 0 !important; 127 | } 128 | #urlbar[focused]:not([suppress-focus-border]) > #urlbar-background { 129 | outline: 0 !important; 130 | } 131 | -------------------------------------------------------------------------------- /theme/parts/findbar.css: -------------------------------------------------------------------------------- 1 | /* Find bar */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | findbar { 6 | padding: var(--gnome-toolbar-padding) !important; 7 | position: relative; 8 | 9 | .findbar-container { 10 | align-items: center; 11 | display: flex; 12 | justify-content: flex-start; 13 | position: relative; 14 | flex-direction: row; 15 | margin: 0 !important; 16 | margin-inline-end: var(--gnome-toolbar-padding) !important; 17 | height: auto !important; 18 | 19 | .findbar-textbox-wrapper { 20 | order: 0; 21 | } 22 | .findbar-label.found-matches { 23 | font-weight: normal !important; 24 | order: 1; 25 | } 26 | .findbar-label.findbar-find-status { 27 | font-weight: normal !important; 28 | order: 4; 29 | } 30 | checkbox { 31 | order: 2; 32 | } 33 | 34 | .findbar-entire-word { 35 | margin-inline-end: auto !important; 36 | } 37 | } 38 | 39 | .findbar-closebutton { 40 | margin: 0 !important; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /theme/parts/headerbar.css: -------------------------------------------------------------------------------- 1 | /* Header bar */ 2 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 3 | 4 | /* Headerbar */ 5 | #nav-bar { 6 | background: var(--gnome-headerbar-background) !important; 7 | border: 0 !important; 8 | padding: var(--gnome-toolbar-padding) calc(var(--gnome-toolbar-padding) / 2) !important; 9 | } 10 | 11 | /* Add private window headerbar indicator */ 12 | :root[privatebrowsingmode="temporary"] #nav-bar toolbarspring:first-of-type:before { 13 | background: var(--gnome-icon-eye-not-looking-symbolic) no-repeat; 14 | background-size: 64px 64px; 15 | content: ""; 16 | display: block; 17 | position: absolute; 18 | width: 64px; 19 | height: 64px; 20 | top: 0; 21 | transform: translate(15px, -9px); 22 | fill: var(--gnome-window-color) !important; 23 | fill-opacity: 0.15 !important; 24 | -moz-context-properties: fill, fill-opacity; 25 | } 26 | 27 | /* Hide tabsbar default private browsing indicator */ 28 | .private-browsing-indicator-with-label { 29 | display: none !important; 30 | } 31 | 32 | /* Overlay headerbar on fullscreen */ 33 | @media -moz-pref("browser.fullscreen.autohide") { 34 | #navigator-toolbox[inFullscreen] { 35 | position: fixed !important; 36 | transition: margin var(--gnome-animation-time) ease-in-out 0s !important; 37 | line-height: 0; 38 | z-index: 1; 39 | width: 100vw; 40 | } 41 | 42 | #navigator-toolbox[inFullscreen]:hover, 43 | #navigator-toolbox[inFullscreen]:focus-within { 44 | margin-top: 0 !important; 45 | } 46 | 47 | #navigator-toolbox[inFullscreen] > * { 48 | line-height: normal; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /theme/parts/icons.css: -------------------------------------------------------------------------------- 1 | /* Replace icons */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Icons color */ 6 | .toolbarbutton-icon:not([class*="identity-color-"] .toolbarbutton-icon), 7 | link[href="chrome://global/content/elements/moz-button.css"] + button[type~="icon"], 8 | menuitem:not([class*='identity']) .menu-iconic-left .menu-iconic-icon, 9 | #vertical-tabs-newtab-button .toolbarbutton-icon, 10 | .urlbar-page-action:not([readeractive]), 11 | .urlbar-icon, 12 | #blocked-permissions-container > .blocked-permission-icon, 13 | .button-icon:not(#hack), 14 | .bookmark-item[container], 15 | .notification-anchor-icon, 16 | .protections-popup-category::after, 17 | .protections-popup-footer-icon, 18 | #identity-popup-mainView .subviewbutton-nav::after, 19 | .widget-overflow-list .subviewbutton-nav::after, 20 | .PanelUI-subView .subviewbutton-nav::after, 21 | #identity-popup[connection^="secure"] .identity-popup-security-connection, 22 | .panel-info-button > image, 23 | .menu-right, 24 | .expander-down > .button-box, 25 | #sidebar-switcher-arrow, 26 | #sidebar-icon, 27 | #viewButton .button-menu-dropmarker, 28 | .menulist-label-box:after, 29 | .expander-up > .button-box, 30 | #urlbar:not(.searchButton) > .urlbar-input-container > #identity-box[pageproxystate="invalid"] > #identity-icon, 31 | .searchbar-search-icon, 32 | .textbox-search-sign, 33 | treechildren::-moz-tree-twisty, 34 | treechildren::-moz-tree-image, 35 | .item.client .item-twisty-container, 36 | menuitem[type="checkbox"], 37 | menuitem[type="checkbox"][checked="true"], 38 | menuitem[type="radio"], 39 | menuitem[type="radio"][checked="true"], 40 | .tab-icon-overlay, 41 | .tab-icon-stack::before, 42 | .close-icon:not(.tab-close-button), 43 | button.close::before, 44 | #urlbar-search-mode-indicator-close, 45 | #tracking-protection-icon, 46 | #identity-icon, 47 | #permissions-granted-icon, 48 | #downloads-indicator-icon, 49 | .textbox-search-clear, 50 | .urlbarView-type-icon, 51 | radio > .radio-check, 52 | link[href="chrome://global/skin/dropmarker.css"] + image, 53 | :root[customtitlebar] .titlebar-buttonbox .titlebar-button .toolbarbutton-icon { 54 | fill: var(--gnome-toolbar-icon-fill) !important; 55 | -moz-context-properties: fill; 56 | } 57 | .urlbar-icon:-moz-window-inactive, 58 | #urlbar:-moz-window-inactive image, 59 | .toolbarbutton-icon:-moz-window-inactive, 60 | :root[customtitlebar] .titlebar-buttonbox .titlebar-button .toolbarbutton-icon:-moz-window-inactive { 61 | opacity: 0.5 !important; 62 | } 63 | 64 | /* Dimmed icons */ 65 | #urlbar:not(.searchButton) > .urlbar-input-container > #identity-box[pageproxystate="invalid"] > #identity-icon, 66 | .searchbar-search-icon, 67 | .textbox-search-sign, 68 | .textbox-search-clear { 69 | opacity: 0.7 !important; 70 | } 71 | .textbox-search-clear:hover { 72 | opacity: 1 !important; 73 | } 74 | 75 | /* Fix icons sizes */ 76 | .permission-popup-permission-remove-button > .button-box > .button-icon, 77 | .menu-iconic-icon, 78 | link[href="chrome://global/skin/dropmarker.css"] + image, 79 | .toolbarbutton-combined-buttons-dropmarker { 80 | height: 16px !important; 81 | width: 16px !important; 82 | } 83 | /* Fix icon color */ 84 | #sidebar-icon { 85 | opacity: 1 !important; 86 | } 87 | treechildren::-moz-tree-twisty, 88 | treechildren::-moz-tree-image { 89 | fill-opacity: 1 !important; 90 | } 91 | 92 | /* Icons active color */ 93 | treechildren::-moz-tree-twisty(selected, focus), 94 | treechildren::-moz-tree-twisty(selected, focus, open), 95 | treechildren::-moz-tree-image(selected, focus), 96 | treechildren::-moz-tree-image(selected, focus, open), 97 | .item.client:focus .item-twisty-container, 98 | .sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty, 99 | .sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty(open) { 100 | fill: #fff !important; 101 | } 102 | 103 | /* Fix flat buttons icons aproach */ 104 | button.close::before { 105 | content: ""; 106 | display: block; 107 | background-position: center center; 108 | background-repeat: no-repeat; 109 | height: 100%; 110 | width: 100%; 111 | } 112 | 113 | /* Fix main menu zoom controls icons */ 114 | #appMenu-zoom-controls2 .toolbarbutton-icon { 115 | padding: 0 !important; 116 | padding-block: 0 !important; 117 | padding-inline: 0 !important; 118 | } 119 | 120 | 121 | @media not -moz-pref("gnomeTheme.noThemedIcons") { 122 | /* Scroll icons */ 123 | #scrollbutton-up { 124 | list-style-image: var(--scrollbutton-icon-name) !important; 125 | } 126 | #scrollbutton-down { 127 | list-style-image: var(--scrollbutton-icon-name) !important; 128 | } 129 | arrowscrollbox { 130 | --scrollbutton-icon-name: var(--gnome-icon-pan-down-symbolic); 131 | } 132 | arrowscrollbox[orient="horizontal"] { 133 | --scrollbutton-icon-name: var(--gnome-icon-pan-start-symbolic); 134 | } 135 | 136 | /* Popovers subview menu arrow */ 137 | #identity-popup-mainView .subviewbutton-nav::after, 138 | .widget-overflow-list .subviewbutton-nav::after, 139 | .PanelUI-subView .subviewbutton-nav::after, 140 | .protections-popup-category::after, 141 | .subviewbutton-back .toolbarbutton-icon, 142 | .menu-right { 143 | fill-opacity: 1 !important; 144 | opacity: .3; 145 | } 146 | .menu-right { 147 | -moz-appearance: none !important; 148 | list-style-image: var(--gnome-icon-go-next-symbolic) !important; 149 | width: 16px !important; 150 | height: 16px !important; 151 | } 152 | #identity-popup-mainView .subviewbutton-nav::after, 153 | .widget-overflow-list .subviewbutton-nav::after, 154 | .PanelUI-subView .subviewbutton-nav::after { 155 | content: "" !important; 156 | background: var(--gnome-icon-go-next-symbolic); 157 | background-size: contain; 158 | height: 16px; 159 | width: 16px; 160 | } 161 | .protections-popup-category::after { 162 | content: var(--gnome-icon-go-next-symbolic) !important; 163 | } 164 | 165 | /* Popovers subview back button */ 166 | .subviewbutton-back { 167 | list-style-image: var(--gnome-icon-go-previous-symbolic) !important; 168 | } 169 | 170 | /* Arrow down buttons */ 171 | .expander-down > .button-box, 172 | #sidebar-switcher-arrow, 173 | #viewButton .button-menu-dropmarker, 174 | .toolbarbutton-combined-buttons-dropmarker { 175 | -moz-appearance: none !important; 176 | list-style-image: var(--gnome-icon-pan-down-symbolic) !important; 177 | } 178 | .popup-notification-dropmarker dropmarker { 179 | -moz-appearance: none !important; 180 | content: var(--gnome-icon-pan-down-symbolic) !important; 181 | } 182 | #sidebar-switcher-arrow, 183 | #viewButton .button-menu-dropmarker { 184 | -moz-appearance: none !important; 185 | list-style-image: var(--gnome-icon-pan-down-symbolic) !important; 186 | width: 16px !important; 187 | height: 16px !important; 188 | } 189 | .menulist-label-box:after, 190 | link[href="chrome://global/skin/menulist.css"] ~ dropmarker { 191 | content: var(--gnome-icon-pan-down-symbolic) !important; 192 | } 193 | 194 | /* Arrow up buttons */ 195 | .expander-up > .button-box { 196 | list-style-image: var(--gnome-icon-pan-up-symbolic) !important; 197 | } 198 | 199 | /* Search entries */ 200 | #urlbar:not(.searchButton) > .urlbar-input-container > #identity-box[pageproxystate="invalid"] > #identity-icon, 201 | .searchbar-search-icon, 202 | .textbox-search-sign { 203 | list-style-image: url(../icons/edit-find-symbolic.svg) !important; 204 | } 205 | .textbox-search-sign { 206 | margin: 3px 0; 207 | max-height: 16px !important; 208 | width: 16px !important; 209 | } 210 | 211 | /* Findbar */ 212 | .findbar-find-previous { 213 | list-style-image: var(--gnome-icon-go-up-symbolic) !important; 214 | } 215 | .findbar-find-next { 216 | list-style-image: var(--gnome-icon-go-down-symbolic) !important; 217 | } 218 | 219 | /* Tree views */ 220 | treechildren::-moz-tree-twisty, 221 | .item.client .item-twisty-container { 222 | list-style-image: var(--gnome-icon-pan-end-symbolic) !important; 223 | width: 16px !important; 224 | height: 16px !important; 225 | } 226 | .item.client .item-twisty-container { 227 | background-image: var(--gnome-icon-pan-end-symbolic) !important; 228 | } 229 | treechildren::-moz-tree-twisty(open) { 230 | list-style-image: var(--gnome-icon-pan-down-symbolic) !important; 231 | } 232 | .item.client.closed .item-twisty-container { 233 | background-image: var(--gnome-icon-pan-down-symbolic) !important; 234 | } 235 | 236 | treechildren::-moz-tree-image(title, container), 237 | treechildren::-moz-tree-image(title, open) { 238 | list-style-image: var(--gnome-icon-folder-symbolic) !important; 239 | } 240 | treechildren::-moz-tree-image(title, query, dayContainer), 241 | treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { 242 | list-style-image: var(--gnome-icon-preferences-system-time-symbolic) !important; 243 | } 244 | 245 | /* Menu checkbox */ 246 | menuitem[type="checkbox"] { 247 | list-style-image: none !important; 248 | } 249 | menuitem[type="checkbox"][checked="true"] { 250 | list-style-image: var(--gnome-icon-select-symbolic) !important; 251 | } 252 | menuitem[type="checkbox"][disabled="true"] .menu-iconic-icon { 253 | opacity: 0.5; 254 | } 255 | 256 | /* Menu radio */ 257 | menuitem[type="radio"] { 258 | list-style-image: none !important; 259 | } 260 | menuitem[type="radio"][checked="true"] { 261 | list-style-image: var(--gnome-icon-bullet-symbolic) !important; 262 | } 263 | menuitem[type="radio"] .menu-iconic-icon { 264 | border-radius: 100%; 265 | border: 1px solid var(--gnome-toolbar-icon-fill); 266 | } 267 | menuitem[type="radio"][disabled="true"] .menu-iconic-icon { 268 | opacity: 0.5; 269 | } 270 | 271 | /* Dropmarker */ 272 | link[href="chrome://global/skin/dropmarker.css"] + image { 273 | list-style-image: var(--gnome-icon-pan-down-symbolic) !important; 274 | } 275 | 276 | /* Close button */ 277 | .close-icon:not(.tab-close-button), 278 | .identity-popup-permission-remove-button .button-icon, 279 | .permission-popup-permission-remove-button > .button-box > .button-icon { 280 | list-style-image: var(--gnome-icon-window-close-symbolic) !important; 281 | } 282 | #urlbar-search-mode-indicator-close, 283 | button.close::before { 284 | background-image: var(--gnome-icon-window-close-symbolic) !important; 285 | } 286 | @media (prefers-color-scheme: light) { 287 | .notificationbox-stack notification[type="critical"] .close-icon:not(.tab-close-button):not(:hover) { 288 | fill: #fff !important; 289 | } 290 | } 291 | @media (prefers-color-scheme: dark) { 292 | .notificationbox-stack notification[type="warning"] .close-icon:not(.tab-close-button):not(:hover) image { 293 | fill: rgb(46, 52, 54) !important; 294 | } 295 | } 296 | 297 | /* Window buttons */ 298 | :root[customtitlebar] .titlebar-buttonbox .titlebar-close .toolbarbutton-icon { 299 | list-style-image: var(--gnome-icon-window-close-symbolic) !important; 300 | } 301 | :root[customtitlebar] .titlebar-buttonbox .titlebar-max .toolbarbutton-icon { 302 | list-style-image: var(--gnome-icon-window-maximize-symbolic) !important; 303 | } 304 | :root[customtitlebar] .titlebar-buttonbox .titlebar-restore .toolbarbutton-icon { 305 | list-style-image: var(--gnome-icon-window-restore-symbolic) !important; 306 | } 307 | :root[customtitlebar][inFullscreen] .titlebar-buttonbox .titlebar-restore .toolbarbutton-icon { 308 | list-style-image: var(--gnome-icon-view-restore-symbolic) !important; 309 | } 310 | :root[customtitlebar] .titlebar-buttonbox .titlebar-min .toolbarbutton-icon { 311 | list-style-image: var(--gnome-icon-window-minimize-symbolic) !important; 312 | } 313 | 314 | /* Sound icons */ 315 | .tab-icon-overlay[soundplaying] { 316 | list-style-image: var(--gnome-icon-audio-speakers-symbolic) !important; 317 | } 318 | .tab-icon-overlay[muted] { 319 | list-style-image: var(--gnome-icon-audio-volume-muted-symbolic) !important; 320 | } 321 | .tab-icon-overlay[activemedia-blocked] { 322 | list-style-image: var(--gnome-icon-play-large-disabled-symbolic) !important; 323 | } 324 | 325 | /* Firefox View */ 326 | #firefox-view-button { 327 | list-style-image: var(--gnome-icon-firefox-symbolic) !important; 328 | } 329 | 330 | /* Private browsing button */ 331 | #privatebrowsing-button { 332 | list-style-image: var(--gnome-icon-eye-not-looking-symbolic) !important; 333 | } 334 | /* Sidebar button */ 335 | #sidebar-button:-moz-locale-dir(ltr):not([positionend]) .toolbarbutton-icon, #sidebar-button:-moz-locale-dir(rtl)[positionend] .toolbarbutton-icon { 336 | list-style-image: var(--gnome-icon-sidebar-show-symbolic) !important; 337 | } 338 | #sidebar-button .toolbarbutton-icon { 339 | list-style-image: var(--gnome-icon-sidebar-show-right-symbolic); 340 | } 341 | /* Back button */ 342 | #nav-bar #back-button, 343 | #context-back { 344 | list-style-image: var(--gnome-icon-go-previous-symbolic) !important; 345 | } 346 | /* Forward button */ 347 | #nav-bar #forward-button, 348 | #context-forward, 349 | #urlbar-go-button, 350 | .search-go-button { 351 | list-style-image: var(--gnome-icon-go-next-symbolic) !important; 352 | } 353 | /* Menu button */ 354 | #PanelUI-menu-button { 355 | list-style-image: var(--gnome-icon-open-menu-symbolic) !important; 356 | } 357 | /* New tab button */ 358 | #new-tab-button { 359 | list-style-image: var(--gnome-icon-tab-new-symbolic) !important; 360 | } 361 | #tabs-newtab-button, 362 | #TabsToolbar #new-tab-button, 363 | #vertical-tabs-newtab-button { 364 | list-style-image: var(--gnome-icon-list-add-symbolic) !important; 365 | } 366 | /* Home button */ 367 | #home-button { 368 | list-style-image: var(--gnome-icon-user-home-symbolic) !important; 369 | } 370 | /* Preferences button */ 371 | #preferences-button, 372 | .search-setting-button > .button-box > .button-icon, 373 | .unified-extensions-item-menu-button.subviewbutton, 374 | .translations-panel-settings-gear-icon > .toolbarbutton-icon { 375 | list-style-image: var(--gnome-icon-settings-symbolic) !important; 376 | } 377 | /* Tabs sync */ 378 | #sync-button, 379 | #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon, 380 | .urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, 381 | #urlbar-engine-one-off-item-tabs { 382 | list-style-image: var(--gnome-icon-tab-symbolic) !important; 383 | } 384 | /* Fullscreen button */ 385 | #fullscreen-button, 386 | #appMenu-fullscreen-button2 { 387 | list-style-image: var(--gnome-icon-view-fullscreen-symbolic) !important; 388 | } 389 | /* Zoom out button */ 390 | #zoom-out-button, 391 | #appMenu-zoomReduce-button2 { 392 | list-style-image: var(--gnome-icon-zoom-out-symbolic) !important; 393 | } 394 | /* Zoom in button */ 395 | #zoom-in-button, 396 | #appMenu-zoomEnlarge-button2 { 397 | list-style-image: var(--gnome-icon-zoom-in-symbolic) !important; 398 | } 399 | /* Developer button */ 400 | #developer-button { 401 | list-style-image: var(--gnome-icon-build-configure-symbolic) !important; 402 | } 403 | /* Email link button */ 404 | #email-link-button { 405 | list-style-image: var(--gnome-icon-mail-unread-symbolic) !important; 406 | } 407 | /* Print button */ 408 | #print-button { 409 | list-style-image: var(--gnome-icon-printer-symbolic) !important; 410 | } 411 | /* Addons button */ 412 | #unified-extensions-button, 413 | #add-ons-button, 414 | #addons-notification-icon, 415 | .install-icon { 416 | list-style-image: var(--gnome-icon-application-x-addon-symbolic) !important; 417 | } 418 | /* Find button */ 419 | #find-button { 420 | list-style-image: var(--gnome-icon-edit-find-symbolic) !important; 421 | } 422 | /* New window button */ 423 | #new-window-button { 424 | list-style-image: var(--gnome-icon-window-new-symbolic) !important; 425 | } 426 | /* Bookmarks menu button */ 427 | #bookmarks-menu-button, 428 | #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon, 429 | .urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, 430 | #urlbar-engine-one-off-item-bookmarks { 431 | list-style-image: var(--gnome-icon-starred-symbolic) !important; 432 | } 433 | #context-bookmarkpage[starred="true"], 434 | #star-button[starred] { 435 | list-style-image: var(--gnome-icon-starred-symbolic) !important; 436 | } 437 | #context-bookmarkpage, 438 | #star-button { 439 | list-style-image: var(--gnome-icon-non-starred-symbolic) !important; 440 | } 441 | #star-button[starred] { 442 | fill: var(--gnome-toolbar-star-button) !important; 443 | } 444 | /* Privacy */ 445 | #print-button { 446 | list-style-image: var(--gnome-icon-printer-symbolic) !important; 447 | } 448 | /* Picture-in-picture */ 449 | #picture-in-picture-button > .urlbar-icon { 450 | list-style-image: var(--gnome-icon-pip-in-symbolic) !important; 451 | } 452 | #picture-in-picture-button[pipactive] > .urlbar-icon { 453 | list-style-image: var(--gnome-icon-pip-out-symbolic) !important; 454 | } 455 | /* Read mode */ 456 | #reader-mode-button > .urlbar-icon { 457 | list-style-image: var(--gnome-icon-newspaper-symbolic) !important; 458 | } 459 | #reader-mode-button[readeractive] > .urlbar-icon { 460 | fill: var(--gnome-accent) !important; 461 | } 462 | /* Blocked media */ 463 | .autoplay-media-icon.blocked-permission-icon { 464 | list-style-image: var(--gnome-icon-play-large-disabled-symbolic) !important; 465 | } 466 | /* DRM */ 467 | .drm-icon { 468 | list-style-image: var(--gnome-icon-chain-link-symbolic) !important; 469 | } 470 | /* History button */ 471 | #history-panelmenu, 472 | #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon, 473 | .urlbarView-row[source="history"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, 474 | #urlbar-engine-one-off-item-history { 475 | list-style-image: var(--gnome-icon-preferences-system-time-symbolic) !important; 476 | } 477 | /* Forget history */ 478 | #panic-button { 479 | list-style-image: var(--gnome-icon-history-undo-symbolic) !important; 480 | } 481 | /* All tabs button */ 482 | #alltabs-button { 483 | list-style-image: var(--gnome-icon-pan-down-symbolic) !important; 484 | } 485 | /* Cut button */ 486 | #cut-button, 487 | #appMenu-cut-button { 488 | list-style-image: var(--gnome-icon-edit-cut-symbolic) !important; 489 | } 490 | /* Copy button */ 491 | #copy-button, 492 | #appMenu-copy-button { 493 | list-style-image: var(--gnome-icon-edit-copy-symbolic) !important; 494 | } 495 | /* Paste button */ 496 | #paste-button, 497 | #appMenu-paste-button { 498 | list-style-image: var(--gnome-icon-edit-paste-symbolic) !important; 499 | } 500 | /* Overflow button */ 501 | #nav-bar-overflow-button { 502 | list-style-image: var(--gnome-icon-pan-down-symbolic) !important; 503 | } 504 | /* Reload */ 505 | #reload-button, 506 | .downloadIconRetry > .button-box > .button-icon, 507 | #context-reload { 508 | list-style-image: var(--gnome-icon-view-refresh-symbolic) !important; 509 | } 510 | /* Stop */ 511 | #stop-button, 512 | .downloadIconCancel > .button-box > .button-icon, 513 | #context-stop { 514 | list-style-image: var(--gnome-icon-process-stop-symbolic) !important; 515 | } 516 | /* Downlaod */ 517 | #downloads-button, 518 | #downloads-indicator-icon { 519 | list-style-image: var(--gnome-icon-folder-download-symbolic) !important; 520 | } 521 | /* Info */ 522 | .panel-info-button:not(.translations-panel-settings-gear-icon) > image, 523 | #identity-icon { 524 | list-style-image: var(--gnome-icon-info-outline-symbolic) !important; 525 | } 526 | .tabbrowser-tab[image="chrome://global/skin/icons/info.svg"]:not([busy]):not([progress]) .tab-icon-stack::before { 527 | content: ""; 528 | height: 16px; 529 | width: 16px; 530 | background-image: var(--gnome-icon-info-outline-symbolic) !important; 531 | } 532 | /* Password */ 533 | #password-notification-icon { 534 | list-style-image: var(--gnome-icon-key-symbolic) !important; 535 | } 536 | 537 | /* Url Bar icons */ 538 | #urlbar:not(.searchButton) > .urlbar-input-container > #identity-box[pageproxystate="invalid"] #identity-icon { 539 | list-style-image: var(--gnome-icon-edit-find-symbolic) !important; 540 | } 541 | .urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon { 542 | list-style-image: var(--gnome-icon-security-high-symbolic) !important; 543 | } 544 | .urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon { 545 | list-style-image: var(--gnome-icon-security-low-symbolic) !important; 546 | } 547 | .urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon { 548 | list-style-image: var(--gnome-icon-security-high-symbolic) !important; 549 | } 550 | #identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, 551 | #identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon { 552 | list-style-image: var(--gnome-icon-channel-secure-symbolic) !important; 553 | } 554 | #identity-box[pageproxystate="valid"].notSecure #identity-icon, 555 | #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, 556 | #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon, 557 | #identity-box[pageproxystate="valid"].certUserOverridden #identity-icon { 558 | list-style-image: var(--gnome-icon-channel-insecure-symbolic) !important; 559 | } 560 | #identity-popup[connection^="secure"] .identity-popup-security-connection { 561 | list-style-image: var(--gnome-icon-channel-secure-symbolic) !important; 562 | } 563 | #identity-popup[connection="secure-cert-user-overridden"] .identity-popup-security-connection, 564 | .identity-popup-security-connection { 565 | list-style-image: var(--gnome-icon-channel-insecure-symbolic) !important; 566 | } 567 | #permissions-granted-icon { 568 | list-style-image: var(--gnome-icon-general-properties-symbolic) !important; 569 | } 570 | .popup-notification-icon[popupid="web-notifications"], .desktop-notification-icon { 571 | list-style-image: var(--gnome-icon-chat-symbolic) !important; 572 | } 573 | #reader-mode-button { 574 | list-style-image: var(--gnome-icon-newspaper-symbolic) !important; 575 | } 576 | .urlbar-icon { 577 | margin: 2px 0 !important; 578 | } 579 | 580 | /* Fix for extensions icons */ 581 | @media (prefers-color-scheme: dark) { 582 | .webextension-browser-action { 583 | list-style-image: var(--webextension-menupanel-image-light, inherit) !important; 584 | } 585 | } 586 | 587 | /* Folder icon */ 588 | .bookmark-item[container], 589 | .downloadIconShow > .button-box > .button-icon { 590 | list-style-image: var(--gnome-icon-folder-symbolic) !important; 591 | } 592 | 593 | /* Text clear */ 594 | .textbox-search-clear { 595 | content: var(--gnome-icon-edit-clear-symbolic) !important; 596 | } 597 | } 598 | -------------------------------------------------------------------------------- /theme/parts/lists.css: -------------------------------------------------------------------------------- 1 | /* Lists */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* TODO: create list color vars */ 6 | /* List container */ 7 | #permission-popup-permission-list, 8 | richlistbox#items { 9 | --in-content-item-selected: var(--gnome-accent-bg) !important; 10 | --in-content-item-selected-text: #fff !important; 11 | background: var(--gnome-card-background) !important; 12 | border: 0 !important; 13 | border-radius: var(--gnome-card-radius) !important; 14 | padding: 0 !important; 15 | overflow: hidden; 16 | } 17 | 18 | richlistbox#items { 19 | box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 20 | 0 1px 3px 1px rgba(0, 0, 0, .07), 21 | 0 2px 6px 2px rgba(0, 0, 0, .03); 22 | } 23 | 24 | /* List item */ 25 | .permission-popup-permission-item, 26 | richlistbox#items richlistitem { 27 | padding: var(--gnome-toolbar-padding) !important; 28 | margin: 0 !important; 29 | } 30 | .permission-popup-permission-list-anchor { 31 | padding: 0 !important; 32 | } 33 | .permission-popup-permission-list-anchor:not(:has(.permission-popup-permission-item)) { 34 | visibility: collapse; 35 | } 36 | richlistbox#items richlistitem:not(:last-child) { 37 | border-bottom: 1px solid var(--gnome-card-shade-color); 38 | } 39 | .permission-popup-permission-list-anchor:not(#permission-popup-permission-list-default-anchor):has(.permission-popup-permission-item) { 40 | border-top: 1px solid var(--gnome-card-shade-color); 41 | } 42 | #permission-popup-permission-list-default-anchor:empty + .permission-popup-permission-list-anchor { 43 | border: 0 !important; 44 | } 45 | 46 | /* Fix list buttons on selected state */ 47 | @media (prefers-color-scheme: light) { 48 | richlistbox#items richlistitem[selected=true] button { 49 | filter: invert() brightness(200%) !important; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /theme/parts/popups-contents.css: -------------------------------------------------------------------------------- 1 | /* Popups contents syles */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Main menu fxa */ 6 | #appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label { 7 | padding-left: 22px !important; 8 | margin-inline-start: -22px !important; 9 | } 10 | #appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar { 11 | margin-inline-start: 5px !important; 12 | } 13 | #appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description, #appMenu-fxa-text { 14 | font-weight: 400 !important; 15 | } 16 | 17 | /* Style main context menu & buttons */ 18 | #context-navigation { 19 | padding: 0; 20 | } 21 | #context-navigation > menuitem > .menu-iconic-left { 22 | margin: auto !important; 23 | } 24 | #context-navigation menuitem { 25 | --toolbarbutton-active-background: transparent !important; 26 | --toolbarbutton-hover-background: transparent !important; 27 | } 28 | 29 | /* Main menu */ 30 | #appMenu-popup .panel-banner-item:after { 31 | -moz-box-ordinal-group: 0; 32 | margin: 0 8px 0 0 !important; 33 | } 34 | #appMenu-popup .toolbaritem-combined-buttons { 35 | margin-inline-end: 0 !important; 36 | } 37 | #appMenu-popup .toolbaritem-combined-buttons .before-label { 38 | width: 32px !important; 39 | } 40 | .subviewbutton#appMenu-zoom-controls2 { 41 | padding-right: 0 !important; 42 | padding-top: 6px !important; 43 | } 44 | 45 | /* User sync account remove avatar */ 46 | #fxa-menu-avatar { 47 | display: none; 48 | } 49 | 50 | /* Add search engine button remove icon */ 51 | #pageAction-panel-addSearchEngine .toolbarbutton-badge-stack { 52 | display: none !important; 53 | } 54 | 55 | /* All tabs popover */ 56 | .all-tabs-item[selected] { 57 | border-left: 3px solid var(--gnome-tabbar-tab-active-border-bottom-color); 58 | box-shadow: none !important; 59 | } 60 | 61 | .all-tabs-item > .all-tabs-secondary-button label { 62 | margin: 0 !important; 63 | } 64 | 65 | /* Add bookmark */ 66 | #editBookmarkPanelInfoArea { 67 | padding: 0 !important; 68 | } 69 | #editBookmarkPanelRows, 70 | #editBookmarkPanelBottomContent { 71 | padding: 0 !important; 72 | } 73 | #editBookmarkPanelBottomButtons { 74 | margin: 0 !important; 75 | } 76 | #editBookmarkPanelBottomContent { 77 | margin-bottom: 12px !important; 78 | } 79 | #editBookmarkPanelBottomContent, 80 | #editBookmarkPanelRows vbox { 81 | margin: 6px 0; 82 | } 83 | 84 | /* Downloads popover */ 85 | #downloadsPanel-mainView .download-state { 86 | padding: 12px !important; 87 | border: 0 !important; 88 | display: flex; 89 | align-items: center; 90 | height: 64px !important; 91 | margin: 0 !important; 92 | } 93 | 94 | #downloadsPanel-mainView .downloadMainArea { 95 | flex: 1; 96 | display: flex; 97 | } 98 | #downloadsPanel-mainView .downloadMainArea:hover { 99 | background: transparent !important; 100 | } 101 | 102 | #downloadsPanel-mainView .downloadTypeIcon { 103 | margin: 0 !important; 104 | margin-right: 6px !important; 105 | } 106 | 107 | #downloadsPanel-mainView .downloadContainer { 108 | margin-inline-end: 0 !important; 109 | flex: 1; 110 | display: flex; 111 | flex-direction: column; 112 | } 113 | 114 | #downloadsPanel-mainView .download-state .downloadButton .button-box { 115 | padding: 0 !important; 116 | margin: 0 !important; 117 | } 118 | #downloadsPanel-mainView .download-state toolbarseparator { 119 | display: none; 120 | } 121 | 122 | /* Customization overflow menu position */ 123 | #customization-panel-container { 124 | margin-top: 10px; 125 | z-index: 10; 126 | } 127 | 128 | /* Confirmation Hint */ 129 | #confirmation-hint-checkmark-animation-container { 130 | margin: 12px 6px 12px 12px !important; 131 | } 132 | #confirmation-hint-message-container { 133 | margin: 12px 12px 12px 0 !important; 134 | } 135 | 136 | /* URLbar popups */ 137 | #identity-popup-mainView, 138 | #permission-popup-mainView, 139 | #protections-popup-mainView, 140 | #identity-popup-mainView-panel-header { 141 | max-width: calc(var(--popup-width) + (var(--gnome-menu-padding) * 2)) !important; 142 | min-width: calc(var(--popup-width) + (var(--gnome-menu-padding) * 2)) !important; 143 | } 144 | 145 | /* Identity popup */ 146 | #identity-popup-security, 147 | .identity-popup-section, 148 | #identity-popup-security-expander .button-box, 149 | .identity-popup-security-content { 150 | border: 0 !important; 151 | } 152 | 153 | .identity-popup-security-content { 154 | padding-inline-end: 0 !important; 155 | padding-inline-start: 0 !important; 156 | } 157 | .identity-popup-security-content { 158 | background-position: 0em 0.8em !important; 159 | background-size: 24px auto; 160 | } 161 | .identity-popup-security-content .identity-popup-headline { 162 | margin-left: 1.4em !important; 163 | } 164 | #identity-popup-security-button { 165 | padding: 3px 0 !important; 166 | } 167 | .identity-popup-security-connection.identity-button:not(#hack) { 168 | width: calc(var(--popup-width) - 30px) !important; 169 | } 170 | 171 | /* Permission popup */ 172 | #permission-popup-permissions-content { 173 | padding: 0 !important; 174 | } 175 | 176 | .permission-popup-permission-item:first-child, #permission-popup-storage-access-permission-list-header { 177 | margin-top: 0 !important; 178 | } 179 | .permission-popup-permission-remove-button { 180 | opacity: 1 !important; 181 | } 182 | .permission-popup-permission-state-label { 183 | display: none !important; 184 | } 185 | 186 | #permission-popup-permission-list-default-anchor:empty { 187 | padding: 0 !important; 188 | } 189 | .permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] { 190 | padding: 0 !important; 191 | } 192 | .permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child { 193 | display: block !important; 194 | height: 0 !important; 195 | overflow: hidden; 196 | visibility: hidden; 197 | margin: 0 !important; 198 | margin-bottom: -1px !important; 199 | } 200 | .permission-popup-permission-item-3rdPartyStorage { 201 | margin-right: 6px; 202 | margin-bottom: 6px !important; 203 | } 204 | #permission-popup-storage-access-permission-list-header { 205 | padding: 6px !important; 206 | } 207 | 208 | /* Protections popup */ 209 | .protections-popup-section, 210 | #protections-popup-not-blocking-section-header { 211 | border: 0 !important; 212 | } 213 | #protections-popup-mainView-panel-header-section { 214 | background: transparent !important; 215 | } 216 | #protections-popup-mainView toolbarseparator { 217 | display: none !important; 218 | } 219 | 220 | #protections-popup-mainView-panel-header { 221 | color: var(--gnome-window-color) !important; 222 | } 223 | #protections-popup[hasException] #protections-popup-mainView-panel-header { 224 | background: none !important; 225 | } 226 | #protections-popup-main-header-label { 227 | height: auto !important; 228 | margin-inline-start: 6px !important; 229 | text-align: left !important; 230 | } 231 | #protections-popup-mainView-panel-header-span { 232 | margin: 0 !important; 233 | margin-inline-start: 0 !important 234 | } 235 | #protections-popup[toast] #protections-popup-mainView-panel-header { 236 | border-bottom-width: 1px !important; 237 | border-radius: 5px !important; 238 | padding: 0px !important; 239 | } 240 | #protections-popup-info-button { 241 | margin: 0 !important; 242 | } 243 | 244 | #protections-popup-message { 245 | background-position: center 12px !important; 246 | background-color: var(--gnome-entry-background); 247 | border: 0 !important; 248 | border-radius: 12px; 249 | color: var(--gnome-window-color) !important; 250 | height: 100% !important; 251 | margin: 0 !important; 252 | } 253 | #protections-popup-message .text-link, 254 | #cfr-protections-panel-link-text { 255 | color: var(--gnome-window-color) !important; 256 | } 257 | .whatsNew-message-body { 258 | padding: 0 6px; 259 | } 260 | 261 | #protections-popup-tp-switch-section { 262 | background: var(--gnome-menu-background); 263 | border: 1px solid var(--gnome-button-border-color) !important; 264 | border-radius: 9px; 265 | padding: 12px 0 !important; 266 | margin: 0 !important; 267 | } 268 | 269 | #protections-popup[hasException] #protections-popup-tp-switch-section { 270 | background: var(--gnome-menu-background) !important; 271 | } 272 | .protections-popup-tp-switch-label-box label { 273 | margin-right: 12px !important; 274 | font-weight: normal !important; 275 | } 276 | 277 | #protections-popup-no-trackers-found-description { 278 | margin: 12px 8px 0 !important; 279 | text-align: left !important; 280 | } 281 | 282 | #protections-popup-blocking-section-header, 283 | #protections-popup-not-found-section-header, 284 | #protections-popup-not-blocking-section-header{ 285 | padding: 0px 5px !important; 286 | margin-top: 20px !important; 287 | height: auto !important; 288 | } 289 | 290 | #protections-popup-category-list { 291 | margin: 0 !important; 292 | } 293 | .protections-popup-category.notFound .protections-popup-category-label { 294 | width: calc(var(--popup-width) - 70px) !important; 295 | } 296 | .protections-popup-category-label { 297 | margin-inline-start: 6px !important; 298 | } 299 | .protections-popup-category-state-label { 300 | opacity: 0.7; 301 | } 302 | 303 | #protections-popup-footer { 304 | display: flex; 305 | justify-content: flex-start; 306 | flex-wrap: wrap; 307 | margin-top: 12px; 308 | } 309 | #protections-popup-show-report-stack, 310 | #protections-popup-settings-button { 311 | width: 100% !important; 312 | } 313 | #protections-popup-show-report-button { 314 | height: 32px !important; 315 | } 316 | #protections-popup-footer-protection-type-label { 317 | margin-left: 6px !important; 318 | } 319 | .protections-popup-description { 320 | border-bottom: 0 !important; 321 | } 322 | .protections-popup-description > description { 323 | margin: 8px !important; 324 | } 325 | 326 | /* Feature recommendation notification, fix width */ 327 | #contextual-feature-recommendation-notification { 328 | width: auto !important; 329 | } 330 | 331 | /* Extensions sometimes assume a white background */ 332 | .webextension-popup-browser { 333 | background-color: #fff !important; 334 | } 335 | 336 | /* Translate */ 337 | #translations-panel-translate:not(:only-child, #hack) { 338 | margin: 0 !important; 339 | } 340 | 341 | #translations-panel-lang-selection > label { 342 | margin-top: var(--gnome-menu-padding) !important; 343 | } 344 | -------------------------------------------------------------------------------- /theme/parts/popups.css: -------------------------------------------------------------------------------- 1 | /* Popup menus and context menus */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Style menus */ 6 | menupopup { 7 | appearance: none !important; 8 | color: var(--gnome-window-color) !important; 9 | padding: var(--gnome-menu-padding) !important; 10 | } 11 | 12 | menucaption { 13 | color: var(--gnome-window-color) !important; 14 | } 15 | 16 | menu menupopup { 17 | margin: -16px 0 0 0 !important; 18 | } 19 | 20 | menulist { 21 | padding: 0px !important; 22 | } 23 | 24 | .menupopup-arrowscrollbox { 25 | appearance: none !important; 26 | background: var(--gnome-menu-background) !important; 27 | border: 1px solid var(--gnome-border-color) !important; 28 | border-radius: var(--gnome-popover-radius) !important; 29 | box-shadow: var(--gnome-menu-shadow) !important; 30 | padding: var(--gnome-menu-padding) !important; 31 | min-height: 45px !important; 32 | } 33 | @media not -moz-pref("gnomeTheme.noThemedIcons") { 34 | menuitem:is([type="checkbox"], [checked="true"]) .menu-iconic-icon, 35 | menuitem[type="radio"] .menu-iconic-icon { 36 | appearance: none !important; 37 | } 38 | } 39 | menuitem { 40 | padding-inline-end: 18px !important; 41 | } 42 | menu, menuitem { 43 | margin-inline: 0 !important; 44 | &:where([_moz-menuactive]:not([disabled="true"])) { 45 | color: currentColor; 46 | background-color: transparent !important; 47 | } 48 | } 49 | menuitem:not([acceltext]) .menu-accel-container { 50 | visibility: collapse !important; 51 | } 52 | menuitem[type="checkbox"] image, menuitem[type="radio"] image { 53 | visibility: visible !important; 54 | } 55 | menuitem[disabled="true"]:hover, menupopup menu[disabled="true"]:hover { 56 | background: transparent !important; 57 | } 58 | 59 | .menu-iconic-icon { 60 | padding: 0 !important; 61 | } 62 | 63 | /* Adjust popovers position */ 64 | panel[type=arrow] { 65 | margin-top: var(--gnome-menu-padding) !important; 66 | } 67 | 68 | /* Style popovers */ 69 | panel:not([remote]) { 70 | --arrowpanel-background: var(--gnome-menu-background) !important; 71 | --arrowpanel-color: var(--gnome-menu-color) !important; 72 | --panel-item-hover-bgcolor: var(--gnome-selected-background) !important; 73 | } 74 | panel { 75 | --arrowpanel-padding: 0 !important; 76 | --arrowpanel-border-color: var(--gnome-menu-border-color) !important; 77 | --arrowpanel-border-radius: var(--gnome-popover-radius) !important; 78 | } 79 | 80 | /* Padding rules */ 81 | #sidebarMenu-popup { 82 | --arrowpanel-padding: var(--gnome-menu-padding) !important; 83 | } 84 | #downloadsPanel-blockedSubview, 85 | #downloadsPanel-mainView, 86 | #select-translations-panel-main-content { 87 | padding: var(--gnome-menu-padding) !important; 88 | } 89 | .panel-header, .panel-footer, 90 | .panel-subview-body, 91 | #protections-popup-mainView-panel-header-section, 92 | .permission-popup-section, 93 | .popup-notification-header-container, 94 | .popup-notification-body-container, 95 | .popup-notification-footer-container, 96 | .translations-panel-content { 97 | padding: 0 var(--gnome-menu-padding) var(--gnome-menu-padding) !important; 98 | } 99 | :is( 100 | .panel-header, .panel-footer, 101 | .panel-subview-body, 102 | .protections-popup-section, 103 | #protections-popup-mainView-panel-header-section, 104 | .permission-popup-section, 105 | .identity-popup-section, 106 | .popup-notification-header-container, 107 | .popup-notification-body-container, 108 | .popup-notification-footer-container 109 | ):first-child:not(:empty) { 110 | padding-top: var(--gnome-menu-padding) !important; 111 | } 112 | #protections-popup-footer, 113 | #identity-popup-clear-sitedata-footer { 114 | padding: 0 var(--gnome-menu-padding) !important; 115 | } 116 | .panel-subview-body > .panel-subview-body { 117 | padding: 0 !important; 118 | } 119 | /* Padding with margign */ 120 | .subviewbutton.panel-subview-footer-button:not(#downloadsHistory) { 121 | margin: var(--gnome-menu-padding) !important; 122 | } 123 | .subviewbutton.panel-subview-footer-button:not(:only-child, #downloadsHistory) { 124 | margin: 0 var(--gnome-menu-padding) !important; 125 | } 126 | .subviewbutton.panel-subview-footer-button:not(:only-child, #downloadsHistory, #translations-panel-translate):last-child { 127 | margin-bottom: var(--gnome-menu-padding) !important; 128 | } 129 | 130 | /* No menu */ 131 | #notification-popup, 132 | #permission-popup, 133 | #editBookmarkPanel, 134 | #downloadsPanel, 135 | #translations-panel { 136 | --gnome-menu-padding: 12px !important; 137 | } 138 | 139 | /* Panel arrow */ 140 | .panel-arrowcontent { 141 | background: var(--arrowpanel-background) !important; 142 | border: 1px solid var(--gnome-menu-border-color) !important; 143 | border-radius: 12px !important; 144 | color: var(--gnome-window-color) !important; 145 | } 146 | .panel-arrow { 147 | fill: var(--arrowpanel-background) !important; 148 | stroke: var(--gnome-menu-border-color) !important; 149 | display: -moz-inline-box !important; 150 | } 151 | 152 | /* Panel header */ 153 | .panel-header { 154 | position: relative !important; 155 | } 156 | 157 | /* Panel footer */ 158 | .panel-footer { 159 | background-color: transparent !important; 160 | margin: 0 !important; 161 | } 162 | .panel-subview-body .panel-footer { 163 | padding: 0 !important; 164 | } 165 | .panel-footer.panel-footer-menulike { 166 | border-top: 0 !important; 167 | margin-top: 8px !important; 168 | } 169 | .panel-footer toolbarseparator { 170 | display: none !important; 171 | } 172 | .proton-zap { 173 | border-image: unset !important; 174 | } 175 | .panel-subview-footer { 176 | margin-top: 10px !important; 177 | } 178 | 179 | /* Remove unwanted separators */ 180 | .panel-header + toolbarseparator, 181 | #identity-popup-mainView-panel-header + toolbarseparator, 182 | #permission-popup-mainView-panel-header + toolbarseparator, 183 | #protections-popup-mainView-panel-header-section + toolbarseparator { 184 | display: none !important; 185 | } 186 | 187 | /* Menu buttons */ 188 | menuitem, menupopup menu, 189 | panelview .subviewbutton:not(#appMenu-fxa-label2, .unified-extensions-item-menu-button), 190 | panelview .toolbarbutton-1, 191 | panelview .unified-extensions-item-action-button, 192 | .protections-popup-footer-button, 193 | .protections-popup-category, 194 | .identity-popup-content-blocking-category, 195 | #downloadsPanel-mainView .download-state { 196 | -moz-appearance: none !important; 197 | border-radius: 6px !important; 198 | color: var(--gnome-window-color) !important; 199 | font: menu !important; 200 | padding: 4px 12px !important; 201 | min-height: 32px !important; 202 | 203 | &:hover { 204 | background: var(--gnome-selected-color) !important; 205 | } 206 | } 207 | .subviewbutton, 208 | .protections-popup-footer-button, 209 | .protections-popup-category, 210 | .identity-popup-content-blocking-category, 211 | .openintabs-menuitem, 212 | .widget-overflow-list .toolbarbutton-1, 213 | panelview .unified-extensions-item { 214 | margin: 0 !important; 215 | } 216 | 217 | .subviewbutton[shortcut]:after { 218 | opacity: 0.5 !important; 219 | color: var(--gnome-menu-color) !important; 220 | } 221 | 222 | .bookmark-item .menu-right { 223 | fill-opacity: 1 !important; 224 | } 225 | 226 | /* Menu buttons disabled */ 227 | menuitem[disabled="true"], menupopup menu[disabled="true"], 228 | .subviewbutton[disabled="true"], .toolbarbutton-1[disabled="true"], 229 | .protections-popup-category[disabled="true"], 230 | .identity-popup-content-blocking-category[disabled="true"] { 231 | opacity: .5 !important; 232 | } 233 | menuitem[disabled="true"][_moz-menuactive], menupopup menu[disabled="true"][_moz-menuactive] { 234 | background: transparent !important; 235 | } 236 | 237 | /* Menu buttons fix */ 238 | #appMenu-fxa-label2 { 239 | padding: 0 !important; 240 | } 241 | #appMenu-fxa-label2:hover { 242 | background: transparent !important; 243 | } 244 | 245 | /* Menu buttons back */ 246 | .subviewbutton-back { 247 | opacity: 1 !important; 248 | width: 100%; 249 | -moz-box-align: center !important; 250 | -moz-box-pack: start !important; 251 | } 252 | .subviewbutton-back + h1 { 253 | font-weight: normal !important; 254 | left: 0 !important; 255 | padding: 0 !important; 256 | pointer-events: none; 257 | position: absolute !important; 258 | top: 12px !important; 259 | width: 100%; 260 | } 261 | 262 | /* Menu headers */ 263 | .subview-subheader { 264 | font: menu !important; 265 | font-weight: bold !important; 266 | padding-block: 0 !important; 267 | margin: 0 4px !important; 268 | } 269 | 270 | /* Style popover separators */ 271 | toolbarseparator, menuseparator { 272 | appearance: none !important; 273 | } 274 | 275 | #PlacesToolbar menupopup[placespopup="true"] menuseparator { 276 | border-top: 1px solid var(--gnome-menu-separator-color) !important; 277 | padding: 0 !important; 278 | margin: 6px 0 !important; 279 | } 280 | #PlacesToolbar menupopup[placespopup="true"] menuseparator::before { 281 | border: 0 !important; 282 | } 283 | 284 | toolbarseparator:not([orient="vertical"]), menupopup menuseparator { 285 | border-top: 1px solid var(--gnome-menu-separator-color) !important; 286 | margin: 6px 0 !important; 287 | } 288 | toolbarseparator[orient="vertical"] { 289 | margin: 0 6px !important; 290 | } 291 | 292 | .panel-subview-body + toolbarseparator:not([orient="vertical"]) { 293 | margin: 0 0 6px !important; 294 | } 295 | panelview > toolbarseparator:not([orient="vertical"]), 296 | #identity-popup-more-info-footer toolbarseparator:not([orient="vertical"]){ 297 | margin: 6px !important; 298 | } 299 | #identity-popup-clear-sitedata-footer toolbarseparator:not([orient="vertical"]) { 300 | margin-top: 0 !important; 301 | } 302 | 303 | menuseparator { 304 | padding: 0 !important; 305 | } 306 | menuseparator::before { 307 | display: none !important; 308 | } 309 | -------------------------------------------------------------------------------- /theme/parts/remove-white-flash.css: -------------------------------------------------------------------------------- 1 | /* Removes a white flash after you open or close a tab. Affects all variants, 2 | * but it's more visible on dark variants. */ 3 | 4 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 5 | 6 | /* Overrides: Change the flash color */ 7 | #tabbrowser-tabpanels, 8 | #tabbrowser-tabpanels[pendingpaint], 9 | browser { 10 | background-color: var(--gnome-window-background) !important; 11 | } 12 | -------------------------------------------------------------------------------- /theme/parts/sidebar.css: -------------------------------------------------------------------------------- 1 | /* Sidebar */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Main sidebar */ 6 | #sidebar-main { 7 | --button-size-icon: var(--gnome-button-size) !important; 8 | background-color: var(--gnome-sidebar-background) !important; 9 | 10 | &[positionend] { 11 | border-inline-start: 1px solid var(--gnome-toolbar-border-color) !important; 12 | } 13 | 14 | &:not([positionend]) { 15 | border-inline-end: 1px solid var(--gnome-toolbar-border-color) !important; 16 | } 17 | } 18 | 19 | link[href="chrome://browser/content/sidebar/sidebar-main.css"] + .wrapper { 20 | .tools-and-extensions { 21 | align-items: center !important; 22 | justify-content: center !important; 23 | &[orientation="horizontal"] { 24 | padding: var(--gnome-toolbar-padding) !important; 25 | } 26 | } 27 | 28 | .actions-list { 29 | & > moz-button:not(.tools-overflow) { 30 | --button-outer-padding-inline: var(--gnome-toolbar-padding) !important; 31 | --button-outer-padding-block: calc(var(--gnome-toolbar-spacing) / 2) !important; 32 | --toolbarbutton-active-background: var(--gnome-selected-color) !important; 33 | 34 | &:last-of-type { 35 | --button-outer-padding-block-end: var(--gnome-toolbar-padding) !important; 36 | } 37 | &:first-of-type { 38 | --button-outer-padding-block-start: var(--gnome-toolbar-padding) !important; 39 | } 40 | } 41 | } 42 | } 43 | 44 | /* Sidebar content */ 45 | #sidebar-box { 46 | padding: 0 !important; 47 | } 48 | 49 | #sidebar-box:-moz-window-inactive label, #sidebar-box:-moz-window-inactive image, 50 | .sidebar-panel:-moz-window-inactive label, .sidebar-panel:-moz-window-inactive image, 51 | .tools-and-extensions:-moz-window-inactive, 52 | .sidebar-placesTreechildren:-moz-window-inactive { 53 | opacity: 0.7 !important; 54 | } 55 | 56 | #sidebar { 57 | background-color: var(--gnome-secondary-sidebar-background) !important; 58 | border: 0 !important; 59 | border-radius: 0 !important;; 60 | box-shadow: none !important; 61 | } 62 | 63 | #sidebar-search-container { 64 | padding: var(--gnome-toolbar-padding) !important; 65 | } 66 | 67 | /* Separator */ 68 | #sidebar-splitter { 69 | background: var(--gnome-toolbar-background) !important; 70 | border: 0 !important; 71 | border-right: 1px solid var(--gnome-border-color) !important; 72 | border-color: var(--gnome-toolbar-border-color) !important; 73 | margin: 0 !important; 74 | width: 0 !important; 75 | } 76 | 77 | /* Browser content */ 78 | #tabbrowser-tabbox { 79 | --chrome-content-separator-color: var(--gnome-toolbar-border-color); 80 | box-shadow: none !important; 81 | outline: 0 !important; 82 | } 83 | 84 | /* Settings lists */ 85 | /* TODO: Move to lists.css */ 86 | .customize-group .extensions, 87 | link[href="chrome://global/content/elements/moz-fieldset.css"] ~ fieldset #inputs { 88 | background: var(--gnome-card-background) !important; 89 | border: 0 !important; 90 | border-radius: var(--gnome-card-radius) !important; 91 | box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 0 1px 3px 1px rgba(0, 0, 0, .07), 0 2px 6px 2px rgba(0, 0, 0, .03); 92 | margin-top: 12px !important; 93 | padding: 0 !important; 94 | } 95 | 96 | moz-checkbox, moz-radio, .customize-group .extension-item { 97 | display: flex !important; 98 | padding: 0 !important; 99 | 100 | &:not(:last-of-type) { 101 | border-bottom: 1px solid var(--gnome-card-shade-color) !important; 102 | } 103 | &[slot="nested"]:first-of-type { 104 | border-top: 1px solid var(--gnome-card-shade-color) !important; 105 | } 106 | } 107 | moz-checkbox, moz-radio { 108 | flex-direction: column; 109 | justify-content: center; 110 | margin-block-start: 0 !important; 111 | } 112 | .customize-group .extension-item { 113 | align-items: center; 114 | min-height: 50px !important; 115 | padding: 0 12px !important; 116 | } 117 | 118 | link[href="chrome://global/content/elements/moz-input-common.css"] { 119 | & ~ .label-wrapper { 120 | margin-inline: 12px !important; 121 | & > label { 122 | align-items: center; 123 | display: flex !important; 124 | gap: var(--gnome-toolbar-spacing); 125 | min-height: 50px !important; 126 | } 127 | } 128 | 129 | & ~ .nested { 130 | gap: 0 !important; 131 | margin: 0 !important; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /theme/parts/tabsbar.css: -------------------------------------------------------------------------------- 1 | /* Tabs bar */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Override vars */ 6 | :root { 7 | --space-above-tabbar: 0 !important; 8 | 9 | --tab-min-height: var(--gnome-button-size) !important; 10 | --tab-border-radius: var(--gnome-button-radius) !important; 11 | --tab-hover-background-color: var(--gnome-hover-color) !important; 12 | --tab-selected-bgcolor: var(--gnome-selected-color) !important; 13 | --tab-pinned-container-margin-inline-expanded: calc(var(--gnome-toolbar-padding) / 2) !important; 14 | 15 | --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-hover-background); 16 | 17 | @media not -moz-pref("sidebar.verticalTabs") { 18 | /* We need the hardcoded tab colors in horizontal tabs, beacuse of the close button overlay */ 19 | --tab-hover-background-color: var(--gnome-tabbar-tab-hover-background) !important; 20 | --tab-selected-bgcolor: var(--gnome-tabbar-tab-active-background) !important; 21 | } 22 | } 23 | 24 | /* Tabsbar */ 25 | #TabsToolbar { 26 | background-color: var(--gnome-tabbar-background) !important; 27 | border-bottom: 0 !important; 28 | padding: 0 calc(var(--gnome-toolbar-padding) / 2) !important; 29 | position: relative; 30 | z-index: 1; 31 | 32 | --toolbarbutton-inner-padding: var(--toolbarbutton-inner-padding) !important; 33 | /* Remove hover effects on tab bar buttons */ 34 | --toolbarbutton-active-background: transparent !important; 35 | --toolbarbutton-hover-background: transparent !important; 36 | /* Tabs scroll fade */ 37 | --gnome-tabbar-fade-background: var(--gnome-tabbar-background); 38 | 39 | /* Remove tabbar's window controls */ 40 | .titlebar-buttonbox-container { 41 | display: none !important; 42 | } 43 | 44 | /* Remove blank spaces on tabs start and end */ 45 | .titlebar-spacer { 46 | display: none !important; 47 | } 48 | 49 | /* Tabsbar buttons */ 50 | .toolbarbutton-1 { 51 | border-radius: var(--gnome-button-radius) !important; 52 | margin: 0px calc(var(--gnome-toolbar-spacing) / 2) var(--gnome-toolbar-padding) !important; 53 | min-height: var(--gnome-button-size) !important; 54 | min-width: var(--gnome-button-size) !important; 55 | transition: background var(--gnome-animation-time); 56 | 57 | &:not([disabled]):not(:active):not([open]):hover { 58 | background-color: var(--gnome-tabbar-tab-hover-background) !important; 59 | } 60 | &:active, &[open] { 61 | background-color: var(--gnome-tabbar-tab-active-background) !important; 62 | } 63 | } 64 | } 65 | 66 | /* Tabs container */ 67 | #tabbrowser-tabs { 68 | /* Horizontal */ 69 | &[orient="horizontal"] { 70 | &, arrowscrollbox { 71 | height: auto !important; 72 | min-height: auto !important; 73 | --tab-min-height: var(--gnome-button-size) !important; 74 | } 75 | } 76 | 77 | /* Vertical */ 78 | &[orient="vertical"] { 79 | --tabstrip-inner-border: 1px solid var(--gnome-border-color) !important; 80 | grid-gap: var(--gnome-toolbar-spacing) !important; 81 | 82 | &[expanded] { 83 | --tab-inner-inline-margin: var(--gnome-toolbar-padding) !important; 84 | } 85 | 86 | #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button { 87 | margin-block: var(--gnome-toolbar-padding) !important; 88 | } 89 | } 90 | } 91 | 92 | /* Tabs scroll */ 93 | #tabbrowser-arrowscrollbox { 94 | &[orient="horizontal"] { 95 | position: relative !important; 96 | } 97 | 98 | &[orient="vertical"] { 99 | --gnome-undershoot-top: inset 0 1px color-mix(in srgb, var(--gnome-shade-color) 75%, transparent); 100 | --gnome-undershoot-bottom: inset 0 -1px color-mix(in srgb, var(--gnome-shade-color) 75%, transparent); 101 | 102 | &[overflowing] { 103 | &:not([scrolledtostart]) { 104 | box-shadow: var(--gnome-undershoot-top); 105 | } 106 | &:not([scrolledtoend]) { 107 | box-shadow: var(--gnome-undershoot-bottom); 108 | } 109 | &:not([scrolledtostart], [scrolledtoend]) { 110 | box-shadow: var(--gnome-undershoot-top), var(--gnome-undershoot-bottom); 111 | } 112 | } 113 | } 114 | } 115 | 116 | /* Horizontal tabs scroll fade */ 117 | #scrollbutton-up:has(~ scrollbox[orient="horizontal"]), 118 | scrollbox[orient="horizontal"] ~ #scrollbutton-down { 119 | border-top: 0 !important; 120 | position: absolute !important; 121 | z-index: 5 !important; 122 | top: 0; 123 | bottom: 0; 124 | } 125 | #scrollbutton-up:has(~ scrollbox[orient="horizontal"])[disabled], 126 | scrollbox[orient="horizontal"] ~ #scrollbutton-down[disabled] { 127 | display: none; 128 | } 129 | #scrollbutton-up:has(~ scrollbox[orient="horizontal"]) > .toolbarbutton-icon, 130 | scrollbox[orient="horizontal"] ~ #scrollbutton-down > .toolbarbutton-icon{ 131 | visibility: hidden; 132 | } 133 | scrollbox[orient="horizontal"] ~ #scrollbutton-down { 134 | right: 0; 135 | margin-inline-end: -5px !important; 136 | } 137 | #scrollbutton-up:has(~ scrollbox[orient="horizontal"]) { 138 | left: 0; 139 | margin-inline-start: -5px !important; 140 | } 141 | #scrollbutton-up:has(~ scrollbox[orient="horizontal"]):not([disabled])::after, 142 | scrollbox[orient="horizontal"] ~ #scrollbutton-down:not([disabled])::after { 143 | content: ""; 144 | height: 39px; 145 | position: absolute; 146 | top: -3px; 147 | z-index: -1; 148 | width: 50px; 149 | pointer-events: none; 150 | } 151 | #scrollbutton-up:has(~ scrollbox[orient="horizontal"]):not([disabled])::after { 152 | background: linear-gradient(to right, var(--gnome-tabbar-fade-background) 10px, transparent); 153 | left: 0; 154 | } 155 | scrollbox[orient="horizontal"] ~ #scrollbutton-down:not([disabled])::after { 156 | background: linear-gradient(to left, var(--gnome-tabbar-fade-background) 10px, transparent); 157 | right: 0; 158 | } 159 | spacer[part=overflow-start-indicator], spacer[part=overflow-end-indicator] { 160 | width: 0 !important; 161 | border: 0 !important; 162 | margin-inline: 0 !important; 163 | } 164 | 165 | /* Tabs */ 166 | .tabbrowser-tab { 167 | &[selected="true"] { 168 | --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background); 169 | &:hover { 170 | --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-hover-background) !important; 171 | } 172 | } 173 | @media -moz-pref("gnomeTheme.closeOnlySelectedTabs") { 174 | --gnome-tabbar-tab-close-overlay-bg: unset; 175 | } 176 | 177 | /* OPTIONAL: Add more contrast to the active tab */ 178 | @media -moz-pref("gnomeTheme.activeTabContrast") { 179 | &[selected="true"], &:hover { 180 | --tab-hover-background-color: var(--gnome-tabbar-tab-active-background-contrast) !important; 181 | --tab-selected-bgcolor: var(--gnome-tabbar-tab-active-background-contrast) !important; 182 | --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background-contrast) !important; 183 | } 184 | } 185 | 186 | /* Tweak margins on expanded vertical pinned tabs */ 187 | #tabbrowser-tabs[orient="vertical"][expanded] &[pinned] { 188 | padding-block-start: var(--gnome-toolbar-padding) !important; 189 | padding-bottom: 0 !important; 190 | } 191 | 192 | /* Horizontal tabs only */ 193 | #tabbrowser-tabs[orient="horizontal"] & { 194 | position: relative; 195 | 196 | > stack { 197 | height: var(--tab-min-height) !important; 198 | width: var(--tab-min-height) !important; 199 | min-height: var(--tab-min-height) !important; 200 | } 201 | 202 | /* Not in collapsed tab-group */ 203 | :not([collapsed]) > & { 204 | padding: 0px calc(var(--gnome-toolbar-spacing) / 2 - 1px) var(--gnome-toolbar-padding) !important; 205 | &:not([hidden=true]):last-of-type { 206 | padding-right: calc(var(--gnome-toolbar-spacing) / 2) !important; 207 | } 208 | 209 | /* Full width tabs */ 210 | @media not -moz-pref("gnomeTheme.normalWidthTabs") { 211 | &:not([style^="max-width"]):not([pinned]), 212 | &[style^="max-width: 100px !important;"]:not([pinned]) { 213 | max-width: 100% !important; 214 | --tab-min-width-pref: 131px !important; 215 | } 216 | &:not([style^="max-width"]):not([pinned]):not([fadein]), 217 | &[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) { 218 | max-width: .1px !important; 219 | } 220 | } 221 | } 222 | } 223 | } 224 | 225 | /* Tab background */ 226 | .tab-background { 227 | box-shadow: none !important; 228 | transition: background var(--gnome-tab-animation-time) linear !important; 229 | 230 | /* Selected hover */ 231 | tab[selected]:hover & { 232 | background-color: var(--gnome-selected-hover-color) !important; 233 | @media not -moz-pref("sidebar.verticalTabs") { 234 | background-color: var(--gnome-tabbar-tab-active-hover-background) !important; 235 | } 236 | } 237 | 238 | /* Use raised button colors for pinned tabs in vertical */ 239 | #tabbrowser-tabs[orient="vertical"] tab[pinned] & { 240 | background-color: var(--gnome-button-background) !important; 241 | &[selected] { 242 | background-color: var(--gnome-button-checked-background) !important; 243 | } 244 | 245 | tab:hover & { 246 | background-color: var(--gnome-button-hover-background) !important; 247 | &[selected] { 248 | background-color: var(--gnome-button-checked-hover-background) !important; 249 | } 250 | } 251 | } 252 | 253 | /* Fix margins on horizontal tabs */ 254 | #tabbrowser-tabs[orient="horizontal"] & { 255 | margin-block: 0 !important; 256 | } 257 | 258 | /* Add solid bg on tabs dnd */ 259 | #tabbrowser-tabs[movingtab] tab:is([multiselected], [selected]) & { 260 | background-color: var(--gnome-tabbar-background) !important; 261 | background-image: linear-gradient(var(--tab-selected-bgcolor), var(--tab-selected-bgcolor)) !important; 262 | } 263 | } 264 | 265 | /* Tab content */ 266 | .tab-content { 267 | #tabbrowser-tabs[orient="horizontal"] & { 268 | /* Center content on horizontal tabs */ 269 | align-items: center !important; 270 | justify-content: center !important; 271 | margin-top: -1px; 272 | position: relative !important; 273 | &:not([pinned]) { 274 | padding: 0 4px !important; 275 | } 276 | &[pinned] { 277 | padding: 0 5px !important; 278 | } 279 | 280 | /* Rearrange contents */ 281 | .tab-audio-button { 282 | order: 0; 283 | } 284 | .tab-icon-stack { 285 | order: 1; 286 | } 287 | .tab-label-container { 288 | order: 2; 289 | } 290 | .tab-close-button { 291 | order: 3; 292 | } 293 | 294 | /* Prevent tab icons size breaking */ 295 | .tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button { 296 | min-width: 16px; 297 | } 298 | 299 | /* Tab close button etc. positioning */ 300 | .tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button { 301 | margin-top: 0 !important; 302 | } 303 | 304 | /* Close button overlay */ 305 | &:not([pinned])::before { 306 | background: linear-gradient(to left, var(--gnome-tabbar-tab-close-overlay-bg) 50%, transparent); 307 | border-radius: 0 4px 4px 0; 308 | bottom: 2px; 309 | content: ""; 310 | height: calc(100% - 5px); 311 | opacity: 0; 312 | position: absolute; 313 | right: 2px; 314 | transition: all var(--gnome-tab-animation-time) linear; 315 | width: 55px; 316 | z-index: 99; 317 | } 318 | &:not([pinned])[selected]::before, 319 | tab:hover &::before { 320 | opacity: 1; 321 | } 322 | :root[dir="rtl"] &:not([pinned])::before { 323 | display: none; 324 | } 325 | 326 | /* Left close button */ 327 | @media (-moz-gtk-csd-reversed-placement) and (not -moz-pref("gnomeTheme.swapTabClose")), 328 | (-moz-pref("gnomeTheme.swapTabClose")) and (not (-moz-gtk-csd-reversed-placement)) { 329 | /* Rearrange and fix alignment */ 330 | .tab-audio-button { 331 | order: 3 !important; 332 | } 333 | .tab-icon-stack { 334 | margin-inline-start: 0 !important; 335 | } 336 | .tab-label-container { 337 | margin-inline-end: auto !important; 338 | } 339 | .tab-close-button { 340 | margin-inline-start: 0 !important; 341 | order: 0 !important; 342 | } 343 | 344 | /* Overlay is not longer needed */ 345 | :root[dir="ltr"] &:not([pinned])::before { 346 | display: none !important; 347 | } 348 | } 349 | } 350 | } 351 | 352 | /* Tab label */ 353 | .tab-label-container { 354 | #tabbrowser-tabs[orient="horizontal"] & { 355 | min-width: 0 !important; 356 | max-width: min-content !important; 357 | :root[dir="ltr"] &:not([pinned]) { 358 | margin-inline-end: -16px; 359 | } 360 | 361 | /* Fix alignment when audio button is prestent */ 362 | tab:is([muted], [soundplaying]) & { 363 | @media (not (-moz-gtk-csd-reversed-placement)) and (not -moz-pref("gnomeTheme.swapTabClose")) { 364 | margin-inline-end: 0 !important; 365 | } 366 | } 367 | } 368 | 369 | /* Hide secondary label, muted, playing, etc */ 370 | .tab-secondary-label { 371 | display: none; 372 | } 373 | } 374 | 375 | /* Tab buttons */ 376 | .tab-icon-overlay, 377 | .tab-close-button { 378 | border: 0 !important; 379 | box-sizing: content-box !important; /* Avoid deformation on flexbox */ 380 | border-radius: 50% !important; 381 | padding: 4px !important; 382 | background-image: none !important; 383 | background-color: transparent !important; 384 | background-size: 24px; 385 | transition: all var(--gnome-animation-time) ease-out !important; 386 | 387 | &:hover { 388 | background-color: var(--gnome-hover-color) !important; 389 | } 390 | &:active { 391 | background-color: var(--gnome-active-color) !important; 392 | } 393 | 394 | /* Set solid bg when in no expanded vertical tabs */ 395 | #tabbrowser-tabs[orient="vertical"]:not([expanded]) & { 396 | background-color: var(--gnome-window-background) !important; 397 | } 398 | } 399 | 400 | /* Audio button */ 401 | .tab-audio-button { 402 | --button-border-radius: 50% !important; 403 | margin-top: -3px !important; /* Fix position */ 404 | 405 | #tabbrowser-tabs[orient="horizontal"] & { 406 | margin-inline: 0 !important; 407 | } 408 | } 409 | 410 | /* Tab close button */ 411 | .tab-close-button { 412 | fill: var(--gnome-window-color) !important; 413 | fill-opacity: 1 !important; 414 | height: 16px !important; 415 | list-style-image: var(--gnome-icon-window-close-symbolic) !important; 416 | width: 16px !important; 417 | -moz-context-properties: fill, fill-opacity !important; 418 | 419 | #tabbrowser-tabs[orient="horizontal"] & { 420 | margin-inline-start: auto; 421 | margin-inline-end: 0 !important; 422 | opacity: 1 !important; 423 | z-index: 100 !important; 424 | 425 | /* Autohide */ 426 | &:not([selected]) { 427 | visibility: hidden !important; 428 | opacity: 0 !important; 429 | } 430 | /* Show close button on tab hover */ 431 | tab:hover & { 432 | @media not -moz-pref("gnomeTheme.closeOnlySelectedTabs") { 433 | visibility: visible !important; 434 | opacity: 1 !important; 435 | } 436 | } 437 | } 438 | } 439 | 440 | /* Icon overlay */ 441 | .tab-icon-overlay { 442 | height: 12px !important; 443 | left: 11px !important; 444 | top: -3px !important; 445 | width: 12px !important; 446 | 447 | &:not([crashed]) { 448 | padding: 2px !important; 449 | background: var(--gnome-button-background) !important; 450 | &:hover { 451 | background: var(--gnome-button-hover-background) !important; 452 | } 453 | } 454 | 455 | &[busy] { 456 | display: none !important; 457 | } 458 | } 459 | 460 | /* Tab icon */ 461 | .tab-icon-stack { 462 | align-items: center; 463 | 464 | /* Avoid firefox hiding elements on indicator-replaces-favicon */ 465 | &[indicator-replaces-favicon] :not(&) { 466 | opacity: 1 !important; 467 | } 468 | 469 | #tabbrowser-tabs[orient="horizontal"] & { 470 | &:not([pinned]) { 471 | margin-inline-start: auto !important; 472 | margin-inline-end: 2px; 473 | 474 | @media -moz-pref("gnomeTheme.tabAlignLeft") { 475 | /* OPTIONAL: Align tab items left */ 476 | margin-inline-start: 0 !important; 477 | padding: 0 5px !important; 478 | } 479 | 480 | .tab-throbber, .tab-icon-pending, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-overlay { 481 | margin-inline-end: 0 !important; 482 | } 483 | } 484 | 485 | &[busy], &[sharing], .tab-icon-image:not([sharing]) { 486 | padding: 4px; 487 | } 488 | 489 | .tab-icon-image { 490 | transition: opacity var(--gnome-animation-time) ease-out !important; 491 | } 492 | } 493 | } 494 | 495 | /* Tabs separators */ 496 | :root[dir="ltr"] #tabbrowser-tabs[orient="horizontal"] { 497 | :not([collapsed]) > tab { 498 | border-color: transparent !important; 499 | border-left-width: 1px !important; 500 | border-style: solid !important; 501 | } 502 | tab:not(:first-of-type, [selected], :hover) { 503 | --gnome-tabbar-tab-separator-hack0: var(--gnome-tabbar-background); 504 | --gnome-tabbar-tab-separator-hack1: linear-gradient( 505 | to bottom, 506 | var(--gnome-tabbar-tab-separator-hack0) 0, 507 | var(--gnome-tabbar-tab-separator-hack0) 3px, 508 | var(--gnome-tabbar-tab-separator-color) 3px, 509 | var(--gnome-tabbar-tab-separator-color) 31px, 510 | var(--gnome-tabbar-tab-separator-hack0) 31px, 511 | var(--gnome-tabbar-tab-separator-hack0) 40px 512 | ) 1; 513 | border-image: var(--gnome-tabbar-tab-separator-hack1); 514 | } 515 | tab[selected] ~ tab:not([hidden="true"]) { 516 | border-image: none; 517 | } 518 | tab[selected] ~ tab:not([hidden="true"]) ~ tab:not([hidden="true"]) { 519 | border-image: var(--gnome-tabbar-tab-separator-hack1); 520 | } 521 | tab:hover ~ tab:not([hidden="true"]) { 522 | border-image: none !important; 523 | } 524 | tab:hover ~ tab:not([hidden="true"]) ~ tab:not([hidden="true"]) { 525 | border-image: var(--gnome-tabbar-tab-separator-hack1) !important; 526 | } 527 | tab:hover ~ tab[selected] ~ tab:not([hidden="true"]) { 528 | border-image: none !important; 529 | } 530 | tab:hover ~ tab[selected] ~ tab:not([hidden="true"]) ~ tab:not([hidden="true"]) { 531 | border-image: var(--gnome-tabbar-tab-separator-hack1) !important; 532 | } 533 | tab-group[collapsed] + tab { 534 | border-image: none !important; 535 | } 536 | } 537 | 538 | /* Tabs group */ 539 | tab-group { 540 | #tabbrowser-tabs[orient="horizontal"] & { 541 | .tab-group-line { 542 | margin-block-end: calc(var(--gnome-toolbar-padding) * -1) !important; 543 | margin-inline: calc((var(--gnome-toolbar-spacing) / 2) * -1) !important; 544 | } 545 | } 546 | 547 | #tabbrowser-tabs[orient="vertical"][expanded] & { 548 | margin-inline-start: calc(var(--gnome-toolbar-padding) * 2) !important; 549 | padding-inline-start: var(--tab-group-line-thickness); 550 | 551 | .tab-group-label-container { 552 | margin-inline-start: calc(var(--tab-group-line-thickness) * -1); 553 | } 554 | 555 | } 556 | } 557 | 558 | /* Tabs group label */ 559 | .tab-group-label { 560 | border-radius: 26px !important; 561 | 562 | tab-group[collapsed] & { 563 | @media (prefers-color-scheme: dark) { 564 | outline: 0 !important; 565 | } 566 | } 567 | 568 | #tabbrowser-tabs[orient="horizontal"] &, 569 | #tabbrowser-tabs[orient="vertical"][expanded] & { 570 | padding: 2px 9px !important; 571 | } 572 | 573 | #tabbrowser-tabs[orient="vertical"][expanded] & { 574 | align-items: center !important; 575 | display: flex; 576 | margin-block: var(--gnome-toolbar-padding) !important; 577 | 578 | &::before { 579 | -moz-context-properties: fill; 580 | fill: currentColor !important; 581 | background: var(--gnome-icon-pan-end-symbolic) no-repeat; 582 | background-size: contain; 583 | content: ""; 584 | display: block; 585 | height: 16px; 586 | margin-inline-end: 3px; 587 | width: 16px; 588 | } 589 | tab-group:not([collapsed]) &::before { 590 | background-image: var(--gnome-icon-pan-down-symbolic); 591 | } 592 | } 593 | } 594 | 595 | /* Remove spacing between pinned tabs and first tab */ 596 | #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { 597 | margin-inline-start: 0 !important; 598 | } 599 | 600 | /* Always display close icon (hidden) */ 601 | #tabbrowser-tabs[closebuttons="activetab"] .tab-close-button:not([pinned]) { 602 | display: block !important; 603 | } 604 | 605 | /* Always show the muted icon when present */ 606 | #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon] { 607 | opacity: 1 !important; 608 | } 609 | 610 | /* Fix custom info tab icon */ 611 | .tabbrowser-tab[image="chrome://global/skin/icons/info.svg"]:not([pinned]):not([busy]):not([progress]) .tab-icon-stack::before { 612 | margin-inline-end: 5.5px; 613 | } 614 | .tabbrowser-tab[image="chrome://global/skin/icons/info.svg"] .tab-icon-image { 615 | display: none !important; 616 | } 617 | 618 | /* Tabs containers */ 619 | .tabbrowser-tab[usercontextid] { 620 | & > .tab-stack > .tab-background > .tab-context-line { 621 | display: none; 622 | } 623 | 624 | .tab-label-container { 625 | color: var(--identity-tab-color) !important; 626 | font-weight: bold !important; 627 | } 628 | 629 | #tabbrowser-tabs[orient="vertical"]:not([expanded]) & { 630 | .tab-background { 631 | outline: 1px solid var(--identity-tab-color) !important; 632 | } 633 | } 634 | } 635 | .identity-color-blue, 636 | .identity-color-turquoise, 637 | .identity-color-green, 638 | .identity-color-yellow, 639 | .identity-color-orange, 640 | .identity-color-red, 641 | .identity-color-pink, 642 | .identity-color-purple { 643 | --identity-icon-color: var(--identity-tab-color) !important; 644 | } 645 | .identity-color-blue { 646 | --identity-tab-color: var(--gnome-tabbar-identity-color-blue) !important; 647 | } 648 | .identity-color-turquoise { 649 | --identity-tab-color: var(--gnome-tabbar-identity-color-turquoise) !important; 650 | } 651 | .identity-color-green { 652 | --identity-tab-color: var(--gnome-tabbar-identity-color-green) !important; 653 | } 654 | .identity-color-yellow { 655 | --identity-tab-color: var(--gnome-tabbar-identity-color-yellow) !important; 656 | } 657 | .identity-color-orange { 658 | --identity-tab-color: var(--gnome-tabbar-identity-color-orange) !important; 659 | } 660 | .identity-color-red { 661 | --identity-tab-color: var(--gnome-tabbar-identity-color-red) !important; 662 | } 663 | .identity-color-pink { 664 | --identity-tab-color: var(--gnome-tabbar-identity-color-pink) !important; 665 | } 666 | .identity-color-purple { 667 | --identity-tab-color: var(--gnome-tabbar-identity-color-purple) !important; 668 | } 669 | 670 | /* Needs attetion tab indicator */ 671 | .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content, 672 | .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] { 673 | background-size: 0px 0px !important; 674 | background-position: center bottom !important; 675 | transition-property: background-size; 676 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 677 | transition-duration: calc(var(--gnome-animation-time) / 2); 678 | } 679 | .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), 680 | .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { 681 | background-image: radial-gradient(var(--gnome-tabbar-tab-needs-attetion), var(--gnome-tabbar-tab-needs-attetion) 10px) !important; 682 | background-size: clamp(20%, 50%, 7rem) 2px !important; 683 | } 684 | .tab-label[attention]:not([selected]) { 685 | font-weight: normal !important; 686 | } 687 | 688 | /* Tab spinner */ 689 | .tab-throbber::before { 690 | animation: none !important; 691 | background-image: url("../icons/spinner.png") !important; 692 | background-size: 16px; 693 | width: 16px !important; 694 | opacity: 1 !important; 695 | @media (prefers-color-scheme: dark) { 696 | background-image: url("../icons/spinner-dark.png") !important; 697 | } 698 | } 699 | 700 | /* Tabs manager menu */ 701 | #alltabs-button { 702 | @media not -moz-pref("gnomeTheme.allTabsButton") { 703 | visibility: collapse; 704 | } 705 | 706 | @media -moz-pref("browser.tabs.tabmanager.enabled"), -moz-pref("gnomeTheme.allTabsButtonOnOverflow") { 707 | #tabbrowser-tabs[overflow] ~ & { 708 | visibility: visible; 709 | } 710 | } 711 | 712 | #tabbrowser-tabs:not([overflow])[using-closing-tabs-spacer] ~ & { 713 | display: none !important; 714 | } 715 | } 716 | 717 | /* Firefox View */ 718 | #TabsToolbar #firefox-view-button .toolbarbutton-icon { 719 | box-shadow: none !important; 720 | fill: var(--gnome-toolbar-icon-fill) !important; 721 | height: 16px !important; 722 | opacity: 1 !important; 723 | width: 16px !important; 724 | overflow: visible !important; 725 | border-radius: initial !important; 726 | } 727 | :root:not([privatebrowsingmode="temporary"]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button) + #tabbrowser-tabs { 728 | border-inline-start: 0 !important; 729 | padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; 730 | margin-inline-start: 0 !important; 731 | } 732 | 733 | /* OPTIONAL: Hide single tab */ 734 | @media -moz-pref("gnomeTheme.hideSingleTab") and (not -moz-pref("sidebar.verticalTabs")) { 735 | #tabbrowser-tabs:not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) { 736 | :is(tab, tab ~ toolbarbutton, tab ~ #tabbrowser-arrowscrollbox-periphery) { 737 | visibility: collapse; 738 | } 739 | ~ #alltabs-button { 740 | visibility: collapse; 741 | } 742 | } 743 | } 744 | 745 | /* OPTIONAL: Use tabs as headerbar */ 746 | @media -moz-pref("gnomeTheme.tabsAsHeaderbar") and (not -moz-pref("sidebar.verticalTabs")) { 747 | /* Rearrange bars */ 748 | #navigator-toolbox #TabsToolbar { 749 | order: 0; 750 | } 751 | #navigator-toolbox #toolbar-menubar { 752 | order: 1; 753 | } 754 | #navigator-toolbox #nav-bar { 755 | order: 3; 756 | } 757 | #navigator-toolbox #PersonalToolbar { 758 | order: 4; 759 | } 760 | @media -moz-pref("gnomeTheme.bookmarksToolbarUnderTabs") { 761 | #navigator-toolbox #PersonalToolbar { 762 | order: 2 !important; 763 | } 764 | } 765 | 766 | #TabsToolbar { 767 | /* Spacing should be removed on the side touching the URL bar */ 768 | .toolbarbutton-1, 769 | .titlebar-button { 770 | margin-bottom: 0 !important; 771 | } 772 | 773 | .toolbarbutton-1 { 774 | margin-top: var(--gnome-toolbar-padding) !important; 775 | } 776 | } 777 | 778 | 779 | #tabbrowser-tabs[orient="horizontal"] { 780 | /* Invert padding */ 781 | :not([collapsed]) > .tabbrowser-tab, .tabbrowser-tab { 782 | padding-bottom: 0px !important; 783 | padding-top: var(--gnome-toolbar-padding) !important; 784 | } 785 | 786 | /* Move tab group line to top */ 787 | .tab-group-label-container::after { 788 | inset: 0 !important; 789 | } 790 | tab-group { 791 | .tab-background { 792 | flex-direction: column-reverse !important; 793 | } 794 | .tab-group-line { 795 | margin-block-end: 0 !important; 796 | margin-block-start: calc(var(--gnome-toolbar-padding) * -1) !important; 797 | } 798 | } 799 | 800 | /* Tabs separators */ 801 | :root[dir="ltr"] & { 802 | tab:not(:first-of-type, [selected], :hover) { 803 | --gnome-tabbar-tab-separator-hack1: linear-gradient( 804 | to bottom, 805 | var(--gnome-tabbar-tab-separator-hack0) 0, 806 | var(--gnome-tabbar-tab-separator-hack0) 9px, 807 | var(--gnome-tabbar-tab-separator-color) 9px, 808 | var(--gnome-tabbar-tab-separator-color) 37px, 809 | var(--gnome-tabbar-tab-separator-hack0) 37px, 810 | var(--gnome-tabbar-tab-separator-hack0) 40px 811 | ) 1; 812 | border-image: var(--gnome-tabbar-tab-separator-hack1); 813 | } 814 | } 815 | 816 | } 817 | 818 | /* Remove nav-bar rounding and padding */ 819 | :root[customtitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #nav-bar { 820 | border-radius: 0 !important; 821 | } 822 | 823 | /* Round and pad tab-bar */ 824 | :root[customtitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #TabsToolbar { 825 | border-radius: env(-moz-gtk-csd-titlebar-radius) env(-moz-gtk-csd-titlebar-radius) 0 0 !important 826 | } 827 | :root[customtitlebar]:not([inFullscreen], [sizemode="maximized"]) #TabsToolbar .toolbar-items { 828 | padding: 0 46px; 829 | } 830 | 831 | /* Hide duplicate window controls from navbar */ 832 | :root[customtitlebar] #nav-bar .titlebar-buttonbox-container { 833 | display: none !important; 834 | } 835 | 836 | /* Force displaying controls in tab-bar */ 837 | :root[customtitlebar]:not([inDOMFullscreen]) #TabsToolbar .titlebar-buttonbox-container { 838 | display: flex !important; 839 | padding-top: var(--gnome-toolbar-padding) !important; 840 | visibility: visible !important; 841 | } 842 | 843 | /* Blend single tab into whole bar */ 844 | @media -moz-pref("gnomeTheme.hideSingleTab") { 845 | #tabbrowser-tabs:not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) :is( 846 | tab, 847 | tab ~ toolbarbutton, 848 | tab ~ #tabbrowser-arrowscrollbox-periphery 849 | ) { 850 | visibility: visible; 851 | } 852 | #tabbrowser-tabs:not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) tab { 853 | -moz-window-dragging: drag !important; 854 | } 855 | #tabbrowser-tabs:not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) .tab-background { 856 | display: none !important 857 | } 858 | #tabbrowser-tabs:not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) .tab-close-button { 859 | visibility: hidden !important; 860 | opacity: 0 !important; 861 | } 862 | #tabbrowser-tabs:not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) .tab-content::before { 863 | --gnome-tabbar-tab-close-overlay-bg: unset !important; 864 | } 865 | :root[dir="ltr"] #tabbrowser-tabs:not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) .tab-label-container[textoverflow="true"] { 866 | margin-inline-end: -16px; 867 | } 868 | } 869 | } 870 | -------------------------------------------------------------------------------- /theme/parts/toolbox.css: -------------------------------------------------------------------------------- 1 | /* Toolbox, a container for all toolbars (toolbox#navigator-toolbox): 2 | * - menu bar (toolbar#toolbar-menubar) 3 | * - tab bar (toolbar#TabsToolbar) 4 | * - header bar (toolbar#nav-bar) 5 | * - bookmark bar (toolbar#PersonalToolbar) 6 | * - add-ons can add their own toolbars (toolbar) */ 7 | 8 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 9 | 10 | :root { 11 | --tabpanel-background-color: --gnome-window-background !important; 12 | } 13 | 14 | /* Toolbox colors */ 15 | #navigator-toolbox { 16 | background: var(--gnome-toolbar-background) !important; 17 | border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; 18 | } 19 | 20 | #PersonalToolbar, #toolbar-menubar, #TabsToolbar, findbar { 21 | appearance: none !important; 22 | border: 0 !important; 23 | background: var(--gnome-toolbar-background) !important; 24 | &:-moz-window-inactive { 25 | opacity: 1 !important; 26 | } 27 | } 28 | findbar { 29 | border-top: 1px solid var(--gnome-toolbar-border-color) !important; 30 | } 31 | #nav-bar:-moz-window-inactive, 32 | #PersonalToolbar:-moz-window-inactive, 33 | #toolbar-menubar:-moz-window-inactive, 34 | #TabsToolbar:-moz-window-inactive, 35 | findbar:-moz-window-inactive, 36 | .container.infobar:-moz-window-inactive { 37 | transition: background var(--gnome-animation-time) ease-out; 38 | } 39 | 40 | #navigator-toolbox:-moz-window-inactive label, 41 | #downloads-indicator-anchor:-moz-window-inactive, 42 | findbar:-moz-window-inactive image:not(#hack), 43 | findbar:-moz-window-inactive label, 44 | findbar:-moz-window-inactive description, 45 | #viewButton:-moz-window-inactive dropmarker, 46 | .container.infobar:-moz-window-inactive { 47 | opacity: 0.5 !important; 48 | } 49 | 50 | #toolbar-menubar:not([inactive=true]) { 51 | margin-bottom: 0 !important; 52 | } 53 | 54 | /* Overrides: Remove border below the menu bar / above the header bar */ 55 | #TabsToolbar:not([collapsed="true"]) + #nav-bar { 56 | border-top-width: 0 !important; 57 | } 58 | #navigator-toolbox::after { 59 | border-bottom-width: 0 !important; 60 | } 61 | 62 | /* Reorder toolbars */ 63 | #navigator-toolbox #nav-bar { 64 | order: 0; 65 | } 66 | #navigator-toolbox #PersonalToolbar { 67 | order: 2; 68 | } 69 | #navigator-toolbox #TabsToolbar { 70 | order: 3; 71 | } 72 | 73 | #notifications-toolbar { 74 | order: 100; 75 | } 76 | .notificationbox-stack { 77 | order: 1000; 78 | } 79 | 80 | /* Content notifications */ 81 | .notificationbox-stack notification-message { 82 | background-color: color-mix(in srgb, var(--gnome-accent-bg) 30%, var(--gnome-window-background)) !important; 83 | border: 0 !important; 84 | border-top: 1px solid var(--gnome-toolbar-border-color) !important; 85 | border-radius: 0 !important; 86 | margin: 0 !important; 87 | 88 | &[type="warning"] { 89 | background-color: #ffe900 !important; 90 | } 91 | &[type="critical"] { 92 | background-color: #d70022 !important; 93 | } 94 | 95 | &[style*="margin-top"] { 96 | margin-top: -48px !important; 97 | } 98 | 99 | &::before { 100 | display: none !important; 101 | } 102 | } 103 | link[href="chrome://global/content/elements/moz-message-bar.css"] ~ .container { 104 | background: none !important; 105 | box-shadow: none !important; 106 | padding: var(--gnome-toolbar-padding) !important; 107 | border-radius: 0 !important; 108 | 109 | .icon { 110 | color: var(--gnome-window-color); 111 | height: 16px !important; 112 | width: 16px !important; 113 | margin: 8px 0 !important; 114 | } 115 | 116 | .text-container { 117 | flex: auto; 118 | } 119 | 120 | .text-content { 121 | font-weight: bold !important; 122 | } 123 | } 124 | 125 | /* Bookmarks */ 126 | #PersonalToolbar { 127 | padding: var(--gnome-toolbar-padding) !important; 128 | padding-top: 0 !important; 129 | --bookmarks-toolbar-overlapping-browser-height: auto; 130 | } 131 | #PlacesToolbar toolbarseparator { 132 | border-top: 0 !important; 133 | } 134 | #PlacesToolbarItems > toolbarseparator::before { 135 | border-image-source: none !important; 136 | border-color: var(--gnome-tabbar-tab-separator-color) !important; 137 | } 138 | @media -moz-pref("gnomeTheme.bookmarksOnFullscreen") { /* OPTIONAL: Show bookmarks bar while in fullscreen */ 139 | :root[inFullscreen] #PersonalToolbar{ 140 | visibility: visible !important; 141 | } 142 | } 143 | 144 | #import-button, 145 | #PlacesToolbar .bookmark-item { 146 | border-radius: 6px !important; 147 | color: var(--gnome-window-color) !important; 148 | padding: 3px 6px !important; 149 | 150 | &:hover { 151 | background-color: var(--gnome-selected-color) !important; 152 | } 153 | &:active, &[open] { 154 | background-color: var(--gnome-selected-active-color) !important; 155 | } 156 | } 157 | 158 | /* Text link */ 159 | .text-link, a { 160 | color: var(--gnome-accent) !important; 161 | } 162 | 163 | /* Selection*/ 164 | *::-moz-selection { 165 | background-color: var(--gnome-selection-bg) !important; 166 | } 167 | 168 | /* OPTIONAL: Hide WebRTC indicator */ 169 | @media -moz-pref("gnomeTheme.hideWebrtcIndicator") { 170 | #webrtcIndicator { 171 | display: none; 172 | } 173 | } 174 | 175 | /* OPTIONAL: Move Bookmarks toolbar under tabs */ 176 | @media -moz-pref("gnomeTheme.bookmarksToolbarUnderTabs") { 177 | #navigator-toolbox #PersonalToolbar { 178 | order: 3; 179 | } 180 | #navigator-toolbox #TabsToolbar { 181 | order: 2; 182 | } 183 | } 184 | -------------------------------------------------------------------------------- /theme/parts/urlbar.css: -------------------------------------------------------------------------------- 1 | /* Header bar's URL bar */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | #urlbar { 6 | --urlbar-height: 34.00px; 7 | --urlbar-toolbar-height: 34.00px !important; 8 | } 9 | 10 | #urlbar-container { 11 | --urlbar-container-height: 34px !important; 12 | 13 | @media (max-width: 630px) { 14 | width: auto !important; 15 | } 16 | } 17 | 18 | /* Center the URL bar */ 19 | toolbarspring { 20 | max-width: 10000px !important; 21 | } 22 | 23 | /* URL bar */ 24 | #urlbar { 25 | box-shadow: none !important; 26 | &[breakout] { 27 | width: calc(var(--urlbar-width) - var(--gnome-toolbar-spacing)) !important; 28 | } 29 | } 30 | 31 | #urlbar-background { 32 | box-shadow: var(--gnome-entry-box-shadow) !important; 33 | border: 0 !important; 34 | border-radius: 8px !important; 35 | background: transparent !important; 36 | } 37 | 38 | #urlbar .urlbar-input-container { 39 | padding: 0 !important; 40 | } 41 | 42 | .urlbar-input::placeholder, .searchbar-textbox::placeholder { 43 | opacity: 0.85 !important; 44 | } 45 | 46 | #searchmode-switcher-icon { 47 | margin-inline-start: 9px !important; 48 | } 49 | #searchmode-switcher-dropmarker { 50 | margin-inline-end: 9px !important; 51 | } 52 | 53 | /* URL bar results */ 54 | .urlbarView { 55 | background: transparent !important; 56 | color: var(--gnome-window-color) !important; 57 | margin: 11px 0 0 -3px !important; 58 | position: absolute !important; 59 | box-shadow: var(--gnome-menu-shadow) !important; 60 | border-radius: 12px !important; 61 | width: 100% !important; 62 | } 63 | 64 | /* Search bar result */ 65 | #PopupSearchAutoComplete { 66 | margin-top: 7px !important; 67 | } 68 | 69 | .urlbarView-body-outer { 70 | --item-padding-start: 0 !important; 71 | --item-padding-end: 0 !important; 72 | background: var(--gnome-menu-background) !important; 73 | overflow-x: auto; 74 | padding: 2px 6px !important; 75 | border-radius: 8px 8px 0 0 !important; 76 | } 77 | 78 | .urlbarView-body-inner { 79 | border: 0 !important; 80 | } 81 | 82 | .urlbarView-row-inner, .urlbarView-no-wrap { 83 | align-items: center !important; 84 | } 85 | .urlbarView-row-inner { 86 | padding-block: 5px !important; 87 | border-radius: 5px !important; 88 | } 89 | 90 | .urlbarView-row[selected] { 91 | background: var(--gnome-selected-color) !important; 92 | color: var(--gnome-window-color) !important; 93 | } 94 | .urlbarView-row[selected]:hover { 95 | background: var(--gnome-selected-hover-color) !important; 96 | } 97 | .urlbarView-row:not([selected]):hover { 98 | background: var(--gnome-hover-color) !important; 99 | } 100 | .urlbarView-row:not([selected]):active { 101 | background: var(--gnome-active-color) !important; 102 | } 103 | 104 | .urlbarView-url { 105 | color: var(--gnome-accent) !important; 106 | } 107 | 108 | .urlbarView-action { 109 | background: transparent !important; 110 | } 111 | 112 | /* Fix items overflow */ 113 | .urlbarView[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap, 114 | .urlbarView-row[has-url]:not([type$="tab"]) > .urlbarView-row-inner > .urlbarView-no-wrap, .urlbarView-row[has-url]:is([type="remotetab"], 115 | [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap { 116 | max-width: calc(96% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px))) !important; 117 | } 118 | 119 | /* Search engines buttons */ 120 | .search-one-offs { 121 | padding: 8px !important; 122 | background: var(--gnome-menu-background) !important; 123 | border-top: 1px solid var(--gnome-menu-separator-color) !important; 124 | border-radius: 0 0 8px 8px !important; 125 | } 126 | 127 | .search-one-offs[is_searchbar="true"] { 128 | margin-bottom: -8px !important; 129 | } 130 | 131 | /* URL bar and Search bar */ 132 | #urlbar[focused] .urlbar-textbox-container { 133 | margin: -1px !important; 134 | } 135 | #searchbar > .searchbar-textbox[focused] .searchbar-search-button { 136 | margin-left: -1px !important; 137 | } 138 | #searchbar > .searchbar-textbox[focused] .search-go-button { 139 | margin-right: -1px !important; 140 | } 141 | 142 | /* URL bar and Search bar's icons */ 143 | .urlbar-icon:hover, 144 | .urlbar-icon-wrapper:hover, 145 | .urlbar-icon[open], 146 | .urlbar-icon-wrapper[open], 147 | .urlbar-icon:hover:active, 148 | .urlbar-icon-wrapper:hover:active, 149 | .searchbar-search-button:hover .searchbar-search-icon, 150 | .searchbar-search-button[open] .searchbar-search-icon, 151 | .searchbar-search-button:hover:active .searchbar-search-icon { 152 | background-color: transparent !important; 153 | fill-opacity: 1 !important; 154 | } 155 | 156 | #urlbar .urlbar-icon { 157 | margin: 0 !important; 158 | height: 100% !important; 159 | } 160 | #notification-popup-box { 161 | height: 100% !important; 162 | } 163 | 164 | @media -moz-pref("browser.urlbar.richSuggestions.featureGate") { 165 | #urlbar:not(.searchButton) > .urlbar-input-container > #identity-box[pageproxystate="invalid"] > .identity-box-button { 166 | margin-inline-start: 2px; 167 | } 168 | } 169 | 170 | /* Search mode indicator */ 171 | #urlbar-search-mode-indicator, 172 | #urlbar-label-box, 173 | #urlbar-zoom-button { 174 | background: var(--gnome-button-background) !important; 175 | border: 0 !important; 176 | border-radius: 26px !important; 177 | outline: 0 !important; 178 | margin: 4px 0; 179 | } 180 | #urlbar-search-mode-indicator { 181 | padding-right: 0 !important; 182 | } 183 | #urlbar-search-mode-indicator-title { 184 | color: var(--gnome-window-color); 185 | padding-inline: 4px !important; 186 | } 187 | #urlbar-search-mode-indicator-close { 188 | background-size: 16px !important; 189 | background-position: center; 190 | border-radius: 26px !important; 191 | padding: 5px !important; 192 | } 193 | #urlbar-search-mode-indicator-close:hover { 194 | background-color: var(--gnome-button-hover-background) !important; 195 | } 196 | #urlbar-zoom-button { 197 | opacity: 0.8; 198 | } 199 | #urlbar-zoom-button:hover { 200 | opacity: 1; 201 | } 202 | 203 | /* Firefox identity box */ 204 | #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, 205 | #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, 206 | #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, 207 | #urlbar-label-box { 208 | background-color: transparent !important; 209 | } 210 | 211 | #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:not([open]), 212 | #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:not([open]), 213 | #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:not([open]) { 214 | background-color: hsla(0,0%,70%,.2) !important; 215 | } 216 | 217 | #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:active, 218 | #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button[open=true], 219 | #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:active, 220 | #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button[open=true], 221 | #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:active, 222 | #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button[open=true] { 223 | background-color: hsla(0,0%,70%,.3) !important; 224 | } 225 | 226 | @media -moz-pref("browser.urlbar.richSuggestions.featureGate") { 227 | #identity-box[pageproxystate="invalid"] > .identity-box-button { 228 | padding-inline: var(--urlbar-icon-padding) !important; 229 | } 230 | } 231 | -------------------------------------------------------------------------------- /theme/parts/video-player.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | @namespace html url("http://www.w3.org/1999/xhtml"); 3 | 4 | /** Video player **/ 5 | 6 | .progressBar::-moz-progress-bar { 7 | background-color: #fff !important; 8 | } 9 | 10 | .scrubber:hover::-moz-range-thumb, 11 | .volumeControl:hover::-moz-range-thumb { 12 | background-color: #ccc !important; 13 | } 14 | 15 | .scrubber:active::-moz-range-thumb, 16 | .volumeControl:active::-moz-range-thumb { 17 | background-color: #bbb !important; 18 | } 19 | 20 | .controlBar { 21 | border-radius: 5px; 22 | margin: auto; 23 | margin-bottom: 5px; 24 | width: 98.5%; 25 | max-width: 800px; 26 | height: 30px !important; 27 | background-color: rgba(20,20,20,0.8) !important; 28 | } 29 | 30 | .controlBar > .button:enabled:hover { 31 | fill: #ccc !important; 32 | } 33 | 34 | .controlBar > .button:enabled:hover:active { 35 | fill: #bbb !important; 36 | } 37 | 38 | .scrubberStack { 39 | margin: 0 10px; 40 | } 41 | 42 | .playButton { 43 | scale: 0.8; 44 | } 45 | 46 | 47 | 48 | /** Vertical Volume Bar **/ 49 | /* I'm to stupid to get this working. Wasn't able to set proper position relative to mute button */ 50 | 51 | /* .muteButton:hover ~ .volumeStack{ 52 | margin-bottom: 129px !important; 53 | } 54 | .volumeStack:hover { 55 | margin-bottom: 129px !important; 56 | } 57 | 58 | .volumeStack { 59 | transform: rotate(270deg); 60 | max-height: 33px !important; 61 | min-width: 100px !important; 62 | position:absolute !important; 63 | margin-bottom: -150px !important; 64 | background-color: rgba(20,20,20,0.8) !important; 65 | border-bottom-right-radius: 5px !important; 66 | border-top-right-radius: 5px !important; 67 | transition-property: margin-bottom; 68 | transition-duration: 0.13s; 69 | transition-timing-function: linear; 70 | } 71 | 72 | .volumeControl{ 73 | width: 92% !important; 74 | margin-left: 5px !important; 75 | } */ 76 | -------------------------------------------------------------------------------- /theme/platforms/windows.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | -------------------------------------------------------------------------------- /theme/symbolic-tab-icons.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* Icons light/dark fix coloring hack filters */ 4 | :root { 5 | --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); 6 | } 7 | @media (prefers-color-scheme: dark) { 8 | :root { 9 | --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); 10 | } 11 | } 12 | 13 | /* Make all tab icons look kinda like symbolic icons */ 14 | tab .tab-icon-image { 15 | filter: var(--gnome-convert-icon-to-symbolic-hack-filter); 16 | } 17 | 18 | -------------------------------------------------------------------------------- /theme/system-icons.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* Icons light/dark fix coloring hack filters */ 4 | :root { 5 | --gnome-icons-hack-filter: brightness(0) saturate(100%) invert(37%) sepia(8%) saturate(683%) hue-rotate(183deg) brightness(95%) contrast(84%); 6 | --gnome-window-icons-hack-filter: brightness(0) saturate(100%) invert(37%) sepia(8%) saturate(683%) hue-rotate(183deg) brightness(95%) contrast(84%); 7 | @media (prefers-color-scheme: dark) { 8 | --gnome-icons-hack-filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(362%) hue-rotate(184deg) brightness(95%) contrast(87%); 9 | --gnome-window-icons-hack-filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(362%) hue-rotate(184deg) brightness(95%) contrast(87%); 10 | } 11 | } 12 | 13 | /* Use system theme icons instead of Adwaita icons included by theme */ 14 | :root { 15 | --gnome-icon-application-x-addon-symbolic: url("moz-icon://stock/application-x-addon-symbolic?size=dialog") !important; 16 | --gnome-icon-applications-engineering-symbolic: url("moz-icon://stock/applications-engineering-symbolic?size=dialog") !important; 17 | --gnome-icon-edit-copy-symbolic: url("moz-icon://stock/edit-copy-symbolic?size=dialog") !important; 18 | --gnome-icon-edit-cut-symbolic: url("moz-icon://stock/edit-cut-symbolic?size=dialog") !important; 19 | --gnome-icon-edit-find-symbolic: url("moz-icon://stock/edit-find-symbolic?size=dialog") !important; 20 | --gnome-icon-edit-paste-symbolic: url("moz-icon://stock/edit-paste-symbolic?size=dialog") !important; 21 | --gnome-icon-folder-download-symbolic: url("moz-icon://stock/folder-download-symbolic?size=dialog") !important; 22 | --gnome-icon-go-next-symbolic: url("moz-icon://stock/go-next-symbolic?size=dialog") !important; 23 | --gnome-icon-go-previous-symbolic: url("moz-icon://stock/go-previous-symbolic?size=dialog") !important; 24 | --gnome-icon-mail-unread-symbolic: url("moz-icon://stock/mail-unread-symbolic?size=dialog") !important; 25 | --gnome-icon-open-menu-symbolic: url("moz-icon://stock/open-menu-symbolic?size=dialog") !important; 26 | --gnome-icon-pan-down-symbolic: url("moz-icon://stock/pan-down-symbolic?size=dialog") !important; 27 | --gnome-icon-pan-down-symbolic: url("moz-icon://stock/pan-down-symbolic?size=dialog") !important; 28 | --gnome-icon-preferences-system-symbolic: url("moz-icon://stock/preferences-system-symbolic?size=dialog") !important; 29 | --gnome-icon-preferences-system-time-symbolic: url("moz-icon://stock/preferences-system-time-symbolic?size=dialog") !important; 30 | --gnome-icon-printer-symbolic: url("moz-icon://stock/printer-symbolic?size=dialog") !important; 31 | --gnome-icon-process-stop-symbolic: url("moz-icon://stock/process-stop-symbolic?size=dialog") !important; 32 | --gnome-icon-starred-symbolic: url("moz-icon://stock/starred-symbolic?size=dialog") !important; 33 | --gnome-icon-tab-new-symbolic: url("moz-icon://stock/tab-new-symbolic?size=dialog") !important; 34 | --gnome-icon-user-home-symbolic: url("moz-icon://stock/user-home-symbolic?size=dialog") !important; 35 | --gnome-icon-view-fullscreen-symbolic: url("moz-icon://stock/view-fullscreen-symbolic?size=dialog") !important; 36 | --gnome-icon-view-refresh-symbolic: url("moz-icon://stock/view-refresh-symbolic?size=dialog") !important; 37 | --gnome-icon-view-restore-symbolic: url("moz-icon://stock/view-restore-symbolic?size=dialog") !important; 38 | --gnome-icon-window-close-symbolic: url("moz-icon://stock/window-close-symbolic?size=dialog") !important; 39 | --gnome-icon-window-maximize-symbolic: url("moz-icon://stock/window-maximize-symbolic?size=dialog") !important; 40 | --gnome-icon-window-minimize-symbolic: url("moz-icon://stock/window-minimize-symbolic?size=dialog") !important; 41 | --gnome-icon-window-new-symbolic: url("moz-icon://stock/window-new-symbolic?size=dialog") !important; 42 | --gnome-icon-window-restore-symbolic: url("moz-icon://stock/window-restore-symbolic?size=dialog") !important; 43 | --gnome-icon-zoom-in-symbolic: url("moz-icon://stock/zoom-in-symbolic?size=dialog") !important; 44 | --gnome-icon-zoom-out-symbolic: url("moz-icon://stock/zoom-out-symbolic?size=dialog") !important; 45 | } 46 | 47 | /* Apply icon color filter */ 48 | :root[customtitlebar] .titlebar-buttonbox .titlebar-close .toolbarbutton-icon, 49 | .close-icon, 50 | #nav-bar #back-button .toolbarbutton-icon, 51 | #nav-bar #forward-button .toolbarbutton-icon, 52 | #PanelUI-menu-button .toolbarbutton-icon, 53 | #new-tab-button .toolbarbutton-icon, 54 | #tabs-newtab-button .toolbarbutton-icon, 55 | #TabsToolbar #new-tab-button .toolbarbutton-icon, 56 | #home-button .toolbarbutton-icon, 57 | #preferences-button .toolbarbutton-icon, 58 | #fullscreen-button .toolbarbutton-icon, 59 | #zoom-out-button .toolbarbutton-icon, 60 | #zoom-in-button .toolbarbutton-icon, 61 | #developer-button .toolbarbutton-icon, 62 | #email-link-button .toolbarbutton-icon, 63 | #print-button .toolbarbutton-icon, 64 | #add-ons-button .toolbarbutton-icon, 65 | #find-button .toolbarbutton-icon, 66 | #new-window-button .toolbarbutton-icon, 67 | #bookmarks-menu-button .toolbarbutton-icon, 68 | #history-panelmenu .toolbarbutton-icon, 69 | #alltabs-button .toolbarbutton-icon, 70 | #cut-button .toolbarbutton-icon, 71 | #copy-button .toolbarbutton-icon, 72 | #paste-button .toolbarbutton-icon, 73 | #reload-button .toolbarbutton-icon, 74 | #context-reload .toolbarbutton-icon, 75 | #stop-button .toolbarbutton-icon, 76 | #context-stop .toolbarbutton-icon, 77 | #downloads-indicator-icon, 78 | #downloads-indicator-icon .toolbarbutton-icon, 79 | #nav-bar-overflow-button .toolbarbutton-icon, 80 | #context-back .menu-iconic-icon, 81 | #context-forward .menu-iconic-icon, 82 | #appMenu-zoom-controls .toolbarbutton-icon, 83 | #unified-extensions-button .toolbarbutton-icon, 84 | #identity-icon { 85 | filter: var(--gnome-window-icons-hack-filter) !important; 86 | } 87 | 88 | /* Fix icon size */ 89 | toolbar .toolbarbutton-1 > .toolbarbutton-icon, 90 | #downloads-indicator-icon { 91 | width: 16px !important; 92 | height: 16px !important; 93 | padding: 0 !important; 94 | } 95 | :root[customtitlebar] #titlebar .titlebar-button .toolbarbutton-icon, 96 | :root[customtitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { 97 | width: 16px; 98 | } 99 | -------------------------------------------------------------------------------- /theme/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gnome-toolbar-padding: 6px; 3 | --gnome-toolbar-spacing: 6px; 4 | --gnome-button-radius: 9px; 5 | --gnome-button-size: 34px; 6 | --gnome-entry-radius: var(--gnome-button-radius); 7 | --gnome-entry-height: var(--gnome-button-size); 8 | --gnome-card-radius: 12px; 9 | --gnome-menu-radius: 9px; 10 | --gnome-menu-padding: 6px; 11 | --gnome-menu-item-padding: 12px; 12 | --gnome-popover-radius: calc(var(--gnome-menu-radius) + 6px); 13 | --gnome-dialog-radius: 18px; /* Alert dialog */ 14 | --gnome-dialog-padding: 24px; 15 | 16 | /* Animations */ 17 | --gnome-animation-time: 300ms; 18 | --gnome-tab-animation-time: 200ms; 19 | 20 | @media (prefers-reduced-motion) { 21 | --gnome-animation-time: 0ms; 22 | --gnome-tab-animation-time: 0ms; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | 2 | /* Import theme */ 3 | @import "theme/gnome-theme.css"; 4 | 5 | /* Import a custom stylesheet 6 | * Everything you add in your customChrome.css file (it doesn't exist by 7 | * default) will be included here and preserved between updates. 8 | * You can apply your own custom styles in that file. */ 9 | @import "customChrome.css"; /**/ 10 | -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | @import "theme/variables.css"; 2 | @import "theme/colors/light.css"; 3 | @import "theme/colors/dark.css"; 4 | 5 | @import "theme/pages/newtab.css"; 6 | @import "theme/pages/privatebrowsing.css"; 7 | 8 | @import "theme/parts/video-player.css"; 9 | 10 | /* Import a custom stylesheet 11 | * Everything you add in your customContent.css file (it doesn't exist by 12 | * default) will be included here and preserved between updates. 13 | * You can apply your own custom styles in that file. */ 14 | @import "customContent.css"; /**/ --------------------------------------------------------------------------------