├── .github ├── ISSUE_TEMPLATE │ ├── borked.yml │ ├── new-theme.yml │ └── update-theme.yml └── workflows │ └── new-theme.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── scripts ├── update.py └── write.py ├── themes.json └── themes ├── 1f1e7bbb-213b-473e-aebb-e9bffa3c9747 ├── README.md ├── pineapple-fried │ ├── cohesion │ │ ├── Readme.md │ │ ├── cohesion.css │ │ └── modules │ │ │ ├── compact-toolbar-style.css │ │ │ ├── intergrated-urlbar.css │ │ │ ├── multi-toolbar-style.css │ │ │ ├── single-toolbar-style.css │ │ │ ├── transparent-styles.css │ │ │ ├── url-animations.css │ │ │ └── window-controls.css │ ├── pineapple-fried.css │ ├── wazz-tweaks │ │ ├── Modules │ │ │ ├── community-changes │ │ │ │ └── mini-container-in-url.css │ │ │ └── personal-changes │ │ │ │ ├── hide-bookmark-chevron.css │ │ │ │ └── worksapce-button-style.css │ │ ├── README.md │ │ └── wazz-tweaks.css │ └── zen-new-tabs │ │ └── zen-new-tabs.css └── theme.json ├── 23225fc3-ecac-4fbb-9c03-096ab55a9ee8 ├── README.md ├── tabgroups.css └── theme.json ├── 542f2a0e-4216-4037-9eef-e8143c21ab44 ├── Nebula │ ├── Nebula-config.css │ ├── Nebula-content.css │ ├── Nebula.css │ ├── content │ │ └── better-pdf.css │ └── modules │ │ ├── Animations(tabs).css │ │ ├── BetterPiP.css │ │ ├── Essentials.css │ │ ├── General-UI.css │ │ ├── Miniplayer.css │ │ ├── Pinned-extensions.css │ │ ├── Sidebar.css │ │ ├── Sound-icon.css │ │ ├── Tabfolders.css │ │ ├── Tabstyles.css │ │ ├── Toolbar.css │ │ ├── Topbar-buttons.css │ │ └── URLbar.css ├── README.md ├── theme.json ├── userChrome.css └── userContent.css ├── 63556ee3-b89a-40d9-8f72-04f7b6c1aacc ├── README.md ├── rose-pine │ ├── userChrome.css │ └── userContent.css └── theme.json ├── 660c3485-4292-4021-a204-33dccbc89b89 ├── README.md ├── theme.json └── zero │ ├── userChrome.css │ └── userContent.css ├── 6a853219-2e0d-4c2c-943d-b88a3a0e1e49 ├── README.md ├── natsumi-config.css ├── natsumi-pages │ ├── modules │ │ ├── ff-home.css │ │ ├── global.css │ │ ├── pdfjs.css │ │ ├── preferences-wip.css │ │ ├── preferences.css │ │ └── preload.css │ └── natsumi-pages.css ├── natsumi │ ├── modules │ │ ├── context-menu.css │ │ ├── experiments.css │ │ ├── horizontal-tabs.css │ │ ├── natsumi-base.css │ │ ├── natsumi-findbar.css │ │ ├── natsumi-gamemode.css │ │ ├── natsumi-library.css │ │ ├── natsumi-loading.css │ │ ├── natsumi-miniplayer.css │ │ ├── natsumi-pip.css │ │ ├── natsumi-tabs.css │ │ ├── natsumi-urlbar.css │ │ ├── navbar.css │ │ ├── patches.css │ │ ├── postload.css │ │ ├── preload.css │ │ ├── sidebars.css │ │ ├── ui-tweaks.css │ │ └── web-panel.css │ └── natsumi.css └── theme.json ├── 6b088ea9-b6f6-496c-bbd3-4015105227ff ├── README.md ├── catppuccin-mocha │ ├── userChrome.css │ └── userContent.css └── theme.json ├── 95ee1823-8e1a-4f6d-8aff-5322e1843e23 ├── [Config] Show Bookmarks on Hover │ └── bookmarks-on-hover.css └── theme.json └── b814d97b-2bef-4448-847f-bec13ae326dd ├── README.md ├── ToucanTweaks ├── ToucanTweaks.css └── modules │ ├── Icons.css │ └── Icons │ ├── Bitwarden.svg │ ├── Cast-Kodi.svg │ ├── Dark-Reader.svg │ ├── Extension-Icon.png │ ├── KeepassXC-Browser.svg │ ├── ProtonPass.svg │ ├── Zen-Logo.svg │ ├── Zotero-Connector.svg │ └── uBlock-Origin.svg └── theme.json /.github/ISSUE_TEMPLATE/borked.yml: -------------------------------------------------------------------------------- 1 | name: Report borked theme 2 | description: If a theme is broken, report it here! 3 | title: "BORKED: " 4 | labels: 5 | - bug 6 | body: 7 | - type: input 8 | id: theme 9 | attributes: 10 | label: Theme name/ID 11 | validations: 12 | required: true 13 | - type: input 14 | id: version 15 | attributes: 16 | label: Your Zen Browser version 17 | validations: 18 | required: true 19 | - type: textarea 20 | id: description 21 | attributes: 22 | label: What happened? 23 | description: > 24 | Please provide as much detail as possible. You may include images. 25 | validations: 26 | required: true 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new-theme.yml: -------------------------------------------------------------------------------- 1 | name: Submit theme 2 | description: Submit a theme to the custom theme store! 3 | title: "Add theme: " 4 | body: 5 | - type: input 6 | id: name 7 | attributes: 8 | label: What is the theme's name? 9 | validations: 10 | required: true 11 | - type: input 12 | id: description 13 | attributes: 14 | label: What is the theme's description? 15 | validations: 16 | required: true 17 | - type: input 18 | id: version 19 | attributes: 20 | label: What is the theme's current version? 21 | description: > 22 | If left empty, we'll use 1.0.0 as the default. 23 | - type: input 24 | id: supported 25 | attributes: 26 | label: What is the latest version of Zen Browser the theme supports? 27 | description: > 28 | e.g. 1.10.2b 29 | validations: 30 | required: true 31 | - type: input 32 | id: repo 33 | attributes: 34 | label: What is the repository's URL? 35 | description: > 36 | We'll use this to copy your files to the theme store. 37 | validations: 38 | required: true 39 | - type: textarea 40 | id: copy_file 41 | attributes: 42 | label: What files should be copied? 43 | description: > 44 | Separate each file using new lines. Leave empty if not applicable. 45 | validations: 46 | required: false 47 | - type: textarea 48 | id: copy_folder 49 | attributes: 50 | label: What folders should be copied? 51 | description: > 52 | Separate each folder using new lines. Leave empty if not applicable. 53 | validations: 54 | required: false 55 | - type: textarea 56 | id: load_chrome 57 | attributes: 58 | label: What files should be loaded for the userChrome? 59 | description: > 60 | Separate each file using new lines. Leave empty if not applicable. 61 | validations: 62 | required: false 63 | - type: textarea 64 | id: load_content 65 | attributes: 66 | label: What files should be loaded for the userContent? 67 | description: > 68 | Separate each file using new lines. Leave empty if not applicable. 69 | validations: 70 | required: false 71 | - type: textarea 72 | id: readme 73 | attributes: 74 | label: What should we put in the README? 75 | description: > 76 | Supports markdown. If left empty, we won't set a README file for your theme. 77 | - type: textarea 78 | id: domains 79 | attributes: 80 | label: What domains do your userContent file target? 81 | description: > 82 | e.g. google.com, youtube.com. Separate each domain using new lines. Leave empty if not applicable. 83 | validations: 84 | required: false 85 | - type: input 86 | id: author 87 | attributes: 88 | label: What should we call you on the theme store? 89 | description: > 90 | If left empty, we'll use your GitHub username. 91 | - type: textarea 92 | id: thumbnail 93 | attributes: 94 | label: What image URL should we use for the thumbnail? 95 | placeholder: e.g. https://github.com/greeeen-dev/natsumi-browser/blob/main/images/main.png?raw=true 96 | description: > 97 | This isn't required but it is recommended. 98 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/update-theme.yml: -------------------------------------------------------------------------------- 1 | name: Update theme 2 | description: Update a theme in the custom theme store! 3 | title: "Update theme: " 4 | body: 5 | - type: input 6 | id: id 7 | attributes: 8 | label: What is the theme's ID? 9 | validations: 10 | required: true 11 | - type: input 12 | id: description 13 | attributes: 14 | label: What is the theme's new description? 15 | description: > 16 | If left empty, we'll use the current description. 17 | - type: input 18 | id: version 19 | attributes: 20 | label: What is the theme's new version? 21 | validations: 22 | required: true 23 | - type: input 24 | id: supported 25 | attributes: 26 | label: What is the latest version of Zen Browser the theme supports? 27 | description: > 28 | e.g. 1.10.2b 29 | validations: 30 | required: true 31 | - type: textarea 32 | id: copy_file 33 | attributes: 34 | label: What files should be copied? 35 | description: > 36 | Separate each file using new lines. If left empty, we'll use the current files. Enter !erase to remove all files. 37 | validations: 38 | required: false 39 | - type: textarea 40 | id: copy_folder 41 | attributes: 42 | label: What folders should be copied? 43 | description: > 44 | Separate each file using new lines. If left empty, we'll use the current folders. Enter !erase to remove all folders. 45 | validations: 46 | required: false 47 | - type: textarea 48 | id: load_chrome 49 | attributes: 50 | label: What files should be loaded for the userChrome? 51 | description: > 52 | Separate each file using new lines. If left empty, we'll use the current files. Enter !erase to remove all files. 53 | validations: 54 | required: false 55 | - type: textarea 56 | id: load_content 57 | attributes: 58 | label: What files should be loaded for the userContent? 59 | description: > 60 | Separate each file using new lines. If left empty, we'll use the current files. Enter !erase to remove all files. 61 | validations: 62 | required: false 63 | - type: textarea 64 | id: domains 65 | attributes: 66 | label: What domains do your userContent file target? 67 | description: > 68 | e.g. google.com, youtube.com. Separate each domain using new lines. If left empty, we'll use the current domains. Enter !erase to remove all domains. 69 | validations: 70 | required: false 71 | - type: textarea 72 | id: thumbnail 73 | attributes: 74 | label: What image URL should we use for the thumbnail? 75 | placeholder: e.g. https://github.com/greeeen-dev/natsumi-browser/blob/main/images/main.png?raw=true 76 | description: > 77 | If left empty, we'll use the current thumbnail. 78 | -------------------------------------------------------------------------------- /.github/workflows/new-theme.yml: -------------------------------------------------------------------------------- 1 | name: Create theme PR 2 | on: 3 | issues: 4 | types: [ opened ] 5 | 6 | jobs: 7 | create-pr: 8 | permissions: 9 | contents: write 10 | pull-requests: write 11 | issues: write 12 | runs-on: ubuntu-latest 13 | if: startsWith(github.event.issue.title, 'Add theme:') 14 | steps: 15 | - uses: actions/checkout@v4 16 | - run: git branch ${{ github.event.issue.number }}-new-theme 17 | - uses: stefanbuck/github-issue-parser@v3 18 | id: issue-parser 19 | with: 20 | template-path: .github/ISSUE_TEMPLATE/new-theme.yml 21 | - run: cat ${HOME}/issue-parser-result.json 22 | - run: echo ${HOME} 23 | - name: Write theme 24 | run: python3 scripts/write.py ${{ github.actor }} 25 | - run: echo "THEME_ID=$(cat /home/runner/theme_id)" >> $GITHUB_ENV 26 | - run: git push origin ${{ github.event.issue.number }}-new-theme 27 | - name: Create Pull Request 28 | id: "create-pr" 29 | uses: peter-evans/create-pull-request@v7 30 | with: 31 | title: "Create theme: ${{ steps.issue-parser.outputs.issueparser_name }}" 32 | body: | 33 | Creates a new theme submitted by ${{ github.actor }}. 34 | ## Details 35 | * **Name**: ${{ steps.issue-parser.outputs.issueparser_name }} 36 | * **Description**: ${{ steps.issue-parser.outputs.issueparser_description }} 37 | * **Latest supported version**: ${{ steps.issue-parser.outputs.issueparser_supported }} 38 | ${{ env.DUPLICATE_WARNING }} 39 | branch: ${{ github.event.issue.number }}-new-theme 40 | - name: Close issue (success) 41 | if: success() 42 | uses: peter-evans/close-issue@v3 43 | with: 44 | comment: | 45 | We've created a PR for your theme! ([#${{ steps.create-pr.outputs.pull-request-number }}](${{ github.server_url }}/${{ github.repository }}/pull/${{ steps.create-pr.outputs.pull-request-number }})) 46 | 47 | Our reviewers will review your theme shortly. Thank you for your submission! 48 | 49 | For future reference, your theme ID is ${{ env.THEME_ID }}. 50 | - run: git branch -d ${{ github.event.issue.number }}-new-theme 51 | if: failure() 52 | - run: git push origin --delete ${{ github.event.issue.number }}-new-theme 53 | if: failure() 54 | - name: Close issue (failure) 55 | if: failure() 56 | uses: peter-evans/close-issue@v3 57 | with: 58 | close-reason: not_planned 59 | comment: | 60 | Something went wrong while creating a PR for your theme. Please make sure that: 61 | 62 | * You've specified at least one file/folder to copy 63 | * You've specified at least one file as the load point for userChrome/userContent 64 | * If your submission is a Bundle, you need both userChrome and userContent files 65 | * You've specified a valid repository URL 66 | * You are the owner of the repository you've provided 67 | 68 | If the issue persists, please contact the maintainers. 69 | create-pr-update: 70 | permissions: 71 | contents: write 72 | pull-requests: write 73 | issues: write 74 | runs-on: ubuntu-latest 75 | if: startsWith(github.event.issue.title, 'Update theme:') 76 | steps: 77 | - uses: actions/checkout@v4 78 | - run: git branch ${{ github.event.issue.number }}-new-theme 79 | - uses: stefanbuck/github-issue-parser@v3 80 | id: issue-parser 81 | with: 82 | template-path: .github/ISSUE_TEMPLATE/update-theme.yml 83 | - run: cat ${HOME}/issue-parser-result.json 84 | - run: echo ${HOME} 85 | - name: Write theme 86 | run: python3 scripts/update.py ${{ github.actor }} 87 | - run: echo "THEME_NAME=$(cat /home/runner/theme_name)" >> $GITHUB_ENV 88 | - run: git push origin ${{ github.event.issue.number }}-new-theme 89 | - name: Create Pull Request 90 | id: "create-pr" 91 | uses: peter-evans/create-pull-request@v7 92 | with: 93 | title: "Update theme: ${{ env.THEME_NAME }}" 94 | body: | 95 | Updates theme ${{ steps.issue-parser.outputs.issueparser_name }} (${{ steps.issue-parser.outputs.issueparser_id }}). 96 | ## Details 97 | * **Version**: ${{ steps.issue-parser.outputs.issueparser_version }} 98 | * **Description**: ${{ steps.issue-parser.outputs.issueparser_description }} 99 | * **Latest supported version**: ${{ steps.issue-parser.outputs.issueparser_supported }} 100 | branch: ${{ github.event.issue.number }}-new-theme 101 | - name: Close issue (success) 102 | if: success() 103 | uses: peter-evans/close-issue@v3 104 | with: 105 | comment: | 106 | We've created a PR for your theme! ([#${{ steps.create-pr.outputs.pull-request-number }}](${{ github.server_url }}/${{ github.repository }}/pull/${{ steps.create-pr.outputs.pull-request-number }})) 107 | 108 | Our reviewers will review your theme shortly. Thank you for your submission! 109 | - run: git branch -d ${{ github.event.issue.number }}-new-theme 110 | if: failure() 111 | - run: git push origin --delete ${{ github.event.issue.number }}-new-theme 112 | if: failure() 113 | - name: Close issue (failure) 114 | if: failure() 115 | uses: peter-evans/close-issue@v3 116 | with: 117 | close-reason: not_planned 118 | comment: | 119 | Something went wrong while creating a PR for your theme. Please make sure that: 120 | 121 | * You've specified at least one file/folder to copy 122 | * You've specified at least one file as the load point for userChrome/userContent 123 | * If your submission is a Bundle, you need both userChrome and userContent files 124 | * You've specified a valid repository URL 125 | * You are the owner of the repository you've provided 126 | 127 | If the issue persists, please contact the maintainers. 128 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Silkthemes 2 | Thank you for contributing to the project! 3 | 4 | ## Theme submissions 5 | Your submission must meet the following requirements to be accepted. 6 | 7 | ### Functionality 8 | Your theme should include some form of functionality, such as adding new features or a color scheme. This 9 | does not include satirical functionality, such as hiding every element or adding an intentionally low 10 | contrast color scheme. 11 | 12 | Your theme may include satirical functionality (such as setting the font to Comic Sans as a joke) as long as 13 | it does not adversely affect the accessibility of the browser. 14 | 15 | ### Licensing & Copyright 16 | Your submission should not have any license violations or copyright issues whatsoever (if any exist, please 17 | resolve them before submitting). For example, if your submission does not follow the license terms of the 18 | works used in your theme, or if your theme's license terms are not compatible with ours (AGPLv3), we cannot 19 | accept your theme. 20 | 21 | Your theme may include works from other projects, as long as the project follows the licenses' terms and is 22 | not solely a compilation of others' works (meaning you must add your own original code as well). 23 | 24 | Your submission must also be public-source (source code is publicly available **WITHOUT** an open source 25 | license) or open-source (source code is publicly available **WITH** an open source license) 26 | 27 | ### Compatibility 28 | Your theme should be fully compatible with the latest version of Zen Browser as of submitting. If your theme 29 | only works on older versions, we cannot accept your theme. 30 | 31 | ## Reporting broken themes 32 | If a theme is broken, you can report it using the "Report borked theme" issue template to let us know. We 33 | will review your report then ask the theme creator to submit a patch as soon as possible. If this cannot be 34 | done within a reasonable timeframe, we may remove the theme from the store. 35 | 36 | If possible, please consider reporting the issue directly to the theme developer first. 37 | 38 | > [!CAUTION] 39 | > **Please ensure any theme breakages are not caused by theme conflicts.** If you are unsure, try testing 40 | > the theme on a clean profile without any other custom themes/CSS applied. 41 | 42 | ## Disclaimers 43 | ### AGPLv3 license 44 | By contributing to the Silkthemes theme store repository, you agree to license your contributions under the 45 | terms of the AGPLv3 license. Please read LICENSE for more info. 46 | 47 | ### Contribution removals 48 | We at Silkbrush reserve all rights to remove any contribution from the repository for any reason with or 49 | without notice. Regardless, theme store maintainers are encouraged to provide clear reason for their removal 50 | decisions where possible. 51 | 52 | If you believe your contribution was removed in mistake, please let us know so we can reverse the change. 53 | 54 | > [!IMPORTANT] 55 | > Although theme store maintainers are not necessarily required to disclose reasons for removing themes, 56 | > they may not remove any themes for subjective or invalid reasons (such as the theme apparently looking 57 | > "ugly" to the maintainers) unless there is community consensus on removing it. 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | Silkthemes theme store 5 |

6 |

7 | A custom theme store for Zen Browser with userContent support 8 |

9 | 10 | ## Why use Silkthemes? 11 | Zen Mods has various issues, such as: 12 | - No support for userContent styles 13 | - More manual theme update process 14 | - Poor vetting process ([many submission PRs are left open for months on 15 | end](https://github.com/zen-browser/theme-store/pulls?q=is%3Apr+is%3Aopen+sort%3Acreated-asc)) 16 | - Harder to submit larger projects (like [Natsumi](https://github.com/greeeen-dev/natsumi-browser) and 17 | [Nebula](https://github.com/JustAdumbPrsn/Nebula-A-Minimal-Theme-for-Zen-Browser)) 18 | - [Theme removals for completely subjective 19 | reasons](https://www.reddit.com/r/zen_browser/comments/1k3omn0/comment/mo5jjp9) 20 | - etc. 21 | 22 | Silkthemes is an alternative to Zen Mods which aims to solve many of these issues. It's not perfect, but we 23 | still aim to make it the best place possible to install and share themes for Zen Browser. 24 | 25 | ## Submitting a theme 26 | All theme submissions must follow our [submission 27 | guidelines](https://github.com/Silkbrush/theme-store/blob/main/CONTRIBUTING.md). 28 | 29 | ### Copying files and folders 30 | When you submit a theme, you will need to specify which files and folders to copy from the repository. All 31 | file and folder paths should be relative to the root of your repository. 32 | 33 | You can submit multiple files and folders, but you must submit at least one file or folder. 34 | 35 | ### Specifying load points 36 | Silkthemes uses the [uCL standards](https://github.com/greeeen-dev/userchrome-loader/) for loading and 37 | managing installed themes. To load a theme through uCL, you need to specify a "load point" file which the 38 | loader should import to load your theme. 39 | 40 | > [!IMPORTANT] 41 | > If you've copied a file or a folder that's inside another folder, you cannot specify the same relative 42 | > file/folder path as the load point. 43 | > 44 | > For example, if you've added the `themes/natsumi` folder to your repository, which contains a 45 | > `natsumi.css` for loading the theme, then the load point should be `natsumi/natsumi.css` instead of 46 | > `themes/natsumi/natsumi.css`. This is because the theme store workflow doesn't copy any parent folders 47 | > when copying files and folers that you've specified. 48 | 49 | ### Target domains 50 | Target domains are used for search purposes only, so users can more easily find a theme that works on a 51 | website of their choice. 52 | 53 | > [!WARNING] 54 | > Any internal pages, such as `about:config`, are NOT domains. 55 | > 56 | > You may only use domains and subdomains in this field, such as `github.com` and `next.unifierhq.org`. 57 | > Please do not use full URLs like `https://github.com` or `zen-browser.app/mods`. 58 | 59 | ## Updating themes 60 | Silkthemes has a more automated theme update workflow. To request an update, open the "Update theme" issue, 61 | and the repository will automatically pull files from your repository and update the themes.json file. 62 | 63 | ### What happens if I update copied files/folders, load points, etc.? 64 | If you decide to update these fields, the current ones will be overwritten by the ones you've specified in 65 | your issue body. The theme store will not attempt to merge current and new values. 66 | -------------------------------------------------------------------------------- /scripts/update.py: -------------------------------------------------------------------------------- 1 | import os 2 | import sys 3 | import json 4 | import time 5 | 6 | to_update = ['version', 'submission_type'] 7 | to_update_install = [] 8 | 9 | mappings = { 10 | 'submission_type': 'type', 11 | 'copy_file': 'files', 12 | 'copy_folder': 'folders', 13 | 'load_chrome': 'uclChromeTarget', 14 | 'load_content': 'uclContentTarget', 15 | 'thumbnail': 'image' 16 | } 17 | 18 | with open('/home/runner/issue-parser-result.json', 'r') as file: 19 | data = json.load(file) 20 | 21 | if data['description']: 22 | to_update.append('description') 23 | 24 | if data['copy_file']: 25 | if data['copy_file'] == '!erase': 26 | data['copy_file'] = [] 27 | else: 28 | data['copy_file'] = data['copy_file'].split('\n') 29 | to_update_install.append('copy_file') 30 | 31 | if data['copy_folder']: 32 | if data['copy_folder'] == '!erase': 33 | data['copy_folder'] = [] 34 | else: 35 | data['copy_folder'] = data['copy_folder'].split('\n') 36 | to_update_install.append('copy_folder') 37 | 38 | if data['load_chrome']: 39 | if data['load_chrome'] == '!erase': 40 | data['load_chrome'] = [] 41 | else: 42 | data['load_chrome'] = data['load_chrome'].split('\n') 43 | to_update_install.append('load_chrome') 44 | 45 | if data['load_content']: 46 | if data['load_content'] == '!erase': 47 | data['load_content'] = [] 48 | else: 49 | data['load_content'] = data['load_content'].split('\n') 50 | to_update_install.append('load_content') 51 | 52 | if data['domains']: 53 | if data['domains'] == '!erase': 54 | data['domains'] = [] 55 | else: 56 | data['domains'] = data['domains'].split('\n') 57 | to_update.append('domains') 58 | 59 | theme_type = 0 60 | data['submission_type'] = 0 61 | 62 | if data['load_chrome'] and not data['load_content']: 63 | theme_type = 1 64 | data['submission_type'] = 1 65 | 66 | if data['load_content'] and not data['load_chrome']: 67 | theme_type = 2 68 | data['submission_type'] = 2 69 | 70 | # Update themes.json entry 71 | with open('themes.json', 'r') as file: 72 | themes = json.load(file) 73 | 74 | if not data['id'] in themes: 75 | print('ERROR: Theme not found.') 76 | print('Please provide a valid theme ID.') 77 | sys.exit(1) 78 | 79 | for key in to_update: 80 | mapped = mappings.get(key, key) 81 | themes[data['id']][mapped] = data[key] 82 | 83 | themes[data['id']]['updatedAt'] = round(time.time()) 84 | 85 | with open('themes.json', 'w+') as file: 86 | # noinspection PyTypeChecker 87 | json.dump(themes, file, indent=4) 88 | 89 | gh_username = themes[data["id"]]["homepage"].replace('https://github.com/', '', 1).split('/')[0] 90 | if not gh_username.lower() == sys.argv[1].lower(): 91 | print('ERROR: Repository owner mismatch.') 92 | print('You don\'t own this repository.') 93 | sys.exit(1) 94 | 95 | os.system(f'git clone {themes[data["id"]]["homepage"]} theme-repo') 96 | theme_dir = f'themes/{data["id"]}' 97 | 98 | with open(f'{theme_dir}/theme.json', 'r') as file: 99 | install_data = json.load(file) 100 | 101 | for key in to_update_install: 102 | mapped = mappings.get(key, key) 103 | install_data[mapped] = data[key] 104 | 105 | with open(f'{theme_dir}/theme.json', 'w+') as file: 106 | # noinspection PyTypeChecker 107 | json.dump(install_data, file, indent=4) 108 | 109 | for file in install_data['files']: 110 | os.system(f'cp theme-repo/{file} {theme_dir}') 111 | 112 | for folder in install_data['folders']: 113 | os.system(f'cp -r theme-repo/{folder} {theme_dir}') 114 | 115 | os.system(f'cp theme-repo/.custom-store/README.md {theme_dir}') 116 | os.system(f'cp theme-repo/.custom-store/image.png {theme_dir}') 117 | 118 | os.system(f'rm -rf theme-repo') 119 | 120 | if not install_data['files'] and not install_data['folders']: 121 | print('ERROR: No files to copy.') 122 | print('Please provide a file or folder to copy.') 123 | sys.exit(1) 124 | 125 | if not install_data['uclChromeTarget'] and not install_data['uclContentTarget']: 126 | print('ERROR: No load points.') 127 | print('Please provide a load point for either userChrome or userContent.') 128 | sys.exit(1) 129 | 130 | if install_data['uclChromeTarget']: 131 | for load_point in install_data['uclChromeTarget']: 132 | if not os.path.isfile(theme_dir + '/' + load_point): 133 | print(f'ERROR: Invalid userChrome load point {load_point}.') 134 | print('Please provide a valid file path.') 135 | sys.exit(1) 136 | 137 | if install_data['uclContentTarget']: 138 | for load_point in install_data['uclContentTarget']: 139 | if not os.path.isfile(theme_dir + '/' + load_point): 140 | print(f'ERROR: Invalid userContent load point {load_point}.') 141 | print('Please provide a valid file path.') 142 | sys.exit(1) 143 | 144 | with open('/home/runner/theme_name', 'w+') as file: 145 | file.write(themes[data["id"]]["name"]) 146 | 147 | print('SUCCESS: Files have been written to folder.') 148 | -------------------------------------------------------------------------------- /scripts/write.py: -------------------------------------------------------------------------------- 1 | import os 2 | import sys 3 | import json 4 | import uuid 5 | import time 6 | 7 | with open('/home/runner/issue-parser-result.json', 'r') as file: 8 | data = json.load(file) 9 | 10 | if not data['repo'].startswith('https://github.com/'): 11 | sys.exit(1) 12 | 13 | if not data['name']: 14 | data['name'] = 'Untited Theme' 15 | 16 | if not data['description']: 17 | data['description'] = 'No description provided.' 18 | 19 | if not data['version']: 20 | data['version'] = '1.0.0' 21 | 22 | if not data['author']: 23 | data['author'] = sys.argv[1] 24 | 25 | if data['copy_file']: 26 | data['copy_file'] = data['copy_file'].split('\n') 27 | 28 | if data['copy_folder']: 29 | data['copy_folder'] = data['copy_folder'].split('\n') 30 | 31 | if data['load_chrome']: 32 | data['load_chrome'] = data['load_chrome'].split('\n') 33 | 34 | if data['load_content']: 35 | data['load_content'] = data['load_content'].split('\n') 36 | 37 | if data['domains']: 38 | data['domains'] = data['domains'].split('\n') 39 | 40 | theme_type = 0 41 | data['submission_type'] = 'Bundle' 42 | 43 | if data['load_chrome'] and not data['load_content']: 44 | theme_type = 1 45 | data['submission_type'] = 'Theme' 46 | 47 | if data['load_content'] and not data['load_chrome']: 48 | theme_type = 2 49 | data['submission_type'] = 'Page' 50 | 51 | if not data['copy_file'] and not data['copy_folder']: 52 | print('ERROR: No files to copy.') 53 | print('Please provide a file or folder to copy.') 54 | sys.exit(1) 55 | 56 | if not data['load_chrome'] and not data['load_content']: 57 | print('ERROR: No load points.') 58 | print('Please provide a load point for either userChrome or userContent.') 59 | sys.exit(1) 60 | 61 | gh_username = data['repo'].replace('https://github.com/', '', 1).split('/')[0] 62 | if not gh_username.lower() == sys.argv[1].lower(): 63 | print('ERROR: Repository owner mismatch.') 64 | print('You don\'t own this repository.') 65 | sys.exit(1) 66 | 67 | os.system(f'git clone {data["repo"]} theme-repo') 68 | theme_id = str(uuid.uuid4()) 69 | theme_dir = f'themes/{theme_id}' 70 | os.makedirs(theme_dir) 71 | 72 | if data['readme']: 73 | with open(f'{theme_dir}/README.md', 'w+') as file: 74 | file.write(data['readme']) 75 | 76 | for file in data['copy_file']: 77 | os.system(f'cp "theme-repo/{file}" "{theme_dir}"') 78 | 79 | for folder in data['copy_folder']: 80 | os.system(f'cp -r "theme-repo/{folder}" "{theme_dir}"') 81 | 82 | os.system(f'cp theme-repo/.custom-store/README.md "{theme_dir}"') 83 | os.system(f'cp theme-repo/.custom-store/image.png "{theme_dir}"') 84 | 85 | os.system(f'rm -rf theme-repo') 86 | 87 | if data['load_chrome']: 88 | for load_point in data['load_chrome']: 89 | if not os.path.isfile(theme_dir + '/' + load_point): 90 | print(f'ERROR: Invalid userChrome load point {load_point}.') 91 | print('Please provide a valid file path.') 92 | sys.exit(1) 93 | 94 | if data['load_content']: 95 | for load_point in data['load_content']: 96 | if not os.path.isfile(theme_dir + '/' + load_point): 97 | print(f'ERROR: Invalid userContent load point {load_point}.') 98 | print('Please provide a valid file path.') 99 | sys.exit(1) 100 | 101 | theme_data = { 102 | "type": theme_type, 103 | "name": data['name'], 104 | "description": data['description'], 105 | "author": data['author'], 106 | "authorUrl": f"https://github.com/{sys.argv[1]}", 107 | "image": data['thumbnail'], 108 | "homepage": data['repo'], 109 | "version": data['version'], 110 | "createdAt": round(time.time()), 111 | "updatedAt": round(time.time()), 112 | "tags": [], 113 | "domains": data['domains'] 114 | } 115 | 116 | theme_install_data = { 117 | "files": data['copy_file'], 118 | "folders": data['copy_folder'], 119 | "uclChromeTarget": data['load_chrome'], 120 | "uclContentTarget": data['load_content'] 121 | } 122 | 123 | with open('themes.json', 'r') as file: 124 | themes = json.load(file) 125 | 126 | with open(f'{theme_dir}/theme.json', 'w+') as file: 127 | # noinspection PyTypeChecker 128 | json.dump(theme_install_data, file, indent=4) 129 | 130 | for theme in themes: 131 | env_file = os.getenv('GITHUB_ENV') 132 | if themes[theme]['homepage'] == theme_data['homepage']: 133 | print('WARNING: Theme already exists.') 134 | print('A theme with the same repository already exists.') 135 | 136 | with open(env_file, "a") as myfile: 137 | myfile.write(f"DUPLICATE_WARNING=* **A theme with this repository already exists.**\n") 138 | 139 | themes.update({theme_id: theme_data}) 140 | 141 | with open('themes.json', 'w+') as file: 142 | # noinspection PyTypeChecker 143 | json.dump(themes, file, indent=4) 144 | 145 | with open('/home/runner/theme_id', 'w+') as file: 146 | file.write(theme_id) 147 | 148 | print('SUCCESS: Files have been written to folder.') 149 | -------------------------------------------------------------------------------- /themes.json: -------------------------------------------------------------------------------- 1 | { 2 | "6a853219-2e0d-4c2c-943d-b88a3a0e1e49": { 3 | "type": 0, 4 | "name": "Natsumi Browser", 5 | "description": "A userchrome for Zen Browser that makes things flow.", 6 | "author": "Green", 7 | "authorUrl": "https://github.com/greeeen-dev", 8 | "image": "https://raw.githubusercontent.com/greeeen-dev/natsumi-browser/refs/heads/main/images/main.png", 9 | "homepage": "https://github.com/greeeen-dev/natsumi-browser", 10 | "version": "3.1.0", 11 | "createdAt": 1743845534, 12 | "updatedAt": 1746272966, 13 | "tags": [], 14 | "domains": [] 15 | }, 16 | "542f2a0e-4216-4037-9eef-e8143c21ab44": { 17 | "type": 0, 18 | "name": "Nebula", 19 | "description": "A glassmorphism inspired theme designed to elevate the experience of Zen Browser by changing the design and tons of new animations", 20 | "author": "JustAdumbPrsn", 21 | "authorUrl": "https://github.com/JustAdumbPrsn", 22 | "homepage": "https://github.com/JustAdumbPrsn/Nebula-A-Minimal-Theme-for-Zen-Browser", 23 | "version": "v2.4.1", 24 | "createdAt": 1743848289, 25 | "updatedAt": 1746273244, 26 | "tags": [], 27 | "domains": [ 28 | "Monkeytype.com" 29 | ] 30 | }, 31 | "95ee1823-8e1a-4f6d-8aff-5322e1843e23": { 32 | "type": 1, 33 | "name": "Show Bookmarks on Hover", 34 | "description": "Hide bookmark bar by default and only show it when the navbar area is hovered (on Multiple/Collapsed Toolbar mode).", 35 | "author": "KiKaraage", 36 | "authorUrl": "https://github.com/KiKaraage", 37 | "homepage": "https://github.com/KiKaraage/ZenMods/", 38 | "version": "1.0.0", 39 | "createdAt": 1743868588, 40 | "updatedAt": 1743868588, 41 | "tags": [], 42 | "domains": "" 43 | }, 44 | "23225fc3-ecac-4fbb-9c03-096ab55a9ee8": { 45 | "type": 1, 46 | "name": "Advanced Tab Groups", 47 | "description": "Advanced Tab Group CSS for Zen Browser", 48 | "author": "12th", 49 | "authorUrl": "https://github.com/TFFC-Anoms12", 50 | "homepage": "https://github.com/TFFC-Anoms12/Advanced-Tab-Groups", 51 | "version": "1.6.1", 52 | "createdAt": 1743883110, 53 | "updatedAt": 1743883110, 54 | "tags": [], 55 | "domains": "" 56 | }, 57 | "1f1e7bbb-213b-473e-aebb-e9bffa3c9747": { 58 | "type": 0, 59 | "name": "Pineapple Fried", 60 | "description": "A cohesive and transparent integrated URL theme for Zen", 61 | "author": "Mr. Wazz", 62 | "authorUrl": "https://github.com/TheBigWazz", 63 | "homepage": "https://github.com/TheBigWazz/Pineapple-Fried/", 64 | "version": "2.1.0", 65 | "createdAt": 1743986452, 66 | "updatedAt": 1743986452, 67 | "tags": [], 68 | "domains": [ 69 | "about:home", 70 | "about:newtab", 71 | "about:privatebrowsing" 72 | ] 73 | }, 74 | "b814d97b-2bef-4448-847f-bec13ae326dd": { 75 | "type": 1, 76 | "name": "ToucanTweaks", 77 | "description": "A small theme to make icons more consistent", 78 | "author": "YouCanTouCan", 79 | "authorUrl": "https://github.com/YouCanTouCan", 80 | "homepage": "https://github.com/YouCanTouCan/Zen-Setup", 81 | "version": "1.1.0", 82 | "createdAt": 1744042206, 83 | "updatedAt": 1744042206, 84 | "tags": [], 85 | "domains": "" 86 | }, 87 | "6b088ea9-b6f6-496c-bbd3-4015105227ff": { 88 | "type": 0, 89 | "name": "Zen Wireframe (Catppuccin Mocha)", 90 | "description": "This theme is a fork of zen-wireframe originally by napuzu. This fork focuses on a future variety of themes, the revival of the original theme, and slightly new features. For now, this fork has two themes, catppuccin mocha, and rose-pine. More themes are able to be requested, or added by community.", 91 | "author": "undefinedcode", 92 | "authorUrl": "https://github.com/undefinedcode0", 93 | "homepage": "https://github.com/undefinedcode0/zen-wireframe", 94 | "version": "1.7", 95 | "createdAt": 1745163891, 96 | "updatedAt": 1745354467, 97 | "tags": [], 98 | "domains": [ 99 | "about:privatebrowsing", 100 | "about:home", 101 | "about:newtab", 102 | "about:preferences", 103 | "about:addons", 104 | "about:protections" 105 | ] 106 | }, 107 | "63556ee3-b89a-40d9-8f72-04f7b6c1aacc": { 108 | "type": 0, 109 | "name": "zen-wireframe (Rose-Pine)", 110 | "description": "This theme is a fork of zen-wireframe originally by napuzu. This fork focuses on a future variety of themes, the revival of the original theme, and slightly new features. For now, this fork has two themes, catppuccin mocha, and rose-pine. More themes are able to be requested, or added by community.", 111 | "author": "undefinedcode", 112 | "authorUrl": "https://github.com/undefinedcode0", 113 | "homepage": "https://github.com/undefinedcode0/zen-wireframe", 114 | "version": "1.7", 115 | "createdAt": 1745249684, 116 | "updatedAt": 1745354428, 117 | "tags": [], 118 | "domains": [ 119 | "about:privatebrowsing", 120 | "about:home", 121 | "about:newtab", 122 | "about:preferences", 123 | "about:addons", 124 | "about:protections" 125 | ] 126 | }, 127 | "660c3485-4292-4021-a204-33dccbc89b89": { 128 | "type": 0, 129 | "name": "zen-wireframe (ZER\u00d8)", 130 | "description": "This theme is a fork of zen-wireframe originally by napuzu. This fork focuses on a future variety of themes, the revival of the original theme, and slightly new features. For now, this fork has three themes, catppuccin mocha, rose-pine, and ZER\u00d8. More themes are able to be requested, or added by community.", 131 | "author": "undefinedcode", 132 | "authorUrl": "https://github.com/undefinedcode0", 133 | "homepage": "https://github.com/undefinedcode0/zen-wireframe", 134 | "version": "1.7", 135 | "createdAt": 1745356823, 136 | "updatedAt": 1745356823, 137 | "tags": [], 138 | "domains": [ 139 | "about:privatebrowsing", 140 | "about:home", 141 | "about:newtab", 142 | "about:preferences", 143 | "about:addons", 144 | "about:protections" 145 | ] 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |
4 | Pineapple Fried 5 |

6 | 7 |

8 | 9 |

10 | 11 |

12 | A customization pack for Zen Browser 13 |
14 | Cohesion + Wazz-Tweaks 15 |
16 | What is Pinneapple Fried? | Features Included | Installation | FAQ | Acknowledgements 17 |

18 | 19 | https://github.com/user-attachments/assets/ce6c3103-6adb-4190-86f6-8be656070632 20 | 21 | ## What is Pineapple Fried? 22 | Pineapple Fried is a pack of customizations (a 'rice') made for [Zen Browser](https://zen-browser.app). 23 | 24 | It integrates new UI styles and personal tweaks. 25 | 26 | > [!Note] 27 | > As of Pineapple Fried **v2.1.0**: 28 | > 29 | > Natsumi-Tweaks (the compatibility layer that added support for some tweaked Natsumi styles and animations) has been removed. 30 | > 31 | > You're welcome to iterate on the last version of natsumi-tweaks from PF v2.0.0 to add compatibility for Natsumi, but I will not be continuing to update it. 32 | 33 |
34 | 35 | 36 | 37 | ## Features Included 38 | 39 |

40 | 41 |
42 | Cohesion 43 |

44 | 45 | Cohesion adds an integrated URL style, transparent newtab pages, and a *cohesive* transparent look to the various bars and panels 46 | 47 | https://github.com/user-attachments/assets/2bf31d3a-18e0-4405-9389-8d0f036127a4 48 | 49 |
50 | 51 |

52 | 53 |
54 | Wazz-Tweaks 55 |

56 | 57 | More personal changes with some community additions. 58 | 59 | ![image](https://github.com/user-attachments/assets/65e6e6f7-da21-489a-a8c6-aa97572420e2) 60 | 61 |
62 | 63 | # Installation 64 | **Pineapple Fried** and its components are not available on the Zen Mods page, as this isn't intended to be a Mod. You will need to 65 | install it by copying the files to your profile's chrome folder. Here's a step-by-step guide to follow: 66 | 67 | 1. [userChrome.css](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#1-userchromecss) 68 | 2. [userContent.css](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#2-usercontentcss) 69 | 3. [Brower Configs (in about:config)](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#3-browser-configs-in-aboutconfig) 70 | 4. [Zen Settings](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#4-zen-settings) 71 | 5. [Toolbar layout](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#5-toolbar-layout) 72 | 6. [Mods](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#6-mods) 73 | 7. [Browser Transparency](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#7-browser-transparency) 74 | 8. [Gradients](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#8-gradients) (optional) 75 | 9. [Extensions](https://github.com/TheBigWazz/Pineapple-Fried/blob/main/README.md#9-extensions) (optional) 76 | 77 | # 78 | 79 |
80 | 81 | ## 1. userChrome.css 82 | 83 | **a):** If you have not already, follow the [Zen Live Editing](https://docs.zen-browser.app/guides/live-editing) guide to first make your own **chrome** folder. 84 | 85 | **b):** Download the **"pineapple-fried"** folder from above or the Source Code from the releases page and drop it into your **"chrome"** folder. 86 | 87 | **c):** Add this import statement to **userChrome.css** (*or download the userChrome.css file from above and place it in your **"chrome"** folder*): 88 | ``` 89 | @import "pineapple-fried/pineapple-fried.css"; 90 | ``` 91 | > [!Note] 92 | > - You may still add other custom CSS to your userChrome.css underneath the imports. 93 | > - You can Live Edit mod files, just search for the Module name in the Style Browser (Ctrl+Alt+Shift+I) 94 | 95 |
96 | 97 | ## 2. userContent.css 98 | 99 | **a):** The **"zen-new-tab"** folder should already be inside the **"pineapple-fried"** folder 100 | 101 | **b):** Add this import statement to **"userContent.css"** (*or download the userContent.css file from above and place it in your **"chrome"** folder*): 102 | ``` 103 | /* zen new tabs */ 104 | @import "pineapple-fried/zen-new-tabs/zen-new-tabs.css"; 105 | ``` 106 | 107 |
108 | 109 | ## 3. Browser configs (in about:config) 110 | 111 | These are the configs you need to use. If they do not exist, type the config and click the **+** button to create it. -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/cohesion/Readme.md: -------------------------------------------------------------------------------- 1 |

2 | Wazz's custom image 3 |

4 | 5 | # Cohesion 6 | 7 | A cohesive, transparent, and integrated style for [Zen Browser](https://zen-browser.app/) 8 | 9 | https://github.com/user-attachments/assets/e19e1a3d-c3ea-42a1-a655-4b9353463ca5 10 | 11 | ### Install and Config 12 | - Drop the Cohesion folder into your **chrome** folder 13 | - Add `@import "Cohesion/Cohesion.css";` to the top of your **userChrome.css** file 14 | 15 | Enable the following in `about:config` 16 | - `browser.tabs.allow_transparent_browser` = `true`* 17 | - `zen.view.use-deprecated-urlbar` = `true` 18 | #### Known Issues: 19 | 20 | *- Currently not compatible with [Zen Sidebar At Right Side](https://zen-browser.app/mods/dd4f5461-1564-4e56-9f9d-f81e3c18f93c).* 21 | 22 | *- Currently not compatible with Collapsed Toolbar Mode.* 23 | 24 | *- Some HDR displays render an incorrect Alpha value for certian elements, even though they are consistant within the userChrome.css file. This is believed to be a Windows HDR bug.* 25 | 26 | *- Websites without a background will display the browser UI underneath the content.* 27 | 28 | *(Extensions like [Dark Reader](https://addons.mozilla.org/en-US/firefox/addon/darkreader/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search) fix this by setting their own background.)* 29 | 30 | 31 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/cohesion/cohesion.css: -------------------------------------------------------------------------------- 1 | /* === Cohesion (Start) === */ 2 | 3 | @import "modules/integrated-urlbar.css"; 4 | @import "modules/transparent-styles.css"; 5 | @import "modules/multi-toolbar-style.css"; 6 | @import "modules/single-toolbar-style.css"; 7 | @import "modules/compact-toolbar-style.css"; 8 | @import "modules/window-controls.css"; 9 | @import "modules/url-animations.css"; 10 | 11 | /* === Cohesion (End) === */ 12 | 13 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/cohesion/modules/intergrated-urlbar.css: -------------------------------------------------------------------------------- 1 | /* --- Integrated URL Bar --- */ 2 | 3 | /* Webview Styles */ 4 | @media not (-moz-bool-pref: "zen.view.compact") { 5 | #browser { 6 | --urlbar-min-width: 28px !important; 7 | } 8 | 9 | /* Nav bar style and transparency level */ 10 | #nav-bar { 11 | --zen-toolbar-height: 45px; 12 | background-color: rgba(0, 0, 0, 0.2) !important; 13 | border-radius: 10px 10px 0 0 !important; 14 | padding-left: 6px !important; 15 | margin: 6px 6px 0 1px !important; 16 | box-shadow: none !important; 17 | } 18 | 19 | .browserSidebarContainer { 20 | background-color: rgba(0, 0, 0, 0.2) !important; 21 | margin-top: 0px !important; 22 | margin-right: 0px !important; 23 | box-shadow: none !important; 24 | border-radius: 10px 10px 10px 10px !important; 25 | } 26 | 27 | /* Toolbar spacing */ 28 | #navigator-toolbox { 29 | padding-top: 8px !important; 30 | } 31 | } 32 | 33 | @media (-moz-bool-pref: "zen.view.use-single-toolbar") { 34 | #browser { 35 | --urlbar-min-width: initial !important; 36 | } 37 | 38 | #nav-bar { 39 | background-color: initial !important; 40 | border-radius: initial !important; 41 | padding-left: 4px!important; 42 | margin: initial !important; 43 | box-shadow: initial !important; 44 | } 45 | 46 | .browserSidebarContainer { 47 | background-color: initial !important; 48 | margin-top: initial !important; 49 | margin-right: initial !important; 50 | box-shadow: initial !important; 51 | border-radius: initial !important; 52 | } 53 | 54 | #navigator-toolbox { 55 | padding-top: initial !important; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/cohesion/modules/multi-toolbar-style.css: -------------------------------------------------------------------------------- 1 | /* === Transparent Borderless Sidebars === */ 2 | #sidebar-box, 3 | #zen-sidebar-web-panel, 4 | #sidebar-splitter, 5 | #zen-sidebar-web-header, 6 | #zen-sidebar-panels-wrapper { 7 | background-color: transparent !important; 8 | border: none !important; 9 | } 10 | 11 | #zen-sidebar-panels-wrapper { 12 | border-top: none !important; 13 | border-bottom: none !important; 14 | } 15 | 16 | /* === Floating Zen Sidebar Style === */ 17 | #zen-sidebar-web-panel { 18 | box-shadow: none !important; 19 | } 20 | 21 | #zen-sidebar-web-panel[pinned="true"] #zen-sidebar-web-header { 22 | border-radius: 6px 6px 0 0 !important; 23 | } 24 | 25 | #zen-sidebar-web-panel[pinned="true"] { 26 | border: 1px solid rgba(255, 255, 255, 0.1) !important; 27 | border-radius: 6px !important; 28 | margin: 10px !important; 29 | backdrop-filter: blur(50px) !important; 30 | -moz-backdrop-filter: blur(20px) !important; 31 | background-color: rgba(0, 0, 0, .2) !important; 32 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; 33 | } 34 | 35 | /* === Shared Browser Container Styles === */ 36 | .browserSidebarContainer { 37 | margin: 0 -8px -8px 0 !important; 38 | } 39 | 40 | /* ========================================== 41 | Tabs on Left Mode (All 9 States) 42 | ========================================== */ 43 | @media not (-moz-bool-pref: "zen.tabs.vertical.right-side") { 44 | /* 1. Base State */ 45 | #browser:not(:has(#sidebar-box[checked="true"])):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 46 | .browserSidebarContainer { border-radius: 0px 0px 6px 6px !important; } 47 | } 48 | 49 | /* 2. Only Normal Left */ 50 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 51 | .browserSidebarContainer { border-radius: 6px 0px 6px 0px !important; } 52 | #sidebar-box { border-radius: 0 0 0 10px !important; } 53 | } 54 | 55 | /* 3. Only Normal Right */ 56 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 57 | #sidebar-box { border-radius: 0 0 10px 0 !important; } 58 | .browserSidebarContainer { border-radius: 0px 6px 0px 6px !important; } 59 | } 60 | 61 | /* 4. Only Zen Left (Docked) */ 62 | #browser:has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])):not(:has(#sidebar-box[checked="true"])) { 63 | .browserSidebarContainer { border-radius: 6px 0px 6px 0px !important; } 64 | } 65 | 66 | /* 5. Only Zen Floating */ 67 | #browser:has(#zen-sidebar-web-panel[pinned="true"]:not([hidden])):not(:has(#sidebar-box[checked="true"])) { 68 | .browserSidebarContainer { border-radius: 0px 0px 6px 6px !important; } 69 | } 70 | 71 | /* 6. Both Sidebars Left */ 72 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])) { 73 | .browserSidebarContainer { border-radius: 6px 0 6px 0 !important; } 74 | #sidebar-box { border-radius: 0 0 0 10px !important; } 75 | } 76 | 77 | /* 7. Both Sidebars (Normal Right + Zen Left) */ 78 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])) { 79 | #sidebar-box { border-radius: 0 0 6px 0 !important; } 80 | .browserSidebarContainer { border-radius: 6px 6px 0px 0px !important; } 81 | } 82 | 83 | /* 8. Both Sidebars (Normal Left + Floating Zen) */ 84 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):has(#zen-sidebar-web-panel[pinned="true"]) { 85 | .browserSidebarContainer { border-radius: 6px 0px 6px 0px !important; } 86 | } 87 | 88 | /* 9. Both Sidebars (Normal Right + Floating Zen) */ 89 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):has(#zen-sidebar-web-panel[pinned="true"]) { 90 | .browserSidebarContainer { border-radius: 0px 6px 0px 6px !important; } 91 | } 92 | } 93 | 94 | /* ========================================== 95 | Tabs on Right Mode (All 9 States) 96 | ========================================== */ 97 | @media (-moz-bool-pref: "zen.tabs.vertical.right-side") { 98 | /* 1. Base State */ 99 | #browser:not(:has(#sidebar-box[checked="true"])):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 100 | .browserSidebarContainer { border-radius: 0 0 6px 6px !important; } 101 | #tabbrowser-tabpanels { margin: 0px 5px 0px -5px !important; } 102 | } 103 | 104 | /* 2. Only Normal Left */ 105 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 106 | #sidebar-box { border-radius: 0 0 0 10px !important; } 107 | .browserSidebarContainer { border-radius: 6px 0 6px 0 !important; } 108 | #tabbrowser-tabpanels { margin: 0px 5px 0px -5px !important; } 109 | } 110 | 111 | /* 3. Only Normal Right */ 112 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 113 | #sidebar-box { border-radius: 0 0 10px 0 !important; } 114 | .browserSidebarContainer { border-radius: 0px 6px 0px 6px !important; } 115 | #tabbrowser-tabpanels { margin: 0px 5px 0px -5px !important; } 116 | } 117 | 118 | /* 4. Only Zen Left (Docked) */ 119 | #browser:has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])):not(:has(#sidebar-box[checked="true"])) { 120 | .browserSidebarContainer { border-radius: 6px 0 6px 0 !important; } 121 | #tabbrowser-tabpanels { margin: 0px 5px 0px -5px !important; } 122 | } 123 | 124 | /* 5. Only Zen Floating */ 125 | #browser:has(#zen-sidebar-web-panel[pinned="true"]:not([hidden])):not(:has(#sidebar-box[checked="true"])) { 126 | .browserSidebarContainer { border-radius: 0 0 6px 6px !important; } 127 | #tabbrowser-tabpanels { margin: 0px 5px 0px -5px !important; } 128 | } 129 | 130 | /* 6. Both Sidebars Left */ 131 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])) { 132 | #sidebar-box { border-radius: 0 0 0 10px !important; } 133 | .browserSidebarContainer { border-radius: 6px 0 6px 0 !important; } 134 | #tabbrowser-tabpanels { margin: 0px 5px 0px -5px !important; } 135 | } 136 | 137 | /* 7. Both Sidebars (Normal Right + Zen Left) */ 138 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])) { 139 | #sidebar-box { border-radius: 0 0 10px 0 !important; } 140 | .browserSidebarContainer { border-radius: 6px 6px 0px 0px !important; } 141 | } 142 | 143 | /* 8. Both Sidebars (Normal Left + Floating Zen) */ 144 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):has(#zen-sidebar-web-panel[pinned="true"]) { 145 | .browserSidebarContainer { border-radius: 6px 0 6px 0 !important; } 146 | #tabbrowser-tabpanels { margin: 0px 5px 0px -5px !important; } 147 | } 148 | 149 | /* 9. Both Sidebars (Normal Right + Floating Zen) */ 150 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):has(#zen-sidebar-web-panel[pinned="true"]) { 151 | .browserSidebarContainer { border-radius: 0px 6px 0px 6px !important; } 152 | #tabbrowser-tabpanels { margin: 0px 5px 0px -5px !important; } 153 | } 154 | } -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/cohesion/modules/single-toolbar-style.css: -------------------------------------------------------------------------------- 1 | /* === Single Toolbar Mode - Tabs on Left === */ 2 | @media (-moz-bool-pref: "zen.view.use-single-toolbar") { 3 | /* ========================================== 4 | All 9 States - Tabs on Left 5 | ========================================== */ 6 | 7 | /* 1. Base State - No Sidebars */ 8 | #browser:not(:has(#sidebar-box[checked="true"])):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 9 | .browserSidebarContainer { 10 | border-radius: 6px 6px 6px 6px !important; 11 | } 12 | } 13 | 14 | /* 2. Only Normal Left */ 15 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 16 | .browserSidebarContainer { 17 | border-radius: 6px 6px 6px 6px !important; 18 | } 19 | #sidebar-box { 20 | border-radius: 6px 0px 0px 6px !important; 21 | } 22 | } 23 | 24 | /* 3. Only Normal Right */ 25 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 26 | .browserSidebarContainer { 27 | border-radius: 6px 6px 6px 6px !important; 28 | } 29 | #sidebar-box { 30 | border-radius: 0 0 6px 0 !important; 31 | } 32 | } 33 | 34 | /* 4. Only Zen Left (Docked) */ 35 | #browser:has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])):not(:has(#sidebar-box[checked="true"])) { 36 | .browserSidebarContainer { 37 | border-radius: 6px 6px 6px 6px !important; 38 | } 39 | #zen-sidebar-web-panel { 40 | border-radius: 6px 0px 0px 6px !important; 41 | } 42 | } 43 | 44 | /* 5. Only Zen Floating */ 45 | #browser:has(#zen-sidebar-web-panel[pinned="true"]:not([hidden])):not(:has(#sidebar-box[checked="true"])) { 46 | .browserSidebarContainer { 47 | border-radius: 6px 6px 6px 6px !important; 48 | } 49 | } 50 | 51 | /* 6. Both Sidebars Left */ 52 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])) { 53 | .browserSidebarContainer { 54 | border-radius: 6px 6px 6px 6px !important; 55 | } 56 | #sidebar-box { 57 | border-radius: 6px 0px 0px 6px !important; 58 | } 59 | } 60 | 61 | /* 7. Both Sidebars (Normal Right + Zen Left) */ 62 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):has(#zen-sidebar-web-panel:not([hidden]):not([pinned="true"])) { 63 | .browserSidebarContainer { 64 | border-radius: 6px 6px 6px 6px !important; 65 | } 66 | #sidebar-box { 67 | background-color: rgba(0, 0, 0, 0) !important; 68 | } 69 | #zen-sidebar-web-panel { 70 | border-radius: 6px 0px 0px 6px !important; 71 | } 72 | } 73 | 74 | /* 8. Both Sidebars (Normal Left + Floating Zen) */ 75 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):has(#zen-sidebar-web-panel[pinned="true"]) { 76 | .browserSidebarContainer { 77 | border-radius: 6px 6px 6px 6px !important; 78 | } 79 | #sidebar-box { 80 | border-radius: 6px 0px 0px 6px !important; 81 | } 82 | } 83 | 84 | /* 9. Both Sidebars (Normal Right + Floating Zen) */ 85 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):has(#zen-sidebar-web-panel[pinned="true"]) { 86 | .browserSidebarContainer { 87 | border-radius: 6px 6px 6px 6px !important; 88 | } 89 | #sidebar-box { 90 | background-color: rgba(0, 0, 0, 0) !important; 91 | } 92 | } 93 | } 94 | 95 | /* === Single Toolbar Mode - Tabs on Right === */ 96 | @media (-moz-bool-pref: "zen.view.use-single-toolbar") and (-moz-bool-pref: "zen.tabs.vertical.right-side") { 97 | /* ========================================== 98 | All 9 States - Tabs on Right 99 | ========================================== */ 100 | 101 | /* 1. Base State - No Sidebars */ 102 | #browser:not(:has(#sidebar-box[checked="true"])):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 103 | .browserSidebarContainer { 104 | border-radius: 6px 6px 6px 6px !important; 105 | } 106 | } 107 | 108 | /* 2. Only Normal Left */ 109 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 110 | .browserSidebarContainer { 111 | border-radius: 6px 6px 6px 6px !important; 112 | } 113 | 114 | #sidebar-box { 115 | border-radius: 6px 0px 0px 6px !important; 116 | } 117 | } 118 | 119 | /* 3. Only Normal Right */ 120 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):not(:has(#zen-sidebar-web-panel:not([hidden]))) { 121 | .browserSidebarContainer { 122 | border-radius: 6px 6px 6px 6px !important; 123 | } 124 | 125 | #sidebar-box { 126 | border-radius: 0px 6px 6px 0px !important; 127 | } 128 | } 129 | 130 | /* 4. Only Zen Left (Docked) */ 131 | #browser:has(#zen-sidebar-web-panel:not([hidden])):not(:has(#sidebar-box[checked="true"])) { 132 | .browserSidebarContainer { 133 | border-radius: 0px 6px 6px 0px !important; 134 | } 135 | } 136 | 137 | /* 5. Only Zen Floating */ 138 | #browser:has(#zen-sidebar-web-panel[pinned="true"]:not([hidden])):not(:has(#sidebar-box[checked="true"])) { 139 | .browserSidebarContainer { 140 | border-radius: 6px 6px 6px 6px !important; 141 | } 142 | } 143 | 144 | /* 6. Both Sidebars Left */ 145 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):has(#zen-sidebar-web-panel:not([hidden])) { 146 | #sidebar-box { 147 | border-radius: 6px 0px 0px 6px !important; 148 | } 149 | } 150 | 151 | /* 7. Both Sidebars (Normal Right + Zen Left) */ 152 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):has(#zen-sidebar-web-panel:not([hidden])) { 153 | #sidebar-box { 154 | border-radius: 0px 6px 6px 0px !important; 155 | } 156 | } 157 | 158 | /* 8. Normal Left + Floating Zen */ 159 | #browser:has(#sidebar-box[checked="true"][style*="order: 1"]):has(#zen-sidebar-web-panel[pinned="true"]) { 160 | .browserSidebarContainer { 161 | border-radius: 0px 6px 6px 0px !important; 162 | } 163 | } 164 | 165 | /* 9. Normal Right + Floating Zen */ 166 | #browser:has(#sidebar-box[checked="true"]:not([style*="order: 1"])):has(#zen-sidebar-web-panel[pinned="true"]) { 167 | #sidebar-box { 168 | border-radius: 0px 6px 6px 0px !important; 169 | } 170 | } 171 | } -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/cohesion/modules/transparent-styles.css: -------------------------------------------------------------------------------- 1 | /* Base Browser view styling */ 2 | :root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) { 3 | & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { 4 | & browser[transparent="true"] { 5 | background: rgba(255, 255, 255, 0) !important; 6 | } 7 | } 8 | } 9 | 10 | /* Base sidebar styling */ 11 | #sidebar-box { 12 | background-color: rgba(0, 0, 0, 0) !important; 13 | border: none !important; 14 | box-shadow: none !important; 15 | } 16 | 17 | #sidebar-header { 18 | background-color: rgba(0, 0, 0, 0) !important; 19 | } 20 | 21 | /* Sidebar panels */ 22 | .sidebar-panel { 23 | background: transparent !important; 24 | background-color: rgba(0, 0, 0, 0) !important; 25 | } 26 | 27 | /* Special case for checked sidebar */ 28 | #browser #sidebar-box[checked="true"]:not([style*="order: 1"]) .sidebar-panel { 29 | background: transparent !important; 30 | background-color: rgba(0, 0, 0, 0) !important; 31 | } 32 | 33 | /* Search box styling */ 34 | #sidebar-search-container > #search-box, 35 | #viewButton { 36 | padding: 4px 8px !important; 37 | appearance: none !important; 38 | background-color: transparent !important; 39 | border-radius: 10px !important; 40 | border: none !important; 41 | } 42 | 43 | #sidebar-search-container > #search-box:hover, 44 | #viewButton:hover { 45 | background-color: rgba(255, 255, 255, 0.1) !important; 46 | } 47 | 48 | #sidebar-search-container > #search-box:active, 49 | #viewButton:active { 50 | background-color: rgba(255, 255, 255, 0.1) !important; 51 | } 52 | 53 | /* Header styling */ 54 | #sidebar-header { 55 | font-size: 1.333em; 56 | padding: 5px !important; 57 | border-bottom: 0 solid var(--sidebar-border-color) !important; 58 | } 59 | 60 | #sidebar-header #sidebar-close { 61 | display: none !important; 62 | } 63 | 64 | /* Bookmark toolbar */ 65 | #PersonalToolbar:not([collapsed="true"]) { 66 | background: rgba(0, 0, 0, 0) !important; 67 | } 68 | 69 | /* Findbar */ 70 | findbar { 71 | background: none !important; 72 | border-top: none !important; 73 | } 74 | 75 | @media (-moz-bool-pref: "zen.view.use-single-toolbar") { 76 | /* Bookmark toolbar */ 77 | #PersonalToolbar:not([collapsed="true"]) { 78 | background: rgba(0, 0, 0, 0) !important; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/cohesion/modules/url-animations.css: -------------------------------------------------------------------------------- 1 | /* URL Bar Expand/Collapse Animation */ 2 | #urlbar[focused] .urlbar-background { 3 | animation: urlbarExpand 0.3s ease-out; 4 | } 5 | 6 | #urlbar:not([focused]) .urlbar-background { 7 | animation: urlbarCollapse 0.2s ease-in; 8 | } 9 | 10 | @keyframes urlbarExpand { 11 | from { 12 | transform: scaleX(0.8) scaleY(0.7); 13 | opacity: 0.5; 14 | } 15 | to { 16 | transform: scaleX(1) scaleY(1); 17 | opacity: 1; 18 | } 19 | } 20 | 21 | @keyframes urlbarCollapse { 22 | from { 23 | transform: scaleX(1) scaleY(1); 24 | } 25 | to { 26 | transform: scaleX(0.95) scaleY(0.9); 27 | } 28 | } 29 | 30 | /* Results Panel Animation */ 31 | #urlbar-results { 32 | animation: resultsFadeIn 0.25s ease-out; 33 | } 34 | 35 | @keyframes resultsFadeIn { 36 | from { 37 | opacity: 0; 38 | transform: translateY(-50px); 39 | } 40 | to { 41 | opacity: 1; 42 | transform: translateY(0); 43 | } 44 | } 45 | 46 | /* Optional: Smooth width transition */ 47 | #urlbar { 48 | transition: width 0.2s ease-in-out; 49 | }/* Animate each result row individually */ 50 | #urlbar-results { 51 | opacity: 1 !important; /* Ensure parent container stays visible */ 52 | } 53 | 54 | .urlbarView-row { 55 | opacity: 0; 56 | animation: resultEntry 0.3s ease-out forwards; 57 | } 58 | 59 | /* Cascade animation with staggered delays */ 60 | .urlbarView-row:nth-child(1) { animation-delay: 0.05s; } 61 | .urlbarView-row:nth-child(2) { animation-delay: 0.10s; } 62 | .urlbarView-row:nth-child(3) { animation-delay: 0.15s; } 63 | .urlbarView-row:nth-child(4) { animation-delay: 0.20s; } 64 | .urlbarView-row:nth-child(5) { animation-delay: 0.25s; } 65 | .urlbarView-row:nth-child(6) { animation-delay: 0.30s; } 66 | .urlbarView-row:nth-child(7) { animation-delay: 0.35s; } 67 | .urlbarView-row:nth-child(8) { animation-delay: 0.40s; } 68 | .urlbarView-row:nth-child(9) { animation-delay: 0.45s; } 69 | .urlbarView-row:nth-child(10) { animation-delay: 0.50s; } 70 | 71 | @keyframes resultEntry { 72 | from { 73 | opacity: 0; 74 | transform: translateY(-8px); 75 | } 76 | to { 77 | opacity: 1; 78 | transform: translateY(0); 79 | } 80 | } 81 | 82 | /* Adjust original results panel animation */ 83 | #urlbar-results { 84 | animation: resultsFadeIn 0.2s ease-out; 85 | } 86 | 87 | @keyframes resultsFadeIn { 88 | from { 89 | opacity: 0; 90 | } 91 | to { 92 | opacity: 1; 93 | } 94 | } 95 | 96 | /* Optional: Animate favicons in results */ 97 | .urlbarView-row[type] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { 98 | transition: transform 0.2s ease-out; 99 | } 100 | 101 | .urlbarView-row[type]:hover > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { 102 | transform: scale(1.1); 103 | } -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/cohesion/modules/window-controls.css: -------------------------------------------------------------------------------- 1 | @media (-moz-bool-pref: "pf.use.window-buttons") { 2 | @media not (-moz-bool-pref: "zen.view.use-single-toolbar") { 3 | /* Window controls container */ 4 | .titlebar-buttonbox-container { 5 | display: flex !important; 6 | transition: all 0.2s ease; 7 | } 8 | 9 | /* Base styles for window control buttons */ 10 | .titlebar-button { 11 | padding: 0 !important; 12 | margin: 0 !important; 13 | margin-bottom: 1px !important; 14 | transition: all 0.2s ease; 15 | min-width: 0 !important; 16 | width: 3px !important; /* Collapsed to 3px */ 17 | overflow: hidden; 18 | opacity: 0; /* Completely transparent when collapsed */ 19 | } 20 | 21 | /* Expanded state when hovering container */ 22 | .titlebar-buttonbox-container:hover .titlebar-button { 23 | width: 40px !important; /* Expanded width */ 24 | opacity: 1; /* Fully visible when expanded */ 25 | } 26 | 27 | /* Hover states */ 28 | .titlebar-button:hover { 29 | background-color: rgba(255, 255, 255, 0.1) !important; 30 | } 31 | 32 | .titlebar-close:hover { 33 | background-color: rgba(255, 0, 0, 0.2) !important; 34 | border-radius: 0 6px 0 0 !important; 35 | } 36 | } 37 | 38 | /* Single TOolbar Mode */ 39 | @media (-moz-bool-pref: "zen.view.use-single-toolbar") { 40 | .titlebar-buttonbox-container { 41 | margin-right: 0px !important; 42 | } 43 | 44 | .titlebar-close:hover { 45 | background-color: rgba(255, 0, 0, 0.2) !important; 46 | border-radius: 0 6px 6px 0 !important; 47 | } 48 | } 49 | 50 | /* Tabs on Right mode */ 51 | 52 | @media (-moz-bool-pref: "zen.tabs.vertical.right-side") { 53 | /* Window controls container */ 54 | .titlebar-buttonbox-container { 55 | display: flex !important; 56 | transition: all 0.2s ease; 57 | margin-bottom: 1px !important; 58 | } 59 | 60 | /* Base styles for window control buttons */ 61 | .titlebar-button { 62 | padding-bottom: 11px !important; 63 | margin-top: 0px !important; 64 | margin-bottom: 0px !important; 65 | transition: all 0.2s ease; 66 | min-width: 0 !important; 67 | width: 3px !important; /* Collapsed to 3px */ 68 | overflow: hidden; 69 | opacity: 0; /* Completely transparent when collapsed */ 70 | } 71 | 72 | /* Expanded state when hovering container */ 73 | .titlebar-buttonbox-container:hover .titlebar-button { 74 | width: 40px !important; /* Expanded width */ 75 | opacity: 1; /* Fully visible when expanded */ 76 | } 77 | 78 | /* Hover states */ 79 | .titlebar-button:hover { 80 | background-color: rgba(255, 255, 255, 0.1) !important; 81 | } 82 | 83 | .titlebar-close:hover { 84 | background-color: rgba(255, 0, 0, 0.2) !important; 85 | border-radius: 0 6px 0 0 !important; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/pineapple-fried.css: -------------------------------------------------------------------------------- 1 | @import "natsumi-tweaks/natsumi-tweaks.css"; 2 | 3 | @import "cohesion/cohesion.css"; 4 | 5 | @import "wazz-tweaks/wazz-tweaks.css"; -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/wazz-tweaks/Modules/community-changes/mini-container-in-url.css: -------------------------------------------------------------------------------- 1 | /* Mini Container Indicator in URL Bar */ 2 | /* Credit: @anjerodev on Github */ 3 | @-moz-document url-prefix('chrome://') { 4 | #urlbar-container #page-action-buttons #userContext-icons { 5 | position: relative; 6 | order: 2; 7 | height: 8px; 8 | width: 8px; 9 | background-color: var(--identity-icon-color); 10 | border-radius: 32px; 11 | margin-left: 12px !important; 12 | 13 | /* Hide default icon and label */ 14 | & image, 15 | & label { 16 | display: none; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/wazz-tweaks/Modules/personal-changes/hide-bookmark-chevron.css: -------------------------------------------------------------------------------- 1 | /* Hide the Bookmarks Toolbar Chevron */ 2 | #PlacesChevron { 3 | display: none; 4 | } -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/wazz-tweaks/Modules/personal-changes/worksapce-button-style.css: -------------------------------------------------------------------------------- 1 | /* Workspace Button Styling */ 2 | #zen-workspaces-button { 3 | background-color: rgba(255, 255, 255, 0.04) !important; 4 | box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1) !important; 5 | border-radius: 8px !important; 6 | border: 1px solid #ffffff0c !important; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/wazz-tweaks/README.md: -------------------------------------------------------------------------------- 1 | # Wazz styles 2 | My own tweaks to Zen browser that aren't apart of Cohesion or Natsumi-Tweaks. 3 | 4 | ## Install and Config 5 | - Drop the wazz-tweaks folder into your **chrome** folder 6 | - Add `@import "wazz-tweaks/wazz-tweaks.css";` to the top of your userChrome.css file 7 | 8 | ### Add these options in `about:config` 9 | 10 | - `zen.workspaces.show-workspace-indicator` = `false` 11 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/wazz-tweaks/wazz-tweaks.css: -------------------------------------------------------------------------------- 1 | /* Personal Changes */ 2 | @import "Modules/personal-changes/worksapce-button-style.css"; 3 | @import "Modules/personal-changes/hide-bookmark-chevron.css"; 4 | 5 | /* Community Changes */ 6 | @import "Modules/community-changes/mini-container-in-url.css"; 7 | -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/pineapple-fried/zen-new-tabs/zen-new-tabs.css: -------------------------------------------------------------------------------- 1 | @-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing), url(chrome://browser/content/browser.xul) { 2 | body { 3 | width: 100%; 4 | height: 100vh; 5 | position: relative !important; 6 | overflow: hidden !important; 7 | 8 | } 9 | 10 | body::before { 11 | content: ""; 12 | position: absolute; 13 | height: 130vh; 14 | width: auto; 15 | aspect-ratio: 1/1 !important; 16 | transform: translate(-50%, -50%); 17 | top:100%; 18 | left:100%; 19 | background-color: #ffffff; /* Color fill */ 20 | mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>'); 21 | mask-repeat: no-repeat; 22 | mask-position: center; 23 | opacity: 5% !important; 24 | } 25 | } 26 | 27 | @-moz-document url(about:home), url(about:newtab){ 28 | :root { 29 | --newtab-background-color: rgba(43, 42, 51, 0.0) !important; 30 | } 31 | 32 | .search-wrapper { 33 | position: absolute; 34 | transform: translate(-50%, -50%); 35 | top:50% !important; 36 | left: 50% !important; 37 | display: flex; 38 | flex-direction: column; 39 | } 40 | 41 | .logo { 42 | aspect-ratio: 1/1 !important; 43 | /*For Stable*/ 44 | background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') !important ; 45 | 46 | /*For twilight 47 | background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') !important ; 48 | */ 49 | background-position: center; 50 | background-size: 80px !important; 51 | width: fit-content !important; 52 | height: 80px !important; 53 | } 54 | 55 | .wordmark { 56 | opacity: 80%; 57 | background-size: 172px !important; 58 | width: 172px !important; 59 | height: 81px !important; 60 | } 61 | 62 | .search-handoff-button { 63 | display: flex !important; 64 | align-items: center !important; 65 | justify-content: space-evenly; 66 | background-color: rgba(128, 128, 128, 0.2) !important; 67 | backdrop-filter: blur(20px) !important; 68 | } 69 | 70 | .search-inner-wrapper .fake-editable { 71 | opacity: 10% !important; 72 | border:1px solid white !important; 73 | } 74 | 75 | .search-inner-wrapper { 76 | background-color: transparent !important; 77 | backdrop-filter: blur(10px) !important; 78 | display: none !important; 79 | } 80 | .search-wrapper .search-inner-wrapper { 81 | border-radius: 10px !important; 82 | } 83 | 84 | .logo-and-wordmark { 85 | margin-block-end: 14px !important; 86 | } 87 | } 88 | 89 | @-moz-document url(about:privatebrowsing){ 90 | .info { 91 | display:none !important; 92 | } 93 | 94 | .search-wrapper { 95 | position: absolute; 96 | transform: translate(-50%, -50%); 97 | top:50% !important; 98 | left: 50% !important; 99 | display: flex; 100 | flex-direction: column; 101 | } 102 | 103 | .wordmark { 104 | opacity: 80% 105 | } 106 | 107 | .search-handoff-button { 108 | display: flex !important; 109 | align-items: center !important; 110 | justify-content: space-evenly; 111 | background-color: rgba(128, 128, 128, 0.2) !important; 112 | backdrop-filter: blur(20px) !important; 113 | border-radius: 8px !important; 114 | } 115 | 116 | .focused:not(.disabled) { 117 | border:1px solid #b069db !important; 118 | box-shadow: 0 0 0 1px #b069db, 0 0 0 4px rgba(109, 10, 225, 0.3) !important; 119 | } 120 | 121 | .search-inner-wrapper .fake-editable { 122 | background-color: transparent !important; 123 | border:1px solid white !important; 124 | border-radius: 200px !important; 125 | } 126 | 127 | 128 | .search-inner-wrapper { 129 | background-color: transparent !important; 130 | backdrop-filter: blur(10px) !important; 131 | padding: unset !important; 132 | border-radius: 8px !important; 133 | 134 | } 135 | .search-wrapper .search-inner-wrapper { 136 | border-radius: 10px !important; 137 | } 138 | 139 | .logo-and-wordmark { 140 | margin-block-end: 14px !important; 141 | } 142 | 143 | .fake-textbox { 144 | color:white !important; 145 | opacity: 100% !important; 146 | } 147 | } -------------------------------------------------------------------------------- /themes/1f1e7bbb-213b-473e-aebb-e9bffa3c9747/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": "", 3 | "folders": [ 4 | "pineapple-fried" 5 | ], 6 | "uclChromeTarget": [ 7 | "pineapple-fried/pineapple-fried.css" 8 | ], 9 | "uclContentTarget": [ 10 | "pineapple-fried/zen-new-tabs/zen-new-tabs.css" 11 | ] 12 | } -------------------------------------------------------------------------------- /themes/23225fc3-ecac-4fbb-9c03-096ab55a9ee8/README.md: -------------------------------------------------------------------------------- 1 | # Advanced Tab Groups 2 | 3 | CSS for Zen Browser's experimental Tab Groups using `userChrome.css`. 4 | 5 | ![Advanced Tab Groups](https://github.com/user-attachments/assets/9541500c-4c91-4bf0-97b2-f8a519a0144f) 6 | 7 | ## Setup 8 | 9 | _To use this CSS, you must configure Zen Browser's `userChrome.css` and enable the listed preferences in `about:config`._ 10 | 11 | If you're unfamiliar with `userChrome.css`, please refer to [this guide](https://docs.zen-browser.app/guides/live-editing). If you encounter any issues, feel free to create an issue on this repository. 12 | 13 | --- 14 | 15 | ## How to Use 16 | 17 | 1. Enable `browser.tabs.groups.enabled` in `about:config` to activate Firefox's experimental Tab Groups feature (works in all versions of Zen Browser). 18 | 2. Follow [this guide](https://docs.zen-browser.app/guides/live-editing) to set up `userChrome.css`. 19 | 3. Copy the CSS from this repository into your `userChrome.css` file. 20 | 4. Add the configuration booleans listed below in `about:config` and adjust them to your liking. 21 | 5. Right click on the tab tou want to group, select add tab to new group then follow the settup. (If this is not an option please check step 1) 22 | 6. Enjoy your customized tab groups! 23 | 24 | --- 25 | 26 | ## Configuration Options 27 | 28 | **Add** these preferences to `about:config` to enable additional features **(They have to be added and are not there by default.)**: 29 | 30 | - **`tab.groups.add-arrow`** 31 | - **`tab.groups.background`** 32 | - **`tab.groups.borders`** 33 | - **`tab.groups.theme-folders`** 34 | - **`tab.groups.fill-folders`** 35 | - **`tab.groups.display-tab-range`** 36 | - **`tab.groups.hide-save-info`** (Recommend for the moment, until Firefox 136 is launched for Zen Browser, end of the month or early March.) 37 | - **`tab.groups.better-unload`** 38 | --- 39 | 40 | ## What Does This Do? 41 | 42 | This CSS improves the functionality and appearance of Zen Browser's experimental Tab Groups. 43 | 44 | --- 45 | 46 | ## Features -------------------------------------------------------------------------------- /themes/23225fc3-ecac-4fbb-9c03-096ab55a9ee8/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "tabgroups.css" 4 | ], 5 | "folders": "", 6 | "uclChromeTarget": [ 7 | "tabgroups.css" 8 | ], 9 | "uclContentTarget": "" 10 | } -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/Nebula-config.css: -------------------------------------------------------------------------------- 1 | /* This is the config guide for Nebula theme 2 | Here you can tweak the various settings like animations, features, etc. to your own preference 3 | by changing the variables or adding preferences in about:config 4 | without searching through the code directly */ 5 | 6 | 7 | /* Tab Animations 8 | 1. Tab switch animations 9 | Go to about:config and add a "number" "nebula-tab-switch-animation" 10 | Set number to 0 (for no animation) 11 | Set number to 2 (for style 2 which is more bouncy) 12 | Set number to 3 (for style 3 which is more bounce than default but very light) 13 | Set number to 4 (for style 4 which has no blur but instead smooth crossfade) 14 | By default the style is set to 1 but no need to add its config 15 | 16 | 2. Tab loading animations 17 | Go to about:config and add a "number" "nebula-tab-loading-animation" 18 | Set number to 0 (for no animation) 19 | Set number to 2 (for style 2 which is more prominant) 20 | Set number to 3 (for style 3 which is lighter) 21 | Set number to 4 (for style 4 which has no blur but grayscale when loading) 22 | Set number to 5 (for style 5 which has blur + grayscale) 23 | By default the style is set to 1 but no need to add its config 24 | */ 25 | 26 | /* Glow Animations 27 | 1. Nebula hover glow animations 28 | Go to about:config and add a "number" "nebula-glow-gradient" 29 | Set number to 0 (for no animation) 30 | Set number to 2 (for monochrome gradient) 31 | Set number to 3 (for RGB gradient) 32 | By default the style is set to 1 but no need to add its config 33 | Note: these gradient presets apply to: tabs, Essentials, urlbar, miniplayer, extensions, and links when hovering over 34 | */ 35 | 36 | /* URLbar Animations 37 | 1. URLbar opening animations 38 | Go to about:config and add a "number" "nebula-urlbar-animation" 39 | Set number to 0 (for no animation) 40 | Set number to 2 (for style 2 which is more heavy) 41 | Set number to 3 (for style 3 which has no blur but instead grayscale for background) 42 | By default the style is set to 1 but no need to add its config 43 | 44 | 45 | /* Customize the look! */ 46 | :root { 47 | /* Nebula border radius (Affects tabs, Essentials, urlbar, miniplayer, extensions, workspace button)*/ 48 | --nebula-border-radius: 13px; /* This will change roundness of everything in Nebula (DEFAULT: 12px) */ 49 | --nebula-website-tint: light-dark(rgba(255,255,255,0),rgba(0,0,0,0)); /* Edit the color values to change the tint on transparent websites */ 50 | --nebula-ui-tint: light-dark(rgba(255,255,255,0.12),rgba(0,0,0,0.12)); /* Edit the color values to change the tint of sidebar and etc. */ 51 | } 52 | 53 | /* DO NOT ADD OTHER CSS BELOW */ 54 | /* More styles and options will come soon here! */ -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/Nebula-content.css: -------------------------------------------------------------------------------- 1 | @import "content/better-pdf.css"; 2 | -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/Nebula.css: -------------------------------------------------------------------------------- 1 | @import "modules/General-UI.css"; 2 | @import "modules/Sidebar.css"; 3 | @import "modules/Topbar-buttons.css"; 4 | @import "modules/URLbar.css"; 5 | @import "modules/Pinned-extensions.css"; 6 | @import "modules/Tabstyles.css"; 7 | @import "modules/Essentials.css"; 8 | @import "modules/Sound-icon.css"; 9 | @import "modules/Toolbar.css"; 10 | @import "modules/Miniplayer.css"; 11 | @import "modules/BetterPiP.css"; 12 | @import "modules/Animations(tabs).css"; 13 | @import "modules/Tabfolders.css"; 14 | 15 | @import "Nebula-config.css"; -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/modules/Essentials.css: -------------------------------------------------------------------------------- 1 | /* Credit: Lacuna by Tanay-Kar */ 2 | 3 | /* === ESSENTIALS ========================================================================================================== */ 4 | /* ESSENTIAL COLOR WITH SHADOW, SPACING & ROUNDED EDGES */ 5 | .zen-essentials-container .tabbrowser-tab { 6 | .tab-background { 7 | background-color: light-dark(rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.35)) !important; 8 | box-shadow: 0 0px 3px light-dark(rgba(255, 255, 255, 0.12),rgba(0, 0, 0, 0.12)) !important; 9 | border-radius: calc(var(--nebula-border-radius) + 1px) !important; 10 | } 11 | 12 | &:hover .tab-background { 13 | background-color: light-dark(rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.45)) !important; 14 | box-shadow: 0 0px 3px light-dark(rgba(255, 255, 255, 0.95),rgba(0, 0, 0, 0.95)) !important; 15 | } 16 | 17 | @media (-moz-pref("zen.theme.essentials-favicon-bg")) { 18 | .tab-background::after { 19 | content: "" !important; 20 | position: absolute !important; 21 | left:0 !important; 22 | top: 0 !important; 23 | width: 100% !important; 24 | height: 100% !important; 25 | 26 | display: block !important; 27 | z-index: -1 !important; 28 | } 29 | } 30 | } 31 | /* makes essentials have fixed width of 60px (from superpins) */ 32 | :root { 33 | --essentials-width: 60px !important; 34 | } 35 | 36 | .zen-essentials-container { 37 | grid-template-columns: repeat(auto-fit, minmax(var(--essentials-width), auto)) !important; 38 | } 39 | .collapsed-toolbar .essential-item { 40 | justify-content: center; /* Ensures items are centered */ 41 | align-items: center; 42 | margin: auto; /* Adjust if needed */ 43 | } 44 | 45 | 46 | /* Animations for essentials and stuff */ 47 | #zen-main-app-wrapper:not(:has(#zen-welcome)) { 48 | .tabbrowser-tab { 49 | scale: unset !important; 50 | 51 | &[zen-glance-tab] { 52 | box-shadow: none !important; 53 | 54 | .tab-label-container { 55 | display: none !important; 56 | } 57 | } 58 | 59 | .tab-stack { 60 | transition: transform 0.2s ease !important; 61 | } 62 | 63 | .tab-background, .tab-icon-stack, .tab-label-container { 64 | transition: opacity 0.2s ease !important; 65 | } 66 | 67 | .tab-background { 68 | transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease !important; 69 | overflow: hidden !important; 70 | position: relative !important; 71 | 72 | &::before { 73 | transition: opacity 0.3s ease, width 0.3s ease, background 0.3s ease; 74 | opacity: 0; 75 | } 76 | 77 | &::after { 78 | content: ""; 79 | position: absolute; 80 | width: 100%; 81 | height: var(--tab-min-height); 82 | opacity: 0; 83 | transition: opacity 0.3s ease-out; 84 | } 85 | } 86 | 87 | &[selected]:not([zen-glance-tab="true"]), &[visuallyselected]:not([zen-glance-tab="true"]) { 88 | & > .tab-stack > .tab-background { 89 | 90 | &::after { 91 | width: 100%; 92 | opacity: 1; 93 | } 94 | } 95 | } 96 | 97 | &:active { 98 | .tab-stack { 99 | transform: scale(0.95, 0.95) !important; 100 | } 101 | } 102 | } 103 | } 104 | 105 | /* ================= ESSENTIALS & STUFF ====================== */ 106 | 107 | #zen-main-app-wrapper:not(:has(#zen-welcome)) { 108 | /* Tab click animations */ 109 | #tabbrowser-tabs:not([movingtab]) { 110 | .tabbrowser-tab { 111 | transition: scale 0.2s ease !important; 112 | } 113 | 114 | .tabbrowser-tab:active { 115 | scale: 0.96 !important; 116 | } 117 | 118 | .tabbrowser-tab:has(.tab-close-button:hover) { 119 | scale: 1 !important; 120 | } 121 | } 122 | 123 | 124 | /* Split view tabs */ 125 | tab-group[split-view-group] { 126 | .tabbrowser-tab { 127 | & > .tab-stack > .tab-background { 128 | &::after { 129 | mask-image: linear-gradient(to right, black, transparent 60%); 130 | } 131 | } 132 | } 133 | } 134 | } 135 | 136 | .zen-essentials-container { 137 | 138 | /*noinspection CssInvalidFunction*/ 139 | .tabbrowser-tab { 140 | overflow: visible !important; 141 | 142 | &[selected], &[visuallyselected] { 143 | .tab-icon-image { 144 | filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5)); 145 | } 146 | 147 | & > .tab-stack > .tab-background { 148 | border: none !important; 149 | 150 | &::before { 151 | opacity: 0 !important; 152 | } 153 | 154 | &::after { 155 | filter: saturate(180%) blur(13.5px) !important; 156 | } 157 | } 158 | } 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/modules/General-UI.css: -------------------------------------------------------------------------------- 1 | /* === GENERAL BROWSER UI ================================================================================================== */ 2 | #browser { 3 | background: var(--nebula-ui-tint) !important; /* Increased opacity */ 4 | } 5 | browser[transparent='true'] { 6 | background: var(--nebula-website-tint) !important; 7 | } 8 | 9 | :root { 10 | --attention-dot-color: transparent !important; 11 | } 12 | 13 | #identity-icon-label[value="Extension (Bonjourr · Minimalist Startpage)"] { 14 | display: none !important; 15 | } 16 | 17 | /* ---- Fix for linux transparency (Credit: Zylvo) ---- */ 18 | :root { 19 | --zen-themed-toolbar-bg-transparent: transparent !important; 20 | } 21 | 22 | /* Removes the background of the icon extension box in the url bar */ 23 | #identity-icon-box { 24 | background: none !important; 25 | } 26 | /*---- Removes the background of the icon extension box in the url bar---- */ 27 | 28 | #identity-icon-box { 29 | background: none !important; 30 | } 31 | /* ---- Fix for linux transparency (Credit: Zylvo) ---- */ 32 | :root { 33 | --zen-themed-toolbar-bg-transparent: transparent !important; 34 | } 35 | 36 | /* -------- floating statusbar (credit to the mod) --------- */ 37 | #statuspanel { 38 | margin: 10px !important; 39 | } 40 | 41 | #statuspanel-label { 42 | border-radius: 11px !important; 43 | padding: 3px 10px !important; 44 | border: 1px solid var(--zen-colors-border) !important; 45 | background: light-dark(rgba(255, 255, 255, 1),rgba(0, 0, 0, 0.9)) !important; 46 | } 47 | 48 | /* -------------------- Split view outline -------------------------- */ 49 | #tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer { 50 | outline: none !important; /* Remove default outline */ 51 | box-shadow: 0 0 0 2px light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0)), 52 | 0 4px 10px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) !important; 53 | transition: box-shadow 0.35s ease !important; 54 | } 55 | 56 | #tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer.deck-selected { 57 | box-shadow: 0 0 0 2px light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)), 58 | 0 4px 10px light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) !important; 59 | } 60 | 61 | /* ------------------ Split view tabs container --------------------- */ 62 | tab-group[split-view-group="true"] { 63 | background-color: transparent !important; 64 | box-shadow: 0 0px 8px rgba(0, 0, 0, 0) !important; 65 | border-radius: 12px !important; 66 | position: relative !important; 67 | transition: background-color 0.3s ease, 68 | box-shadow 0.3s ease, 69 | transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1) !important; /* Resistive transition */ 70 | } 71 | 72 | tab-group[split-view-group="true"]:hover { 73 | background-color: light-dark(rgba(255,255,255,0.45), rgba(0,0,0,0.45)) !important; 74 | box-shadow: 0 0px 3px rgba(0, 0, 0, 0.55) !important; 75 | } 76 | 77 | /* If any tab inside the group is selected, apply dark background */ 78 | tab-group[split-view-group="true"]:has(.tabbrowser-tab[selected="true"], .tabbrowser-tab[visuallyselected="true"]) { 79 | background-color: light-dark(rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.35)) !important; 80 | box-shadow: 0 0px 3px rgba(0, 0, 0, 0.55) !important; 81 | } 82 | 83 | /* Right mouse button press effect with resistive animation */ 84 | tab-group[split-view-group="true"]:active { 85 | transform: scale(0.95) !important; 86 | transition: transform 0.1s ease-out !important; 87 | } 88 | 89 | /* Smooth return effect */ 90 | tab-group[split-view-group="true"]:not(:active) { 91 | transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1) !important; 92 | } 93 | 94 | -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/modules/Miniplayer.css: -------------------------------------------------------------------------------- 1 | /* Credit: Natsumi v3 by greeeen-dev */ 2 | 3 | /* ------------------ Media Player Styling ----------------------- */ 4 | #zen-media-controls-toolbar > toolbaritem { 5 | border-radius: var(--nebula-border-radius) !important; 6 | 7 | transition: border-radius 0.3s ease; /* optional for smooth transition */ 8 | } 9 | 10 | #zen-media-controls-toolbar > toolbaritem:hover { 11 | border-radius: 12px !important; 12 | } 13 | 14 | @keyframes fadein-animation { 15 | 0% { opacity: 0; } 16 | 100% { opacity: 0.2; } 17 | } 18 | /* Smooth Infinite Gradient Animation */ 19 | @keyframes glowing-gradient { 20 | 0% { background-position: 0% 50%; } 21 | 25% { background-position: 50% 0%; } 22 | 50% { background-position: 100% 50%; } 23 | 75% { background-position: 50% 100%; } 24 | 100% { background-position: 0% 50%; } 25 | } 26 | @keyframes miniplayer-gradient { 27 | 0% { background-position: 0% 50%; } 28 | 25% { background-position: 50% 0%; } 29 | 50% { background-position: 100% 50%; } 30 | 75% { background-position: 50% 100%; } 31 | 100% { background-position: 0% 50%; } 32 | } 33 | #zen-media-current-time, #zen-media-duration { 34 | font-variant-numeric: tabular-nums; 35 | } 36 | #zen-media-controls-toolbar { 37 | & > toolbaritem { 38 | position: relative; 39 | border-radius: var(--nebula-border-radius); 40 | overflow: hidden; 41 | transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; 42 | /* Default Glass Effect */ 43 | background: light-dark(rgba(235, 235, 235, 0.4),rgba(20, 20, 20, 0.3)) !important; 44 | /* Gradient Layer (Initially Hidden) */ 45 | &::before { 46 | content: ""; 47 | position: absolute; 48 | inset: 0; 49 | background: linear-gradient( 50 | 45deg, 51 | color-mix(in srgb, var(--zen-primary-color) 5%, black), 52 | color-mix(in srgb, var(--zen-primary-color) 30%, black), 53 | color-mix(in srgb, var(--zen-primary-color) 75%, black), 54 | color-mix(in srgb, var(--zen-primary-color) 100%, black), /* Peak highlight */ 55 | color-mix(in srgb, var(--zen-primary-color) 50%, black), 56 | color-mix(in srgb, var(--zen-primary-color) 15%, black) 57 | ); 58 | background-size: 400% 400%; 59 | animation: miniplayer-gradient 10s linear infinite; 60 | opacity: 0; /* Hidden by default */ 61 | filter: blur(10px) opacity(0.57); 62 | z-index: -1; 63 | transition: opacity 0.3s ease-in-out; 64 | } 65 | 66 | &:hover { 67 | background: light-dark(rgba(235, 235, 235, 1), rgba(20, 20, 20, 1)) !important; 68 | box-shadow: 0 6px 15px light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)); 69 | /* Ensure the gradient layer stays visible */ 70 | &::before { 71 | opacity: 0.3; /* Increase opacity */ 72 | z-index: 0; /* Make sure it's not hidden under the main background */ 73 | pointer-events: none; 74 | } 75 | } 76 | } 77 | 78 | /* Style 0 - No gradient */ 79 | @media (-moz-pref("nebula-glow-gradient", 0)) { 80 | & > toolbaritem::before { 81 | display: none; 82 | } 83 | } 84 | 85 | /* Monochrome gradient (Style 2) */ 86 | @media (-moz-pref("nebula-glow-gradient", 2)) { 87 | & > toolbaritem::before { 88 | background: linear-gradient( 89 | 45deg, 90 | light-dark(#dddddd, #ffffff), 91 | light-dark(#eeeeee, #dddddd), 92 | light-dark(#dddddd, #bbbbbb), 93 | light-dark(#ffffff, #000000), 94 | light-dark(#eeeeee, #dddddd), 95 | light-dark(#dddddd, #ffffff) 96 | ); 97 | background-size: 400% 400%; 98 | 99 | filter: blur(10px) opacity(0.57); 100 | z-index: -1; 101 | } 102 | } 103 | 104 | /* RGB gradient (Style 3) */ 105 | @media (-moz-pref("nebula-glow-gradient", 3)) { 106 | & > toolbaritem::before { 107 | background: linear-gradient(45deg, #ff8a00, #e52e71, #7f00ff, #00c9ff, #ff8a00); 108 | background-size: 400% 400%; 109 | 110 | filter: blur(10px) opacity(0.57); 111 | z-index: -1; 112 | } 113 | } 114 | 115 | /* When playing, enable animation */ 116 | &.playing > toolbaritem::before { 117 | opacity: 0.65; /* Visible glow */ 118 | animation: glowing-gradient 10s infinite linear; 119 | } 120 | /* Enhance glow on hover when playing */ 121 | &.playing > toolbaritem:hover::before { 122 | opacity: 0.6; 123 | } 124 | #zen-media-service-hbox { 125 | padding-top: 5px !important; 126 | transition: padding 0.15s ease-in-out !important; 127 | } 128 | #zen-media-title { 129 | font-weight: 720 !important; 130 | } 131 | #zen-media-artist { 132 | font-size: 10px !important; 133 | } 134 | #zen-media-info-vbox::before { 135 | display: none !important; 136 | } 137 | #zen-media-progress-bar { 138 | &::-moz-range-thumb { 139 | scale: 1; 140 | transition: scale 0.2s ease; 141 | } 142 | &::-moz-range-track, &::-moz-range-progress { 143 | transition: height 0.2s ease; 144 | } 145 | &:hover { 146 | &::-moz-range-thumb { 147 | scale: 1.4; 148 | } 149 | &::-moz-range-track, &::-moz-range-progress { 150 | height: calc(var(--progress-height) + 2px) !important; 151 | } 152 | } 153 | } 154 | } 155 | #zen-media-controls-toolbar { 156 | & #zen-media-focus-button::after { 157 | display:none !important; 158 | } 159 | } 160 | 161 | /* --------------- button animations miniplayer ------------------- */ 162 | #zen-media-focus-button, 163 | #zen-media-mute-button, 164 | #zen-media-playpause-button, 165 | #zen-media-nexttrack-button, 166 | #zen-media-previoustrack-button, 167 | #zen-media-close-button { 168 | transition: opacity 0.3s ease-in-out, transform 0.17s ease-out; 169 | opacity: 1; 170 | } 171 | 172 | #zen-media-focus-button:hover, 173 | #zen-media-mute-button:hover, 174 | #zen-media-playpause-button:hover, 175 | #zen-media-nexttrack-button:hover, 176 | #zen-media-previoustrack-button:hover, 177 | #zen-media-close-button:hover { 178 | opacity: 0.8; 179 | transform: scale(1.11); 180 | } 181 | 182 | /* -------- media info height increase animation ------ */ 183 | #zen-media-controls-toolbar .show-on-hover { 184 | max-height: 0; 185 | opacity: 0; 186 | transform: translateY(0.5rem); 187 | padding: 0 6px; 188 | pointer-events: none; 189 | filter: blur(8px); 190 | transition: max-height 0.3s ease, filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease; 191 | } 192 | 193 | #zen-media-controls-toolbar:hover .show-on-hover { 194 | max-height: 100px; 195 | opacity: 1; 196 | transform: translateY(0); 197 | padding: 6px; 198 | pointer-events: auto; 199 | filter: blur(0); 200 | } 201 | 202 | /* Faster disappearance when unhovering */ 203 | #zen-media-controls-toolbar:not(:hover) .show-on-hover { 204 | transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease, padding 0.15s ease, max-height 0.2s ease; 205 | } 206 | 207 | /* Inner elements (timestamps) - With 0.2s delay */ 208 | #zen-media-controls-toolbar .show-on-hover > * { 209 | opacity: 0; 210 | transform: translateY(0); 211 | filter: blur(0px); 212 | transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s, filter 0.3s ease 0.2s; 213 | } 214 | 215 | /* Timestamps appear 0.2s after toolbar starts expanding */ 216 | #zen-media-controls-toolbar:hover .show-on-hover > * { 217 | opacity: 1; 218 | transform: translateY(0); 219 | filter: blur(0); 220 | } 221 | 222 | /* Fade out instantly when unhovering */ 223 | #zen-media-controls-toolbar:not(:hover) .show-on-hover > * { 224 | transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease; 225 | } 226 | -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/modules/Pinned-extensions.css: -------------------------------------------------------------------------------- 1 | /* Credit: Pinned extensions mod from discord */ 2 | 3 | /* === PINNED EXTENSIONS (Keeps Dark Background & Shadow) ==================================================================================== */ 4 | /* Pinned extensions */ 5 | #TabsToolbar-customization-target { 6 | display: flex !important; 7 | flex-direction: row !important; 8 | flex-wrap: wrap !important; 9 | gap: calc(var(--zen-toolbox-padding) - 3px) !important; 10 | 11 | #tabbrowser-tabs { 12 | min-width: 100% !important; 13 | height: calc(100% - 41px) !important; 14 | } 15 | 16 | #Zen-tabs-wrapper { 17 | max-height: 700px !important; 18 | } 19 | 20 | .unified-extensions-item-action-button { 21 | padding: 0px !important; 22 | } 23 | 24 | /* Pinned Extensions */ 25 | .unified-extensions-item { 26 | margin-inline: 2px !important; 27 | border-bottom: 0px !important; 28 | padding: 0px !important; 29 | height: 32px !important; 30 | width: 32px !important; 31 | flex-grow: 1 !important; 32 | order: -1 !important; 33 | background-color: light-dark(rgba(255,255,255,0.354), rgba(0,0,0,0.354)) !important; 34 | box-shadow: 0 0px 3px light-dark(rgba(255, 255, 255, 0.2),rgba(0, 0, 0, 0.2)) !important; 35 | border-radius: calc(var(--nebula-border-radius) - 0.5px) !important; 36 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 37 | } 38 | 39 | .unified-extensions-item:hover { 40 | background-color: light-dark(rgba(255,255,255,0.5), rgba(0,0,0,0.5)) !important; 41 | box-shadow: 0 0px 3px light-dark(rgba(255, 255, 255, 0.95),rgba(0, 0, 0, 0.95)) !important; 42 | } 43 | 44 | toolbarbutton:not([id="tabs-newtab-button"]) { 45 | height: 32px !important; 46 | width: 32px !important; 47 | flex-grow: 1 !important; 48 | padding: 0px !important; 49 | 50 | toolbarbutton, 51 | stack { 52 | --toolbarbutton-active-background: transparent !important; 53 | --toolbarbutton-hover-background: transparent !important; 54 | } 55 | 56 | .toolbarbutton-badge { 57 | display: none !important; 58 | } 59 | 60 | .toolbarbutton-text { 61 | display: none !important; 62 | } 63 | } 64 | 65 | >toolbarbutton:not([id="tabs-newtab-button"]), 66 | >toolbaritem { 67 | background-color: light-dark(rgba(255,255,255,0.4), rgba(0,0,0,0.4)) !important; 68 | box-shadow: 0 0px 3px light-dark(rgba(255, 255, 255, 0.12),rgba(0, 0, 0, 0.12)) !important; 69 | border-radius: calc(var(--nebula-border-radius) + 1px) !important; 70 | margin: 0px !important; 71 | order: -1 !important; 72 | flex-grow: 1 !important; 73 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 74 | } 75 | 76 | >toolbarbutton:not([id="tabs-newtab-button"]):hover, 77 | >toolbaritem:hover { 78 | background-color: light-dark(rgba(255,255,255,0.45), rgba(0,0,0,0.5)) !important; 79 | box-shadow: 0 0px 3px light-dark(rgba(255, 255, 255, 0.95),rgba(0, 0, 0, 0.95)) !important; 80 | } 81 | } 82 | /* -------- Hover animation gradient -------- */ 83 | .unified-extensions-item { 84 | position: relative !important; 85 | border-radius: calc(var(--nebula-border-radius) - 1px) !important; 86 | } 87 | 88 | .unified-extensions-item::before { 89 | content: ""; 90 | position: absolute; 91 | inset: -0.1px; 92 | background: linear-gradient( 93 | 45deg, 94 | color-mix(in srgb, var(--zen-primary-color) 5%, black), 95 | color-mix(in srgb, var(--zen-primary-color) 30%, black), 96 | color-mix(in srgb, var(--zen-primary-color) 75%, black), 97 | color-mix(in srgb, var(--zen-primary-color) 100%, black), 98 | color-mix(in srgb, var(--zen-primary-color) 50%, black), 99 | color-mix(in srgb, var(--zen-primary-color) 15%, black) 100 | ); 101 | background-size: 200% 400%; 102 | border-radius: calc(var(--nebula-border-radius) - 2px) !important; 103 | clip-path: inset(0 round calc(var(--nebula-border-radius) - 2px)); 104 | animation: ext-hover-gradient 6s linear infinite; 105 | animation-play-state: paused; 106 | opacity: 0; 107 | filter: blur(20px) brightness(0.58); 108 | transition: opacity 0.4s ease-in-out; 109 | pointer-events: none; 110 | z-index: 0; 111 | } 112 | 113 | /* Glow on hover */ 114 | .unified-extensions-item:hover::before { 115 | animation-play-state: running; 116 | opacity: 0.5; 117 | } 118 | 119 | /* Hide glow when hovering close/reset */ 120 | .unified-extensions-item:has(.close-button:hover, .reset-button:hover)::before { 121 | opacity: 0; 122 | } 123 | 124 | /* Style 0 - No gradient */ 125 | @media (-moz-pref("nebula-glow-gradient", 0)) { 126 | .unified-extensions-item::before { 127 | display: none; 128 | } 129 | } 130 | 131 | /* Style 2 - Monochrome gradient */ 132 | @media (-moz-pref("nebula-glow-gradient", 2)) { 133 | .unified-extensions-item::before { 134 | display: block; 135 | background: linear-gradient( 136 | 45deg, 137 | light-dark(#dddddd, #ffffff), 138 | light-dark(#eeeeee, #dddddd), 139 | light-dark(#dddddd, #bbbbbb), 140 | light-dark(#ffffff, #000000), 141 | light-dark(#eeeeee, #dddddd), 142 | light-dark(#dddddd, #ffffff) 143 | ); 144 | background-size: 200% 400%; 145 | filter: blur(20px) brightness(0.88); 146 | } 147 | } 148 | 149 | /* Style 3 - RGB gradient */ 150 | @media (-moz-pref("nebula-glow-gradient", 3)) { 151 | .unified-extensions-item::before { 152 | display: block; 153 | background: linear-gradient( 154 | 45deg, 155 | #ff8a00, #e52e71, #7f00ff, #00c9ff, #ff8a00 156 | ); 157 | background-size: 200% 400%; 158 | filter: blur(20px) brightness(0.88); 159 | } 160 | } 161 | 162 | /* Gradient animation keyframes */ 163 | @keyframes ext-hover-gradient { 164 | 0% { background-position: 0% 50%; } 165 | 25% { background-position: 50% 0%; } 166 | 50% { background-position: 100% 50%; } 167 | 75% { background-position: 50% 100%; } 168 | 100% { background-position: 0% 50%; } 169 | } 170 | 171 | 172 | /* ============ COMPACT EXTENSIONS (Credit: KiKaraage) ================== */ 173 | #unified-extensions-view{ 174 | 175 | --uei-icon-size: 20px !important; 176 | --extensions-in-row: 4; 177 | 178 | width: 100% !important; 179 | 180 | /* hide not needed */ 181 | #unified-extensions-description, 182 | toolbarseparator, 183 | .unified-extensions-item-menu-button.subviewbutton, 184 | .unified-extensions-item-action-button .unified-extensions-item-contents 185 | {display: none !important;} 186 | 187 | /* spacing */ 188 | 189 | .panel-header {margin-top: 4px !important;} 190 | 191 | [data-l10n-id="unified-extensions-header-title"]::before 192 | {margin-inline-end: 14px !important;} 193 | 194 | #unified-extensions-manage-extensions 195 | {padding-left: 10px !important;} 196 | 197 | #unified-extensions-messages-container::empty 198 | {margin: 0px !important;} 199 | 200 | #overflowed-extensions-list 201 | {padding-bottom: 5px !important;} 202 | 203 | #unified-extensions-area 204 | {padding-block: 5px !important;} 205 | 206 | .unified-extensions-list 207 | {padding-top: 5px !important;} 208 | 209 | /* grid layout */ 210 | #overflowed-extensions-list, 211 | #unified-extensions-area, 212 | .unified-extensions-list { 213 | display: grid !important; 214 | grid-template-columns: repeat( var(--extensions-in-row), calc(var(--uei-icon-size) + 32px) ); 215 | justify-items: center !important; 216 | align-items: center !important; 217 | } 218 | 219 | /* buttons */ 220 | .unified-extensions-item{ 221 | padding: 4px !important; 222 | border-radius: var(--zen-border-radius) !important; 223 | 224 | .unified-extensions-item-icon, 225 | .toolbarbutton-badge-stack 226 | {margin: 0px !important;} 227 | 228 | .unified-extensions-item-action-button 229 | {padding-inline: 5px !important;} 230 | 231 | } 232 | 233 | /* top & bottom borders */ 234 | #unified-extensions-area { 235 | border-top: 1px solid var(--panel-separator-color); 236 | border-bottom: 1px solid var(--panel-separator-color); 237 | padding-top: 5px !important; 238 | padding-bottom: 5px !important; 239 | } 240 | 241 | } -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/modules/Sound-icon.css: -------------------------------------------------------------------------------- 1 | /* === PLAYING/MUTE ICON APPEARANCE CUSTOMIZATION ========================================================================== */ 2 | span[part="button"].button-background { 3 | display: none !important; /* removes sound button added in 1.12t */ 4 | } 5 | 6 | @media not (-moz-pref("lacuna.tab.default-audio-indicator")) { 7 | .tabbrowser-tab img { 8 | transition: opacity 0.3s ease-in-out; 9 | } 10 | 11 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) img { 12 | opacity: 0 !important; 13 | transition: opacity 0.1s !important; 14 | } 15 | 16 | .tab-icon-overlay { 17 | &:is([soundplaying], [muted], [activemedia-blocked]) { 18 | display: block !important; 19 | border: 0px !important; 20 | border-radius: 0px !important; 21 | top: 0px !important; 22 | right: 0px !important; 23 | scale: 1.5 !important; 24 | opacity: 0.9 !important; 25 | margin: 0px 3px !important; 26 | background: white !important; 27 | --play-svg: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%20135%20140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%22%3E%3Crect%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2230%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2260%22%20width%3D%2215%22%20height%3D%22140%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%2290%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3Crect%20x%3D%22120%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%22120%22%20rx%3D%226%22%3E%3Canimate%20attributeName%3D%22height%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%22120%3B110%3B100%3B90%3B80%3B70%3B60%3B50%3B40%3B140%3B120%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22y%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20values%3D%2210%3B15%3B20%3B25%3B30%3B35%3B40%3B45%3B50%3B0%3B10%22%20calcMode%3D%22linear%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Frect%3E%3C%2Fsvg%3E"); 28 | --mute-svg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMzYgMTQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiPjxyZWN0IHg9IjQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iMzQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iNjQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iOTQiIHk9IjcwIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI2Ii8+PHJlY3QgeD0iMTI0IiB5PSI3MCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iNiIvPjwvc3ZnPg=="); 29 | mask-size: 10px 10px !important; 30 | mask-repeat: no-repeat !important; 31 | mask-position: center !important; 32 | } 33 | 34 | @media (prefers-color-scheme: light) { 35 | &:is([soundplaying], [muted], [activemedia-blocked]) { 36 | filter: invert(1); 37 | } 38 | } 39 | 40 | &:is([activemedia-blocked]) { 41 | background: none !important; 42 | list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEb0lEQVR4nO2YW4hWVRTHP7URvM6ooWYa1kPlQ4GXxISyC4mUVg/RZQyjKLUsUcsmJRm8pqUgXSCRbhZCqT1mkARaWm+l9qK9jCKZ2KhUD4nWLxbuM/1ncfb3nfPNGaeH84cPPtZ/n7XX2pe1/3tXKiVKlChR4v8I4BZgFtCnB/q+AnjQYuiqo2bgby6htbAIs/e/KvRtMTxWr5PpwHn+w3uFR1o7hg+kf4vlnrwOrgHaxckp4Npuizgex3Wh7wS/AWOyftwH2C8f/wFM6Pao4/FMDDEk+BboneXDBXTGbMe/CvwKbOqGoFcCx4Hlzv64i2l+LUdXAmflg22Of9E5bCowif7O92LHfyLcGWBYNWerXePhwt0JXBT+G6BXUYmEPvaKf+trmnAj3CCvjDkZ5Bq2CDcwTHmCX4DRRSYR+hkNnJR+jgEDhH/FDfTANCdPukaDhXtNuL+AKe7Qmgc8kjNoKyrPAwuBBrHfGvpIsEa4wSG2BE+kOf5aGrwl9mGuarzhvtsqXOZkgOfku3cdt1G434Ghwr0t3B7vtNGt/8nCLXUzpU7nC5c+QvFEnnXfzhVuqFvmS4WbIvYLunIqQUslOKWbGDgk3GqxD3HTvE+XSGjTFxgXfn1TOPtGD7sm4dcId1DsvYHTwt2nTtcJ8anbfIrxkQrX7ipc/7A8zkkb+/860E/aDXeDsUq4Ca7vq4XbkbaHjNglRMdhZEJN7G1upn4W7mWXxHfEccAl0yLcEbH3cpXyUXcoJ9ihiRwU4qHIqOtM3Sh2U6YjIhs1hg3S/ipR2IYbhNtOyrkBPCz2HzURzfx2sW8T+2axPyD2Q27d63KK4awruT8Jd3+KjDd8KPZpYj+miZyJ7IPPI8tHK84XYrdNnRU68rvTdBSwROy7IvunPW8iLZGyuzuy5GrhevnuS7HP60oiurRuE/tHGZbW4R5eWm15N/tnkZG3jTpSOCuxtbBe2o8C/onM1PYMm/0HTWRnpPzanV0FnJbfo5Fl1y+U2Bj2u/K7rI7yuyJWftdGyuwYF8T4yLR7yW/JbHAyw/6vd0lEpTmXboaxA3FnmtowYmYViXI4okSb3L0+TaI0iERJ46pJlLVpZ0WQKNY2wb1eNJoAS9DxjmRl142qisa5btSeqdSnfg1PO8WtM/WScFPFbjEPqibj36wi4ze677YI15wjEbuLJNjiuE1VZPw7wn2V92K1zr0vTXUXq6dsM+a5+oZS/UKYmQY34ucjirvRzdScvFfdAa6CnMz8vtS1q26biVDhlwvXnnrVzfD4cIe7fH1f5OND2MQH3PpX3TfSHbattZ6DVK587PjFdEZjgYlY34pFjtfD0arWkLzVxD/Q2fSeUCleYDKbQ5DLnH1O7uoYXjfsWTKBVayJlR4CMAn4U+LZm+nJVE50/4g9ttujdrCHc/eIfVpP+EywJ3xXBjvV+ssB4H3p32K5q15HzVKpOp5kLheA1tD3RRWN9Tq7Cbi7sOjyl+QZwM090X+JEiVKlKjUwr/rwkME7dPwYwAAAABJRU5ErkJggg==") !important; 43 | width: 16px !important; 44 | height: 16px !important; 45 | margin: 0px 3px !important; 46 | } 47 | 48 | &:is([soundplaying]) { 49 | list-style-image: none !important; 50 | mask-image: var(--play-svg) !important; 51 | } 52 | 53 | &:is([muted]) { 54 | list-style-image: none !important; 55 | mask-image: var(--mute-svg) !important; 56 | } 57 | } 58 | 59 | @media not (-moz-pref("zen.view.sidebar-expanded")) { 60 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]):hover 61 | img { 62 | opacity: 1 !important; 63 | transition: opacity 0.1s ease-out !important; 64 | } 65 | 66 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]):hover 67 | .tab-icon-overlay { 68 | margin: 0px !important; 69 | transition: opacity 0.25s ease-out, transform 0.25s ease-out !important; 70 | transform: translate(6.9px, -6.9px) scale(0.69) !important; 71 | } 72 | 73 | .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-overlay { 74 | transition: opacity 0.25s ease-in, transform 0.25s ease-in !important; 75 | } 76 | } 77 | 78 | #zen-essentials-container { 79 | .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { 80 | margin: 0px !important; 81 | } 82 | } 83 | } 84 | 85 | /* Better rounded workspace indicator */ 86 | @media (-moz-pref("zen.theme.pill-button")) { 87 | #PanelUI-zen-workspaces-list toolbarbutton { 88 | &.zen-workspace-button[active="true"] .zen-workspace-icon::before { 89 | background-color: transparent !important; 90 | } 91 | 92 | &.zen-workspace-icon { 93 | border: 3px solid var(--zen-colors-border) !important; 94 | } 95 | 96 | &.zen-workspace-button[active="true"] .zen-workspace-icon { 97 | border: 3px solid var(--toolbarbutton-icon-fill-attention) !important; 98 | } 99 | } 100 | } -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/modules/Toolbar.css: -------------------------------------------------------------------------------- 1 | /* Credit: Lacuna by Tanay-Kar */ 2 | 3 | /* === BETTER CUSTOMIZE TOOLBAR ============================================================================================ */ 4 | 5 | #customization-container { 6 | position: absolute; 7 | z-index: 1; 8 | bottom: 10px; 9 | right: 10px; 10 | height: 80%; 11 | width: 70%; 12 | border-radius: 12px; 13 | 14 | padding: 10px; 15 | background: light-dark(rgba(255,255,255,0.32),rgba(0,0,0,0.3)) !important; 16 | } 17 | 18 | @media (-moz-pref("zen.tabs.vertical.right-side")) { 19 | #customization-container { 20 | left: 10px; 21 | } 22 | 23 | #customization-container #customization-content-container { 24 | flex-direction: row-reverse; 25 | } 26 | } 27 | 28 | #customization-container #customization-panel-container { 29 | padding: 10px !important; 30 | } 31 | 32 | #customization-container #customization-panelWrapper { 33 | --panel-arrow-offset: 0px; 34 | } 35 | 36 | #customization-container .panel-arrowbox { 37 | display: none !important; 38 | } 39 | 40 | #customization-container .panel-arrowcontent { 41 | height: 100% !important; 42 | background: light-dark(rgba(255,255,255,0.8),rgba(0,0,0,0.4)) !important; 43 | border: none !important; 44 | margin: 0px !important; 45 | border-radius: 8px; 46 | } 47 | 48 | /* Check when the width is low */ 49 | @media (max-width: 700px) { /* Adjust the threshold as needed */ 50 | #customization-container { 51 | border: 2px solid red; /* Temporary visual indicator */ 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/Nebula/modules/Topbar-buttons.css: -------------------------------------------------------------------------------- 1 | /* Credit: Lacuna by Tanay-Kar */ 2 | 3 | /* === BUTTONS ABOVE URL BAR =============================================================================================== */ 4 | 5 | #zen-sidebar-top-buttons, 6 | #zen-sidebar-top-buttons-customization-target { 7 | & toolbarbutton:not(.titlebar-button) { 8 | padding: 0px !important; 9 | margin-top: -4px !important; 10 | scale: 1; 11 | } 12 | } 13 | 14 | #PanelUI-menu-button { 15 | list-style-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') !important; 16 | margin: 0px !important; 17 | 18 | @media (prefers-color-scheme: light) { 19 | filter: invert(1); 20 | } 21 | } 22 | 23 | 24 | /* ---------- Windows close buttons ----------- */ 25 | .titlebar-close { 26 | transition: background-color 0.3s ease-out, transform 0.2s ease-in-out; 27 | } 28 | 29 | .titlebar-close:hover { 30 | background-color: rgba(255, 0, 0, 0.8); 31 | transform: scale(1); 32 | } 33 | .titlebar-min, 34 | .titlebar-max { 35 | transition: background-color 0.3s ease-out, transform 0.2s ease-out; 36 | } 37 | 38 | .titlebar-min:hover, 39 | .titlebar-max:hover { 40 | background-color: rgba(200, 200, 200, 0.2); 41 | transform: scale(1); 42 | } 43 | -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/README.md: -------------------------------------------------------------------------------- 1 | If you like the theme then make sure to give it a ⭐https://github.com/JustAdumbPrsn/Nebula-A-Minimal-Theme-for-Zen-Browser -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "userChrome.css", 4 | "userContent.css", 5 | "Nebula-updater (Windows).bat", 6 | "Nebula_updater (Linux Flatpak).sh" 7 | ], 8 | "folders": [ 9 | "Nebula" 10 | ], 11 | "uclChromeTarget": [ 12 | "Nebula/Nebula.css" 13 | ], 14 | "uclContentTarget": [ 15 | "Nebula/Nebula-content.css" 16 | ] 17 | } -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/userChrome.css: -------------------------------------------------------------------------------- 1 | @import "Nebula/Nebula.css"; -------------------------------------------------------------------------------- /themes/542f2a0e-4216-4037-9eef-e8143c21ab44/userContent.css: -------------------------------------------------------------------------------- 1 | @import "Nebula/Nebula-content.css"; 2 | 3 | @-moz-document domain(monkeytype.com) { 4 | body { 5 | background-color: rgba(15, 15, 20, 0.4) !important; /* Darker base color */ 6 | } 7 | } -------------------------------------------------------------------------------- /themes/63556ee3-b89a-40d9-8f72-04f7b6c1aacc/README.md: -------------------------------------------------------------------------------- 1 | # zen-wireframe (rose-pine) 2 | 3 | > A fork of [zen-wireframe](https://github.com/napuzu/zen-wireframe) by undefinedcode, with a focus on expanding theme variety, reviving the original design, and adding new features. 4 | 5 | --- 6 | 7 | ## 🎨 Themes 8 | 9 | - **Catppuccin Mocha** 10 | - **Rose‑Pine** 11 | 12 | > More themes can be requested or contributed by the community! 13 | 14 | --- 15 | 16 | ## 📸 Screenshots 17 | 18 | | Rsoe-Pine Preview | 19 | | :----------------------: | 20 | | ![{46F2DCD2-4A8F-4CB1-A45F-7CEDC51B0D20}](https://github.com/user-attachments/assets/e4f47de8-d912-4571-bd1d-3dfde0810039) -------------------------------------------------------------------------------- /themes/63556ee3-b89a-40d9-8f72-04f7b6c1aacc/rose-pine/userContent.css: -------------------------------------------------------------------------------- 1 | /* Original code by napuzu. Modifications by undefinedcode0 */ 2 | 3 | :root { 4 | --in-content-table-background: #1f1d2e !important; 5 | } 6 | 7 | @-moz-document url("about:privatebrowsing") { 8 | @media (prefers-color-scheme: dark) { 9 | :root { 10 | --na-color-text: #e0def4 !important; 11 | --na-color-bg: #191724 !important; 12 | } 13 | } 14 | } 15 | 16 | @-moz-document url("about:newtab"), url("about:home") { 17 | @media (prefers-color-scheme: dark) { 18 | :root { 19 | --na-color-text: #e0def4 !important; 20 | --na-color-bg: #191724 !important; 21 | } 22 | } 23 | } 24 | 25 | @-moz-document url("about:newtab"), url("about:home"), url("about:privatebrowsing") { 26 | #root, 27 | .container { 28 | display: none; 29 | } 30 | 31 | body:after { 32 | font-weight: 500; 33 | position: absolute; 34 | margin: auto; 35 | color: var(--na-color-text); 36 | font-size: 200%; 37 | background-color: var(--na-color-bg); 38 | /* eee9d899 d1cfc099 */ 39 | width: 100%; 40 | height: 100%; 41 | align-content: center; 42 | text-align: center; 43 | content: "░░▒▒▓▓"; 44 | /* '░░▒▒▓▓' */ 45 | visibility: visible; 46 | background-image: ""; 47 | /* url(loading.gif) */ 48 | background-size: 3em; 49 | background-repeat: no-repeat; 50 | background-position: center; 51 | } 52 | } 53 | 54 | /* Common variables affecting all pages */ 55 | @-moz-document url-prefix("about:") { 56 | :root { 57 | --in-content-page-color: #e0def4 !important; 58 | --color-accent-primary: #c4a7e7 !important; 59 | --color-accent-primary-hover: #e0def4 !important; 60 | --color-accent-primary-active: rgb(189, 180, 254) !important; 61 | background-color: #191724 !important; 62 | --in-content-page-background: #191724 !important; 63 | } 64 | } 65 | 66 | /* Variables and styles specific to about:preferences */ 67 | @-moz-document url-prefix("about:preferences") { 68 | :root { 69 | --zen-colors-tertiary: #1f1d2e !important; 70 | --in-content-text-color: #e0def4 !important; 71 | --link-color: #c4a7e7 !important; 72 | --link-color-hover: rgb(206, 212, 254) !important; 73 | --zen-colors-primary: #1f1d2e !important; 74 | --in-content-box-background: #1f1d2e !important; 75 | --zen-primary-color: #c4a7e7 !important; 76 | } 77 | 78 | groupbox, 79 | moz-card { 80 | background: #191724 !important; 81 | } 82 | 83 | button, 84 | groupbox menulist { 85 | background: #1f1d2e !important; 86 | color: #e0def4 !important; 87 | } 88 | 89 | .main-content { 90 | background-color: #191724 !important; 91 | } 92 | 93 | /* Variables and styles specific to about:addons */ 94 | @-moz-document url-prefix("about:addons") { 95 | :root { 96 | --zen-dark-color-mix-base: #1f1d2e !important; 97 | --background-color-box: #191724 !important; 98 | } 99 | } 100 | 101 | /* Variables and styles specific to about:protections */ 102 | @-moz-document url-prefix("about:protections") { 103 | :root { 104 | --zen-primary-color: #191724 !important; 105 | --social-color: #c4a7e7 !important; 106 | --coockie-color: #9ccfd8 !important; 107 | --fingerprinter-color: #f6c177 !important; 108 | --cryptominer-color: #b4befe !important; 109 | --tracker-color: #a6e3a1 !important; 110 | --in-content-primary-button-background-hover: #908caa !important; 111 | --in-content-primary-button-text-color-hover: #e0def4 !important; 112 | --in-content-primary-button-background: #6e6a86 !important; 113 | --in-content-primary-button-text-color: #e0def4 !important; 114 | } 115 | 116 | .card { 117 | background-color: #313244 !important; 118 | } 119 | } 120 | } 121 | 122 | * { 123 | /* font-family: 'JetBrainsMono Nerd Font' !important;*/ 124 | } 125 | -------------------------------------------------------------------------------- /themes/63556ee3-b89a-40d9-8f72-04f7b6c1aacc/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": "", 3 | "folders": [ 4 | "rose-pine" 5 | ], 6 | "uclChromeTarget": [ 7 | "rose-pine/userChrome.css" 8 | ], 9 | "uclContentTarget": [ 10 | "rose-pine/userContent.css" 11 | ] 12 | } -------------------------------------------------------------------------------- /themes/660c3485-4292-4021-a204-33dccbc89b89/README.md: -------------------------------------------------------------------------------- 1 | # zen-wireframe 2 | 3 | > A fork of [zen-wireframe](https://github.com/napuzu/zen-wireframe) by undefinedcode, with a focus on expanding theme variety, reviving the original design, and adding new features. 4 | 5 | --- 6 | 7 | ## 🎨 Themes 8 | 9 | - **Catppuccin Mocha** 10 | - **Rose‑Pine** 11 | - **ZERØ** 12 | 13 | > More themes can be requested or contributed by the community! 14 | 15 | --- 16 | 17 | ## 📸 Screenshots 18 | 19 | | ZERØ Preview | 20 | | :----------------------: | 21 | | ![image](https://github.com/user-attachments/assets/b2345787-730d-4daa-850e-3dee42d0e4a8) | -------------------------------------------------------------------------------- /themes/660c3485-4292-4021-a204-33dccbc89b89/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": "", 3 | "folders": [ 4 | "zero" 5 | ], 6 | "uclChromeTarget": [ 7 | "zero/userChrome.css" 8 | ], 9 | "uclContentTarget": [ 10 | "zero/userContent.css" 11 | ] 12 | } -------------------------------------------------------------------------------- /themes/660c3485-4292-4021-a204-33dccbc89b89/zero/userContent.css: -------------------------------------------------------------------------------- 1 | /* Original code by napuzu. Modifications by undefinedcode0 */ 2 | 3 | :root { 4 | --in-content-table-background: #0a0a0a !important; 5 | } 6 | 7 | @-moz-document url("about:privatebrowsing") { 8 | @media (prefers-color-scheme: dark) { 9 | :root { 10 | --na-color-text: #ffffff !important; 11 | --na-color-bg: #000000 !important; 12 | } 13 | } 14 | } 15 | 16 | @-moz-document url("about:newtab"), url("about:home") { 17 | @media (prefers-color-scheme: dark) { 18 | :root { 19 | --na-color-text: #ffffff !important; 20 | --na-color-bg: #000000 !important; 21 | } 22 | } 23 | } 24 | 25 | @-moz-document url("about:newtab"), url("about:home"), url("about:privatebrowsing") { 26 | #root, 27 | .container { 28 | display: none; 29 | } 30 | 31 | body:after { 32 | font-weight: 500; 33 | position: absolute; 34 | margin: auto; 35 | color: var(--na-color-text); 36 | font-size: 200%; 37 | background-color: var(--na-color-bg); 38 | /* eee9d899 d1cfc099 */ 39 | width: 100%; 40 | height: 100%; 41 | align-content: center; 42 | text-align: center; 43 | content: "░░▒▒▓▓"; 44 | /* '░░▒▒▓▓' */ 45 | visibility: visible; 46 | background-image: ""; 47 | /* url(loading.gif) */ 48 | background-size: 3em; 49 | background-repeat: no-repeat; 50 | background-position: center; 51 | } 52 | } 53 | 54 | /* Common variables affecting all pages */ 55 | @-moz-document url-prefix("about:") { 56 | :root { 57 | --in-content-page-color: #ffffff !important; 58 | --color-accent-primary: #000000 !important; 59 | --color-accent-primary-hover: rgb(206, 212, 254) !important; 60 | --color-accent-primary-active: rgb(189, 180, 254) !important; 61 | background-color: #000000 !important; 62 | --in-content-page-background: #000000 !important; 63 | } 64 | } 65 | 66 | /* Variables and styles specific to about:preferences */ 67 | @-moz-document url-prefix("about:preferences") { 68 | :root { 69 | --zen-colors-tertiary: #0a0a0a !important; 70 | --in-content-text-color: #ffffff !important; 71 | --link-color: #ffffff !important; 72 | --link-color-hover: rgb(206, 212, 254) !important; 73 | --zen-colors-primary: #ffffff !important; 74 | --in-content-box-background: #ffffff !important; 75 | --zen-primary-color: #b4befe !important; 76 | } 77 | 78 | groupbox, 79 | moz-card { 80 | background: #141415 !important; 81 | } 82 | 83 | button, 84 | groupbox menulist { 85 | background: #e1e1e1 !important; 86 | color: #18181b !important; 87 | border-radius: 0.5rem !important; 88 | } 89 | 90 | .main-content { 91 | background-color: #0a0a0a !important; 92 | } 93 | 94 | /* Variables and styles specific to about:addons */ 95 | @-moz-document url-prefix("about:addons") { 96 | :root { 97 | --zen-dark-color-mix-base: #1a1a1a !important; 98 | --background-color-box: #000000 !important; 99 | } 100 | } 101 | 102 | /* Variables and styles specific to about:protections */ 103 | @-moz-document url-prefix("about:protections") { 104 | :root { 105 | --zen-primary-color: #000000 !important; 106 | --social-color: #cba6f7 !important; 107 | --coockie-color: #89dceb !important; 108 | --fingerprinter-color: #f9e2af !important; 109 | --cryptominer-color: #b4befe !important; 110 | --tracker-color: #a6e3a1 !important; 111 | --in-content-primary-button-background-hover: rgb( 112 | 81, 113 | 83, 114 | 105 115 | ) !important; 116 | --in-content-primary-button-text-color-hover: #ffffff !important; 117 | --in-content-primary-button-background: #45475a !important; 118 | --in-content-primary-button-text-color: #ffffff !important; 119 | } 120 | 121 | .card { 122 | background-color: #ffffff !important; 123 | } 124 | } 125 | } 126 | 127 | * { 128 | /* font-family: 'JetBrainsMono Nerd Font' !important;*/ 129 | } 130 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi-config.css: -------------------------------------------------------------------------------- 1 | /* ==== Config ==== */ 2 | 3 | /* 4 | Feel free to change these values to whatever you want, as long 5 | as they use the correct format. 6 | */ 7 | 8 | * { 9 | /* Accent color */ 10 | --natsumi-accent-color: var(--zen-primary-color); 11 | --natsumi-pages-accent-color: #a0d490; 12 | 13 | /* Natsumi Glass Effect */ 14 | --glass-blur-radius: 20px; 15 | --glass-shadow-size: 10px; 16 | --glass-shadow-opacity: 75%; 17 | 18 | /* Natsumi URLbar appear animations */ 19 | --urlbar-appear-animation-duration: 0.25s; 20 | --urlbar-results-animation-duration: 0.5s; 21 | --urlbar-individual-result-animation-duration: 0.75s; 22 | --urlbar-individual-result-animation-delay: 0.05s; 23 | --urlbar-individual-result-animation-delay-offset: 0.05s; 24 | --urlbar-individual-result-expand-size: 1.05; 25 | 26 | /* Natsumi border reload animations */ 27 | --reload-border-animation-duration: 0.2s; 28 | --reload-border-animation-rotation-duration: 2s; 29 | --reload-border-animation-exit-duration: 1s; 30 | --reload-border-margin: 4px; 31 | 32 | /* Natsumi URLbar reload animations */ 33 | --reload-urlbar-animation-duration: 0.2s; 34 | --reload-urlbar-animation-fadein-duration: 2s; 35 | 36 | /* Container tabs gradient */ 37 | --container-tabs-normal-gradient-width: 25%; 38 | --container-tabs-expanded-gradient-width: 50%; 39 | 40 | /* Floating Firefox sidebar panels */ 41 | --ff-sidebar-x-offset: 20px; 42 | --ff-sidebar-y-offset: 20px; 43 | 44 | /* Custom fonts experiment (must be an installed font) */ 45 | --custom-font: 'Nunito'; 46 | 47 | /* pdf.js */ 48 | --pdfjs-topbar-max-width: 750px; /* use calc(100% - 10px) for max width */ 49 | 50 | /* FF home */ 51 | --home-background-url: url(''); 52 | } -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi-pages/modules/global.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Global tweaks ==== */ 31 | 32 | * { 33 | /*noinspection CssInvalidFunction*/ 34 | @media -moz-pref("natsumi.global.highlight-accent-color") { 35 | &::-moz-selection, &::selection { 36 | background: color-mix(in srgb, var(--natsumi-colors-primary) 40%, transparent) !important; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi-pages/modules/preferences.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Settings tweaks ==== */ 31 | 32 | @-moz-document url-prefix(about:preferences) { 33 | /* Patch layout list width on small screens */ 34 | #zenLayoutList { 35 | flex-wrap: wrap !important; 36 | } 37 | } -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi-pages/modules/preload.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Apply config ==== */ 31 | 32 | /* 33 | NOTE: DO NOT USE THIS AS YOUR CONFIG FILE. 34 | 35 | The below code applies your config (or default values if needed) and they should never be modified. 36 | Edit the natsumi-config.css file instead. 37 | */ 38 | 39 | * { 40 | /* Colors */ 41 | --natsumi-primary-color: var(--natsumi-pages-accent-color, #aac7ff); 42 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 43 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 44 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 45 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 46 | 47 | @media (prefers-color-scheme: dark) { 48 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #202020 80%); 49 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #202020 70%); 50 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, #202020 99%); 51 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 52 | 53 | @media -moz-pref('zen.theme.color-prefs.colorful') { 54 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 55 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 56 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 57 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 58 | } 59 | } 60 | 61 | /* Material: Mistcrylic */ 62 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-primary-color) 40%, rgba(255, 255, 255, 0.8)); 63 | --natsumi-mat-mc-shadow-color: rgba(0, 0, 0, 0.3); 64 | --natsumi-mat-mc-border-color: rgba(255, 255, 255, 0.1); 65 | --natsumi-mat-mc-shadow-size: 10px; 66 | --natsumi-mat-mc-blur-radius: 15px; 67 | 68 | @media (prefers-color-scheme: dark) { 69 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-colors-secondary) 50%, rgba(0, 0, 0, 0.8)); 70 | } 71 | 72 | /* Material: Haze */ 73 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 74 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 20%, rgba(255, 255, 255, 0.8)); 75 | --natsumi-mat-hz-blur-radius: 100px; 76 | --natsumi-mat-hz-shadow-color: rgba(0, 0, 0, 0.3); 77 | --natsumi-mat-hz-shadow-size: 10px; 78 | --natsumi-mat-hz-saturation: 3; 79 | --natsumi-mat-hz-contrast: 2; 80 | 81 | @media (prefers-color-scheme: dark) { 82 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 83 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 20%, rgba(0, 0, 0, 0.8)); 84 | } 85 | 86 | /* Material: Glass */ 87 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 88 | --natsumi-mat-ga-blur-radius: 10px; 89 | --natsumi-mat-ga-shadow-size: 10px; 90 | --natsumi-mat-ga-shadow-opacity: 75%; 91 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 92 | 93 | @media (prefers-color-scheme: dark) { 94 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), white); 95 | 96 | @media -moz-pref("natsumi.theme.force-glass-dark-shadows") { 97 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 98 | } 99 | } 100 | 101 | /* pdf.js */ 102 | --natsumi-pdfjs-topbar-max-width: var(--pdfjs-topbar-max-width, 750px); 103 | 104 | /* FF home */ 105 | --natsumi-home-bg: var(--home-background-url, none); 106 | } 107 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi-pages/natsumi-pages.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Load config and Natsumi Browser Pages ==== */ 31 | 32 | @import "../natsumi-config.css"; 33 | @import "modules/preload.css"; 34 | @import "modules/pdfjs.css"; 35 | @import "modules/ff-home.css"; 36 | @import "modules/preferences.css"; 37 | @import "modules/global.css"; 38 | 39 | /* Do NOT enter any additional CSS below. */ 40 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/context-menu.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Context menu (right click) patches ==== */ 31 | 32 | @media (-moz-platform: macos) { 33 | menuitem, menu { 34 | &::before { 35 | display: none !important; 36 | } 37 | 38 | &:is([type="checkbox"], [type="radio"]) { 39 | padding-left: 10px !important; 40 | 41 | .menu-iconic-left { 42 | display: none !important; 43 | } 44 | 45 | .menu-iconic-text { 46 | padding-left: 12px !important; 47 | } 48 | 49 | &::before { 50 | display: block !important; 51 | content: "" !important; 52 | padding: 0 !important; 53 | min-width: 16px !important; 54 | } 55 | 56 | &:is([checked="true"]) { 57 | &::before { 58 | content: url('chrome://browser/skin/zen-icons/checkmark.svg') !important; 59 | 60 | @media (prefers-color-scheme: dark) { 61 | filter: invert(); 62 | } 63 | } 64 | } 65 | } 66 | } 67 | 68 | menupopup menupopup menuitem[checked="true"]::before { 69 | filter: none !important; 70 | } 71 | } -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/experiments.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Experiments ==== */ 31 | 32 | /* 33 | WARNING: The following features are NOT meant for production use. 34 | By using experimental features, you acknowledge that they may break Natsumi or Zen Browser. 35 | */ 36 | 37 | /* Global font */ 38 | @media -moz-pref("natsumi.experiments.custom-font") { 39 | #zen-main-app-wrapper, .tab-label, menuitem, panelmultiview, .PanelUI-zen-profiles-item-name { 40 | font-family: var(--natsumi-custom-font), system-ui !important; 41 | } 42 | } 43 | 44 | /* WIP thing for tab switching */ 45 | 46 | /*.ctrlTab-preview:hover { 47 | border: none !important; 48 | } 49 | 50 | .ctrlTab-preview-inner { 51 | display: flex !important; 52 | flex-direction: row !important; 53 | flex-wrap: wrap !important; 54 | 55 | .ctrlTab-canvas { 56 | box-shadow: none !important; 57 | border-radius: 8px !important; 58 | overflow: hidden !important; 59 | } 60 | 61 | .ctrlTab-favicon-container { 62 | width: fit-content !important; 63 | height: fit-content !important; 64 | } 65 | 66 | .ctrlTab-favicon { 67 | background: transparent !important; 68 | box-shadow: none !important; 69 | margin: 0 !important; 70 | padding: 0 !important; 71 | width: 20px !important; 72 | height: 20px !important; 73 | } 74 | 75 | .ctrlTab-label { 76 | flex: 1 !important; 77 | flex-shrink: 0 !important; 78 | justify-content: left !important; 79 | 80 | &::before { 81 | text-shadow: none !important; 82 | font-size: 14px !important; 83 | margin: auto 0 !important; 84 | } 85 | } 86 | }*/ -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/horizontal-tabs.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Horizontal tabs patches ==== */ 31 | 32 | /*noinspection CssUnknownProperty*/ 33 | @media not -moz-pref("zen.tabs.vertical") { 34 | #zen-essentials-container, #vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox { 35 | min-height: 36px; 36 | } 37 | 38 | .tabbrowser-tab[selected] { 39 | flex: 2 1 150px !important; 40 | } 41 | #tabbrowser-arrowscrollbox .tabbrowser-tab[selected] { 42 | flex: 2 0 150px !important; 43 | transition: scale 0.1s ease-in-out, flex 0.2s ease !important; 44 | } 45 | #urlbar-container { 46 | margin-top: 5px; 47 | } 48 | #zen-essentials-container .tabbrowser-tab { 49 | --tab-min-height: 10px !important; 50 | } 51 | 52 | #vertical-pinned-tabs-container .tab-icon-image { 53 | margin-inline-end: calc(var(--toolbarbutton-inner-padding) / 4) !important; 54 | } 55 | 56 | #nav-bar { 57 | min-width: 300px !important; 58 | } 59 | 60 | #tabbrowser-tabs { 61 | display: flex !important; 62 | } 63 | 64 | #TabsToolbar-customization-target { 65 | toolbarbutton { 66 | width: auto !important; 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/natsumi-loading.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Natsumi loading animation ==== */ 31 | 32 | @media not -moz-pref("natsumi.theme.disable-loading-animations") { 33 | @keyframes browser-loading { 34 | from { 35 | transform: rotate(0); 36 | } 37 | 38 | to { 39 | transform: rotate(360deg); 40 | } 41 | } 42 | 43 | @keyframes browser-urlbar-loading { 44 | from { 45 | transform: translateX(calc(var(--urlbar-width) * -2)); 46 | } 47 | 48 | to { 49 | transform: translateX(0); 50 | } 51 | } 52 | 53 | @keyframes browser-loading-stop { 54 | 0% { 55 | opacity: 1; 56 | } 57 | 58 | 100% { 59 | opacity: 0; 60 | } 61 | } 62 | 63 | @keyframes browser-margin { 64 | 0% { 65 | margin: 0; 66 | } 67 | 68 | 70% { 69 | margin: calc(var(--browser-margin) + 2px); 70 | } 71 | 72 | 100% { 73 | margin: calc(var(--browser-margin)); 74 | } 75 | } 76 | 77 | @keyframes browser-margin-reverse { 78 | 0% { 79 | margin: var(--browser-margin); 80 | } 81 | 82 | 70% { 83 | margin: 1px; 84 | } 85 | 86 | 100% { 87 | margin: 0; 88 | } 89 | } 90 | 91 | @media -moz-pref("natsumi.theme.enable-border-animation") { 92 | :not(:has(hbox.zen-glance-background)):not(:has(hbox.zen-glance-overlay)) { 93 | .browserStack browser { 94 | animation-name: browser-margin-reverse; 95 | animation-duration: var(--animation-exit-duration); 96 | border-radius: var(--zen-border-radius); 97 | } 98 | 99 | .browserSidebarContainer.deck-selected { 100 | &::before { 101 | --size: max(140vw, 140vh); 102 | --offset: calc(var(--size) / -4); 103 | content: ""; 104 | position: absolute; 105 | background-color: color-mix(in srgb, var(--natsumi-primary-color) 40%, transparent); 106 | z-index: 0; 107 | width: var(--size); 108 | height: var(--size); 109 | left: 50%; 110 | top: 50%; 111 | translate: -50% -50%; 112 | animation: browser-loading-stop var(--animation-exit-duration) linear; 113 | animation-fill-mode: forwards; 114 | } 115 | } 116 | } 117 | } 118 | 119 | @media not -moz-pref("natsumi.theme.disable-urlbar-animation") { 120 | #urlbar:not([breakout-extend="true"]) { 121 | #urlbar-background { 122 | overflow: hidden; 123 | 124 | /*noinspection CssInvalidFunction*/ 125 | 126 | &::before { 127 | content: ""; 128 | transition: opacity var(--fadein-duration) ease !important; 129 | opacity: 0; 130 | width: 300%; 131 | height: 100%; 132 | position: absolute; 133 | background: light-dark( 134 | var(--natsumi-primary-color), 135 | color-mix(in srgb, var(--natsumi-primary-color) 60%, transparent) 136 | ) !important; 137 | } 138 | } 139 | } 140 | } 141 | 142 | :has(.tabbrowser-tab[selected][busy]):not(:has(hbox.zen-glance-background)):not(:has(hbox.zen-glance-overlay)) { 143 | @media -moz-pref("natsumi.theme.enable-border-animation") { 144 | .browserSidebarContainer.deck-selected { 145 | box-shadow: none !important; 146 | 147 | &::before { 148 | background: linear-gradient( 149 | 90deg, 150 | var(--natsumi-primary-color) 0%, 151 | var(--natsumi-colors-secondary) 100% 152 | ); 153 | animation: browser-loading var(--animation-rotation-duration) linear infinite; 154 | animation-fill-mode: forwards; 155 | } 156 | 157 | .browserStack browser { 158 | animation-name: browser-margin; 159 | animation-duration: var(--animation-duration); 160 | animation-fill-mode: forwards; 161 | border-radius: 8px; 162 | background-color: #F9F9FB; 163 | @media (prefers-color-scheme: dark) { 164 | background-color: #2B2A33; 165 | } 166 | } 167 | } 168 | } 169 | 170 | @media not -moz-pref("natsumi.theme.disable-urlbar-animation") { 171 | #urlbar:not([breakout-extend="true"]) { 172 | #urlbar-background { 173 | /*noinspection CssInvalidFunction*/ 174 | 175 | &::before { 176 | animation: browser-urlbar-loading var(--animation-duration) linear infinite; 177 | opacity: 1; 178 | background: linear-gradient( 179 | 90deg, 180 | light-dark( 181 | var(--natsumi-primary-color), 182 | color-mix(in srgb, var(--natsumi-primary-color) 60%, transparent) 183 | ) 0%, 184 | var(--natsumi-colors-secondary) 33%, 185 | light-dark( 186 | var(--natsumi-primary-color), 187 | color-mix(in srgb, var(--natsumi-primary-color) 60%, transparent) 188 | ) 66%, 189 | var(--natsumi-colors-secondary) 100% 190 | ) !important; 191 | transform: translateX(calc(var(--urlbar-width) * -2)); 192 | } 193 | } 194 | } 195 | } 196 | } 197 | 198 | /* Disable animations for non-website elements */ 199 | 200 | @media -moz-pref("natsumi.theme.enable-border-animation") { 201 | browser.dialogFrame { 202 | animation-name: none !important; 203 | 204 | &::before { 205 | animation: none !important; 206 | opacity: 0 !important; 207 | display: none !important; 208 | background: transparent !important; 209 | } 210 | } 211 | } 212 | } 213 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/natsumi-miniplayer.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== "Miniplayer" ==== */ 31 | 32 | @keyframes fadein-animation { 33 | 0% { 34 | opacity: 0; 35 | } 36 | 37 | 100% { 38 | opacity: 0.2; 39 | } 40 | } 41 | 42 | #zen-media-current-time, #zen-media-duration { 43 | font-variant-numeric: tabular-nums; 44 | } 45 | 46 | #zen-media-controls-toolbar { 47 | /*noinspection CssInvalidFunction*/ 48 | & > toolbaritem { 49 | background-color: var(--natsumi-mat-hz-background) !important; 50 | backdrop-filter: saturate(var(--natsumi-mat-hz-saturation)) contrast(var(--natsumi-mat-hz-contrast)) !important; 51 | 52 | @media -moz-pref("natsumi.miniplayer.blur-fix") { 53 | &::before { 54 | content: ""; 55 | position: absolute; 56 | width: 100%; 57 | height: 100%; 58 | top: 0; 59 | left: 0; 60 | backdrop-filter: blur(15px); 61 | pointer-events: none; 62 | } 63 | } 64 | 65 | /*noinspection CssInvalidFunction*/ 66 | &::after { 67 | content: ""; 68 | position: absolute; 69 | width: 150%; 70 | height: 150%; 71 | background-color: light-dark(var(--zen-colors-primary), var(--zen-primary-color)); 72 | mask-image: radial-gradient(closest-side, black, transparent); 73 | top: -75%; 74 | left: -75%; 75 | opacity: 0; 76 | transition: background-color 0.2s ease; 77 | pointer-events: none; 78 | } 79 | 80 | @media -moz-pref("natsumi.miniplayer.disable-accent") { 81 | &::after { 82 | display: none !important; 83 | } 84 | } 85 | 86 | toolbarbutton { 87 | z-index: 0 !important; 88 | } 89 | } 90 | 91 | &:hover { 92 | & > toolbaritem { 93 | overflow: hidden; 94 | 95 | &::after { 96 | animation: fadein-animation 0.5s ease; 97 | animation-fill-mode: forwards; 98 | } 99 | } 100 | } 101 | 102 | &:not(:hover) { 103 | #zen-media-service-hbox { 104 | padding-top: 0 !important; 105 | } 106 | 107 | & > toolbaritem { 108 | &::before, &::after { 109 | display: none; 110 | } 111 | } 112 | } 113 | 114 | #zen-media-service-hbox { 115 | padding-top: 5px !important; 116 | transition: padding 0.15s ease-in-out !important; 117 | } 118 | 119 | #zen-media-title { 120 | font-size: 16px !important; 121 | } 122 | 123 | #zen-media-artist { 124 | font-size: 10px !important; 125 | } 126 | 127 | #zen-media-info-vbox { 128 | &::before { 129 | display: none !important; 130 | } 131 | } 132 | 133 | #zen-media-progress-bar { 134 | &::-moz-range-thumb { 135 | scale: 1; 136 | transition: scale 0.2s ease; 137 | } 138 | 139 | &::-moz-range-track, &::-moz-range-progress { 140 | transition: height 0.2s ease; 141 | } 142 | 143 | &:hover { 144 | &::-moz-range-thumb { 145 | scale: 1.4; 146 | } 147 | 148 | &::-moz-range-track, &::-moz-range-progress { 149 | height: calc(var(--progress-height) + 2px) !important; 150 | } 151 | } 152 | } 153 | } -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/navbar.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Navbar tweaks ==== */ 31 | 32 | @keyframes glass-disappear { 33 | 0% { 34 | backdrop-filter: blur(var(--natsumi-mat-ga-blur-radius)); 35 | } 36 | 37 | 99% { 38 | backdrop-filter: blur(var(--natsumi-mat-ga-blur-radius)); 39 | } 40 | 41 | 100% { 42 | backdrop-filter: none; 43 | } 44 | } 45 | 46 | :root[zen-compact-mode="true"]:not([customizing]) { 47 | @media -moz-pref("zen.view.compact.hide-toolbar") { 48 | /*noinspection CssInvalidFunction*/ 49 | @media -moz-pref("natsumi.navbar.glass-effect") { 50 | #zen-appcontent-navbar-container { 51 | padding: 0 !important; 52 | width: calc(100vw - 2px) !important; 53 | background: var(--natsumi-mat-ga-background) !important; 54 | border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 55 | backdrop-filter: blur(var(--natsumi-mat-ga-blur-radius)) !important; 56 | 57 | &:not([zen-has-hover], [zen-user-show], :focus-within, :has(:is([panelopen="true"], [open="true"]):not(.zen-compact-mode-ignore)), [has-popup-menu]) { 58 | backdrop-filter: none !important; 59 | } 60 | 61 | /*noinspection CssInvalidFunction*/ 62 | @media not -moz-pref("natsumi.theme.disable-glass-shadow") { 63 | box-shadow: 0 0 var(--natsumi-mat-ga-shadow-size) var(--natsumi-mat-ga-shadow-color) !important; 64 | } 65 | } 66 | 67 | @media -moz-pref("natsumi.navbar.float") { 68 | #zen-appcontent-navbar-container { 69 | background: transparent !important; 70 | border: none !important; 71 | box-shadow: none !important; 72 | backdrop-filter: none !important; 73 | padding: 5px !important; 74 | padding-top: 6px !important; 75 | padding-bottom: 0 !important; 76 | width: calc(100% - 10px) !important; 77 | 78 | /*noinspection CssInvalidFunction*/ 79 | &::after { 80 | content: ""; 81 | background: var(--natsumi-mat-ga-background) !important; 82 | border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 83 | backdrop-filter: blur(var(--natsumi-mat-ga-blur-radius)) !important; 84 | position: absolute; 85 | width: calc(100% - 12px); 86 | height: calc(100% - 7px); 87 | top: 6px; 88 | left: 5px; 89 | z-index: -999; 90 | border-radius: 6px !important; 91 | } 92 | 93 | &:not([zen-has-hover], [zen-user-show], :focus-within, :has(:is([panelopen="true"], [open="true"]):not(.zen-compact-mode-ignore)), [has-popup-menu]) { 94 | top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) - 4px) !important; 95 | 96 | &::after { 97 | backdrop-filter: none !important; 98 | } 99 | } 100 | } 101 | } 102 | 103 | @media not -moz-pref("natsumi.theme.disable-blur") { 104 | #browser:has(#zen-appcontent-navbar-container:is([zen-has-hover], [zen-user-show], :focus-within)) { 105 | .deck-selected browser, .browserSidebarContainer[zen-split] browser { 106 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 107 | } 108 | } 109 | } 110 | } 111 | } 112 | } -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/patches.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Pre-style patches ==== */ 31 | 32 | :root { 33 | @media (-moz-platform: macos) { 34 | /* Patches collapsed view on macOS */ 35 | /*noinspection ALL*/ 36 | @media not -moz-pref("zen.view.sidebar-expanded") { 37 | #zen-sidebar-top-buttons-customization-target { 38 | padding-top: 0 !important; 39 | } 40 | 41 | .titlebar-buttonbox-container { 42 | padding: 0 calc(var(--zen-toolbox-padding) / 2) !important; 43 | padding-right: var(--zen-toolbox-padding) !important; 44 | } 45 | 46 | &:is([inFullscreen]) { 47 | #navigator-toolbox { 48 | margin-top: 0 !important; 49 | } 50 | } 51 | } 52 | } 53 | 54 | &[inDOMFullscreen="true"] { 55 | #zen-sidebar-top-buttons-customization-target { 56 | padding-top: 3px !important; 57 | } 58 | } 59 | 60 | /* Consistent navbar position */ 61 | &[zen-compact-mode="true"] { 62 | #nav-bar { 63 | margin-left: var(--zen-element-separation); 64 | } 65 | } 66 | 67 | @media -moz-pref("natsumi.theme.force-blur") { 68 | .deck-selected browser, .browserSidebarContainer[zen-split] browser { 69 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 70 | } 71 | } 72 | } 73 | 74 | /* Multiple toolbars patch */ 75 | 76 | @media (not -moz-pref("zen.view.use-single-toolbar")) { 77 | #identity-box { 78 | margin-inline-end: 5px !important; 79 | } 80 | } 81 | 82 | /* Patch and restore List all tabs button */ 83 | 84 | #alltabs-button { 85 | display: flex !important; 86 | } 87 | 88 | /* Remove toolbar button badge if not needed */ 89 | 90 | toolbarbutton[badged="true"]:not([badge]) { 91 | & .toolbarbutton-badge { 92 | display: none !important; 93 | } 94 | } 95 | 96 | #TabsToolbar-customization-target toolbarbutton[badged="true"]:not([badge]) { 97 | & .toolbarbutton-badge-stack { 98 | background-color: transparent !important; 99 | } 100 | } 101 | 102 | /* Icons patch */ 103 | 104 | #TabsToolbar-customization-target .toolbarbutton-icon { 105 | border-radius: 0 !important; 106 | } 107 | 108 | /* Toolbar patches */ 109 | 110 | @media -moz-pref("zen.view.sidebar-expanded") { 111 | #zen-sidebar-top-buttons-customization-target { 112 | toolbarbutton { 113 | margin: 1px !important; 114 | } 115 | } 116 | } 117 | 118 | #PersonalToolbar { 119 | padding-left: 0 !important; 120 | } 121 | 122 | #downloads-button image { 123 | @media (prefers-color-scheme: light) { 124 | --toolbarbutton-icon-fill-attention: color-mix(in srgb, var(--zen-primary-color) 75%, black) !important; 125 | } 126 | } 127 | 128 | /* Consistent toolbar button sizing for 1.7.5b */ 129 | 130 | @media -moz-pref("natsumi.theme.consistent-toolbar-button-size") { 131 | #nav-bar-customization-target { 132 | toolbaritem { 133 | margin: 0 !important; 134 | 135 | toolbarbutton { 136 | padding: 0 4px !important; 137 | } 138 | } 139 | 140 | #PanelUI-menu-button { 141 | padding-left: 4px !important; 142 | } 143 | } 144 | } 145 | 146 | .toolbarbutton-badge-stack { 147 | padding: 5px !important; 148 | 149 | #fxa-avatar-image { 150 | width: 18px !important; 151 | height: 18px !important; 152 | } 153 | } 154 | 155 | .tab-icon-image { 156 | border-radius: 0 !important; 157 | 158 | @media (-moz-platform: macos) { 159 | image-rendering: initial !important; 160 | } 161 | 162 | &:not([src]), &:-moz-broken { 163 | border-radius: 4px !important; 164 | } 165 | } 166 | 167 | /* Better transparency for Linux */ 168 | 169 | @media -moz-pref("zen.widget.linux.transparency") and (-moz-platform: linux) { 170 | #zen-main-app-wrapper { 171 | --zen-themed-toolbar-bg-transparent: color-mix( 172 | in srgb, 173 | light-dark(var(--zen-branding-bg), #171717) 60%, 174 | transparent 175 | ) !important; 176 | } 177 | } 178 | 179 | /* ==== WIP features (do not touch yet) ==== */ 180 | 181 | /* 182 | @keyframes scroll-left { 183 | 0% { 184 | transform: translateX(100%); 185 | } 186 | 187 | 50% { 188 | transform: translateX(0%); 189 | } 190 | 191 | 100% { 192 | transform: translateX(-100%); 193 | } 194 | } 195 | 196 | .tab-label-container { 197 | overflow: unset !important; 198 | overflow-wrap: break-word !important; 199 | } 200 | 201 | .tabbrowser-tab:hover { 202 | .tab-label-container[textoverflow="true"] .tab-text { 203 | display: flex !important; 204 | white-space: nowrap; 205 | animation-delay: -5s !important; 206 | animation: scroll-left 10s linear infinite; 207 | } 208 | } 209 | */ 210 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/postload.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Hide Natsumi not loaded banner (load was successful) ==== */ 31 | * { 32 | --natsumi-fail-display: none !important; 33 | } 34 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/preload.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Apply config ==== */ 31 | 32 | /* 33 | NOTE: DO NOT USE THIS AS YOUR CONFIG FILE. 34 | 35 | The below code applies your config (or default values if needed) and they should never be modified. 36 | Edit the natsumi-config.css file instead. 37 | */ 38 | 39 | * { 40 | /* Colors */ 41 | --natsumi-primary-color: var(--natsumi-accent-color, var(--zen-primary-color)); 42 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 43 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 44 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 45 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 46 | 47 | @media (prefers-color-scheme: dark) { 48 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, var(--zen-dark-color-mix-base) 80%); 49 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, var(--zen-dark-color-mix-base) 70%); 50 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, var(--zen-dark-color-mix-base) 99%); 51 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 52 | 53 | @media -moz-pref('zen.theme.color-prefs.colorful') { 54 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 55 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 56 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 57 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 58 | } 59 | } 60 | 61 | /* Material: Mistcrylic */ 62 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-primary-color) 40%, rgba(255, 255, 255, 0.8)); 63 | --natsumi-mat-mc-shadow-color: rgba(0, 0, 0, 0.3); 64 | --natsumi-mat-mc-border-color: rgba(255, 255, 255, 0.1); 65 | --natsumi-mat-mc-shadow-size: 10px; 66 | --natsumi-mat-mc-blur-radius: 15px; 67 | 68 | @media (prefers-color-scheme: dark) { 69 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-colors-secondary) 50%, rgba(0, 0, 0, 0.8)); 70 | } 71 | 72 | /* Material: Haze */ 73 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 74 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 20%, rgba(255, 255, 255, 0.8)); 75 | --natsumi-mat-hz-blur-radius: 100px; 76 | --natsumi-mat-hz-shadow-color: rgba(0, 0, 0, 0.3); 77 | --natsumi-mat-hz-shadow-size: 10px; 78 | --natsumi-mat-hz-saturation: 3; 79 | --natsumi-mat-hz-contrast: 2; 80 | 81 | @media (prefers-color-scheme: dark) { 82 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 83 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 20%, rgba(0, 0, 0, 0.8)); 84 | } 85 | 86 | /* Material: Glass */ 87 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 88 | --natsumi-mat-ga-blur-radius: 10px; 89 | --natsumi-mat-ga-shadow-size: 10px; 90 | --natsumi-mat-ga-shadow-opacity: 75%; 91 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 92 | 93 | @media (prefers-color-scheme: dark) { 94 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), white); 95 | 96 | @media -moz-pref("natsumi.theme.force-glass-dark-shadows") { 97 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 98 | } 99 | } 100 | 101 | /* Fonts */ 102 | --natsumi-custom-font: var(--custom-font, system-ui); 103 | } 104 | 105 | /* URL bar appear animation */ 106 | #urlbar { 107 | --animation-duration: var(--urlbar-appear-animation-duration, 0.25s); 108 | } 109 | 110 | /* Results appear animation */ 111 | #urlbar-results { 112 | --animation-duration: var(--urlbar-results-animation-duration, 0.5s); 113 | } 114 | 115 | /* Individual result appear animation */ 116 | .urlbarView-row { 117 | --animation-duration: var(--urlbar-individual-result-animation-duration, 1.0s); 118 | --animation-duration-subtle: 0.5s; /* WIP, this won't change anything for now */ 119 | --animation-delay: var(--urlbar-individual-result-animation-delay, 0.1s); 120 | --animation-delay-offset: var(--urlbar-individual-result-animation-delay-offset, 0.3s); 121 | --expand-width: var(--urlbar-individual-result-expand-size, 1.1); 122 | } 123 | 124 | /* Reload border animation */ 125 | browser, .browserSidebarContainer.deck-selected { 126 | --animation-duration: var(--reload-border-animation-duration, 0.2s); 127 | --animation-rotation-duration: var(--reload-border-animation-rotation-duration, 2.0s); 128 | --animation-exit-duration: var(--reload-border-animation-exit-duration, 1.0s); 129 | --browser-margin: var(--reload-border-margin, 4px); 130 | } 131 | 132 | /* Reload URLbar animation */ 133 | #urlbar-background { 134 | --fadein-duration: var(--reload-urlbar-animation-duration, 0.5s); 135 | --animation-duration: var(--reload-urlbar-animation-fadein-duration, 1s); 136 | } 137 | 138 | /* Container tabs gradient */ 139 | .tabbrowser-tab { 140 | --container-gradient-width: var(--container-tabs-normal-gradient-width, 25%); 141 | --container-gradient-width-expanded: var(--container-tabs-expanded-gradient-width, 50%); 142 | } 143 | 144 | /* Sidebar position */ 145 | #sidebar-box { 146 | --natsumi-sidebar-x-offset: var(--ff-sidebar-x-offset, 20px); 147 | --natsumi-sidebar-y-offset: var(--ff-sidebar-y-offset, 20px); 148 | } 149 | 150 | /* Blade offset for tabs (change this if other rices/mods break Blade) */ 151 | .tabbrowser-tab { 152 | --natsumi-tabs-blade-size-offset: 4px; 153 | --natsumi-tabs-blade-position-offset: 2px; 154 | } -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/ui-tweaks.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Easier to see tab labels ==== */ 31 | @media not (-moz-bool-pref: "natsumi.sidebar.disable-bigger-tab-label") { 32 | .tab-text { 33 | font-size: 12px; 34 | } 35 | 36 | /* Separately applying here as we need to use !important */ 37 | input#tab-label-input { 38 | font-size: 12px !important; 39 | } 40 | } 41 | 42 | 43 | 44 | /* ==== Better Split View ==== */ 45 | #zen-tabbox-wrapper:has(#tabbrowser-tabpanels[zen-split-view="true"]) { 46 | margin-bottom: calc(var(--zen-element-separation) - calc(var(--zen-split-row-gap) / 2 + 1px)) !important; 47 | } 48 | 49 | .browserSidebarContainer[zen-split="true"] { 50 | margin-bottom: calc(var(--zen-split-row-gap) / 2 + 1px) !important; 51 | } 52 | 53 | .zen-split-view-splitter { 54 | &::before { 55 | opacity: 0.4 !important; 56 | transition: opacity 0.2s ease; 57 | background: var(--natsumi-primary-color) !important; 58 | } 59 | 60 | &:hover::before { 61 | opacity: 1 !important; 62 | } 63 | 64 | &:is([orient="horizontal"]) { 65 | margin-top: calc(var(--zen-split-column-gap) / -1.4) !important; 66 | height: calc(var(--zen-element-separation) * 2 - 3px) !important; 67 | 68 | &::before { 69 | height: 3px; 70 | width: 30px; 71 | background: var(--zen-colors-border); 72 | border-radius: 2px; 73 | content: ''; 74 | position: absolute; 75 | top: 50%; 76 | left: 50%; 77 | transform: translate(-50%, -50%); 78 | opacity: 0; 79 | transition: opacity 0.1s ease-in-out; 80 | pointer-events: none; 81 | } 82 | } 83 | } 84 | 85 | 86 | 87 | /* ==== Dialog box animation ==== */ 88 | 89 | @keyframes overlay-appear { 90 | 0% { 91 | background-color: transparent; 92 | } 93 | 94 | 100% { 95 | background-color: rgba(28, 27, 34, 0.45); 96 | } 97 | } 98 | 99 | @keyframes dialog-appear { 100 | 0% { 101 | opacity: 0; 102 | margin-top: 50px; 103 | margin-bottom: -50px; 104 | } 105 | 106 | 100% { 107 | opacity: 1; 108 | margin-top: 0; 109 | margin-bottom: 0; 110 | } 111 | } 112 | 113 | .browserStack .dialogOverlay:not([hidden="true"]) { 114 | animation: overlay-appear 0.3s ease; 115 | 116 | .dialogBox { 117 | animation: dialog-appear 0.3s ease; 118 | } 119 | } 120 | 121 | /* can't get bg fadein to work here for some reason, help would be appreciated */ 122 | 123 | @keyframes menupopup-appear { 124 | 0% {opacity: 0;} 125 | 100% {opacity: 1;} 126 | } 127 | 128 | #window-modal-dialog[open] { 129 | animation: dialog-appear 0.3s ease; 130 | } 131 | 132 | /* ==== Menu items animation ==== */ 133 | 134 | /* I could just use button to remove a lot of these, but that'd be risky */ 135 | .dialog-button-box button, menulist, richlistitem, .urlbar-page-action, 136 | #tracking-protection-icon-container, .identity-box-button, 137 | .panel-subview-body toolbarbutton, .panel-subview-footer-button, 138 | .subviewbutton-back, .panel-info-button, .protections-popup-footer-button, 139 | .bookmark-item, .zen-workspace-button, #PanelUI-zen-workspaces-reorder-mode, 140 | #PanelUI-zen-workspaces-new, menupopup menuitem, menupopup menu, 141 | #PanelUI-zen-profiles-list .PanelUI-zen-profiles-item, 142 | #PanelUI-zen-profiles-actions toolbarbutton, 143 | #TabsToolbar-customization-target toolbarbutton, .findbar-container toolbarbutton, 144 | #sidebar-switcher-target { 145 | transition: background-color 0.2s ease; 146 | } 147 | 148 | menulist[open="true"] menupopup { 149 | animation: menupopup-appear 0.2s ease; 150 | } 151 | 152 | #downloadsHistory, .downloadButton, #editBookmarkPanelRemoveButton, #editBookmarkPanelDoneButton, 153 | .findbar-closebutton { 154 | transition: 0.2s ease !important; 155 | } 156 | 157 | #PanelUI-zen-workspaces-list { 158 | .zen-workspace-button { 159 | &:is([active]) { 160 | .zen-workspace-icon { 161 | border: 1px solid var(--toolbarbutton-icon-fill-attention) !important; 162 | background: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 50%, transparent) !important; 163 | &::before { 164 | display: none; 165 | } 166 | } 167 | 168 | /*noinspection CssInvalidFunction*/ 169 | .zen-workspace-name { 170 | color: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 70%, light-dark(black, white)) !important; 171 | } 172 | } 173 | } 174 | } 175 | 176 | /* Elongate the pinned tabs section */ 177 | #vertical-pinned-tabs-container { 178 | @media (-moz-bool-pref: "natsumi.sidebar.unlimited-pinned-tabs") { 179 | max-height: none !important; 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/modules/web-panel.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Zen Sidebar (web panels) tweaks ==== */ 31 | 32 | @media (-moz-bool-pref: "natsumi.sidebar.zen-sidebar-blur") { 33 | /*noinspection CssInvalidFunction*/ 34 | #zen-sidebar-web-panel[pinned] { 35 | /* Zen Sidebar transparency. May cause lag when URLbar is also opened. */ 36 | 37 | background: color-mix(in srgb, var(--natsumi-colors-tertiary) 80%, transparent) !important; 38 | backdrop-filter: blur(var(--natsumi-mat-ga-blur-radius)); 39 | transition: backdrop-filter 0.2s linear; 40 | 41 | &:is([hidden]) { 42 | backdrop-filter: none !important; 43 | } 44 | 45 | @media (-moz-bool-pref: "natsumi.sidebar.zen-sidebar-glass") { 46 | background: var(--natsumi-mat-ga-background) !important; 47 | border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 48 | box-shadow: 0 0 var(--natsumi-mat-ga-shadow-size) var(--natsumi-mat-ga-shadow-color) !important; 49 | 50 | /*noinspection CssInvalidFunction*/ 51 | #zen-sidebar-web-header, #zen-sidebar-panels-wrapper { 52 | border-color: light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 53 | } 54 | } 55 | 56 | @media (-moz-bool-pref: "natsumi.sidebar.zen-sidebar-haze") { 57 | background: var(--natsumi-mat-hz-background) !important; 58 | border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 59 | backdrop-filter: saturate(var(--natsumi-mat-hz-saturation)) contrast(var(--natsumi-mat-hz-contrast)) blur(var(--natsumi-mat-hz-blur-radius)); 60 | box-shadow: 0 0 var(--natsumi-mat-mc-shadow-size) var(--natsumi-mat-mc-shadow-color) !important; 61 | 62 | @media (-moz-bool-pref: "natsumi.sidebar.zen-sidebar-tinted-haze") { 63 | background: var(--natsumi-mat-hz-background-tinted) !important; 64 | } 65 | 66 | /*noinspection CssInvalidFunction*/ 67 | #zen-sidebar-web-header, #zen-sidebar-panels-wrapper { 68 | border-color: light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 69 | } 70 | } 71 | 72 | @media (-moz-bool-pref: "natsumi.sidebar.zen-sidebar-mistcrylic") { 73 | background: var(--natsumi-mat-mc-background) !important; 74 | border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 75 | box-shadow: 0 0 var(--natsumi-mat-mc-shadow-size) var(--natsumi-mat-mc-shadow-color) !important; 76 | 77 | /*noinspection CssInvalidFunction*/ 78 | #zen-sidebar-web-header, #zen-sidebar-panels-wrapper { 79 | border-color: light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 80 | } 81 | 82 | &::before { 83 | content: ""; 84 | position: absolute; 85 | background-image: url(chrome://browser/content/zen-images/grain-bg.png); 86 | opacity: 0.2; 87 | width: 100%; 88 | height: 100%; 89 | top: 0; 90 | left: 0; 91 | pointer-events: none; 92 | } 93 | } 94 | } 95 | 96 | @media not (-moz-bool-pref: "natsumi.theme.disable-blur") { 97 | #browser:has(#zen-sidebar-web-panel[pinned]) { 98 | .deck-selected browser, .browserSidebarContainer[zen-split] browser { 99 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 100 | } 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/natsumi/natsumi.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Natsumi Browser - A userchrome for Zen Browser that makes things flow. 4 | 5 | Copyright (c) 2024-present Green (@greeeen-dev) 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | 25 | Natsumi Browser uses code from others. The link to the original projects or 26 | their author(s) have been provided above the used code. 27 | 28 | */ 29 | 30 | /* ==== Load config and Natsumi Browser ==== */ 31 | 32 | @import "../natsumi-config.css"; 33 | @import "modules/preload.css"; 34 | @import "modules/patches.css"; 35 | @import "modules/natsumi-base.css"; 36 | @import "modules/natsumi-tabs.css"; 37 | @import "modules/horizontal-tabs.css"; 38 | @import "modules/natsumi-urlbar.css"; 39 | @import "modules/natsumi-loading.css"; 40 | @import "modules/natsumi-findbar.css"; 41 | @import "modules/natsumi-library.css"; 42 | @import "modules/natsumi-miniplayer.css"; 43 | @import "modules/natsumi-pip.css"; 44 | @import "modules/natsumi-gamemode.css"; 45 | @import "modules/sidebars.css"; 46 | @import "modules/navbar.css"; 47 | @import "modules/context-menu.css"; 48 | @import "modules/experiments.css"; 49 | @import "modules/ui-tweaks.css"; 50 | @import "modules/postload.css"; 51 | 52 | /* ==== Natsumi Browser not installed warning ==== */ 53 | 54 | * { 55 | --natsumi-fail-display: flex; 56 | } 57 | 58 | @keyframes natsumi-not-installed-fadeout { 59 | 0% {opacity: 1;} 60 | 90% {opacity: 1;} 61 | 99% {opacity: 0; height: 20%;} 62 | 100% {opacity: 0; height: 0; display: none;} 63 | } 64 | 65 | #tabbrowser-arrowscrollbox::after { 66 | display: var(--natsumi-fail-display); 67 | box-sizing: border-box; 68 | contain: size; 69 | padding: 10px; 70 | font-size: 12px; 71 | color: black; 72 | content: "WARNING: Natsumi Browser loader is installed but it could not load Natsumi Browser.\ 73 | Please add the natsumi-config.css file and natsumi folder to your profile's chrome folder, then restart Zen Browser!\ 74 | "; 75 | width: 100%; 76 | height: 20%; 77 | border-radius: var(--border-radius-medium); 78 | border: 1px solid; 79 | background-color: #ffdd00; 80 | text-align: center; 81 | animation: natsumi-not-installed-fadeout ease 10s; 82 | animation-fill-mode: forwards; 83 | } 84 | 85 | /* Do NOT enter any additional CSS below. */ 86 | -------------------------------------------------------------------------------- /themes/6a853219-2e0d-4c2c-943d-b88a3a0e1e49/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "natsumi-config.css" 4 | ], 5 | "folders": [ 6 | "natsumi", 7 | "natsumi-pages" 8 | ], 9 | "uclChromeTarget": [ 10 | "natsumi/natsumi.css" 11 | ], 12 | "uclContentTarget": [ 13 | "natsumi-pages/natsumi-pages.css" 14 | ] 15 | } -------------------------------------------------------------------------------- /themes/6b088ea9-b6f6-496c-bbd3-4015105227ff/README.md: -------------------------------------------------------------------------------- 1 | # zen-wireframe (catppuccin mocha) 2 | 3 | > A fork of [zen-wireframe](https://github.com/napuzu/zen-wireframe) by undefinedcode, with a focus on expanding theme variety, reviving the original design, and adding new features. 4 | 5 | --- 6 | 7 | ## 🎨 Themes 8 | 9 | - **Catppuccin Mocha** 10 | - **Rose‑Pine** 11 | 12 | > More themes can be requested or contributed by the community! 13 | 14 | --- 15 | 16 | ## 📸 Screenshots 17 | 18 | | Catppuccin Mocha Preview | 19 | | :----------------------: | 20 | | ![{22A51078-CFA8-46C9-AF56-E0A83C0F28DA}](https://github.com/user-attachments/assets/fd51496c-2fd1-42ac-9fa4-04e25d61f811) 21 | 22 | --- -------------------------------------------------------------------------------- /themes/6b088ea9-b6f6-496c-bbd3-4015105227ff/catppuccin-mocha/userContent.css: -------------------------------------------------------------------------------- 1 | /* Original code by napuzu. Modifications by undefinedcode0 */ 2 | 3 | :root { 4 | --in-content-table-background: #181825 !important; 5 | } 6 | 7 | @-moz-document url("about:privatebrowsing") { 8 | @media (prefers-color-scheme: dark) { 9 | :root { 10 | --na-color-text: #cdd6f4 !important; 11 | --na-color-bg: #1e1e2e !important; 12 | } 13 | } 14 | } 15 | 16 | @-moz-document url("about:newtab"), url("about:home") { 17 | @media (prefers-color-scheme: dark) { 18 | :root { 19 | --na-color-text: #cdd6f4 !important; 20 | --na-color-bg: #1e1e2e !important; 21 | } 22 | } 23 | } 24 | 25 | @-moz-document url("about:newtab"), url("about:home"), url("about:privatebrowsing") { 26 | #root, 27 | .container { 28 | display: none; 29 | } 30 | 31 | body:after { 32 | font-weight: 500; 33 | position: absolute; 34 | margin: auto; 35 | color: var(--na-color-text); 36 | font-size: 200%; 37 | background-color: var(--na-color-bg); 38 | /* eee9d899 d1cfc099 */ 39 | width: 100%; 40 | height: 100%; 41 | align-content: center; 42 | text-align: center; 43 | content: "░░▒▒▓▓"; 44 | /* '░░▒▒▓▓' */ 45 | visibility: visible; 46 | background-image: ""; 47 | /* url(loading.gif) */ 48 | background-size: 3em; 49 | background-repeat: no-repeat; 50 | background-position: center; 51 | } 52 | } 53 | 54 | /* Common variables affecting all pages */ 55 | @-moz-document url-prefix("about:") { 56 | :root { 57 | --in-content-page-color: #cdd6f4 !important; 58 | --color-accent-primary: #b4befe !important; 59 | --color-accent-primary-hover: rgb(206, 212, 254) !important; 60 | --color-accent-primary-active: rgb(189, 180, 254) !important; 61 | background-color: #1e1e2e !important; 62 | --in-content-page-background: #1e1e2e !important; 63 | } 64 | } 65 | 66 | /* Variables and styles specific to about:preferences */ 67 | @-moz-document url-prefix("about:preferences") { 68 | :root { 69 | --zen-colors-tertiary: #181825 !important; 70 | --in-content-text-color: #cdd6f4 !important; 71 | --link-color: #b4befe !important; 72 | --link-color-hover: rgb(206, 212, 254) !important; 73 | --zen-colors-primary: #313244 !important; 74 | --in-content-box-background: #313244 !important; 75 | --zen-primary-color: #b4befe !important; 76 | } 77 | 78 | groupbox, 79 | moz-card { 80 | background: #1e1e2e !important; 81 | } 82 | 83 | button, 84 | groupbox menulist { 85 | background: #313244 !important; 86 | color: #cdd6f4 !important; 87 | } 88 | 89 | .main-content { 90 | background-color: #11111b !important; 91 | } 92 | 93 | .identity-color-blue { 94 | --identity-tab-color: #8aadf4 !important; 95 | --identity-icon-color: #8aadf4 !important; 96 | } 97 | 98 | .identity-color-turquoise { 99 | --identity-tab-color: #8bd5ca !important; 100 | --identity-icon-color: #8bd5ca !important; 101 | } 102 | 103 | .identity-color-green { 104 | --identity-tab-color: #a6da95 !important; 105 | --identity-icon-color: #a6da95 !important; 106 | } 107 | 108 | .identity-color-yellow { 109 | --identity-tab-color: #eed49f !important; 110 | --identity-icon-color: #eed49f !important; 111 | } 112 | 113 | .identity-color-orange { 114 | --identity-tab-color: #f5a97f !important; 115 | --identity-icon-color: #f5a97f !important; 116 | } 117 | 118 | .identity-color-red { 119 | --identity-tab-color: #ed8796 !important; 120 | --identity-icon-color: #ed8796 !important; 121 | } 122 | 123 | .identity-color-pink { 124 | --identity-tab-color: #f5bde6 !important; 125 | --identity-icon-color: #f5bde6 !important; 126 | } 127 | 128 | .identity-color-purple { 129 | --identity-tab-color: #c6a0f6 !important; 130 | --identity-icon-color: #c6a0f6 !important; 131 | } 132 | } 133 | 134 | /* Variables and styles specific to about:addons */ 135 | @-moz-document url-prefix("about:addons") { 136 | :root { 137 | --zen-dark-color-mix-base: #181825 !important; 138 | --background-color-box: #1e1e2e !important; 139 | } 140 | } 141 | 142 | /* Variables and styles specific to about:protections */ 143 | @-moz-document url-prefix("about:protections") { 144 | :root { 145 | --zen-primary-color: #1e1e2e !important; 146 | --social-color: #cba6f7 !important; 147 | --coockie-color: #89dceb !important; 148 | --fingerprinter-color: #f9e2af !important; 149 | --cryptominer-color: #b4befe !important; 150 | --tracker-color: #a6e3a1 !important; 151 | --in-content-primary-button-background-hover: rgb( 152 | 81, 153 | 83, 154 | 105 155 | ) !important; 156 | --in-content-primary-button-text-color-hover: #cdd6f4 !important; 157 | --in-content-primary-button-background: #45475a !important; 158 | --in-content-primary-button-text-color: #cdd6f4 !important; 159 | } 160 | 161 | .card { 162 | background-color: #313244 !important; 163 | } 164 | } 165 | 166 | * { 167 | /* font-family: 'JetBrainsMono Nerd Font' !important;*/ 168 | } 169 | -------------------------------------------------------------------------------- /themes/6b088ea9-b6f6-496c-bbd3-4015105227ff/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": "", 3 | "folders": [ 4 | "catppuccin-mocha" 5 | ], 6 | "uclChromeTarget": [ 7 | "catppuccin-mocha/userChrome.css" 8 | ], 9 | "uclContentTarget": [ 10 | "catppuccin-mocha/userContent.css" 11 | ] 12 | } -------------------------------------------------------------------------------- /themes/95ee1823-8e1a-4f6d-8aff-5322e1843e23/[Config] Show Bookmarks on Hover/bookmarks-on-hover.css: -------------------------------------------------------------------------------- 1 | :root:not([zen-single-toolbar="true"]) { 2 | #PersonalToolbar:not([collapsed="true"]) { 3 | min-height: 2px !important; 4 | height: 2px !important; 5 | opacity: 0; 6 | transition: 0.2s ease !important; 7 | } 8 | #TabsToolbar { 9 | margin-block-start: 2px !important; 10 | } 11 | 12 | #zen-appcontent-navbar-container[zen-has-hover="true"] { 13 | #PersonalToolbar { 14 | opacity: 1; 15 | height: 30px !important; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /themes/95ee1823-8e1a-4f6d-8aff-5322e1843e23/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": "", 3 | "folders": [ 4 | "[Config] Show Bookmarks on Hover" 5 | ], 6 | "uclChromeTarget": [ 7 | "[Config] Show Bookmarks on Hover/bookmarks-on-hover.css" 8 | ], 9 | "uclContentTarget": "" 10 | } -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/README.md: -------------------------------------------------------------------------------- 1 | # Toucan Tweaks 2 | 3 | This repository contains a very small CSS theme for Zen Browser. It is expected to be used on top of other themes, such as [Natsumi Browser by Greeen-Dev](https://github.com/greeeen-dev/natsumi-browser) and [Pineapple Fried by TheBigWazz](https://github.com/TheBigWazz/Pineapple-Fried). As such, all ToucanTweaks does by itself is change some icons. The menu button is changed to the Zen logo, and the unified extensions button is changed to a version with a subtle Z shape in it. In addition, the logos of [uBlock Origin](https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search), [Dark Reader](https://addons.mozilla.org/en-US/firefox/addon/darkreader/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search), [Zotero Connector](https://www.zotero.org/download/connectors), [Cast Kodi](https://addons.mozilla.org/en-US/firefox/addon/castkodi/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search), [KeepassXC-Browser](https://addons.mozilla.org/en-US/firefox/addon/keepassxc-browser/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search), [Bitwarden](https://addons.mozilla.org/en-US/firefox/addon/bitwarden-password-manager/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search), and [ProtonPass](https://addons.mozilla.org/en-US/firefox/addon/proton-pass/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search) are changed to appear like they are a native part of the browser. Further extensions will be added on request. 4 | 5 | ## Showcase 6 | 7 | From left to right: uBlock Origin, Dark Reader, Workspace Swapper, Zotero Connector, Cast Kodi. 8 | ![image](https://github.com/user-attachments/assets/2e399674-7905-4f37-a983-2d994572921a) 9 | 10 | Menu button and unified extension button: 11 | 12 | ![image](https://github.com/user-attachments/assets/ac6962b7-89f0-4bdd-8053-8c5d564d4d4d) 13 | 14 | Natsumi + Pineapple Fried + ToucanTweaks: 15 | ![Screenshot_20250110_223529](https://github.com/user-attachments/assets/53f24525-e1f8-451d-9f6a-67f2ce2fb2d4) -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/ToucanTweaks.css: -------------------------------------------------------------------------------- 1 | /* === ToucanTweaks (Start) === */ 2 | 3 | @import "modules/Icons.css"; 4 | 5 | /* === ToucanTweaks (End) === */ 6 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons.css: -------------------------------------------------------------------------------- 1 | /* Menu Button */ 2 | #PanelUI-menu-button image{ 3 | list-style-image: url("Icons/Zen-Logo.svg") !important; 4 | } 5 | /* Unified Extensions Button */ 6 | #unified-extensions-button image{ 7 | list-style-image: url("Icons/Extension-Icon.png") !important; 8 | } 9 | /* uBlock Origin */ 10 | #ublock0_raymondhill_net-BAP image{ 11 | list-style-image: url("Icons/uBlock-Origin.svg") !important; 12 | } 13 | /* Dark Reader */ 14 | #addon_darkreader_org-BAP image{ 15 | list-style-image: url("Icons/Dark-Reader.svg") !important; 16 | } 17 | /* Zotero Connector */ 18 | #zotero_chnm_gmu_edu-BAP image{ 19 | list-style-image: url("Icons/Zotero-Connector.svg") !important; 20 | } 21 | /* Cast Kodi */ 22 | #castkodi_regseb_github_io-BAP image{ 23 | list-style-image: url("Icons/Cast-Kodi.svg") !important; 24 | } 25 | /* KeepassXC-Browser */ 26 | #keepassxc-browser_keepassxc_org-BAP image{ 27 | list-style-image: url("Icons/KeepassXC-Browser.svg") !important; 28 | } 29 | /* ProtonPass */ 30 | #78272b6fa58f4a1abaac99321d503a20_proton_me-BAP image{ 31 | list-style-image: url("Icons/ProtonPass.svg") !important; 32 | } 33 | /* Bitwarden */ 34 | #_446900e4-71c2-419f-a6a7-df9c091e268b_-BAP image{ 35 | list-style-image: url("Icons/Bitwarden.svg") !important; 36 | } 37 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/Bitwarden.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/Cast-Kodi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | tv 7 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/Dark-Reader.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/Extension-Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Silkbrush/theme-store/9f4f8695b4defcf98da628640e3fb653ae9c651f/themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/Extension-Icon.png -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/KeepassXC-Browser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/ProtonPass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/Zen-Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/Zotero-Connector.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/ToucanTweaks/modules/Icons/uBlock-Origin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /themes/b814d97b-2bef-4448-847f-bec13ae326dd/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": "", 3 | "folders": [ 4 | "ToucanTweaks" 5 | ], 6 | "uclChromeTarget": [ 7 | "ToucanTweaks/ToucanTweaks.css" 8 | ], 9 | "uclContentTarget": "" 10 | } --------------------------------------------------------------------------------