├── SuperPins ├── image.png ├── theme.json ├── README.md ├── preferences.json └── SuperPins.css ├── SuperGradient ├── image.png ├── Film-Grain Textures │ ├── dark-intense.png │ ├── dark-normal.png │ ├── dark-subtle.png │ ├── light-normal.png │ ├── light-subtle.png │ └── light-intense.png ├── theme.json ├── README.md ├── preferences.json └── SuperGradient.css ├── SuperUrlBar ├── image.png ├── README.md ├── theme.json ├── preferences.json └── SuperUrlBar.css ├── GalaxyDreamGradient ├── image.png ├── README.md ├── preferences.json └── GalaxyDream.css ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── LICENSE └── README.md /SuperPins/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperPins/image.png -------------------------------------------------------------------------------- /SuperGradient/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperGradient/image.png -------------------------------------------------------------------------------- /SuperUrlBar/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperUrlBar/image.png -------------------------------------------------------------------------------- /GalaxyDreamGradient/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/GalaxyDreamGradient/image.png -------------------------------------------------------------------------------- /SuperGradient/Film-Grain Textures/dark-intense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperGradient/Film-Grain Textures/dark-intense.png -------------------------------------------------------------------------------- /SuperGradient/Film-Grain Textures/dark-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperGradient/Film-Grain Textures/dark-normal.png -------------------------------------------------------------------------------- /SuperGradient/Film-Grain Textures/dark-subtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperGradient/Film-Grain Textures/dark-subtle.png -------------------------------------------------------------------------------- /SuperGradient/Film-Grain Textures/light-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperGradient/Film-Grain Textures/light-normal.png -------------------------------------------------------------------------------- /SuperGradient/Film-Grain Textures/light-subtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperGradient/Film-Grain Textures/light-subtle.png -------------------------------------------------------------------------------- /SuperGradient/Film-Grain Textures/light-intense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JLBlk/Zen-Themes/HEAD/SuperGradient/Film-Grain Textures/light-intense.png -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for one of the Mods/Themes 4 | title: "[Feature Request]" 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **The related Mod/Theme:** 11 | 12 | **Your Enhancement Suggestion/Feature Request** 13 | -------------------------------------------------------------------------------- /GalaxyDreamGradient/README.md: -------------------------------------------------------------------------------- 1 | # GalaxyDream Gradient Legacy 2 | 3 | ![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/GalaxyDreamGradient/image.png) 4 | 5 | This **Zen Mod** adds the legacy gradient themes "Zen Galaxy" and "Zen Dream" that have once been available in earlier versions of Zen. 6 | It's a simple gradient that uses your Zen accent color (*Settings -> Look and Feel -> Theme Color*) as part of the gradient. 7 | Additionally it automatically adapts to light/dark mode, as well as giving you the option to adjust the lightness -------------------------------------------------------------------------------- /GalaxyDreamGradient/preferences.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "property": "theme.galaxydream.lightness", 4 | "label": "Gradient Lightness", 5 | "type": "dropdown", 6 | "placeholder": "Legacy Default", 7 | "options": [ 8 | { 9 | "label": "Darker", 10 | "value": "darker" 11 | }, 12 | { 13 | "label": "Normal", 14 | "value": "normal" 15 | }, 16 | { 17 | "label": "Brighter", 18 | "value": "brighter" 19 | } 20 | ] 21 | } 22 | ] -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[Bug]" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Affected Theme** 11 | - Name 12 | - Version (e.g. x.x.x) 13 | 14 | **Affected Theme Settings** 15 | - x 16 | 17 | **Zen Version**: e.g "1.0.1-a.2" 18 | 19 | **System OS**: e.g "Windows 11" 20 | 21 | **Describe the bug** 22 | A clear and concise description of what the bug is. 23 | 24 | **To Reproduce** 25 | Steps to reproduce the behavior: 26 | 1. Go to '...' 27 | 2. Click on '....' 28 | 3. Scroll down to '....' 29 | 4. See error 30 | 31 | **Expected behavior** 32 | A clear and concise description of what you expected to happen. 33 | 34 | **Screenshots/Videos** 35 | If applicable, add screenshots or videos to help explain your problem. 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /SuperGradient/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "af7ee14f-e9d4-4806-8438-c59b02b77715", 3 | "name": "SuperGradient", 4 | "description": "This Zen Theme gives you great looking gradients with many options to customize it to your liking.", 5 | "homepage": "https://github.com/JLBlk/Zen-Themes/tree/main/SuperGradient", 6 | "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/chrome.css", 7 | "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/readme.md", 8 | "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/image.png", 9 | "author": "JLBlk", 10 | "version": "1.2.1", 11 | "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/preferences.json", 12 | "tags": [], 13 | "createdAt": "2024-09-15", 14 | "updatedAt": "2024-10-06" 15 | } -------------------------------------------------------------------------------- /SuperUrlBar/README.md: -------------------------------------------------------------------------------- 1 | # Super Url Bar 2 | 3 | ![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperUrlBar/image.png) 4 | 5 | 6 | ## Settings: 7 | - Adjust border radius of the url bar (Circle like corners) 8 | - Center url text 9 | - Remove the border of the url bar 10 | - Move 1 button that's directly next to the url bar (you can do that by using 'Customize Toolbar') into the url bar (Credit: [YouCanTouCan](https://github.com/YouCanTouCan)) 11 | - Blur the background when the url bar is in focus (5 Levels of Intensity) 12 | - Always open Websites in a New Tab from Url Bar 13 | - Custom Colors for your url bar (option to color when in focus/not in focus or both) 14 | - Hide icons inside the url bar: 15 | - Zoom icon 16 | - Shield icon 17 | - Bookmark (Star) icon 18 | - Reader-Mode icon 19 | - PiP icon 20 | - Container Tab icon and/or text 21 | - Split-View icon 22 | - Left side icons 23 | - Show hidden icons when hovering the url bar -------------------------------------------------------------------------------- /SuperPins/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "ad97bb70-0066-4e42-9b5f-173a5e42c6fc", 3 | "name": "SuperPins", 4 | "description": "This Zen Mod enhances pinned tabs/Essentials, by making some UI/UX changes.", 5 | "homepage": "https://github.com/CosmoCreeper/Zen-Themes/tree/main/SuperPins", 6 | "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css", 7 | "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md", 8 | "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png", 9 | "author": "CosmoCreeper", 10 | "version": "1.5.1", 11 | "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json", 12 | "tags": [ 13 | "tabs" 14 | ], 15 | "createdAt": "2024-08-28", 16 | "updatedAt": "2024-10-06" 17 | } 18 | -------------------------------------------------------------------------------- /SuperUrlBar/theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "d93e67f8-e5e1-401e-9b82-f9d5bab231e6", 3 | "name": "Super Url Bar", 4 | "description": "Get simple rounded edges, centered text, a removed border for your url bar and a background blur.", 5 | "homepage": "https://github.com/JLBlk/Zen-Themes/tree/main/SuperUrlBar", 6 | "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/chrome.css", 7 | "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/readme.md", 8 | "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/image.png", 9 | "author": "JLBlk", 10 | "version": "1.4.2", 11 | "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/preferences.json", 12 | "tags": [ 13 | "urlbar" 14 | ], 15 | "createdAt": "2024-08-31", 16 | "updatedAt": "2024-10-06" 17 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 JLBlk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > [!Note] 2 | > This repository is no longer actively mantained. However development on the "SuperPins" Mod will continue thanks to [@CosmoCreeper](https://github.com/CosmoCreeper) in the following repository: https://github.com/CosmoCreeper/Zen-Themes. Be sure to give him a star if you like the mod! 3 | 4 | # Zen Themes 5 | 6 | A personal collection of my CSS Themes 🎨 for the [Zen Browser](https://zen-browser.app/). 7 | 8 | ## Currently there is 1 Mod available to be installed through [Zen's website](https://zen-browser.app/mods): 9 | - [**SuperPins**](https://zen-browser.app/mods/ad97bb70-0066-4e42-9b5f-173a5e42c6fc) 10 | 11 | ![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperPins/image.png) 12 | 13 | - **Super Url Bar** (Deprecated) 14 | 15 | ![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperUrlBar/image.png) 16 | 17 | - **SuperGradient** (Removed, due to native implementation of gradients in Zen) 18 | 19 | ![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/image.png) 20 | 21 | - **Galaxy/Dream Legacy Gradient** 22 | 23 | ![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/GalaxyDreamGradient/image.png) 24 | 25 | --- 26 | 27 | You can find the code of each theme inside this repository! 28 | -------------------------------------------------------------------------------- /SuperGradient/README.md: -------------------------------------------------------------------------------- 1 | # SuperGradient 2 | 3 | This **Zen Mod** gives you powerful and good looking gradients with many options to customize it to your liking. 4 | It automatically adapts to light or dark mode, adjusts the accent color to the gradient and works flawlessly with compact mode. 5 | 6 | ![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/image.png) 7 | 8 | ## Available Gradients (Need to be enabled in the Zen Mods Settings): 9 | - "Northern Horizen": A blue-green'ish gradient 10 | - "Scarlet Dusk": A red-yellow'ish gradient 11 | - "Amethyst Claret": A blue/purple-red'ish gradient (Depicted in the picture) 12 | - "Olive Sunset": A green-red'ish gradient 13 | - "Midnight Majesty": A yellow-purple'ish gradient 14 | - "Zen Galaxy/Dream Legacy Theme" 15 | - Custom Colors: Use your own colors to created your very own personal SuperGradient! 16 | 17 | ## Optional Features (toggle in Zen's Mods settings): 18 | - 5 different levels of **Intensity** (e.g. making the gradient more subtle or more obvious) 19 | - **Film Grain Effect** on the Gradient with 3 different levels of Film Grain Intensity 20 | - **Desaturate** the colors of the gradient 21 | - Use Zen's **accent colors** (e.g. on tabs, set in Zen's "Look and Feel" setting) instead of accent colors adjusted for the gradient 22 | - **Switch** the colors order in the gradient 23 | -------------------------------------------------------------------------------- /SuperPins/README.md: -------------------------------------------------------------------------------- 1 | # SuperPins 2 | 3 | This **Zen Mod** elevates your experience with pinned tabs and Essentials by making some UI/UX changes. 4 | 5 | ![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperPins/image.png) 6 | 7 | ## Features (toggle in Zens Mod settings): 8 | - Increase the width of Essentials/Pins (This can be controlled through a dropdown) 9 | - Controllable Margins between Essentials/Pins (3 Options Dropdown) 10 | - Move Essentials to the bottom ([@CosmoCreeper](https://github.com/CosmoCreeper)) 11 | - Grid Layout for pinned tabs (Similar to Essentials, icon only) 12 | - Auto-Grow for pinned tabs & Essentials to fit the full width of its row. ([@CosmoCreeper](https://github.com/CosmoCreeper)) 13 | - Subtle Background for pinned tabs 14 | - Border around pinned tabs and/or Essentials 15 | - Box like corners for Essentials (less rounded corners) 16 | - Make Essentials transparent 17 | - Hide the workspace indicator between Essentials and Pins 18 | - Load pinned tabs only when using them, instead of loading all of them on startup 19 | - Dim unloaded tabs ([@CosmoCreeper](https://github.com/CosmoCreeper)) 20 | - Customize height of Pinned tabs (Small, Normal, Large) ([@gabry-ts](https://github.com/gabry-ts)) 21 | - Adjust tab favicon size (Small, Normal, Large) ([@gabry-ts](https://github.com/gabry-ts)) 22 | - Change workspace icons size (Extra Small, Small, Medium, Large) ([@gabry-ts](https://github.com/gabry-ts)) 23 | - Control the current workspace indicator icon size (Small, Normal, Large) ([@gabry-ts](https://github.com/gabry-ts)) 24 | 25 | ## Credits 26 | - Huge Thanks to [@CosmoCreeper](https://github.com/CosmoCreeper) and [@gabry-ts](https://github.com/gabry-ts) for their incredible work! 27 | -------------------------------------------------------------------------------- /GalaxyDreamGradient/GalaxyDream.css: -------------------------------------------------------------------------------- 1 | :root:has(#theme-GalaxyDream-Gradient[theme-galaxydream-lightness="darker"]) { 2 | --galaxydream-lightness: hsl(0, 0%, 20%); 3 | } 4 | :root:has(#theme-GalaxyDream-Gradient[theme-galaxydream-lightness="normal"]) { 5 | --galaxydream-lightness: hsl(0, 0%, 40%); 6 | } 7 | :root:has(#theme-GalaxyDream-Gradient[theme-galaxydream-lightness="brighter"]) { 8 | --galaxydream-lightness: hsl(0, 0%, 65%); 9 | } 10 | 11 | :root:not(:has(#theme-GalaxyDream-Gradient[theme-galaxydream-lightness="darker"], 12 | #theme-GalaxyDream-Gradient[theme-galaxydream-lightness="normal"], 13 | #theme-GalaxyDream-Gradient[theme-galaxydream-lightness="brighter"])) { 14 | --galaxydream-lightness: hsl(0, 0%, 100%); 15 | } 16 | 17 | :root { 18 | --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, var(--galaxydream-lightness)) !important; 19 | } 20 | 21 | body { 22 | --zen-main-browser-background: radial-gradient(ellipse, var(--zen-browser-gradient-base, #1B1E27) 20%, light-dark(#ffffff, #1b1b1b) 100%) !important; 23 | } 24 | 25 | /* Makes the gradient work in compact mode */ 26 | @media (-moz-bool-pref:"zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.compact") { 27 | #nav-bar::before, #nav-bar { 28 | background: radial-gradient(ellipse at bottom, var(--zen-browser-gradient-base, #1B1E27) 0%, light-dark(#ffffff, #1b1b1b) 95%) !important; 29 | } 30 | #PersonalToolbar[data-l10n-id="bookmarks-toolbar"] { 31 | background: radial-gradient(ellipse at top, var(--zen-browser-gradient-base, #1B1E27) 0%, light-dark(#ffffff, #1b1b1b) 95%) !important; 32 | } 33 | } 34 | @media (-moz-bool-pref:"zen.view.compact.hide-tabbar") and (-moz-bool-pref: "zen.view.compact") { 35 | #navigator-toolbox { 36 | --zen-themed-toolbar-bg: radial-gradient(ellipse at right, var(--zen-browser-gradient-base, #1B1E27) 0%, light-dark(#ffffff, #1b1b1b) 95%) !important; 37 | } 38 | } 39 | 40 | /* Make gradient work when "Expand on hover" is enabled */ 41 | @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") { 42 | #navigator-toolbox[zen-has-hover], 43 | #navigator-toolbox:focus-within, 44 | #navigator-toolbox[movingtab], 45 | #navigator-toolbox[flash-popup], 46 | #navigator-toolbox[has-popup-menu], 47 | #navigator-toolbox:has(.tabbrowser-tab:active), 48 | #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { 49 | & #TabsToolbar { 50 | background: radial-gradient(ellipse at right, var(--zen-browser-gradient-base, #1B1E27) 0%, light-dark(#ffffff, #1b1b1b) 95%) !important; 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /SuperGradient/preferences.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "property": "theme.supergradient.preset", 4 | "label": "Gradient Preset", 5 | "type": "dropdown", 6 | "placeholder": "Select a Gradient", 7 | "defaultValue": "AmethystClaret", 8 | "options": [ 9 | { 10 | "label": "Northern Horizen", 11 | "value": "NorthernHorizen" 12 | }, 13 | { 14 | "label": "Scarlet Dusk", 15 | "value": "ScarletDusk" 16 | }, 17 | { 18 | "label": "Amethyst Claret", 19 | "value": "AmethystClaret" 20 | }, 21 | { 22 | "label": "Olive Sunset", 23 | "value": "OliveSunset" 24 | }, 25 | { 26 | "label": "Midnight Majesty", 27 | "value": "MidnightMajesty" 28 | }, 29 | { 30 | "label": "Zen Galaxy/Dream Legacy Theme", 31 | "value": "GalaxyDream" 32 | }, 33 | { 34 | "label": "Custom Gradient: Use your own colors!", 35 | "value": "CustomGradient" 36 | } 37 | ] 38 | }, 39 | { 40 | "property": "theme.supergradient.intensity", 41 | "label": "Gradient Intensity (Does not work with Custom Gradients!)", 42 | "type": "dropdown", 43 | "placeholder": "Select the Gradient Intensity", 44 | "defaultValue": "Normal", 45 | "options": [ 46 | { 47 | "label": "Really Subtle", 48 | "value": "ReallySubtle" 49 | }, 50 | { 51 | "label": "Rather Subtle", 52 | "value": "RatherSubtle" 53 | }, 54 | { 55 | "label": "Normal", 56 | "value": "Normal" 57 | }, 58 | { 59 | "label": "Rather Intense", 60 | "value": "RatherIntense" 61 | }, 62 | { 63 | "label": "Really Intense", 64 | "value": "ReallyIntense" 65 | } 66 | ] 67 | }, 68 | { 69 | "property": "theme.supergradient.film-grain-intensity", 70 | "label": "Film Grain Intensity", 71 | "type": "dropdown", 72 | "options": [ 73 | { 74 | "label": "Subtle", 75 | "value": "Subtle" 76 | }, 77 | { 78 | "label": "Normal", 79 | "value": "Normal" 80 | }, 81 | { 82 | "label": "Intense", 83 | "value": "Intense" 84 | } 85 | ] 86 | }, 87 | { 88 | "property": "uc.supergradient.custom-colors.1", 89 | "label": "Custom Color 1 (Top-Left)", 90 | "placeholder": "Enter Color Code", 91 | "type": "string" 92 | }, 93 | { 94 | "property": "uc.supergradient.custom-colors.2", 95 | "label": "Custom Color 2 (Middle)", 96 | "placeholder": "Enter Color Code", 97 | "type": "string" 98 | }, 99 | { 100 | "property": "uc.supergradient.custom-colors.3", 101 | "label": "Custom Color 3 (Top-Right'ish to Bottom-Middle)", 102 | "placeholder": "Enter Color Code", 103 | "type": "string" 104 | }, 105 | { 106 | "property": "uc.supergradient.custom-colors.4", 107 | "label": "Custom Color 4 (Bottom-Right)", 108 | "placeholder": "Enter Color Code", 109 | "type": "string" 110 | }, 111 | { 112 | "property": "uc.supergradient.desaturate", 113 | "label": "Desaturates the colors of the gradient. (Does not work with Custom Gradients!)", 114 | "type": "checkbox" 115 | }, 116 | { 117 | "property": "uc.supergradient.use-accent-color", 118 | "label": "Uses Zen's accent colors (e.g. on tabs etc., set in Zen's Look and Feel setting) instead of accent colors adjusted for the gradient.", 119 | "type": "checkbox" 120 | }, 121 | { 122 | "property": "uc.supergradient.switch-colors", 123 | "label": "Switches the colors orders in the gradient.", 124 | "type": "checkbox" 125 | } 126 | ] -------------------------------------------------------------------------------- /SuperUrlBar/preferences.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "property": "uc.urlbar.border-radius", 4 | "label": "Adjusts the border radius of the url bar and its items to a certain degree", 5 | "type": "dropdown", 6 | "disabledOn": [], 7 | "options": [ 8 | { 9 | "label": "Small", 10 | "value": "small" 11 | }, 12 | { 13 | "label": "Medium", 14 | "value": "medium" 15 | }, 16 | { 17 | "label": "Large", 18 | "value": "large" 19 | }, 20 | { 21 | "label": "Extra Large", 22 | "value": "xlarge" 23 | } 24 | ] 25 | }, 26 | { 27 | "property": "uc.urltext.center", 28 | "label": "Centers the text inside the url bar", 29 | "type": "dropdown", 30 | "defaultValue": "normal", 31 | "disabledOn": [], 32 | "options": [ 33 | { 34 | "label": "Centered unless focused", 35 | "value": "normal" 36 | }, 37 | { 38 | "label": "Always Centered", 39 | "value": "advanced" 40 | } 41 | ] 42 | }, 43 | { 44 | "property": "uc.urlbar.border", 45 | "label": "Adds a border to the url bar", 46 | "type": "checkbox", 47 | "disabledOn": [] 48 | }, 49 | { 50 | "property": "uc.urlbar.move-icon-into", 51 | "label": "Move 1 button that's directly next to the url bar (you can do that by using 'Customize Toolbar') into the url bar", 52 | "type": "checkbox", 53 | "disabledOn": [] 54 | }, 55 | { 56 | "property": "uc.urlbar.blur-intensity", 57 | "label": "Enable a Background Blur when the Url Bar is focused & select its Intensity", 58 | "type": "dropdown", 59 | "disabledOn": [], 60 | "options": [ 61 | { 62 | "label": "Subtle", 63 | "value": "Subtle" 64 | }, 65 | { 66 | "label": "Normal", 67 | "value": "Normal" 68 | }, 69 | { 70 | "label": "Rather Strong", 71 | "value": "RatherStrong" 72 | }, 73 | { 74 | "label": "Strong", 75 | "value": "Strong" 76 | }, 77 | { 78 | "label": "Really Strong", 79 | "value": "ReallyStrong" 80 | } 81 | ] 82 | }, 83 | { 84 | "property": "uc.urlbar.custom-bg-color.mode", 85 | "label": "Enables Custom Colors for the Url Bar", 86 | "placeholder": "Disabled", 87 | "type": "dropdown", 88 | "disabledOn": [], 89 | "options": [ 90 | { 91 | "label": "Coloring when url bar is in focus", 92 | "value": "Focus" 93 | }, 94 | { 95 | "label": "Coloring when url bar is NOT in focus", 96 | "value": "noFocus" 97 | }, 98 | { 99 | "label": "Always color url bar", 100 | "value": "AlwaysColor" 101 | } 102 | ] 103 | }, 104 | { 105 | "property": "uc.urlbar.custom-bg-color", 106 | "label": "Custom Color for the Url Bar (Dropdown above needs to be enabled)", 107 | "placeholder": "Enter Color Code", 108 | "type": "string" 109 | }, 110 | { 111 | "property": "browser.urlbar.openintab", 112 | "label": "Always open websites in a new tab when using url bar", 113 | "type": "checkbox" 114 | }, 115 | { 116 | "property": "uc.urlbar.hide.container-info", 117 | "label": "Hides the container info", 118 | "type": "dropdown", 119 | "placeholder": "Disabled", 120 | "disabledOn": [], 121 | "options": [ 122 | { 123 | "label": "Only hide the label", 124 | "value": "hideLabel" 125 | }, 126 | { 127 | "label": "Only hide the icon", 128 | "value": "hideIcon" 129 | }, 130 | { 131 | "label": "Hide both, icon and label", 132 | "value": "hideIconLabel" 133 | } 134 | ] 135 | }, 136 | { 137 | "property": "uc.urlbar.icon.zoom.removed", 138 | "label": "Hides the Zoom icon", 139 | "type": "checkbox", 140 | "disabledOn": [] 141 | }, 142 | { 143 | "property": "uc.urlbar.icon.shield.removed", 144 | "label": "Hides the Shield icon", 145 | "type": "checkbox", 146 | "disabledOn": [] 147 | }, 148 | { 149 | "property": "uc.urlbar.icon.bookmark.removed", 150 | "label": "Hides the Bookmark (Star) icon", 151 | "type": "checkbox", 152 | "disabledOn": [] 153 | }, 154 | { 155 | "property": "uc.urlbar.icon.reader-mode.removed", 156 | "label": "Hides the Reader-Mode icon", 157 | "type": "checkbox", 158 | "disabledOn": [] 159 | }, 160 | { 161 | "property": "uc.urlbar.icon.pip.removed", 162 | "label": "Hides the Picture-in-Picture icon", 163 | "type": "checkbox", 164 | "disabledOn": [] 165 | }, 166 | { 167 | "property": "uc.urlbar.icon.split-view.removed", 168 | "label": "Hides the Split View icon", 169 | "type": "checkbox", 170 | "disabledOn": [] 171 | }, 172 | { 173 | "property": "uc.urlbar.icon.left-side.removed", 174 | "label": "Hides all the icons/buttons on the left side", 175 | "type": "checkbox", 176 | "disabledOn": [] 177 | }, 178 | { 179 | "property": "uc.urlbar.icon.show-on-hover", 180 | "label": "Make all the hidden icons show when hovering the url bar", 181 | "type": "checkbox" 182 | } 183 | ] 184 | -------------------------------------------------------------------------------- /SuperUrlBar/SuperUrlBar.css: -------------------------------------------------------------------------------- 1 | /* Adjust border radius of url bar and its elements */ 2 | :root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="small"]) { 3 | --urlbar-border-radius: 4px; 4 | } 5 | :root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="medium"]) { 6 | --urlbar-border-radius: 8px; 7 | } 8 | :root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="large"]) { 9 | --urlbar-border-radius: 14px; 10 | } 11 | :root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="xlarge"]) { 12 | --urlbar-border-radius: 20px; 13 | } 14 | 15 | :root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="small"], 16 | #theme-Super-Url-Bar[uc-urlbar-border-radius="medium"], 17 | #theme-Super-Url-Bar[uc-urlbar-border-radius="large"], 18 | #theme-Super-Url-Bar[uc-urlbar-border-radius="xlarge"]) { 19 | #urlbar, #urlbar-background, #notification-popup-box, #urlbar .urlbar-page-action, #urlbar #tracking-protection-icon-container, 20 | #urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box, 21 | #urlbar:not([breakout-extend="true"]) #identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box, 22 | .identity-box-button { 23 | border-radius: var(--urlbar-border-radius) !important; 24 | } 25 | 26 | /* Border radius of boxes on the left */ 27 | #identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate="invalid"]) #identity-icon-box { 28 | border-top-left-radius: var(--urlbar-border-radius) !important; 29 | border-bottom-left-radius: var(--urlbar-border-radius) !important; 30 | border-top-right-radius: 0 !important; 31 | border-bottom-right-radius: 0 !important; 32 | } 33 | } 34 | 35 | /* Centers the url text when enabled in dropdown: 1.Option: Centers the text unless url bar is focused; 2.Option: Centers the text always*/ 36 | :root:has(#theme-Super-Url-Bar[uc-urltext-center="normal"]) { 37 | #urlbar:not([focused]) .urlbar-input { 38 | text-align: center !important; 39 | } 40 | } 41 | :root:has(#theme-Super-Url-Bar[uc-urltext-center="advanced"]) { 42 | #urlbar .urlbar-input { 43 | text-align: center !important; 44 | } 45 | } 46 | 47 | @media (-moz-bool-pref: "uc.urlbar.move-icon-into") { 48 | #page-action-buttons { 49 | margin-right: calc(var(--urlbar-min-height) - 1px - 4 * var(--urlbar-container-padding)) !important; 50 | } 51 | 52 | #urlbar-container+.chromeclass-toolbar-additional { 53 | margin-inline-start: calc(-21px - 2 * var(--urlbar-icon-padding) - var(--urlbar-margin-inline)) !important; 54 | position: relative; 55 | --toolbarbutton-inner-padding: var(--urlbar-icon-padding); 56 | --toolbarbutton-hover-background: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important; 57 | } 58 | } 59 | 60 | /* Blurs the background when url bar is focused when toggled */ 61 | :root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="Subtle"]) { 62 | --blur-intensity: 1px; 63 | } 64 | :root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="Normal"]) { 65 | --blur-intensity: 2px; 66 | } 67 | :root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="RatherStrong"]) { 68 | --blur-intensity: 3px; 69 | } 70 | :root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="Strong"]) { 71 | --blur-intensity: 4px; 72 | } 73 | :root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="ReallyStrong"]) { 74 | --blur-intensity: 6px; 75 | } 76 | 77 | :root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="Subtle"], 78 | #theme-Super-Url-Bar[uc-urlbar-blur-intensity="Normal"], 79 | #theme-Super-Url-Bar[uc-urlbar-blur-intensity="RatherStrong"], 80 | #theme-Super-Url-Bar[uc-urlbar-blur-intensity="Strong"], 81 | #theme-Super-Url-Bar[uc-urlbar-blur-intensity="ReallyStrong"]:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar'])) { 82 | #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]):after { 83 | content: ""; 84 | position: fixed; 85 | pointer-events: none; 86 | 87 | width: 200vw; 88 | height: 200vh; 89 | 90 | top: -100vh; 91 | left: -100vw; 92 | 93 | background-color: rgba(0, 0, 0, 0.3); 94 | backdrop-filter: blur(var(--blur-intensity)); 95 | 96 | z-index: -1; 97 | } 98 | } 99 | 100 | /* Custom Colors for Url Bar */ 101 | :root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="noFocus"]) { 102 | #urlbar:not([focused="true"]):not([breakout-extend="true"]) > #urlbar-background { 103 | background: var(--uc-urlbar-custom-bg-color) !important; 104 | } 105 | } 106 | :root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="Focus"]) { 107 | #urlbar:is([focused], [open]) > #urlbar-background { 108 | background: var(--uc-urlbar-custom-bg-color) !important; 109 | } 110 | } 111 | :root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="AlwaysColor"]) { 112 | #urlbar-background { 113 | background: var(--uc-urlbar-custom-bg-color) !important; 114 | } 115 | } 116 | 117 | :root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="AlwaysColor"], 118 | #theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="noFocus"]) { 119 | #identity-icon-box, #identity-permission-box { 120 | background-color: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important; 121 | } 122 | #tracking-protection-icon-container, .urlbar-page-action, #picture-in-picture-button, #reader-mode-button, #zen-split-views-box { 123 | &:hover:not([open="true"]) { 124 | background-color: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important; 125 | } 126 | } 127 | } 128 | 129 | /* Adds a border to the url bar when toggled */ 130 | @media (-moz-bool-pref: "uc.urlbar.border") { 131 | #urlbar-background { 132 | border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black), 133 | color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important; 134 | } 135 | } 136 | 137 | /* Hides the container info in url-bar */ 138 | :root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideLabel"]) { 139 | #userContext-label { 140 | display: none; 141 | } 142 | } 143 | :root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideIcon"]) { 144 | #userContext-indicator { 145 | display: none; 146 | } 147 | } 148 | :root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideIconLabel"]) { 149 | #userContext-icons { 150 | display: none; 151 | } 152 | } 153 | 154 | /* Makes all the hidden icons appear on hover */ 155 | @media not (-moz-bool-pref: "uc.urlbar.icon.show-on-hover") { 156 | :root { 157 | --position-var: absolute; 158 | --pointer-events: none; 159 | } 160 | } 161 | @media (-moz-bool-pref: "uc.urlbar.icon.show-on-hover") { 162 | 163 | :root { 164 | --position-var: relative; 165 | --pointer-events: all; 166 | } 167 | 168 | @media (-moz-bool-pref: "uc.urlbar.icon.zoom.removed") { 169 | #urlbar:hover #urlbar-zoom-button { 170 | display: block !important; 171 | } 172 | } 173 | @media (-moz-bool-pref: "uc.urlbar.icon.shield.removed") { 174 | #urlbar:hover #tracking-protection-icon-container, #tracking-protection-icon-container[open="true"] { 175 | display: block !important; 176 | } 177 | } 178 | @media (-moz-bool-pref: "uc.urlbar.icon.bookmark.removed") { 179 | #urlbar:hover #star-button-box, #star-button-box[open="true"] { 180 | display: block !important; 181 | } 182 | } 183 | @media (-moz-bool-pref: "uc.urlbar.icon.reader-mode.removed") { 184 | #urlbar:hover #reader-mode-button { 185 | display: block !important; 186 | } 187 | } 188 | @media (-moz-bool-pref: "uc.urlbar.icon.pip.removed") { 189 | #urlbar:hover #picture-in-picture-button { 190 | display: block !important; 191 | } 192 | } 193 | @media (-moz-bool-pref: "uc.urlbar.icon.split-view.removed") { 194 | #urlbar:hover #zen-split-views-box { 195 | display: block !important; 196 | } 197 | } 198 | @media (-moz-bool-pref: "uc.urlbar.icon.left-side.removed") { 199 | #urlbar:hover #identity-box { 200 | display: block !important; 201 | } 202 | } 203 | } 204 | 205 | /* Brings back the tracking protection icon */ 206 | #urlbar[open] #tracking-protection-icon-container { 207 | display: block !important; 208 | } 209 | 210 | /* Removes certain buttons from the url bar (when toggled) */ 211 | @media (-moz-bool-pref: "uc.urlbar.icon.zoom.removed") { 212 | #urlbar-zoom-button { 213 | display: none !important; 214 | } 215 | } 216 | @media (-moz-bool-pref: "uc.urlbar.icon.shield.removed") { 217 | #tracking-protection-icon-container { 218 | display: none !important; 219 | } 220 | } 221 | @media (-moz-bool-pref: "uc.urlbar.icon.bookmark.removed") { 222 | #star-button-box { 223 | display: none !important; 224 | } 225 | } 226 | @media (-moz-bool-pref: "uc.urlbar.icon.reader-mode.removed") { 227 | #reader-mode-button { 228 | display: none !important; 229 | } 230 | } 231 | @media (-moz-bool-pref: "uc.urlbar.icon.pip.removed") { 232 | #picture-in-picture-button { 233 | display: none !important; 234 | } 235 | } 236 | @media (-moz-bool-pref: "uc.urlbar.icon.split-view.removed") { 237 | #zen-split-views-box { 238 | display: none !important; 239 | } 240 | } 241 | @media (-moz-bool-pref: "uc.urlbar.icon.left-side.removed") { 242 | #identity-box { 243 | display: none !important; 244 | } 245 | } 246 | -------------------------------------------------------------------------------- /SuperPins/preferences.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "property": "uc.essentials.width", 4 | "label": "Select the general width of Essentials (The width before the Essentials start wrapping to the next row)", 5 | "type": "dropdown", 6 | "placeholder": "Zen Default", 7 | "defaultValue": "Normal", 8 | "disabledOn": [], 9 | "options": [ 10 | { 11 | "label": "Thin", 12 | "value": "Thin" 13 | }, 14 | { 15 | "label": "Normal", 16 | "value": "Normal" 17 | }, 18 | { 19 | "label": "Wide", 20 | "value": "Wide" 21 | } 22 | ] 23 | }, 24 | { 25 | "property": "uc.essentials.gap", 26 | "label": "Select the gap between Essentials", 27 | "type": "dropdown", 28 | "placeholder": "Zen Default", 29 | "defaultValue": "Normal", 30 | "disabledOn": [], 31 | "options": [ 32 | { 33 | "label": "Small", 34 | "value": "Small" 35 | }, 36 | { 37 | "label": "Normal", 38 | "value": "Normal" 39 | }, 40 | { 41 | "label": "Big", 42 | "value": "Big" 43 | } 44 | ] 45 | }, 46 | { 47 | "property": "uc.pins.essentials-layout", 48 | "label": "Adds selected width and gap styles from Essentials to pinned tabs as well", 49 | "type": "checkbox", 50 | "disabledOn": [] 51 | }, 52 | { 53 | "property": "uc.essentials.color-scheme", 54 | "label": "Background/Color types of Essentials", 55 | "type": "dropdown", 56 | "placeholder": "Zen Default", 57 | "disabledOn": [], 58 | "options": [ 59 | { 60 | "label": "Transparent Background", 61 | "value": "transparent" 62 | } 63 | ] 64 | }, 65 | { 66 | "property": "uc.essentials.box-like-corners", 67 | "label": "Makes the Essentials look more box like (Less rounded edges)", 68 | "type": "checkbox", 69 | "disabledOn": [] 70 | }, 71 | { 72 | "property": "uc.essentials.auto-grow", 73 | "label": "Makes the Essentials auto-grow to fit the full width of its row.", 74 | "type": "checkbox", 75 | "disabledOn": [] 76 | }, 77 | { 78 | "property": "uc.essentials.position", 79 | "label": "Select the position of Essentials", 80 | "type": "dropdown", 81 | "placeholder": "Top", 82 | "disabledOn": [], 83 | "options": [ 84 | { 85 | "label": "Bottom", 86 | "value": "bottom" 87 | } 88 | ] 89 | }, 90 | { 91 | "property": "uc.superpins.border", 92 | "label": "Add a border around Pins/Essentials", 93 | "type": "dropdown", 94 | "placeholder": "Disabled", 95 | "disabledOn": [], 96 | "options": [ 97 | { 98 | "label": "Pins only", 99 | "value": "pins" 100 | }, 101 | { 102 | "label": "Essentials only", 103 | "value": "essentials" 104 | }, 105 | { 106 | "label": "Pins + Essentials", 107 | "value": "both" 108 | } 109 | ] 110 | }, 111 | { 112 | "property": "uc.pins.legacy-layout", 113 | "label": "Makes pinned tabs look similar to Essentials (icon only in a grid)", 114 | "type": "checkbox", 115 | "disabledOn": [] 116 | }, 117 | { 118 | "property": "uc.pins.auto-grow", 119 | "label": "Makes pinned tabs auto-grow to fit the full width of its row.", 120 | "type": "checkbox", 121 | "disabledOn": [] 122 | }, 123 | { 124 | "property": "uc.pins.bg", 125 | "label": "Adds a background to the pinned tabs", 126 | "type": "checkbox", 127 | "disabledOn": [] 128 | }, 129 | { 130 | "property": "zen.workspaces.show-workspace-indicator", 131 | "label": "Shows the workspace-indicator between Essentials and Pins", 132 | "type": "checkbox", 133 | "disabledOn": [] 134 | }, 135 | { 136 | "property": "browser.sessionstore.restore_pinned_tabs_on_demand", 137 | "label": "Loads pinned tabs only when using them, instead of loading all of them on startup", 138 | "type": "checkbox", 139 | "disabledOn": [] 140 | }, 141 | { 142 | "property": "uc.pins.stay-at-top", 143 | "label": "Keep pinned tabs at the top when scrolling", 144 | "type": "checkbox", 145 | "disabledOn": [] 146 | }, 147 | { 148 | "property": "uc.pins.active-bg", 149 | "label": "Adds a custom background to active pinned tabs", 150 | "type": "checkbox", 151 | "disabledOn": [] 152 | }, 153 | { 154 | "property": "mod.superpins.pins.active-bg", 155 | "label": "Custom background for active pinned tabs.", 156 | "type": "string", 157 | "disabledOn": [] 158 | }, 159 | { 160 | "property": "uc.tabs.strikethrough-on-pending", 161 | "label": "Adds a strikethrough effect on unloaded tabs", 162 | "type": "checkbox", 163 | "disabledOn": [] 164 | }, 165 | { 166 | "property": "uc.tabs.show-separator", 167 | "label": "When to display separator", 168 | "type": "dropdown", 169 | "disabledOn": [], 170 | "placeholder": "Default", 171 | "defaultValue": "pinned-shown", 172 | "options": [ 173 | { 174 | "label": "Never", 175 | "value": "never" 176 | }, 177 | { 178 | "label": "When there are pinned tabs only", 179 | "value": "pinned-shown" 180 | }, 181 | { 182 | "label": "When there are Essentials and/or pinned tabs", 183 | "value": "essentials-shown" 184 | } 185 | ] 186 | }, 187 | { 188 | "property": "uc.tabs.dim-type", 189 | "label": "Dim the selected parts of a tab when it is unloaded", 190 | "type": "dropdown", 191 | "disabledOn": [], 192 | "options": [ 193 | { 194 | "label": "Icons + Text", 195 | "value": "both" 196 | }, 197 | { 198 | "label": "Icons only", 199 | "value": "icons" 200 | }, 201 | { 202 | "label": "Text only", 203 | "value": "text" 204 | } 205 | ] 206 | }, 207 | { 208 | "property": "uc.pinned.height", 209 | "label": "Height of Pinned tabs", 210 | "type": "dropdown", 211 | "placeholder": "Default", 212 | "options": [ 213 | { 214 | "label": "Small", 215 | "value": "small" 216 | }, 217 | { 218 | "label": "Normal", 219 | "value": "normal" 220 | }, 221 | { 222 | "label": "Large", 223 | "value": "large" 224 | } 225 | ] 226 | }, 227 | { 228 | "property": "uc.favicon.size", 229 | "label": "Size of tabs favicons", 230 | "type": "dropdown", 231 | "placeholder": "Default", 232 | "options": [ 233 | { 234 | "label": "Small", 235 | "value": "small" 236 | }, 237 | { 238 | "label": "Normal", 239 | "value": "normal" 240 | }, 241 | { 242 | "label": "Large", 243 | "value": "large" 244 | } 245 | ] 246 | }, 247 | { 248 | "property": "uc.workspace.icon.size", 249 | "label": "Size of workspace icons", 250 | "type": "dropdown", 251 | "placeholder": "Default", 252 | "options": [ 253 | { 254 | "label": "Extra Small", 255 | "value": "x-small" 256 | }, 257 | { 258 | "label": "Small", 259 | "value": "small" 260 | }, 261 | { 262 | "label": "Medium", 263 | "value": "medium" 264 | }, 265 | { 266 | "label": "Large", 267 | "value": "large" 268 | } 269 | ] 270 | }, 271 | { 272 | "property": "uc.workspace.current.icon.size", 273 | "label": "Size of current workspace indicator icon", 274 | "type": "dropdown", 275 | "placeholder": "Default", 276 | "options": [ 277 | { 278 | "label": "Small", 279 | "value": "small" 280 | }, 281 | { 282 | "label": "Normal", 283 | "value": "normal" 284 | }, 285 | { 286 | "label": "Large", 287 | "value": "large" 288 | } 289 | ] 290 | }, 291 | { 292 | "property": "uc.essentials.grid-count", 293 | "label": "Makes Essentials have a limited amount of columns", 294 | "type": "checkbox", 295 | "disabledOn": [] 296 | }, 297 | { 298 | "property": "mod.superpins.essentials.grid-count", 299 | "label": "Number of slots in essentials grid.", 300 | "type": "string", 301 | "disabledOn": [], 302 | "defaultValue": "1" 303 | }, 304 | { 305 | "property": "uc.pins.grid-count", 306 | "label": "Makes pinned tabs have a limited amount of columns", 307 | "type": "checkbox", 308 | "disabledOn": [] 309 | }, 310 | { 311 | "property": "mod.superpins.pins.grid-count", 312 | "label": "Number of slots in pins grid.", 313 | "type": "string", 314 | "disabledOn": [], 315 | "defaultValue": "1" 316 | } 317 | ] 318 | -------------------------------------------------------------------------------- /SuperGradient/SuperGradient.css: -------------------------------------------------------------------------------- 1 | /* Get the same gradient depending on tabs side */ 2 | @media (-moz-bool-pref: "zen.tabs.vertical.right-side") { 3 | :root { 4 | --gradient-start: circle at 95% top; 5 | } 6 | } 7 | @media not (-moz-bool-pref: "zen.tabs.vertical.right-side") { 8 | :root { 9 | --gradient-start: circle at 5% top; 10 | } 11 | } 12 | 13 | /* Control saturation of colors */ 14 | @media (-moz-bool-pref: "uc.supergradient.desaturate") { 15 | :root { 16 | --saturation: 55%; 17 | } 18 | } 19 | @media not (-moz-bool-pref: "uc.supergradient.desaturate") { 20 | :root { 21 | --saturation: 80%; 22 | } 23 | } 24 | 25 | /* Control lightness of colors/intensity of the gradient */ 26 | @media (prefers-color-scheme: dark) { 27 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="ReallySubtle"]) { 28 | --lightness: 7%; 29 | --accent-color-lightness: 36%; 30 | } 31 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="RatherSubtle"]) { 32 | --lightness: 9%; 33 | --accent-color-lightness: 38%; 34 | } 35 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="Normal"]) { 36 | --lightness: 12%; 37 | --accent-color-lightness: 40%; 38 | } 39 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="RatherIntense"]) { 40 | --lightness: 14%; 41 | --accent-color-lightness: 44%; 42 | } 43 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="ReallyIntense"]) { 44 | --lightness: 16%; 45 | --accent-color-lightness: 48%; 46 | } 47 | } 48 | @media (prefers-color-scheme: light) { 49 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="ReallySubtle"]) { 50 | --lightness: 90%; 51 | --accent-color-lightness: 66%; 52 | } 53 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="RatherSubtle"]) { 54 | --lightness: 85%; 55 | --accent-color-lightness: 62%; 56 | } 57 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="Normal"]) { 58 | --lightness: 80%; 59 | --accent-color-lightness: 58%; 60 | } 61 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="RatherIntense"]) { 62 | --lightness: 75%; 63 | --accent-color-lightness: 54%; 64 | } 65 | :root:has(#theme-SuperGradient[theme-supergradient-intensity="ReallyIntense"]) { 66 | --lightness: 70%; 67 | --accent-color-lightness: 50%; 68 | } 69 | } 70 | 71 | /* SuperGradient Presets */ 72 | 73 | /* 1. Top-left; 2. Bottom-left; 3. Top-right'ish 4. Bottom-right*/ 74 | 75 | :root:has(#theme-SuperGradient[theme-supergradient-preset="NorthernHorizen"]) { 76 | --gradient-color1: hsl(220, var(--saturation), var(--lightness)); 77 | --gradient-color2: hsl(160, var(--saturation), var(--lightness)); 78 | --gradient-color3: hsl(200, var(--saturation), var(--lightness)); 79 | --gradient-color4: hsl(180, var(--saturation), var(--lightness)); 80 | --switched-color1: hsl(160, var(--saturation), var(--lightness)); 81 | --switched-color2: hsl(220, var(--saturation), var(--lightness)); 82 | --switched-color3: hsl(180, var(--saturation), var(--lightness)); 83 | --switched-color4: hsl(200, var(--saturation), var(--lightness)); 84 | --custom-accent-color: hsla(205, 50%, var(--accent-color-lightness), 0.7); 85 | --switched-accent-color: hsla(170, 50%, var(--accent-color-lightness), 0.7); 86 | } 87 | 88 | :root:has(#theme-SuperGradient[theme-supergradient-preset="ScarletDusk"]) { 89 | --gradient-color1: hsl(340, var(--saturation), var(--lightness)); 90 | --gradient-color2: hsl(40, var(--saturation), var(--lightness)); 91 | --gradient-color3: hsl(30, var(--saturation), var(--lightness)); 92 | --gradient-color4: hsl(340, var(--saturation), var(--lightness)); 93 | --switched-color1: hsl(40, var(--saturation), var(--lightness)); 94 | --switched-color2: hsl(340, var(--saturation), var(--lightness)); 95 | --switched-color3: hsl(340, var(--saturation), var(--lightness)); 96 | --switched-color4: hsl(30, var(--saturation), var(--lightness)); 97 | --custom-accent-color: hsla(350, 50%, var(--accent-color-lightness), 0.6); 98 | --switched-accent-color: hsla(40, 50%, var(--accent-color-lightness), 0.6); 99 | } 100 | 101 | :root:has(#theme-SuperGradient[theme-supergradient-preset="AmethystClaret"]) { 102 | --gradient-color1: hsl(270, var(--saturation), var(--lightness)); 103 | --gradient-color2: hsl(0, var(--saturation), var(--lightness)); 104 | --gradient-color3: hsl(320, var(--saturation), var(--lightness)); 105 | --gradient-color4: hsl(20, var(--saturation), var(--lightness)); 106 | --switched-color1: hsl(0, var(--saturation), var(--lightness)); 107 | --switched-color2: hsl(270, var(--saturation), var(--lightness)); 108 | --switched-color3: hsl(20, var(--saturation), var(--lightness)); 109 | --switched-color4: hsl(320, var(--saturation), var(--lightness)); 110 | --custom-accent-color: hsla(280, 50%, var(--accent-color-lightness), 0.5); 111 | --switched-accent-color: hsla(350, 50%, var(--accent-color-lightness), 0.5); 112 | } 113 | 114 | :root:has(#theme-SuperGradient[theme-supergradient-preset="OliveSunset"]) { 115 | --gradient-color1: hsl(20, var(--saturation), var(--lightness)); 116 | --gradient-color2: hsl(65, var(--saturation), var(--lightness)); 117 | --gradient-color3: hsl(50, var(--saturation), var(--lightness)); 118 | --gradient-color4: hsl(160, var(--saturation), var(--lightness)); 119 | --switched-color1: hsl(65, var(--saturation), var(--lightness)); 120 | --switched-color2: hsl(20, var(--saturation), var(--lightness)); 121 | --switched-color3: hsl(160, var(--saturation), var(--lightness)); 122 | --switched-color4: hsl(50, var(--saturation), var(--lightness)); 123 | --custom-accent-color: hsla(40, 50%, var(--accent-color-lightness), 0.5); 124 | --switched-accent-color: hsla(60, 50%, var(--accent-color-lightness), 0.5); 125 | } 126 | 127 | :root:has(#theme-SuperGradient[theme-supergradient-preset="MidnightMajesty"]) { 128 | --gradient-color1: hsl(50, var(--saturation), var(--lightness)); 129 | --gradient-color2: hsl(300, var(--saturation), var(--lightness)); 130 | --gradient-color3: hsl(60, var(--saturation), var(--lightness)); 131 | --gradient-color4: hsl(10, var(--saturation), var(--lightness)); 132 | --switched-color1: hsl(300, var(--saturation), var(--lightness)); 133 | --switched-color2: hsl(50, var(--saturation), var(--lightness)); 134 | --switched-color3: hsl(10, var(--saturation), var(--lightness)); 135 | --switched-color4: hsl(60, var(--saturation), var(--lightness)); 136 | --custom-accent-color: hsla(50, 50%, var(--accent-color-lightness), 0.5); 137 | --switched-accent-color: hsla(310, 50%, var(--accent-color-lightness), 0.4); 138 | } 139 | 140 | :root:has(#theme-SuperGradient[theme-supergradient-preset="GalaxyDream"]) { 141 | --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%); 142 | --zen-main-browser-background: radial-gradient(ellipse, var(--zen-browser-gradient-base, #1B1E27) 20%, light-dark(#ffffff, #1b1b1b) 100%) !important; 143 | 144 | /* Makes the gradient work in compact mode */ 145 | @media (-moz-bool-pref:"zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.compact") { 146 | #nav-bar::before, #nav-bar { /* Attribute "data-l10n-id" makes the gradient work with floating toolbar mod bookmarks toolbar */ 147 | background: radial-gradient(ellipse at bottom, var(--zen-browser-gradient-base, #1B1E27) 2%, light-dark(#ffffff, #1b1b1b) 100%) !important; 148 | } 149 | #PersonalToolbar[data-l10n-id="bookmarks-toolbar"] { 150 | background: radial-gradient(ellipse at top, var(--zen-browser-gradient-base, #1B1E27) 2%, light-dark(#ffffff, #1b1b1b) 100%) !important; 151 | } 152 | } 153 | @media (-moz-bool-pref:"zen.view.compact.hide-tabbar") and (-moz-bool-pref: "zen.view.compact") { 154 | #navigator-toolbox { 155 | --zen-themed-toolbar-bg: radial-gradient(ellipse at right, var(--zen-browser-gradient-base, #1B1E27) 1%, light-dark(#ffffff, #1b1b1b) 95%) !important; 156 | } 157 | } 158 | 159 | /* Make gradient work when "Expand on hover" is enabled */ 160 | @media (-moz-bool-pref: "zen.view.sidebar-expanded") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") { 161 | #navigator-toolbox[zen-has-hover], 162 | #navigator-toolbox:focus-within, 163 | #navigator-toolbox[movingtab], 164 | #navigator-toolbox[flash-popup], 165 | #navigator-toolbox[has-popup-menu], 166 | #navigator-toolbox:has(.tabbrowser-tab:active), 167 | #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { 168 | #TabsToolbar { 169 | background: radial-gradient(ellipse at right, var(--zen-browser-gradient-base, #1B1E27) 1%, light-dark(#ffffff, #1b1b1b) 95%) !important; 170 | } 171 | } 172 | } 173 | } 174 | 175 | :root:has(#theme-SuperGradient[theme-supergradient-preset="CustomGradient"]) { 176 | --gradient-color1: var(--uc-supergradient-custom-colors-1); 177 | --gradient-color2: var(--uc-supergradient-custom-colors-2); 178 | --gradient-color3: var(--uc-supergradient-custom-colors-3); 179 | --gradient-color4: var(--uc-supergradient-custom-colors-4); 180 | --switched-color1: var(--uc-supergradient-custom-colors-2); 181 | --switched-color2: var(--uc-supergradient-custom-colors-1); 182 | --switched-color3: var(--uc-supergradient-custom-colors-4); 183 | --switched-color4: var(--uc-supergradient-custom-colors-3); 184 | --custom-accent-color: light-dark(color-mix(in srgb, var(--uc-supergradient-custom-colors-1) 85%, black 15%), color-mix(in srgb, var(--uc-supergradient-custom-colors-1) 85%, white 15%)); 185 | --switched-accent-color: light-dark(color-mix(in srgb, var(--uc-supergradient-custom-colors-2) 85%, black 15%), color-mix(in srgb, var(--uc-supergradient-custom-colors-2) 85%, white 15%)); 186 | } 187 | 188 | /* Switch the colors in the gradient (when toggled) */ 189 | @media (-moz-bool-pref: "uc.supergradient.switch-colors") { 190 | :root { 191 | --gradient-color1: var(--switched-color1) !important; 192 | --gradient-color2: var(--switched-color2) !important; 193 | --gradient-color3: var(--switched-color3) !important; 194 | --gradient-color4: var(--switched-color4) !important; 195 | --custom-accent-color: var(--switched-accent-color) !important; 196 | } 197 | } 198 | 199 | /* Applies the color gradient based on the set user preferences */ 200 | :root:has(#theme-SuperGradient[theme-supergradient-preset="NorthernHorizen"], 201 | #theme-SuperGradient[theme-supergradient-preset="ScarletDusk"], 202 | #theme-SuperGradient[theme-supergradient-preset="AmethystClaret"], 203 | #theme-SuperGradient[theme-supergradient-preset="OliveSunset"], 204 | #theme-SuperGradient[theme-supergradient-preset="MidnightMajesty"], 205 | #theme-SuperGradient[theme-supergradient-preset="CustomGradient"]) { 206 | --zen-main-browser-background: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important; 207 | } 208 | 209 | /* Makes the gradient work in compact mode */ 210 | @media (-moz-bool-pref:"zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.compact") { 211 | #nav-bar::before, #nav-bar, #PersonalToolbar[data-l10n-id="bookmarks-toolbar"] { /* Attribute "data-l10n-id" makes the gradient work with floating toolbar mod bookmarks toolbar */ 212 | background: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important; 213 | } 214 | } 215 | @media (-moz-bool-pref:"zen.view.compact.hide-tabbar") and (-moz-bool-pref: "zen.view.compact") { 216 | #navigator-toolbox { 217 | --zen-themed-toolbar-bg: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important; 218 | } 219 | } 220 | 221 | /* Make gradient work when "Expand on hover" is enabled */ 222 | @media (-moz-bool-pref: "zen.view.sidebar-expanded") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") { 223 | #navigator-toolbox[zen-has-hover], 224 | #navigator-toolbox:focus-within, 225 | #navigator-toolbox[movingtab], 226 | #navigator-toolbox[flash-popup], 227 | #navigator-toolbox[has-popup-menu], 228 | #navigator-toolbox:has(.tabbrowser-tab:active), 229 | #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { 230 | #TabsToolbar { 231 | background: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important; 232 | } 233 | } 234 | } 235 | 236 | /* Use custom accent colors adjusted to the gradient (unless toggled, which uses zen's accent color) */ 237 | @media not (-moz-bool-pref: "uc.supergradient.use-accent-color") { 238 | :root:has(#theme-SuperGradient[theme-supergradient-preset="NorthernHorizen"], 239 | #theme-SuperGradient[theme-supergradient-preset="ScarletDusk"], 240 | #theme-SuperGradient[theme-supergradient-preset="AmethystClaret"], 241 | #theme-SuperGradient[theme-supergradient-preset="OliveSunset"], 242 | #theme-SuperGradient[theme-supergradient-preset="MidnightMajesty"], 243 | #theme-SuperGradient[theme-supergradient-preset="CustomGradient"]) { 244 | 245 | --toolbarbutton-hover-background: color-mix(in srgb, var(--custom-accent-color) 60%, transparent) !important; 246 | --toolbarbutton-active-background: color-mix(in srgb, var(--custom-accent-color) 80%, transparent) !important; 247 | --panel-item-hover-bgcolor: color-mix(in srgb, var(--custom-accent-color) 60%, transparent) !important; 248 | --zen-workspaces-strip-background-color: var(--custom-accent-color) !important; 249 | 250 | @media (-moz-bool-pref: "zen.workspaces.show-icon-strip") { 251 | #zen-workspaces-button { 252 | background: color-mix(in srgb, var(--custom-accent-color) 25%, transparent) !important; 253 | } 254 | } 255 | 256 | /* background color of pinned tabs in a normal state (not hovered/selected) */ 257 | .tabbrowser-tab[pinned] .tab-stack .tab-background { 258 | background-color: color-mix(in srgb, var(--custom-accent-color) 35%, transparent 75%) !important; 259 | } 260 | /* background color when hovering */ 261 | .tabbrowser-tab:hover .tab-stack .tab-background { 262 | background-color: color-mix(in srgb, var(--custom-accent-color) 50%, transparent 75%) !important; 263 | } 264 | /* background color when selected */ 265 | .tabbrowser-tab[selected="true"] .tab-stack .tab-background, 266 | .tabbrowser-tab[multiselected="true"] .tab-stack .tab-background { 267 | background-color: var(--custom-accent-color) !important; 268 | } 269 | /* background color when hovering and selected */ 270 | .tabbrowser-tab[selected="true"]:hover .tab-stack .tab-background, 271 | .tabbrowser-tab[multiselected="true"]:hover .tab-stack .tab-background { 272 | background-color: color-mix(in srgb, var(--custom-accent-color) 90%, transparent) !important; 273 | } 274 | } 275 | } 276 | 277 | /* This creates the Film Grain Effect */ 278 | @media (not (-moz-bool-pref: "zen.view.compact")) or (-moz-bool-pref: "zen.view.compact.hide-tabbar") or 279 | ((-moz-bool-pref: "zen.view.compact") and (-moz-bool-pref: "zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) { 280 | 281 | @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") { 282 | #navigator-toolbox[zen-has-hover], 283 | #navigator-toolbox:focus-within, 284 | #navigator-toolbox[movingtab], 285 | #navigator-toolbox[flash-popup], 286 | #navigator-toolbox[has-popup-menu], 287 | #navigator-toolbox:has(.tabbrowser-tab:active), 288 | #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { 289 | #TabsToolbar::after { 290 | content: ""; 291 | position: absolute; 292 | 293 | width: 100%; 294 | height: 100%; 295 | 296 | top: 0px; 297 | left: 0px; 298 | 299 | border-top-right-radius: 5px; 300 | border-bottom-right-radius: 5px; 301 | z-index: -2; 302 | } 303 | } 304 | } 305 | 306 | @media (prefers-color-scheme: dark) { 307 | /* Textures: 3%, 5% and 8% Opacity and white on black */ 308 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Subtle"]) { 309 | #browser, #TabsToolbar::after { 310 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-subtle.png") !important; 311 | } 312 | } 313 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Normal"]) { 314 | #browser, #TabsToolbar::after { 315 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-normal.png") !important; 316 | } 317 | } 318 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Intense"]) { 319 | #browser, #TabsToolbar::after { 320 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-intense.png") !important; 321 | } 322 | } 323 | } 324 | @media (prefers-color-scheme: light) { 325 | /* 3%, 6% and 9% Opacity and black on white*/ 326 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Subtle"]) { 327 | #browser, #TabsToolbar::after { 328 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-subtle.png") !important; 329 | } 330 | } 331 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Normal"]) { 332 | #browser, #TabsToolbar::after { 333 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-normal.png") !important; 334 | } 335 | } 336 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Intense"]) { 337 | #browser, #TabsToolbar::after { 338 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-intense.png") !important; 339 | } 340 | } 341 | } 342 | } 343 | 344 | /* Makes the Film Grain Effect work in compact mode as well */ 345 | @media (-moz-bool-pref: "zen.view.compact") { 346 | 347 | @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") { 348 | #navigator-toolbox[zen-has-hover], 349 | #navigator-toolbox:focus-within, 350 | #navigator-toolbox[movingtab], 351 | #navigator-toolbox[flash-popup], 352 | #navigator-toolbox[has-popup-menu], 353 | #navigator-toolbox:has(.tabbrowser-tab:active), 354 | #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { 355 | #TabsToolbar::after { 356 | content: ""; 357 | position: absolute; 358 | 359 | width: 100%; 360 | height: 100%; 361 | 362 | top: 0px; 363 | left: 0px; 364 | 365 | border-top-right-radius: 5px; 366 | border-bottom-right-radius: 5px; 367 | z-index: -2; 368 | } 369 | } 370 | } 371 | 372 | @media not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") { 373 | #TabsToolbar::after { 374 | content: ""; 375 | position: absolute; 376 | 377 | width: 100%; 378 | height: 100%; 379 | 380 | top: 0px; 381 | left: 0px; 382 | 383 | border-top-right-radius: 5px; 384 | border-bottom-right-radius: 5px; 385 | z-index: -2; 386 | } 387 | } 388 | 389 | @media (-moz-bool-pref: "zen.view.compact") and (-moz-bool-pref: "zen.view.compact.hide-toolbar") { 390 | toolbarbutton { 391 | z-index: 2 !important; 392 | } 393 | 394 | #nav-bar::before { 395 | content: ""; 396 | position: absolute; 397 | 398 | width: 100%; 399 | height: 100%; 400 | 401 | top: 0px; 402 | left: 0px; 403 | 404 | border-bottom-left-radius: 5px; 405 | border-bottom-right-radius: 5px; 406 | z-index: 0; 407 | } 408 | } 409 | 410 | @media (prefers-color-scheme: dark) { 411 | /* Textures: 3%, 5% and 8% Opacity and white on black */ 412 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Subtle"]) { 413 | #TabsToolbar::after, #nav-bar::before { 414 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-subtle.png") !important; 415 | } 416 | } 417 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Normal"]) { 418 | #TabsToolbar::after, #nav-bar::before { 419 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-normal.png") !important; 420 | } 421 | } 422 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Intense"]) { 423 | #TabsToolbar::after, #nav-bar::before { 424 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/dark-intense.png") !important; 425 | } 426 | } 427 | } 428 | @media (prefers-color-scheme: light) { 429 | /* 3%, 6% and 9% Opacity and black on white*/ 430 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Subtle"]) { 431 | #TabsToolbar::after, #nav-bar::before { 432 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-subtle.png") !important; 433 | } 434 | } 435 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Normal"]) { 436 | #TabsToolbar::after, #nav-bar::before { 437 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-subtle.png") !important; 438 | } 439 | } 440 | :root:has(#theme-SuperGradient[theme-supergradient-film-grain-intensity="Intense"]) { 441 | #TabsToolbar::after, #nav-bar::before { 442 | background-image: url("https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperGradient/Film-Grain%20Textures/light-subtle.png") !important; 443 | } 444 | } 445 | } 446 | } 447 | 448 | /* This fixes the corners of the browser content */ 449 | browser { 450 | border-radius: var(--zen-webview-border-radius, var(--zen-border-radius)) !important; 451 | } 452 | @media (-moz-bool-pref: "zen.view.compact") and (-moz-bool-pref: "zen.view.compact.hide-toolbar") { 453 | #nav-bar { 454 | border-bottom-left-radius: var(--zen-webview-border-radius, var(--zen-border-radius)) !important; 455 | border-bottom-right-radius: var(--zen-webview-border-radius, var(--zen-border-radius)) !important; 456 | } 457 | } -------------------------------------------------------------------------------- /SuperPins/SuperPins.css: -------------------------------------------------------------------------------- 1 | @media (-moz-bool-pref: "zen.tabs.vertical") { 2 | 3 | /* Prevents stuff from being clipped off from bottom of Essentials */ 4 | #zen-essentials-container, .zen-essentials-container { 5 | overflow: visible !important; 6 | } 7 | 8 | /* Makes essentials transparent (when toggled) */ 9 | :root:has(#theme-SuperPins[uc-essentials-color-scheme="transparent"]) { 10 | .tabbrowser-tab[zen-essential="true"]:not(:hover):not([selected="true"]) .tab-stack .tab-background { 11 | background-color: transparent !important; 12 | } 13 | } 14 | 15 | @media (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) { 16 | 17 | /* Default essentials-width and essentials-gap variables (set to browser default) to fix some bugs */ 18 | :root { 19 | --essentials-width: 49px; 20 | --essentials-gap: calc(var(--zen-toolbox-padding) - 2px); 21 | } 22 | 23 | /* Set width of Essentials (Dropdown) */ 24 | :root:has(#theme-SuperPins[uc-essentials-width="Thin"]) { 25 | --essentials-width: 50px; 26 | } 27 | 28 | :root:has(#theme-SuperPins[uc-essentials-width="Normal"]) { 29 | --essentials-width: 60px; 30 | } 31 | 32 | :root:has(#theme-SuperPins[uc-essentials-width="Wide"]) { 33 | --essentials-width: 70px; 34 | } 35 | 36 | :root:has(#theme-SuperPins[uc-essentials-width="Thin"], 37 | #theme-SuperPins[uc-essentials-width="Normal"], 38 | #theme-SuperPins[uc-essentials-width="Wide"]) { 39 | #zen-essentials-container, .zen-essentials-container { 40 | grid-template-columns: repeat(auto-fit, 41 | minmax(var(--essentials-width), auto)) !important; 42 | } 43 | 44 | .zen-essentials-container { 45 | max-width: calc(100% - var(--zen-toolbox-padding) * 2); 46 | } 47 | 48 | @media (-moz-bool-pref: "uc.essentials.grid-count") { 49 | #zen-essentials-container, .zen-essentials-container { 50 | grid-template-columns: repeat(var(--mod-superpins-essentials-grid-count), minmax(var(--essentials-width), auto)) !important; 51 | } 52 | } 53 | } 54 | 55 | /* Set margin between Essentials (Dropdown) */ 56 | :root:has(#theme-SuperPins[uc-essentials-gap="Small"]) { 57 | --essentials-gap: 0px; 58 | } 59 | 60 | :root:has(#theme-SuperPins[uc-essentials-gap="Normal"]) { 61 | --essentials-gap: 2px; 62 | } 63 | 64 | :root:has(#theme-SuperPins[uc-essentials-gap="Big"]) { 65 | --essentials-gap: 5px; 66 | } 67 | 68 | :root:has(#theme-SuperPins[uc-essentials-gap="Small"], 69 | #theme-SuperPins[uc-essentials-gap="Normal"], 70 | #theme-SuperPins[uc-essentials-gap="Big"]) { 71 | #zen-essentials-container, .zen-essentials-container { 72 | gap: var(--essentials-gap) var(--essentials-gap) !important; 73 | } 74 | } 75 | } 76 | 77 | /* Enables legacy layout for pinned tabs (icon only in grid) */ 78 | @media (-moz-bool-pref: "uc.pins.legacy-layout") { 79 | 80 | #vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-close-button { 81 | display: none !important; 82 | } 83 | 84 | #vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-reset-button { 85 | display: none !important; 86 | } 87 | 88 | #vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-reset-pin-button { 89 | display: none !important; 90 | } 91 | 92 | #vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-label-container { 93 | display: none !important; 94 | } 95 | 96 | /*disable icon shift when tab was renamed*/ 97 | #navigator-toolbox[zen-sidebar-expanded="true"] { 98 | & #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab>.tab-stack>.tab-content>.tab-icon-stack { 99 | left: unset !important; 100 | } 101 | } 102 | 103 | /* Make pinned tabs auto-grow to span full width of row */ 104 | @media (-moz-bool-pref: "uc.pins.auto-grow") { 105 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab { 106 | width: auto !important; 107 | min-width: var(--tab-pinned-min-width-expanded) !important; 108 | flex: 1 1 auto !important; 109 | } 110 | 111 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section>tab-group { 112 | width: 100% !important; 113 | } 114 | 115 | @media (-moz-bool-pref: "uc.pins.grid-count") { 116 | 117 | /* Logic for pinned tabs that have auto-grow and grid-count. Must use +1 to fix */ 118 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab { 119 | width: calc(100% / (var(--mod-superpins-pins-grid-count) + 1)) !important; 120 | } 121 | } 122 | 123 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section { 124 | display: flex !important; 125 | flex-wrap: wrap !important; 126 | flex-direction: row !important; 127 | } 128 | } 129 | 130 | @media (not (-moz-bool-pref: "uc.pins.auto-grow")) { 131 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section { 132 | grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)) !important; 133 | display: grid !important; 134 | } 135 | 136 | @media (-moz-bool-pref: "uc.pins.grid-count") { 137 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section { 138 | grid-template-columns: repeat(var(auto-fit, --mod-superpins-pins-grid-count), minmax(var(--tab-pinned-min-width-expanded), auto)) !important; 139 | } 140 | } 141 | } 142 | 143 | /*The actual grid layout*/ 144 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) { 145 | padding: 0 var(--zen-toolbox-padding) !important; 146 | overflow: visible !important; 147 | padding-bottom: 17px !important; 148 | gap: 3px 3px !important; 149 | max-width: calc(100% - var(--zen-toolbox-padding) * 2) !important; 150 | } 151 | 152 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section .tabbrowser-tab { 153 | --toolbarbutton-inner-padding: 0; 154 | } 155 | 156 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section>*:not(tab-group) { 157 | margin: 0 !important; 158 | } 159 | 160 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section>tab-group .tab-icon-stack { 161 | margin: auto !important; 162 | } 163 | 164 | .vertical-pinned-tabs-container-separator { 165 | position: absolute !important; 166 | bottom: 7px !important; 167 | left: 50% !important; 168 | transform: translateX(-50%) !important; 169 | width: calc(100% - var(--zen-toolbox-padding) * 2) !important; 170 | } 171 | 172 | :root:has(#theme-SuperPins[uc-tabs-show-separator="never"]) { 173 | .vertical-pinned-tabs-container-separator { 174 | display: none !important; 175 | } 176 | 177 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) { 178 | padding-bottom: 5px !important; 179 | } 180 | } 181 | } 182 | 183 | /* Make Essentials look more box like */ 184 | @media (-moz-bool-pref: "uc.essentials.box-like-corners") { 185 | .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background { 186 | border-radius: 5px !important; 187 | } 188 | } 189 | 190 | /* If Essentials have a grid count but do not have auto-grow on */ 191 | @media (-moz-bool-pref: "uc.essentials.grid-count") { 192 | #zen-essentials-container, .zen-essentials-container { 193 | grid-template-columns: repeat(var(--mod-superpins-essentials-grid-count), minmax(var(--essentials-width), auto)) !important; 194 | } 195 | } 196 | 197 | /* Make Essentials auto-grow to span full width of a row */ 198 | @media (-moz-bool-pref: "uc.essentials.auto-grow") { 199 | .tabbrowser-tab[zen-essential="true"] { 200 | width: auto !important; 201 | min-width: var(--essentials-width) !important; 202 | flex: 1 1 auto !important; 203 | } 204 | 205 | @media (-moz-bool-pref: "uc.essentials.grid-count") { 206 | 207 | /* For auto-grow with grid-count. must use +1 to fix a bug */ 208 | .tabbrowser-tab[zen-essential="true"] { 209 | width: calc(100% / (var(--mod-superpins-essentials-grid-count) + 1)) !important; 210 | } 211 | } 212 | 213 | #zen-essentials-container, .zen-essentials-container { 214 | display: flex !important; 215 | flex-wrap: wrap !important; 216 | flex-direction: row !important; 217 | width: 100% !important; 218 | } 219 | 220 | #navigator-toolbox { 221 | min-width: min-content !important; 222 | } 223 | } 224 | 225 | /* Puts Essentials at the bottom */ 226 | :has(#theme-SuperPins[uc-essentials-position="bottom"]) { 227 | #zen-essentials-container, .zen-essentials-container { 228 | order: 999 !important; 229 | margin-top: auto !important; 230 | padding-top: 5px !important; 231 | padding-bottom: 4px !important; 232 | } 233 | } 234 | 235 | /* Adds a little bg to the pinned tabs */ 236 | @media (-moz-bool-pref: "uc.pins.bg") { 237 | @media (prefers-color-scheme: light) { 238 | :root { 239 | --pins-bg-percentage: 40%; 240 | } 241 | } 242 | 243 | @media (prefers-color-scheme: dark) { 244 | :root { 245 | --pins-bg-percentage: 7%; 246 | } 247 | } 248 | 249 | /* background color of pinned tabs in a normal state (not hovered/selected) */ 250 | .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background { 251 | background-color: color-mix(in srgb, white var(--pins-bg-percentage), transparent) !important; 252 | } 253 | 254 | /* background color when hovering */ 255 | .tabbrowser-tab[pinned]:not([zen-essential="true"]):hover .tab-stack .tab-background { 256 | background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 3%), transparent) !important; 257 | } 258 | 259 | /* background color when selected */ 260 | .tabbrowser-tab[pinned]:not([zen-essential="true"])[selected="true"] .tab-stack .tab-background, 261 | .tabbrowser-tab[pinned]:not([zen-essential="true"])[multiselected="true"] .tab-stack .tab-background { 262 | background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 16%), transparent) !important; 263 | } 264 | 265 | /* background color when selected and hovering*/ 266 | .tabbrowser-tab[pinned]:not([zen-essential="true"])[selected="true"]:hover .tab-stack .tab-background, 267 | .tabbrowser-tab[pinned]:not([zen-essential="true"])[multiselected="true"]:hover .tab-stack .tab-background { 268 | background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 18%), transparent) !important; 269 | } 270 | } 271 | 272 | /* Adds border to Pins/Essentials (when toggled) */ 273 | :root:has(#theme-SuperPins[uc-superpins-border="essentials"]) { 274 | #zen-essentials-container, .zen-essentials-container { 275 | & .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background { 276 | border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black), 277 | color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important; 278 | } 279 | } 280 | } 281 | 282 | :root:has(#theme-SuperPins[uc-superpins-border="pins"]) { 283 | .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background, #vertical-pinned-tabs-container>.zen-workspace-tabs-section tab-group { 284 | border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black), 285 | color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important; 286 | } 287 | } 288 | 289 | :root:has(#theme-SuperPins[uc-superpins-border="both"]) { 290 | .tabbrowser-tab[pinned] .tab-stack .tab-background, #vertical-pinned-tabs-container>.zen-workspace-tabs-section tab-group { 291 | border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black), 292 | color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important; 293 | } 294 | } 295 | 296 | /* Let pinned tabs have the same selected styling as essentials */ 297 | @media (-moz-bool-pref: "uc.pins.essentials-layout") { 298 | 299 | /* Specific query to overwrite previous one */ 300 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) { 301 | gap: var(--essentials-gap) var(--essentials-gap) !important; 302 | } 303 | 304 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section { 305 | grid-template-columns: repeat(auto-fit, minmax(var(--essentials-width), auto)) !important; 306 | } 307 | 308 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab { 309 | min-width: var(--essentials-width) !important; 310 | } 311 | 312 | @media (-moz-bool-pref: "uc.pins.grid-count") { 313 | #vertical-pinned-tabs-container>.zen-workspace-tabs-section { 314 | grid-template-columns: repeat(var(auto-fit, --mod-superpins-pins-grid-count), minmax(var(--essentials-width), auto)) !important; 315 | } 316 | } 317 | } 318 | 319 | /* pins height */ 320 | :root:has(#theme-SuperPins[uc-pinned-height="small"]) { 321 | #navigator-toolbox[zen-sidebar-expanded="true"] #vertical-pinned-tabs-container:has(> :nth-child(2)) .zen-workspace-tabs-section { 322 | &>.tabbrowser-tab, &>tab-group { 323 | height: 40px !important; 324 | } 325 | } 326 | } 327 | 328 | :root:has(#theme-SuperPins[uc-pinned-height="normal"]) { 329 | #navigator-toolbox[zen-sidebar-expanded="true"] #vertical-pinned-tabs-container:has(> :nth-child(2)) .zen-workspace-tabs-section { 330 | &>.tabbrowser-tab, &>tab-group { 331 | height: 50px !important; 332 | } 333 | } 334 | } 335 | 336 | :root:has(#theme-SuperPins[uc-pinned-height="large"]) { 337 | #navigator-toolbox[zen-sidebar-expanded="true"] #vertical-pinned-tabs-container:has(> :nth-child(2)) .zen-workspace-tabs-section { 338 | &>.tabbrowser-tab, &>tab-group { 339 | height: 60px !important; 340 | } 341 | } 342 | } 343 | 344 | /* favicon size */ 345 | :root:has(#theme-SuperPins[uc-favicon-size="small"]) { 346 | 347 | .tab-icon-pending, 348 | .tab-icon-image, 349 | .tab-sharing-icon-overlay, 350 | .tab-icon-overlay { 351 | height: 16px !important; 352 | width: 16px !important; 353 | } 354 | 355 | /* No need to scale tab throbber as it is same size. */ 356 | } 357 | 358 | :root:has(#theme-SuperPins[uc-favicon-size="normal"]) { 359 | 360 | .tab-icon-pending, 361 | .tab-icon-image, 362 | .tab-sharing-icon-overlay, 363 | .tab-icon-overlay { 364 | height: 18px !important; 365 | width: 18px !important; 366 | } 367 | 368 | .tab-throbber { 369 | transform: scale(1.125) !important; 370 | } 371 | } 372 | 373 | :root:has(#theme-SuperPins[uc-favicon-size="large"]) { 374 | 375 | .tab-icon-pending, 376 | .tab-icon-image, 377 | .tab-sharing-icon-overlay, 378 | .tab-icon-overlay { 379 | height: 20px !important; 380 | width: 20px !important; 381 | } 382 | 383 | .tab-throbber { 384 | transform: scale(1.25) !important; 385 | } 386 | } 387 | 388 | /* workspace icons size */ 389 | :root:has(#theme-SuperPins[uc-workspace-icon-size="x-small"]) { 390 | #zen-workspaces-button { 391 | font-size: x-small !important; 392 | } 393 | } 394 | 395 | :root:has(#theme-SuperPins[uc-workspace-icon-size="small"]) { 396 | #zen-workspaces-button { 397 | font-size: small !important; 398 | } 399 | } 400 | 401 | :root:has(#theme-SuperPins[uc-workspace-icon-size="medium"]) { 402 | #zen-workspaces-button { 403 | font-size: medium !important; 404 | } 405 | } 406 | 407 | :root:has(#theme-SuperPins[uc-workspace-icon-size="large"]) { 408 | #zen-workspaces-button { 409 | font-size: large !important; 410 | } 411 | } 412 | 413 | /* current workspace icons size */ 414 | :root:has(#theme-SuperPins[uc-workspace-current-icon-size="small"]) { 415 | .zen-current-workspace-indicator .zen-current-workspace-indicator-icon { 416 | font-size: 12px !important; 417 | } 418 | } 419 | 420 | :root:has(#theme-SuperPins[uc-workspace-current-icon-size="normal"]) { 421 | .zen-current-workspace-indicator .zen-current-workspace-indicator-icon { 422 | font-size: 14.5px !important; 423 | } 424 | } 425 | 426 | :root:has(#theme-SuperPins[uc-workspace-current-icon-size="large"]) { 427 | .zen-current-workspace-indicator .zen-current-workspace-indicator-icon { 428 | font-size: 16px !important; 429 | } 430 | } 431 | 432 | /* Increase margin below Essentials in case the workspace indicator is not visible. */ 433 | @media (not (-moz-bool-pref: "zen.workspaces.show-workspace-indicator")) { 434 | :root:has(#theme-SuperPins[uc-tabs-show-separator="essentials-shown"]) { 435 | #zen-essentials-container, .zen-essentials-container { 436 | &:has(~ #zen-tabs-wrapper #zen-browser-tabs-container #vertical-pinned-tabs-container .zen-workspace-tabs-section[active="true"] .tabbrowser-tab) { 437 | margin-bottom: 8px !important; 438 | } 439 | } 440 | 441 | #zen-essentials-container, .zen-essentials-container { 442 | &:has(> :nth-child(1))~#zen-tabs-wrapper #zen-browser-tabs-container #vertical-pinned-tabs-container>.zen-workspace-tabs-section { 443 | min-height: 20px !important; 444 | } 445 | } 446 | 447 | #zen-essentials-container, .zen-essentials-container { 448 | &:has(> :nth-child(1))~#zen-tabs-wrapper #zen-browser-tabs-container #vertical-pinned-tabs-container>.zen-workspace-tabs-section .vertical-pinned-tabs-container-separator { 449 | max-height: unset !important; 450 | } 451 | } 452 | } 453 | 454 | :root:not(:has(#theme-SuperPins[uc-tabs-show-separator="essentials-shown"])) { 455 | #zen-essentials-container, .zen-essentials-container { 456 | margin-bottom: 8px !important; 457 | } 458 | } 459 | } 460 | 461 | /* Ensure that the browser uses SuperPins dim rather than the built-in dim-pending. */ 462 | .tab-icon-image[pending="true"], 463 | .tabbrowser-tab[pending="true"] .tab-text { 464 | opacity: 1 !important; 465 | } 466 | 467 | /* If dim-type is set to icons. */ 468 | :root:has(#theme-SuperPins[uc-tabs-dim-type="icons"]) { 469 | .tab-icon-image[pending="true"] { 470 | opacity: 0.5 !important; 471 | } 472 | } 473 | 474 | /* If dim-type is set to text. */ 475 | :root:has(#theme-SuperPins[uc-tabs-dim-type="text"]) { 476 | .tabbrowser-tab[pending="true"] .tab-text { 477 | opacity: 0.5 !important; 478 | } 479 | } 480 | 481 | /* If dim-type is set to icon + text. */ 482 | :root:has(#theme-SuperPins[uc-tabs-dim-type="both"]) { 483 | 484 | .tab-icon-image[pending="true"], 485 | .tabbrowser-tab[pending="true"] .tab-text { 486 | opacity: 0.5 !important; 487 | } 488 | } 489 | 490 | @media (-moz-bool-pref: "uc.tabs.strikethrough-on-pending") { 491 | .tabbrowser-tab[pending="true"] .tab-text { 492 | text-decoration: line-through !important; 493 | } 494 | } 495 | 496 | @media (-moz-bool-pref: "uc.pins.stay-at-top") { 497 | #zen-browser-tabs-container { 498 | height: 100% !important; 499 | } 500 | 501 | #tabbrowser-arrowscrollbox { 502 | height: 100% !important; 503 | } 504 | 505 | #tabbrowser-arrowscrollbox>.zen-workspace-tabs-section { 506 | overflow-y: auto !important; 507 | overflow-x: hidden !important; 508 | /* Calculate the height of the bottom workspace section. */ 509 | max-height: calc(100% - 43px) !important; 510 | box-sizing: border-box !important; 511 | padding-bottom: 60px !important; 512 | } 513 | 514 | /* In case workspace indicator is not visible. */ 515 | @media (not (-moz-bool-pref: "zen.workspaces.show-workspace-indicator")) { 516 | #tabbrowser-arrowscrollbox>.zen-workspace-tabs-section { 517 | max-height: calc(100% - 5px) !important; 518 | } 519 | } 520 | 521 | #zen-tabs-wrapper { 522 | overflow: hidden !important; 523 | } 524 | 525 | /* Ensure tab-groups never shrink. */ 526 | tab-group { 527 | flex: 0 0 auto !important; 528 | } 529 | } 530 | 531 | @media (-moz-bool-pref: "uc.pins.active-bg") { 532 | .zen-workspace-tabs-section .tabbrowser-tab[pinned][selected="true"] .tab-stack .tab-background { 533 | background-color: var(--mod-superpins-pins-active-bg) !important; 534 | opacity: 1 !important; 535 | } 536 | 537 | .zen-workspace-tabs-section .tabbrowser-tab[pinned][selected="true"]:hover .tab-stack .tab-background { 538 | opacity: 0.8 !important; 539 | background-color: var(--mod-superpins-pins-active-bg) !important; 540 | } 541 | } 542 | } 543 | --------------------------------------------------------------------------------