Merge branch 'zen-browser:main' into main

This commit is contained in:
Sameera Sandakelum 2025-04-11 00:34:00 +05:30 committed by GitHub
commit c82d02f632
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
53 changed files with 1965 additions and 323 deletions

View file

@ -1,4 +1,19 @@
{
"fd79066d-ba22-4cd1-8ad0-cfd82c12026a": {
"id": "fd79066d-ba22-4cd1-8ad0-cfd82c12026a",
"name": "Zen URL Bar Tweaks",
"description": "A collection of tweaks for the Zen browser URL bar with options to toggle each tweak.",
"homepage": "https://github.com/litegral/zen-url-bar-tweaks",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/image.png",
"author": "litegral",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-04-05",
"updatedAt": "2025-04-09",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/preferences.json"
},
"c5f7fb68-cc75-4df0-8b02-dc9ee13aa773": {
"id": "c5f7fb68-cc75-4df0-8b02-dc9ee13aa773",
"name": "Audio TabIcon Plus",
@ -14,7 +29,7 @@
"tabs"
],
"createdAt": "2024-08-28",
"updatedAt": "2025-01-26"
"updatedAt": "2025-04-09"
},
"253a3a74-0cc4-47b7-8b82-996a64f030d5": {
"id": "253a3a74-0cc4-47b7-8b82-996a64f030d5",
@ -111,10 +126,10 @@
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/image.png",
"author": "Uiniel",
"version": "1.1.4",
"version": "2.0.0",
"tags": [],
"createdAt": "2024-12-10",
"updatedAt": "2025-01-27",
"updatedAt": "2025-03-31",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json"
},
"ad97bb70-0066-4e42-9b5f-173a5e42c6fc": {
@ -126,13 +141,13 @@
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png",
"author": "JLBlk",
"version": "1.4.4",
"version": "1.4.5",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json",
"tags": [
"tabs"
],
"createdAt": "2024-08-28",
"updatedAt": "2025-02-24"
"updatedAt": "2025-03-12"
},
"a7125691-139e-4a62-aad9-06c6e9f2e5ba": {
"id": "a7125691-139e-4a62-aad9-06c6e9f2e5ba",
@ -235,6 +250,21 @@
"createdAt": "2024-12-01",
"updatedAt": "2025-01-26"
},
"72f8f48d-86b9-4487-acea-eb4977b18f21": {
"id": "72f8f48d-86b9-4487-acea-eb4977b18f21",
"name": "Better CtrlTab Panel",
"description": "Re-style and add customization options for the CtrlTab panel.",
"homepage": "https://github.com/psu/zen-mods",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/image.png",
"author": "psu",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-28",
"updatedAt": "2025-04-09",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json"
},
"2317fd93-c3ed-4f37-b55a-304c1816819e": {
"id": "2317fd93-c3ed-4f37-b55a-304c1816819e",
"name": "Audio Indicator Enhanced",
@ -410,7 +440,7 @@
"version": "1.0.2",
"tags": [],
"createdAt": "2024-10-12",
"updatedAt": "2025-01-26"
"updatedAt": "2025-03-12"
},
"ea1a5ace-f698-4b45-ab88-6e8bd3a563f0": {
"id": "ea1a5ace-f698-4b45-ab88-6e8bd3a563f0",
@ -510,10 +540,10 @@
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6cd4bca9-f17d-4461-b554-844d69a4887c/image.png",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6cd4bca9-f17d-4461-b554-844d69a4887c/preferences.json",
"author": "Dinno-DEV",
"version": "1.0.4",
"version": "1.0.5",
"tags": [],
"createdAt": "2024-09-19",
"updatedAt": "2025-03-07"
"updatedAt": "2025-04-09"
},
"87196c08-8ca1-4848-b13b-7ea41ee830e7": {
"id": "87196c08-8ca1-4848-b13b-7ea41ee830e7",
@ -544,22 +574,6 @@
"updatedAt": "2025-03-11",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json"
},
"2e3369c7-e450-46ba-8794-75ccb0de5e48": {
"id": "2e3369c7-e450-46ba-8794-75ccb0de5e48",
"name": "Now playing indicator",
"description": "Display an indicator on the 'Now playing' tab when the sidebar is collapsed.",
"homepage": "https://github.com/benstone326/zen-browser-now-playing-indicator",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2e3369c7-e450-46ba-8794-75ccb0de5e48/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2e3369c7-e450-46ba-8794-75ccb0de5e48/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2e3369c7-e450-46ba-8794-75ccb0de5e48/image.png",
"author": "benstone326",
"version": "1.2.1",
"tags": [
"tabs"
],
"createdAt": "2024-08-28",
"updatedAt": "2025-01-26"
},
"22c9ec3b-7c62-46ae-991f-c8fff5046829": {
"id": "22c9ec3b-7c62-46ae-991f-c8fff5046829",
"name": "Tab Numbers",
@ -636,9 +650,9 @@
},
"4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827": {
"id": "4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827",
"name": "Vertical Tab Groups",
"description": "Display tab groups vertically so you can still read the page names",
"homepage": "https://github.com/ToBinio/zen-mods/tree/main/vertical-tab-groups",
"name": "Vertical Split Tab Groups",
"description": "Display tab groups created from split tabs as vertical lists instead of horizontal ones.",
"homepage": "https://github.com/ToBinio/zen-mods/tree/main/vertical-split-tab-groups",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827/image.png",
@ -646,7 +660,7 @@
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-11",
"updatedAt": "2025-03-11"
"updatedAt": "2025-03-31"
},
"39907934-59e9-4e42-89f0-a254d3c5e280": {
"id": "39907934-59e9-4e42-89f0-a254d3c5e280",
@ -753,6 +767,21 @@
"createdAt": "2024-12-03",
"updatedAt": "2025-01-26"
},
"79dde383-4fe7-404a-a8e6-9be440022542": {
"id": "79dde383-4fe7-404a-a8e6-9be440022542",
"name": "Tidy Popup",
"description": "Modifies popup panels, changing divider lines with empty spacer, and makes the button more compact.",
"homepage": "https://github.com/Dinno-DEV/zen-tidy-popup",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/79dde383-4fe7-404a-a8e6-9be440022542/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/79dde383-4fe7-404a-a8e6-9be440022542/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/79dde383-4fe7-404a-a8e6-9be440022542/image.png",
"author": "Dinno-DEV",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-02-26",
"updatedAt": "2025-03-31",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/79dde383-4fe7-404a-a8e6-9be440022542/preferences.json"
},
"4a222d82-2803-4ed2-a390-90abfce4f195": {
"id": "4a222d82-2803-4ed2-a390-90abfce4f195",
"name": "Back Fwd Always Hidden",
@ -781,6 +810,20 @@
"createdAt": "2024-10-19",
"updatedAt": "2025-01-26"
},
"20e8cc78-3dac-4db0-81a4-814672fb50af": {
"id": "20e8cc78-3dac-4db0-81a4-814672fb50af",
"name": "Right Side Glance Buttons",
"description": "Move the at a glance buttons to the right side of the window.",
"homepage": "https://github.com/psu/zen-mods",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/20e8cc78-3dac-4db0-81a4-814672fb50af/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/20e8cc78-3dac-4db0-81a4-814672fb50af/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/20e8cc78-3dac-4db0-81a4-814672fb50af/image.png",
"author": "psu",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-28",
"updatedAt": "2025-03-31"
},
"b51ff956-6aea-47ab-80c7-d6c047c0d510": {
"id": "b51ff956-6aea-47ab-80c7-d6c047c0d510",
"name": "Disable Status Bar",
@ -811,21 +854,6 @@
"createdAt": "2024-09-07",
"updatedAt": "2025-01-26"
},
"00aeb359-cce5-4eb5-8c5c-5f928a715664": {
"id": "00aeb359-cce5-4eb5-8c5c-5f928a715664",
"name": "Nyan Catto Mod",
"description": "Playful sidebar mod featuring Bongo Cat above and marching Nyan Cats below \ud83d\udc31",
"homepage": "https://github.com/RayZ3R0/nyan-catto",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/00aeb359-cce5-4eb5-8c5c-5f928a715664/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/00aeb359-cce5-4eb5-8c5c-5f928a715664/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/00aeb359-cce5-4eb5-8c5c-5f928a715664/image.png",
"author": "RayZ3R0",
"version": "1.0.1",
"tags": [],
"createdAt": "2024-10-29",
"updatedAt": "2025-01-26",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/00aeb359-cce5-4eb5-8c5c-5f928a715664/preferences.json"
},
"32aca67a-ffdd-49e7-95c7-1821793610ca": {
"id": "32aca67a-ffdd-49e7-95c7-1821793610ca",
"name": "Custom Statusbar",
@ -897,6 +925,21 @@
"createdAt": "2024-12-29",
"updatedAt": "2025-01-26"
},
"7190e4e9-bead-4b40-8f57-95d852ddc941": {
"id": "7190e4e9-bead-4b40-8f57-95d852ddc941",
"name": "Tab title fixes",
"description": "Increase size of tab titles and add make pending tabs standing out more.",
"homepage": "https://github.com/psu/zen-mods",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7190e4e9-bead-4b40-8f57-95d852ddc941/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7190e4e9-bead-4b40-8f57-95d852ddc941/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7190e4e9-bead-4b40-8f57-95d852ddc941/image.png",
"author": "psu",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-28",
"updatedAt": "2025-03-31",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7190e4e9-bead-4b40-8f57-95d852ddc941/preferences.json"
},
"599a1599-e6ab-4749-ab22-de533860de2c": {
"id": "599a1599-e6ab-4749-ab22-de533860de2c",
"name": "Pimp your PiP",
@ -968,6 +1011,20 @@
"createdAt": "2024-12-12",
"updatedAt": "2025-01-26"
},
"0d218357-d5be-48f1-bbc0-5e7cb2d2e11f": {
"id": "0d218357-d5be-48f1-bbc0-5e7cb2d2e11f",
"name": "Revitalized devtools",
"description": "A calmer theme for Zen's DevTools with added transitions and compatible white/dark modes.",
"homepage": "https://github.com/ArjiAmin/firefox-devtools",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png",
"author": "ArjiAmin",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-30",
"updatedAt": "2025-03-31"
},
"4ab93b88-151c-451b-a1b7-a1e0e28fa7f8": {
"id": "4ab93b88-151c-451b-a1b7-a1e0e28fa7f8",
"name": "No Sidebar Scrollbar",
@ -985,22 +1042,6 @@
"createdAt": "2024-09-01",
"updatedAt": "2025-03-07"
},
"49dbaa98-06ee-42bd-9a8e-834babef7a41": {
"id": "49dbaa98-06ee-42bd-9a8e-834babef7a41",
"name": "Collapsed Tab X Button",
"description": "This theme adds a close button to the collapsed tabs in Zen Browser.",
"homepage": "https://github.com/burnt0rice/zen-themes/tree/main/collapsed-tab-close-button",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/49dbaa98-06ee-42bd-9a8e-834babef7a41/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/49dbaa98-06ee-42bd-9a8e-834babef7a41/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/49dbaa98-06ee-42bd-9a8e-834babef7a41/image.png",
"author": "burnt0rice",
"version": "1.0.0",
"tags": [
"tabs"
],
"createdAt": "2024-08-31",
"updatedAt": "2025-01-26"
},
"3ff55ba7-4690-4f74-96a8-9e4416685e4e": {
"id": "3ff55ba7-4690-4f74-96a8-9e4416685e4e",
"name": "Colored container tab",
@ -1117,6 +1158,21 @@
"createdAt": "2024-12-21",
"updatedAt": "2025-01-26"
},
"2bbe4f0d-f7af-460b-86de-cda893357813": {
"id": "2bbe4f0d-f7af-460b-86de-cda893357813",
"name": "Customized Popup",
"description": "The mod changes the pop-ups to more aesthetically pleasing ones.",
"homepage": "https://github.com/paasito/Zen-Mods/tree/main/customized-popup",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2bbe4f0d-f7af-460b-86de-cda893357813/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2bbe4f0d-f7af-460b-86de-cda893357813/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2bbe4f0d-f7af-460b-86de-cda893357813/image.png",
"author": "paasito",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-26",
"updatedAt": "2025-03-31",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2bbe4f0d-f7af-460b-86de-cda893357813/preferences.json"
},
"daf345ec-9a89-4b5d-9d41-47df562e29c9": {
"id": "daf345ec-9a89-4b5d-9d41-47df562e29c9",
"name": "Secret Theme",
@ -1161,6 +1217,20 @@
"updatedAt": "2025-01-26",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d23733fa-983e-4680-8869-bf5b292d4fe6/preferences.json"
},
"8039de3b-72e1-41ea-83b3-5077cf0f98d1": {
"id": "8039de3b-72e1-41ea-83b3-5077cf0f98d1",
"name": "trackpad animation",
"description": "adds backward and forward animation for trackpad gesture",
"homepage": "https://github.com/Fury7425/zen-trackpad-gesture-animation",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/image.png",
"author": "Fury7425",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-04-08",
"updatedAt": "2025-04-09"
},
"a5f6a231-e3c8-4ce8-8a8e-3e93efd6adec": {
"id": "a5f6a231-e3c8-4ce8-8a8e-3e93efd6adec",
"name": "Cleaned URL bar",
@ -1237,20 +1307,6 @@
"createdAt": "2024-09-24",
"updatedAt": "2025-01-26"
},
"abc2d6d8-ea9c-4313-a99c-fb1e76e8b3e5": {
"id": "abc2d6d8-ea9c-4313-a99c-fb1e76e8b3e5",
"name": "Drop Shadow",
"description": "Adds a drop shadow to the website's browser panel.",
"homepage": "https://github.com/mohvn/dropshadow-zenbrowser",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/abc2d6d8-ea9c-4313-a99c-fb1e76e8b3e5/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/abc2d6d8-ea9c-4313-a99c-fb1e76e8b3e5/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/abc2d6d8-ea9c-4313-a99c-fb1e76e8b3e5/image.png",
"author": "mohvn",
"version": "1.0.2",
"tags": [],
"createdAt": "2024-09-03",
"updatedAt": "2025-01-26"
},
"cb15abdb-0514-4e09-8ce5-722cf1f4a20f": {
"id": "cb15abdb-0514-4e09-8ce5-722cf1f4a20f",
"name": "Hide Extension Name",
@ -1278,5 +1334,19 @@
"tags": [],
"createdAt": "2024-11-27",
"updatedAt": "2025-01-26"
},
"b44004bb-8465-47fb-9e20-0422ff321f0a": {
"id": "b44004bb-8465-47fb-9e20-0422ff321f0a",
"name": "Better Spacing",
"description": "Let Zen breathe with more margin on the URL bar & icons aligned with the browser window",
"homepage": "https://github.com/nalejandroveron/zen-better-spacing",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b44004bb-8465-47fb-9e20-0422ff321f0a/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b44004bb-8465-47fb-9e20-0422ff321f0a/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b44004bb-8465-47fb-9e20-0422ff321f0a/image.png",
"author": "nalejandroveron",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-20",
"updatedAt": "2025-04-09"
}
}

View file

@ -0,0 +1,688 @@
/* :root {
--console-error-color: #fff !important;
--console-error-border: #e3b2b245 !important;
--console-error-background: #e78cbf3d !important;
--theme-icon-error-color: #fff !important;
--console-warning-color: #fff !important;
--console-warning-border: #f7eacc85 !important;
--console-warning-background: #f7bb5d52 !important;
--theme-icon-warning-color: #fff !important;
.message {
padding: 4px;
border-top-color: #ffffff6b !important;
}
.message-repeats {
background-color: white !important;
color: black !important;
}
.frame-link-filename {
color: #bcbcbc !important;
}
.frame-link .frame-link-source {
color: #bcbcbc !important;
}
.ruleview-rule-source-label {
color: #c6c6c6bd !important;
}
.panel-container {
background: #6c6c6c4f !important;
border-radius: 0 0 5px 5px !important
}
.CodeMirror-line {
padding: 4px !important;
}
.network-monitor {
outline: 1px solid rgba(255, 255, 255, 0.5) !important;
border-radius: 0 0 5px 5px !important;
}
.network.message .network-info #response-panel {
height: 350px !important;
}
} */
:root.theme-dark {
--theme-tab-toolbar-background: #2a2a2c !important;
--theme-toolbar-background: #323234 !important;
--theme-selection-color: #ffffff !important;
--theme-splitter-color: rgba(0, 0, 0, 0.25) !important;
--theme-comment: #7f8c98 !important;
--test-theme-body-background: #1e1e20 !important;
--theme-sidebar-background: #252527 !important;
/* --panel-background: #303033 !important; */
--theme-body-color: #cdcdcd !important;
--theme-body-color-alt: #e0e0e0 !important;
--theme-content-color1: #f0f0f0 !important;
--theme-content-color2: #cdcdcd !important;
--theme-content-color3: #969696 !important;
--theme-border-radius: 6px !important;
--theme-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
--theme-transition-duration: 0.2s !important;
--theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !important;
--theme-selection-background: rgba(255, 255, 255, 0.07) !important;
--theme-focus-outline-color: rgba(255, 255, 255, 0.07) !important;
--theme-toolbar-hover: rgba(255, 255, 255, 0.07) !important;
--theme-toolbar-active: rgba(255, 255, 255, 0.12) !important;
--theme-highlight-blue: #82aaff !important;
--theme-highlight-purple: #c792ea !important;
--theme-highlight-pink: #ff5370 !important;
--theme-highlight-red: #f07178 !important;
--theme-highlight-orange: #f78c6c !important;
--theme-highlight-lightorange: #ffcb6b !important;
--theme-highlight-green: #c3e88d !important;
--theme-highlight-bluegrey: #89ddff !important;
--theme-highlight-yellow: #ffcb6b !important;
--console-error-color: #fff;
--console-error-border: #e3b2b245;
--console-error-background: #e78cbf3d;
--theme-icon-error-color: #fff;
--console-warning-color: #fff;
--console-warning-border: #f7eacc85;
--console-warning-background: #f7bb5d52;
--theme-icon-warning-color: #fff;
.message {
padding: 4px;
border-top-color: #ffffff6b !important;
}
.message-repeats {
background-color: white !important;
color: black !important;
}
.frame-link-filename {
color: #bcbcbc !important;
}
.frame-link .frame-link-source {
color: #bcbcbc !important;
}
.ruleview-rule-source-label {
color: #c6c6c6bd !important;
}
.panel-container {
background: #6c6c6c4f !important;
border-radius: 0 0 5px 5px !important;
}
.CodeMirror-line {
padding: 4px !important;
}
.network-monitor {
outline: 1px solid rgba(255, 255, 255, 0.5) !important;
border-radius: 0 0 5px 5px !important;
}
.network.message .network-info #response-panel {
height: 350px !important;
}
.theme-body {
background: #18181a !important;
}
.devtools-tab,
.devtools-sidebar-tabs tab {
border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0 !important;
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
padding var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
letter-spacing: 0.2px;
}
.devtools-tab.selected {
position: relative !important;
background-color: rgba(255, 255, 255, 0.07) !important;
}
.devtools-tab.selected::after {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background-color: var(--theme-highlight-blue) !important;
border-top: 0 solid transparent !important;
border-radius: 1px !important;
}
.devtools-tab:hover {
padding: 3px !important;
}
.devtools-button,
.devtools-toolbarbutton {
border-radius: 4px !important;
transition: all var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
}
.devtools-tabbar-button:hover {
background-color: var(--theme-toolbar-hover) !important;
transform: translateY(-1px) !important;
}
.devtools-tabbar-button:active {
background-color: var(--theme-toolbar-active) !important;
transform: translateY(0) !important;
}
.devtools-button:hover,
.devtools-toolbarbutton:hover {
background-color: var(--theme-toolbar-hover) !important;
transform: translateY(-1px) !important;
}
.devtools-button:active,
.devtools-toolbarbutton:active {
background-color: var(--theme-toolbar-active) !important;
transform: translateY(0) !important;
}
.devtools-container,
.devtools-sidebar,
/* .theme-panel, */
.devtools-main-content {
border-radius: var(--theme-border-radius) !important;
overflow: hidden !important;
box-shadow: var(--theme-box-shadow) !important;
}
.CodeMirror,
.inspector-tabpanel {
border-radius: var(--theme-border-radius) !important;
transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: "SF Mono", Menlo, monospace !important;
}
.tree-rows,
.devtools-list {
border-radius: var(--theme-border-radius) !important;
}
.tree-row:hover,
.devtools-list-item:hover {
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing) !important;
background-color: var(--theme-toolbar-hover) !important;
}
.devtools-separator {
opacity: 0;
}
.devtools-togglebutton {
border-block: none !important;
padding: 4px 8px !important;
border-radius: 4px !important;
border: none !important;
}
.devtools-togglebutton[aria-pressed="true"] {
background-color: #80808024 !important;
color: #fff !important;
}
.split-box.vert>.splitter {
min-width: 10px !important;
}
.split-box.horz>.splitter {
min-height: 10px !important;
}
.devtools-side-splitter {
min-width: 10px !important;
}
.devtools-tab-line {
display: none;
}
.ruleview-enableproperty {
appearance: auto !important;
margin-bottom: 2px !important;
}
.tabs .tabs-menu-item {
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), box-shadow var(--theme-transition-duration) var(--theme-transition-timing), padding var(--theme-transition-duration) var(--theme-transition-timing) !important;
}
.tabs .tabs-menu-item.is-active {
background-color: rgba(255, 255, 255, 0.07) !important;
}
.tag-line {
padding-block: 3px;
}
.theme-twisty {
opacity: 0.5 !important;
transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important;
}
.theme-twisty:hover {
opacity: 1 !important;
}
.theme-selected {
background-color: #39393b !important;
}
.ruleview-highlight {
background-color: rgb(0, 0, 0) !important;
}
.stylesheet-system.splitview-nav>li.splitview-active {
background-color: var(--theme-toolbar-active) !important;
}
.devtools-tabbar-button.checked {
color: white !important;
}
.tree-node.focused {
background-color: var(--theme-toolbar-active) !important;
}
.tree .tree-node:not(.focused):hover {
background-color: var(--theme-toolbar-active) !important;
color: white !important;
}
.source-tab::before {
background-color: unset !important;
}
.source-tab.active {
background-color: var(--theme-toolbar-active) !important;
}
.checkbox-container.menu-standard-padding {
background: #303033 !important;
border-radius: 12px !important;
}
/* .tooltip-panel {
background: transparent !important;
}
.tooltip-container.tooltip-bottom {
background: transparent !important;
}
.tooltip-arrow {
display: none !important;
} */
}
:root.theme-light {
--theme-tab-toolbar-background: #f0f0f2 !important;
--theme-toolbar-background: #e8e8ea !important;
--theme-selection-color: #000000 !important;
--theme-splitter-color: rgba(0, 0, 0, 0.15) !important;
--theme-comment: #5c6773 !important;
--test-theme-body-background: #ffffff !important;
--theme-sidebar-background: #f5f5f7 !important;
/* --panel-background: #5c6773 !important; */
--theme-body-color: #333333 !important;
--theme-body-color-alt: #202020 !important;
--theme-content-color1: #0f0f0f !important;
--theme-content-color2: #333333 !important;
--theme-content-color3: #696969 !important;
--theme-border-radius: 6px !important;
--theme-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
--theme-transition-duration: 0.2s !important;
--theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !important;
--theme-selection-background: rgba(0, 0, 0, 0.07) !important;
--theme-focus-outline-color: rgba(0, 0, 0, 0.07) !important;
--theme-toolbar-selected-color: black !important;
--theme-toolbar-hover: rgba(0, 0, 0, 0.07) !important;
--theme-toolbar-active: rgba(0, 0, 0, 0.12) !important;
--theme-highlight-blue: #1565c0 !important;
--theme-highlight-purple: #6a1b9a !important;
--theme-highlight-pink: #d81b60 !important;
--theme-highlight-red: #c62828 !important;
--theme-highlight-orange: #ef6c00 !important;
--theme-highlight-lightorange: #f57f17 !important;
--theme-highlight-green: #2e7d32 !important;
--theme-highlight-bluegrey: #0277bd !important;
--theme-highlight-yellow: #f9a825 !important;
--console-error-color: #000;
--console-error-border: #e3b2b245;
--console-error-background: #e78cbf3d;
--theme-icon-error-color: #000;
--console-warning-color: #000;
--console-warning-border: #f7eacc85;
--console-warning-background: #f7bb5d52;
--theme-icon-warning-color: #000;
.message {
padding: 4px;
border-top-color: #0000006b !important;
}
.message-repeats {
background-color: black !important;
color: white !important;
}
.frame-link-filename {
color: #4c4c4c !important;
}
.frame-link .frame-link-source {
color: #4c4c4c !important;
}
.ruleview-rule-source-label {
color: #3c3c3cbd !important;
}
.panel-container {
background: #dcdcdc4f !important;
border-radius: 0 0 5px 5px !important;
}
.CodeMirror-line {
padding: 4px !important;
}
.network-monitor {
outline: 1px solid rgba(0, 0, 0, 0.5) !important;
border-radius: 0 0 5px 5px !important;
}
.network.message .network-info #response-panel {
height: 350px !important;
}
.theme-body {
background: #ffffff !important;
}
.devtools-tab,
.devtools-sidebar-tabs tab {
border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0 !important;
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
padding var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
letter-spacing: 0.2px;
}
.devtools-tab.selected {
position: relative !important;
background-color: rgba(0, 0, 0, 0.07) !important;
}
.devtools-tab.selected::after {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background-color: var(--theme-highlight-blue) !important;
border-top: 0 solid transparent !important;
border-radius: 1px !important;
}
.devtools-tab:hover {
padding: 3px !important;
}
.devtools-button,
.devtools-toolbarbutton {
border-radius: 4px !important;
transition: all var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
}
.devtools-tabbar-button:hover {
background-color: var(--theme-toolbar-hover) !important;
transform: translateY(-1px) !important;
}
.devtools-tabbar-button:active {
background-color: var(--theme-toolbar-active) !important;
transform: translateY(0) !important;
}
.devtools-button:hover,
.devtools-toolbarbutton:hover {
background-color: var(--theme-toolbar-hover) !important;
transform: translateY(-1px) !important;
}
.devtools-button:active,
.devtools-toolbarbutton:active {
background-color: var(--theme-toolbar-active) !important;
transform: translateY(0) !important;
}
.devtools-container,
.devtools-sidebar,
/* .theme-panel, */
.devtools-main-content {
border-radius: var(--theme-border-radius) !important;
overflow: hidden !important;
box-shadow: var(--theme-box-shadow) !important;
}
.CodeMirror,
.inspector-tabpanel {
border-radius: var(--theme-border-radius) !important;
transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important;
font-family: "SF Mono", Menlo, monospace !important;
}
.tree-rows,
.devtools-list {
border-radius: var(--theme-border-radius) !important;
}
.tree-row:hover,
.devtools-list-item:hover {
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing) !important;
background-color: var(--theme-toolbar-hover) !important;
}
.devtools-separator {
opacity: 0;
}
.devtools-togglebutton {
border-block: none !important;
padding: 4px 8px !important;
border-radius: 4px !important;
border: none !important;
}
.devtools-togglebutton[aria-pressed="true"] {
background-color: rgba(0, 0, 0, 0.14) !important;
color: #000 !important;
}
.split-box.vert>.splitter {
min-width: 10px !important;
}
.split-box.horz>.splitter {
min-height: 10px !important;
}
.devtools-side-splitter {
min-width: 10px !important;
}
.devtools-tab-line {
display: none;
}
.ruleview-enableproperty {
appearance: auto !important;
margin-bottom: 2px !important;
}
.tabs .tabs-menu-item {
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), box-shadow var(--theme-transition-duration) var(--theme-transition-timing), padding var(--theme-transition-duration) var(--theme-transition-timing) !important;
}
.tabs .tabs-menu-item.is-active {
background-color: rgba(0, 0, 0, 0.07) !important;
}
.tag-line {
padding-block: 3px;
}
.theme-twisty {
opacity: 0.5 !important;
transition: opacity var(--theme-transition-duration) var(--theme-transition-timing) !important;
}
.theme-twisty:hover {
opacity: 1 !important;
}
.theme-selected {
background-color: #e0e0e2 !important;
}
.ruleview-highlight {
background-color: rgba(255, 217, 15, 0.59) !important;
}
.stylesheet-system.splitview-nav>li.splitview-active {
background-color: var(--theme-toolbar-active) !important;
}
.devtools-tabbar-button.checked {
color: black !important;
}
.tree-node.focused {
background-color: var(--theme-toolbar-active) !important;
}
.tree .tree-node:not(.focused):hover {
background-color: var(--theme-toolbar-active) !important;
color: black !important;
}
.source-tab::before {
background-color: unset !important;
}
.source-tab.active {
background-color: var(--theme-toolbar-active) !important;
}
.checkbox-container.menu-standard-padding {
background: #f0f0f2 !important;
border-radius: 12px !important;
}
/* .tooltip-panel {
background: transparent !important;
}
.tooltip-container.tooltip-bottom {
background: transparent !important;
}
.tooltip-arrow {
display: none !important;
} */
}
.tooltip-container,
.devtools-tooltip {
box-shadow: var(--theme-box-shadow) !important;
animation: tooltipFade 0.2s var(--theme-transition-timing) !important;
font-family: var(--theme-font-family);
}
@keyframes tooltipFade {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#toolbox-close {
position: relative;
}
#toolbox-close::before {
content: "";
background-image: url("chrome://devtools/skin/images/close.svg");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 24px;
height: 24px;
opacity: 1;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
}
#toolbox-close::after {
content: "👋";
font-family: 24px !important;
display: inline-block;
opacity: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 20px;
}
#toolbox-close:hover::before {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
#toolbox-close:hover::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

View file

@ -0,0 +1,32 @@
# Firefox DevTools Minimalist Theme
A revitalized, minimalist theme for Firefox DevTools, inspired by Zen's design. Includes CSS transitions and supports both light and dark modes.
## Preview
Here's a quick look at the theme:
![Merged Screenshot](https://github.com/ArjiAmin/firefox-devtools/blob/main/images/screenshot_0_merged.png)
## Installation
1. Download or clone the repository.
2. In Firefox/Zen browser, navigate to `about:config`, accept the risk warning, and search for `toolkit.legacyUserProfileCustomizations.stylesheets`. Ensure it's set to **true** (this should be the default in Zen).
3. Navigate to `about:profiles` in your browser.
4. Locate the section that says "This is the profile in use and it cannot be deleted." Find the "Root Directory" and click the **Open Folder** button.
5. Navigate to the `chrome` folder and paste the downloaded `UserContent.css` file.
6. Return to `about:profiles` and click "Restart normally...". After restart, open DevTools to see the applied theme.
## Development
If you want to customize the theme or make your own changes:
1. Open DevTools by pressing `F12`.
2. Click the three horizontal dots in the top-right corner to access Settings, or press F1.
3. Scroll down to "Advanced settings" and enable the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" checkboxes.
4. Close and reopen DevTools.
5. Press `Ctrl + Shift + Alt + I` to open the Browser Toolbox, which allows you to inspect the DevTools interface itself.
6. Use the element inspector to identify elements you want to modify and test CSS changes in real-time.
**Note:** Changes made directly in the Browser Toolbox are temporary. To make permanent changes, update your `UserContent.css` file with your modifications. Remember that changes to `UserContent.css` require a browser restart to take effect.

View file

@ -0,0 +1,14 @@
{
"id": "0d218357-d5be-48f1-bbc0-5e7cb2d2e11f",
"name": "Revitalized devtools",
"description": "A calmer theme for Zen's DevTools with added transitions and compatible white/dark modes.",
"homepage": "https://github.com/ArjiAmin/firefox-devtools",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/0d218357-d5be-48f1-bbc0-5e7cb2d2e11f/image.png",
"author": "ArjiAmin",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-30",
"updatedAt": "2025-03-31"
}

View file

@ -0,0 +1,15 @@
/**
* Zen Mod: Right Side Glance Buttons
* Move the at a glance buttons to the right side of the window.
* Pontus Sundén <hi@pontus.cc>
*/
#zen-glance-sidebar-container {
left: unset !important;
right: 6% !important;
top: 60px !important;
toolbarbutton {
box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.07) !important;
border: rgba(180, 180, 180, 0.2) 0.2px solid;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

View file

@ -0,0 +1,8 @@
# Zen Mod: Right Side Glance Buttons
Move the at a glance buttons to the right side of the window.
![screenshot](./glance-buttons-right.png)
[Source code at GitHub](https://github.com/psu/zen-mods)

View file

@ -0,0 +1,14 @@
{
"id": "20e8cc78-3dac-4db0-81a4-814672fb50af",
"name": "Right Side Glance Buttons",
"description": "Move the at a glance buttons to the right side of the window.",
"homepage": "https://github.com/psu/zen-mods",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/20e8cc78-3dac-4db0-81a4-814672fb50af/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/20e8cc78-3dac-4db0-81a4-814672fb50af/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/20e8cc78-3dac-4db0-81a4-814672fb50af/image.png",
"author": "psu",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-28",
"updatedAt": "2025-03-31"
}

View file

@ -0,0 +1,92 @@
@-moz-document url-prefix("chrome:") {
/* Gradient background variant */
:root:has(#theme-Customized-Popup[uc-customized_popup-background="gradient"]) {
menupopup,
panel {
--panel-background: var(--zen-main-browser-background-toolbar) !important;
}
}
/* Solid background variant */
:root:has(#theme-Customized-Popup[uc-customized_popup-background="solid"]) {
menupopup,
panel {
--panel-background: color-mix(
in srgb,
var(--zen-primary-color) 30%,
var(--zen-dark-color-mix-base) 100%
) !important;
}
}
/* Scrollbox styling */
arrowscrollbox {
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2) !important;
}
/* Styling for customized popups */
:root:has(#theme-Customized-Popup:not([uc-customized_popup-background="none"])) {
panel > * {
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5) !important;
}
menu,
menuitem {
&:where([_moz-menuactive="true"][disabled="true"]) {
background-color: transparent !important;
}
}
panel {
--zen-colors-tertiary: #0000002b !important;
--input-bgcolor: #0000002b !important;
}
}
:where(#customizationui-widget-multiview) panelview:not([extension]) {
height: 50vh !important;
max-width: 20em !important;
}
/* MENU SEPARATORS */
menuseparator::before {
border-top: none !important;
}
menuseparator {
padding-block: 0px !important;
}
/* DOWNLOADS PANEL */
#emptyDownloads {
padding: 8px !important;
}
#downloadsFooterButtons toolbarseparator {
display: none !important;
}
.downloadButton {
min-width: fit-content !important;
padding: 5px !important;
}
.downloadTypeIcon {
width: 24px !important;
height: auto !important;
}
#downloadsListBox {
width: 25em !important;
}
#downloadsPanel-blockedSubview,
#downloadsPanel-mainView {
min-width: 25em !important;
}
#downloadsListBox > richlistitem {
margin: 0 !important;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

View file

@ -0,0 +1,18 @@
[
{
"property": "uc.customized_popup.background",
"label": "Background style:",
"type": "dropdown",
"defaultValue": "gradient",
"options": [
{
"label": "Gradient",
"value": "gradient"
},
{
"label": "Solid",
"value": "solid"
}
]
}
]

View file

@ -0,0 +1,2 @@
The mod changes the pop-ups to more aesthetically pleasing ones.

View file

@ -0,0 +1,15 @@
{
"id": "2bbe4f0d-f7af-460b-86de-cda893357813",
"name": "Customized Popup",
"description": "The mod changes the pop-ups to more aesthetically pleasing ones.",
"homepage": "https://github.com/paasito/Zen-Mods/tree/main/customized-popup",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2bbe4f0d-f7af-460b-86de-cda893357813/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2bbe4f0d-f7af-460b-86de-cda893357813/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2bbe4f0d-f7af-460b-86de-cda893357813/image.png",
"author": "paasito",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-26",
"updatedAt": "2025-03-31",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2bbe4f0d-f7af-460b-86de-cda893357813/preferences.json"
}

View file

@ -1,4 +1,4 @@
# Vertical Tab Groups
# Vertical Split Tab Groups
Display tab groups vertically so you can still read the page names.
Display tab groups created from split tabs as vertical lists instead of horizontal ones.

View file

@ -1,8 +1,8 @@
{
"id": "4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827",
"name": "Vertical Split Views",
"description": "Display tab groups vertically so you can still read the page names",
"homepage": "https://github.com/ToBinio/zen-mods/tree/main/vertical-tab-groups",
"name": "Vertical Split Tab Groups",
"description": "Display tab groups created from split tabs as vertical lists instead of horizontal ones.",
"homepage": "https://github.com/ToBinio/zen-mods/tree/main/vertical-split-tab-groups",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4c2bec61-7f6c-4e5c-bdc6-c9ad1aba1827/image.png",
@ -10,5 +10,5 @@
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-11",
"updatedAt": "2025-03-12"
"updatedAt": "2025-03-31"
}

View file

@ -33,6 +33,17 @@
visibility: collapse !important;
}
@media (-moz-bool-pref: "theme.zen-minimal-exit-menu.enable-icon-visibility"){
.titlebar-button > image {
visibility: visible !important;
max-height: 8px !important;
max-width: 8px !important;
position: relative !important;
left: 2.55px !important;
filter: brightness(0) !important;
}
}
@media (-moz-bool-pref: "theme.zen-minimal-exit-menu.enable-macos-identic") {
.titlebar-button:hover {
opacity: 0.25 !important;
@ -45,11 +56,11 @@
}
.titlebar-min:hover {
background-color: hsl(130, 50%, 40%) !important;
background-color: hsl(60, 50%, 50%) !important;
}
.titlebar-max:hover, .titlebar-restore:hover {
background-color: hsl(60, 50%, 50%) !important;
background-color: hsl(130, 50%, 40%) !important;
}
.titlebar-close:hover {

View file

@ -7,5 +7,11 @@
"macos"
],
"type": "checkbox"
},
{
"property": "theme.zen-minimal-exit-menu.enable-icon-visibility",
"label": "Shows the window icons.",
"defaultValue": "false",
"type": "checkbox"
}
]

View file

@ -8,8 +8,8 @@
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6cd4bca9-f17d-4461-b554-844d69a4887c/image.png",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6cd4bca9-f17d-4461-b554-844d69a4887c/preferences.json",
"author": "Dinno-DEV",
"version": "1.0.4",
"version": "1.0.5",
"tags": [],
"createdAt": "2024-09-19",
"updatedAt": "2025-03-07"
"updatedAt": "2025-04-09"
}

View file

@ -0,0 +1,34 @@
/**
* Zen Mod: Tab title fixes
* Increase size of tab titles and add make pending tabs standing out more.
* Pontus Sundén <hi@pontus.cc>
*/
:root {
/**
--psu-tab_title_fixes-font_size: 13px;
--psu-tab_title_fixes-pending_opacity: 0.55;
/**/
}
#tabbrowser-tabs {
.tabbrowser-tab {
#tab-label-input,
.tab-label {
font-size: var(--psu-tab_title_fixes-font_size) !important;
}
.tab-icon-image,
.tab-label-container {
&:not([selected], [multiselected]) {
opacity: calc(var(--psu-tab_title_fixes-pending_opacity) + 0.3) !important;
}
}
@media (-moz-bool-pref: 'zen.tabs.dim-pending') {
&[pending='true'] {
.tab-icon-image,
.tab-label-container:not([selected], [multiselected]) {
opacity: var(--psu-tab_title_fixes-pending_opacity) !important;
}
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 KiB

View file

@ -0,0 +1,16 @@
[
{
"label": "Tab Name Font Size",
"defaultValue": "13px",
"placeholder": "11px",
"property": "psu.tab_title_fixes.font_size",
"type": "string"
},
{
"label": "Icon and Name Opacity for Tabs not Loaded",
"defaultValue": "0.55",
"placeholder": "1",
"property": "psu.tab_title_fixes.pending_opacity",
"type": "string"
}
]

View file

@ -0,0 +1,8 @@
# Zen Mod: Tab title fixes
Increase size of tab titles and add make pending tabs standing out more.
![screenshot](./tab-title-fix.png)
[Source code at GitHub](https://github.com/psu/zen-mods)

View file

@ -0,0 +1,15 @@
{
"id": "7190e4e9-bead-4b40-8f57-95d852ddc941",
"name": "Tab title fixes",
"description": "Increase size of tab titles and add make pending tabs standing out more.",
"homepage": "https://github.com/psu/zen-mods",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7190e4e9-bead-4b40-8f57-95d852ddc941/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7190e4e9-bead-4b40-8f57-95d852ddc941/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7190e4e9-bead-4b40-8f57-95d852ddc941/image.png",
"author": "psu",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-28",
"updatedAt": "2025-03-31",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/7190e4e9-bead-4b40-8f57-95d852ddc941/preferences.json"
}

View file

@ -0,0 +1,90 @@
/**
* Zen Mod: Better CtrlTab Panel
* Re-style and add customization options for the Ctrl+Tab panel.
* Pontus Sundén <hi@pontus.cc>
*/
:root {
/**
--psu-better_ctrltab-width: 75vw;
--psu-better_ctrltab-background: light-dark(rgba(144, 144, 144, 0.94), rgba(22, 22, 22, 0.92));
--psu-better_ctrltab-roundness: 32px;
--psu-better_ctrltab-padding: 16px;
--psu-better_ctrltab-shadow_size: 18px;
--psu-better_ctrltab-preview_border_width: 1px;
--psu-better_ctrltab-preview_border_color: light-dark(rgba(255, 255, 255, 0.1), rgba(1, 1, 1, 0.1));
--psu-better_ctrltab-preview_focus_background: light-dark(rgba(77, 77, 77, 0.8), rgba(204, 204, 204, 0.33));
--psu-better_ctrltab-preview_focus_border_color: light-dark(rgba(255, 255, 255, 0.1), rgba(1, 1, 1, 0.1));
--psu-better_ctrltab-preview_font_size: 13px;
--psu-better_ctrltab-preview_letter_spacing: 0px;
--psu-better_ctrltab-preview_favicon_size: 18px;
/**/
--psu-better_ctrltab-preview_count: 7;
--psu-better_ctrltab-space: calc(var(--psu-better_ctrltab-padding) + var(--psu-better_ctrltab-preview_border_width));
--psu-better_ctrltab-innerspace: calc(var(--psu-better_ctrltab-space) * 0.75);
}
#ctrlTab-panel {
position: absolute !important;
margin-left: calc(calc(calc(100vw - var(--psu-better_ctrltab-width)) * 0.5) - calc(var(--psu-better_ctrltab-shadow_size) * 0.5)) !important;
width: calc(var(--psu-better_ctrltab-width) + 2px) !important;
--panel-background: var(--psu-better_ctrltab-background) !important;
--panel-border-radius: calc(var(--psu-better_ctrltab-roundness) * 1) !important;
--panel-shadow: calc(var(--psu-better_ctrltab-shadow_size) * 0.1) calc(var(--psu-better_ctrltab-shadow_size) * 0.1) var(--psu-better_ctrltab-shadow_size)
calc(var(--psu-better_ctrltab-shadow_size) * 0.3) rgba(1, 1, 1, 0.25) !important;
--panel-shadow-margin: calc(var(--psu-better_ctrltab-shadow_size) * 1.5) !important;
--panel-padding: 0 var(--psu-better_ctrltab-padding) !important;
.ctrlTab-preview {
margin: 0 !important;
padding: var(--psu-better_ctrltab-padding) !important;
.ctrlTab-preview-inner {
border-radius: calc(var(--psu-better_ctrltab-roundness) * 0.6) !important;
border: 0 !important;
margin: 0 !important;
padding: var(--psu-better_ctrltab-innerspace) !important;
padding-bottom: calc(var(--psu-better_ctrltab-innerspace) * 0.9) !important;
}
&:focus {
.ctrlTab-preview-inner {
background: var(--psu-better_ctrltab-preview_focus_background) !important;
}
.ctrlTab-canvas {
box-shadow: 0px 0px 0px var(--psu-better_ctrltab-preview_border_width) var(--psu-better_ctrltab-preview_focus_border_color) !important;
}
}
}
.ctrlTab-canvas {
--width_raw: calc(calc(var(--psu-better_ctrltab-width) / var(--psu-better_ctrltab-preview_count)) - calc(calc(var(--psu-better_ctrltab-space) * 0.7) + 10px));
--width: calc(var(--width_raw) - calc(var(--psu-better_ctrltab-space) * 1.5));
--height: calc(var(--width) * 0.67);
min-width: var(--width) !important;
max-width: var(--width) !important;
min-height: var(--height) !important;
max-height: var(--height) !important;
box-shadow: 0px 0px 0px var(--psu-better_ctrltab-preview_border_width) var(--psu-better_ctrltab-preview_border_color) !important;
}
.ctrlTab-canvas,
img,
canvas {
border-radius: calc(var(--psu-better_ctrltab-roundness) * 0.45) !important;
}
.ctrlTab-label {
text-shadow: 0.5px 0.5px 0px light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
font-size: var(--psu-better_ctrltab-preview_font_size);
margin: calc(var(--psu-better_ctrltab-innerspace) - calc(var(--psu-better_ctrltab-preview_font_size) * 0.85)) -2px calc(var(--psu-better_ctrltab-preview_font_size) * -0.15) -1px !important;
padding: 0 !important;
letter-spacing: var(--psu-better_ctrltab-preview_letter_spacing) !important;
}
.ctrlTab-favicon-container image {
height: var(--psu-better_ctrltab-preview_favicon_size) !important;
width: var(--psu-better_ctrltab-preview_favicon_size) !important;
background: none !important;
padding: 0 !important;
margin-right: calc(var(--psu-better_ctrltab-preview_favicon_size) * -0.33) !important;
margin-top: calc(calc(var(--psu-better_ctrltab-preview_favicon_size) * -1.3) + calc(var(--psu-better_ctrltab-preview_favicon_size) * 0.15)) !important;
box-shadow: none !important;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

View file

@ -0,0 +1,86 @@
[
{
"label": "General - Padding",
"defaultValue": "16px",
"placeholder": "20px",
"property": "psu.better_ctrltab.padding",
"type": "string"
},
{
"label": "General - Corners Roundness",
"defaultValue": "28px",
"placeholder": "5px",
"property": "psu.better_ctrltab.roundness",
"type": "string"
},
{
"label": "Panel - Width",
"defaultValue": "85vw",
"placeholder": "100vw",
"property": "psu.better_ctrltab.width",
"type": "string"
},
{
"label": "Panel - Background",
"defaultValue": "light-dark(rgba(144, 144, 144, 0.94), rgba(22, 22, 22, 0.92))",
"placeholder": "light-dark(rgba(144,144,144,0.96), rgba(99,99,99,0.96))",
"property": "psu.better_ctrltab.background",
"type": "string"
},
{
"label": "Panel - Shadow Size",
"defaultValue": "18px",
"placeholder": "10px",
"property": "psu.better_ctrltab.shadow_size",
"type": "string"
},
{
"label": "Focused Item - Background",
"defaultValue": "light-dark(rgba(77, 77, 77, 0.8), rgba(204, 204, 204, 0.33))",
"placeholder": "light-dark(rgba(77,77,77,0.8), rgba(1,1,1,0.6))",
"property": "psu.better_ctrltab.preview_focus_background",
"type": "string"
},
{
"label": "Focused Item - Border Color",
"defaultValue": "light-dark(rgba(255, 255, 255, 0.1), rgba(1, 1, 1, 0.1))",
"placeholder": "light-dark(rgba(200,200,200,0.1), rgba(77,77,77,0.5))",
"property": "psu.better_ctrltab.preview_focus_border_color",
"type": "string"
},
{
"label": "Item - Border Color",
"defaultValue": "light-dark(rgba(255, 255, 255, 0.1), rgba(1, 1, 1, 0.1))",
"placeholder": "light-dark(rgba(255,255,255,0.1), rgba(88,88,88,0.6))",
"property": "psu.better_ctrltab.preview_border_color",
"type": "string"
},
{
"label": "Item - Border Width",
"defaultValue": "1px",
"placeholder": "2px",
"property": "psu.better_ctrltab.preview_border_width",
"type": "string"
},
{
"label": "Item - Label Font Size",
"defaultValue": "13px",
"placeholder": "11px",
"property": "psu.better_ctrltab.preview_font_size",
"type": "string"
},
{
"label": "Item - Favicon Size",
"defaultValue": "18px",
"placeholder": "40px",
"property": "psu.better_ctrltab.preview_favicon_size",
"type": "string"
},
{
"label": "Item - Label Letter Spacing",
"defaultValue": "0px",
"placeholder": "0px",
"property": "psu.better_ctrltab.preview_letter_spacing",
"type": "string"
}
]

View file

@ -0,0 +1,8 @@
# Zen Mod: Better CtrlTab Panel
Re-style and add customization options for the CtrlTab panel.
![screenshot](./better-ctrltab-panel.png)
[Source code at GitHub](https://github.com/psu/zen-mods)

View file

@ -0,0 +1,15 @@
{
"id": "72f8f48d-86b9-4487-acea-eb4977b18f21",
"name": "Better CtrlTab Panel",
"description": "Re-style and add customization options for the CtrlTab panel.",
"homepage": "https://github.com/psu/zen-mods",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/image.png",
"author": "psu",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-28",
"updatedAt": "2025-04-09",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json"
}

View file

@ -0,0 +1,105 @@
/* These are for the popups */
menupopup, panel {
&::part(content) {
display: flex;
box-sizing: border-box;
padding: 6px !important;
color: var(--panel-color);
/*
background: var(--panel-background);
*/
border-radius: 15px;
border: 2px solid color-mix(in hsl,var(--panel-border-color), transparent 70%);
width: var(--panel-width);
box-shadow: var(--panel-shadow);
margin: var(--panel-shadow-margin);
min-width: 0;
min-height: 0;
max-height: round(up, 100% - 2 * var(--panel-shadow-margin), 1px);
max-width: round(up, 100% - 2 * var(--panel-shadow-margin), 1px);
overflow: clip;
scrollbar-color: transparent !important;
}
}
panel toolbarseparator {
appearance: none;
min-height: 0;
border-top: 3px solid color-mix(in hsl,var(--panel-border-color), transparent 100%);
margin: 8px 4px;
padding: 0;
}
:is(panelview .toolbarbutton-1, toolbarbutton.subviewbutton, .widget-overflow-list .toolbarbutton-1, .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton) {
&:not([disabled]) {
padding: 5px 10px !important;
border-radius: 8px !important;
}
}
@media (-moz-bool-pref: "mod.tidypopup.usecustomhovercolor") {
:is(panelview .toolbarbutton-1, toolbarbutton.subviewbutton, .widget-overflow-list .toolbarbutton-1, .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton) {
&:not([disabled]):hover {
background-color: var(--mod-tidypopup-hovercolor);
}
}
}
@media not (-moz-bool-pref: "mod.tidypopup.usecustomhovercolor") {
:is(panelview .toolbarbutton-1, toolbarbutton.subviewbutton, .widget-overflow-list .toolbarbutton-1, .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton) {
&:not([disabled]):hover {
background-color: rgba(80, 80, 250, 1);
}
}
}
#appMenu-zoom-controls {
border-top: 3px solid color-mix(in hsl,var(--panel-border-color), transparent 100%);
padding-top: 12px !important;
padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline);
padding-block: var(--uc-panel-zoom-padding-block);
margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1);
}
#appMenu-zoom-controls > #appMenu-fullscreen-button2::before {
border-inline-start: 3px none color-mix(in hsl,var(--panel-border-color), transparent 100%);
}
menu, menuitem, menucaption {
border-radius: 8px !important;
padding: 5px 10px !important;
margin: 2px !important;
border-radius: 8px !important;
}
@media (-moz-bool-pref: "mod.tidypopup.usecustomhovercolor"){
menu, menuitem, menucaption {
&:not([disabled]):hover {
background-color: var(--mod-tidypopup-hovercolor);
}
}
}
@media not (-moz-bool-pref: "mod.tidypopup.usecustomhovercolor"){
menu, menuitem, menucaption {
&:not([disabled]):hover {
background-color: rgba(80, 80, 250, 1);
}
}
}
menuseparator::before {
border-top: 3px solid color-mix(in hsl,var(--panel-border-color), transparent 100%);
}
.panel-view-body-unscrollable {
border-radius: 8px !important;
background: var(--button-background-color-hover) !important;
align-items: center;
padding: 3px !important;
}
.downloadMainArea {
padding-left: 10px !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View file

@ -0,0 +1,14 @@
[
{
"property": "mod.tidypopup.usecustomhovercolor",
"label": "Use custom hover color",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.tidypopup.hovercolor",
"label": "Button color when hovered",
"type": "string",
"defaultValue": "rgba(80, 80, 250, 1)"
}
]

View file

@ -0,0 +1,5 @@
# Zen Tidy Popup
Modifies popup panels, changing divider lines with empty spacer, and makes the button more compact.
There is an option for custom hover color for the buttons. You need to check the box and enter the custom color in rgba, hsla, or hex format.

View file

@ -0,0 +1,15 @@
{
"id": "79dde383-4fe7-404a-a8e6-9be440022542",
"name": "Tidy Popup",
"description": "Modifies popup panels, changing divider lines with empty spacer, and makes the button more compact.",
"homepage": "https://github.com/Dinno-DEV/zen-tidy-popup",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/79dde383-4fe7-404a-a8e6-9be440022542/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/79dde383-4fe7-404a-a8e6-9be440022542/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/79dde383-4fe7-404a-a8e6-9be440022542/image.png",
"author": "Dinno-DEV",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-02-26",
"updatedAt": "2025-03-31",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/79dde383-4fe7-404a-a8e6-9be440022542/preferences.json"
}

View file

@ -0,0 +1,21 @@
.browserStack browser {
transition: transform 0.22s cubic-bezier(0.3, 1.2, 0.5, 1) !important;
}
.browserStack:has(#historySwipeAnimationPreviousArrow:not([style="translate: none;"]))
browser {
scale: 0.95 !important;
transform: translateX(4%) !important;
}
.browserStack:has(#historySwipeAnimationNextArrow:not([style="translate: none;"]))
browser {
scale: 0.95 !important;
transform: translateX(-4%) !important;
}
.browserStack browser:not(:has(#historySwipeAnimationPreviousArrow, #historySwipeAnimationNextArrow)) {
transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.3, 1) !important;
transform: translateX(0) !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

View file

@ -0,0 +1,2 @@
made it for an extra animation when using a trackpad.

View file

@ -0,0 +1,14 @@
{
"id": "8039de3b-72e1-41ea-83b3-5077cf0f98d1",
"name": "trackpad animation",
"description": "adds backward and forward animation for trackpad gesture",
"homepage": "https://github.com/Fury7425/zen-trackpad-gesture-animation",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/image.png",
"author": "Fury7425",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-04-08",
"updatedAt": "2025-04-09"
}

View file

@ -0,0 +1,25 @@
:root:not([zen-single-toolbar="true"]) #nav-bar {
margin: 0.4rem 0;
margin-bottom: 0.4rem !important;
}
:root:not([zen-single-toolbar="true"]):not([zen-compact-mode="true"]) #TabsToolbar-customization-target {
margin-top: 0.8rem;
}
:root:not([zen-single-toolbar="true"]) #PersonalToolbar:not([collapsed="true"]) {
margin-bottom: 0.2rem;
}
:root[zen-single-toolbar="true"] #PersonalToolbar:not([collapsed="true"]) {
margin: 0.2rem 0;
}
:root:not([zen-compact-mode="true"])[zen-sidebar-expanded="true"] #zen-sidebar-bottom-buttons {
margin-bottom: 0.3rem;
}
:root:not([zen-compact-mode="true"]):not([zen-sidebar-expanded="true"]) #zen-sidebar-bottom-buttons {
margin-bottom: 1rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

View file

@ -0,0 +1,7 @@
# Zen Better Spacing
Let Zen breathe with this mod that adds the following changes:
- More margin on the URL bar for two toolbars setting.
- Sidebar icons aligned with the browser window.

View file

@ -0,0 +1,14 @@
{
"id": "b44004bb-8465-47fb-9e20-0422ff321f0a",
"name": "Better Spacing",
"description": "Let Zen breathe with more margin on the URL bar & icons aligned with the browser window",
"homepage": "https://github.com/nalejandroveron/zen-better-spacing",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b44004bb-8465-47fb-9e20-0422ff321f0a/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b44004bb-8465-47fb-9e20-0422ff321f0a/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/b44004bb-8465-47fb-9e20-0422ff321f0a/image.png",
"author": "nalejandroveron",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-20",
"updatedAt": "2025-04-09"
}

View file

@ -1,180 +1,118 @@
:root:has(#customization-container) {
:root:has(#customization-container:not([hidden])) {
/* Show flexible space in customiation mode in top buttons, since this mod allows them there */
#zen-sidebar-top-buttons-customization-target toolbarspring {
display: flex !important;
}
}
/* Compact mode detection changed, so it got moved here */
:root:not([zen-compact-mode="true"]):has(#navigator-toolbox:not([zen-sidebar-expanded="true"])) {
:root:not([zen-compact-mode="true"], :has(#customization-container:not([hidden]))) {
--tab-min-width: calc(36px) !important;
--zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px) !important;
--zen-toolbox-max-width: calc(var(--tab-min-width) + var(--tab-block-margin) + var(--zen-toolbox-padding) * 2) !important;
--zen-toolbox-min-width: 1px !important;
--zen-sidebar-width: var(--zen-toolbox-max-width) !important;
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
#zen-current-workspace-indicator-container {
display: none !important;
}
}
#zen-sidebar-splitter {
display: none !important;
}
/* Change tab shape to square when collapsed */
tab:not([zen-essential]) .tab-background {
min-width: var(--tab-min-width) !important;
}
/* Center tab icon */
.tab-icon-stack > .tab-icon-image {
margin-inline-start: calc(calc(var(--tab-min-width) + var(--tab-block-margin) * 2 - var(--tab-inline-padding) * 2 - 16px) / 2) !important;
}
/* Same design as tabs for New Tab button and other toolbarbuttons */
#TabsToolbar-customization-target toolbarbutton {
margin: var(--tab-block-margin) !important;
padding: 0 calc(var(--tab-inline-padding) - var(--tab-block-margin)) !important;
justify-content: flex-start !important;
& > .toolbarbutton-icon {
margin-inline-start: calc(calc(var(--tab-min-width) + var(--tab-block-margin) * 2 - var(--tab-inline-padding) * 2 - 16px) / 2) !important;
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
}
& > .toolbarbutton-text {
padding: 0 !important;
align-items: center !important;
}
}
/* Stop New Tab button from increasing the width */
.zen-workspace-tabs-section {
width: calc(var(--tab-min-width) + var(--tab-block-margin)) !important;
}
tab[pinned]:not([zen-essential]) > stack {
--tab-inline-padding: 8px !important;
& > .tab-content {
padding: 0 var(--tab-inline-padding) !important;
min-width: 0 !important;
justify-content: unset !important;
}
}
@media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) {
#navigator-toolbox {
margin-top: var(--zen-toolbar-height) !important;
}
#browser:has(#PersonalToolbar[collapsed=false]) #navigator-toolbox {
margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
}
}
/* Move topbar buttons in the now empty space */
@media (not (-moz-platform: macos)) {
@media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) and (not (-moz-platform: macos)) {
#browser:has(#navigator-toolbox:not([zen-right-side="true"])) {
#zen-appcontent-wrapper {
overflow: visible !important;
#zen-appcontent-navbar-container:has(#nav-bar>.titlebar-buttonbox-container:last-child) {
margin-left: calc(0px - var(--zen-toolbox-max-width)) !important;
padding-left: var(--zen-element-separation);
#nav-bar-customization-target>toolbarbutton:first-child {
padding-inline-start: var(--toolbarbutton-outer-padding) !important;
#nav-bar {
margin-inline-start: var(--zen-element-separation);
}
}
}
}
}
#navigator-toolbox {
margin-top: var(--zen-toolbar-height) !important;
}
#browser:has(#PersonalToolbar[collapsed=false]) #navigator-toolbox {
margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
}
}
/* only use mod in collapsed toolbar mode */
:root:has(#navigator-toolbox:not([zen-sidebar-expanded="true"])) {
/* Width of the collapsed sidebar */
--zen-toolbox-max-width: 44px !important;
/* For automatic tab icon centering? */
--tab-collapsed-width: var(--zen-toolbox-max-width) !important;
#navigator-toolbox {
z-index: 4 !important;
}
@media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
#navigator-toolbox {
margin-top: var(--zen-toolbar-height) !important;
}
#browser:has(#PersonalToolbar[collapsed=false]) #navigator-toolbox {
margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
}
}
/* In compact mode (with topbar hidden) the topbar should be above the sidebar when hovered, while the sidebar should be above the page, doesn't work well with transitions but z-index is weird :c */
#browser:has(#zen-appcontent-navbar-container[zen-has-hover]) #navigator-toolbox {
z-index: 3 !important;
}
#PersonalToolbar[collapsed=false] {
height: 2.2em !important;
}
#tabbrowser-tabs {
& .tabbrowser-tab {
&[pinned] .tab-close-button {
display: none !important;
}
&[pinned]:not([zen-essential]):hover .tab-reset-button,
&[pinned][visuallyselected]:not([zen-essential]) .tab-reset-button {
display: block !important;
}
&:not([pinned]):hover .tab-close-button,
&[visuallyselected]:not([pinned]) .tab-close-button {
display: block !important;
}
&[zen-essential] {
margin: 0 !important;
--tab-min-height: 44px;
}
&:not([zen-essential]) {
width: 100% !important;
margin: 0 !important;
.tab-content {
justify-content: space-between !important;
padding: 0 var(--tab-inline-padding) !important;
gap: var(--tab-inline-padding);
width: 100% !important;
align-items: center !important;
}
.tab-label-container {
display: inline-block !important;
}
.tab-content {
min-width: 0 !important;
}
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.default_tab_background_shape") {
.tab-background {
width: 100% !important;
transform: translateX(2px) !important;
border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium) !important;
}
}
}
border-radius: 8px !important;
overflow: hidden !important;
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.default_tab_background_shape") {
border-radius: 0 !important;
}
}
}
#zen-essentials-container {
width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
justify-content: unset !important;
}
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
#zen-current-workspace-indicator {
display: none !important;
}
}
#titlebar {
width: var(--zen-toolbox-max-width) !important;
transition: var(--theme-sidebar_expand_on_hover-transition_speed) width cubic-bezier(.24, -0.01, .58, 1) !important;
overflow: clip;
position: relative;
/* Ensure rounded corners */
border-radius: 8px !important;
/* Ensure child elements don't overflow */
overflow: hidden !important;
}
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;
position: relative !important;
#navigator-toolbox[zen-right-side="true"] {
direction: rtl !important;
#titlebar {
direction: ltr !important;
}
}
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.inverted_tabs") {
.tabbrowser-tab {
direction: rtl !important;
}
}
#vertical-pinned-tabs-container:has(tab:not([hidden])) {
& .tabbrowser-tab {
max-width: unset !important;
}
}
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.custom_background") {
#titlebar::before {
/*
I have no idea how to replicate the browser background, I don't know where the colors come from, the computed values in the inspector don't match anything on screen.
This is as close as I was able to get so far.
*/
&::before {
position: absolute;
content: "";
width: 100%;
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
height: 100%;
opacity: 0.0;
transition: 60ms opacity ease-in calc(var(--theme-sidebar_expand_on_hover-transition_speed) - 60ms);
transition: 60ms opacity ease-in calc(var(--theme-sidebar_expand_on_hover-transition_speed) - 60ms), width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
z-index: -1;
background: var(--zen-main-browser-background-toolbar) !important;
background-image: var(--zen-main-browser-background) !important;
background-color: var(--lwt-accent-color) !important;
background-attachment: fixed !important;
background-size: 2000px !important;
backdrop-filter: blur(5px) !important;
@ -182,84 +120,69 @@
border-bottom-right-radius: 8px !important;
}
#titlebar:hover::before,
#titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button))::before,
#navigator-toolbox[zen-has-hover] #titlebar::before,
#navigator-toolbox[has-popup-menu] #titlebar::before,
#navigator-toolbox[movingtab] #titlebar::before {
opacity: 1.0 !important;
transition: 60ms opacity ease-out;
> #titlebar, > #zen-sidebar-top-buttons, > #nav-bar {
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding)) !important;
max-width: var(--zen-sidebar-width) !important;
min-width: var(--zen-toolbar-min-width) !important;
padding-right: var(--zen-toolbox-padding) !important;
}
}
#titlebar:hover,
#titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button)),
#navigator-toolbox[zen-has-hover] #titlebar,
#navigator-toolbox[has-popup-menu] #titlebar,
#navigator-toolbox[movingtab] #titlebar {
width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}
> #titlebar, > #zen-sidebar-top-buttons {
overflow: hidden !important;
transition: width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed), max-width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
}
.tab-background {
width: calc(100% - 4px) !important;
}
@media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
#tabs-newtab-button {
width: 100% !important;
> #nav-bar {
margin: 0 !important;
display: flex !important;
padding: 0 var(--tab-inline-padding) !important;
justify-content: start !important;
gap: var(--tab-inline-padding) !important;
.toolbarbutton-icon {
background: transparent !important;
padding: 0 !important;
height: 16px !important;
width: 16px !important;
}
.toolbarbutton-text {
display: flex !important;
background: transparent !important;
padding: 0 !important;
}
.toolbarbutton-text:before {
text-overflow: clip !important;
}
padding-left: var(--zen-toolbox-padding) !important;
transition: var(--ext-theme-background-transition), width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed), max-width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed) !important;
}
}
#zen-sidebar-top-buttons {
width: 100% !important;
min-height: unset !important;
#zen-sidebar-top-buttons-customization-target:not(:has(*)) {
padding: 0 !important;
/* Essentials */
#zen-essentials-container {
display: flex !important;
justify-content: center !important;
gap: 0 !important;
overflow-x: scroll !important;
> .tabbrowser-tab {
flex: 1 !important;
/* Todo change this from hardcoded value */
min-width: 40px !important;
margin-inline: calc(var(--zen-toolbox-padding) - 2px) !important;
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
min-width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
}
}
/* Hide empty top buttons */
#zen-sidebar-top-buttons:not(:has(:not(#zen-sidebar-top-buttons-separator, #zen-sidebar-top-buttons-customization-target))) {
display: none !important;
}
#zen-sidebar-icons-wrapper,
#zen-sidebar-bottom-buttons,
#zen-sidebar-top-buttons-customization-target {
justify-content: center !important;
display: flex;
flex-direction: row !important;
gap: 0 !important;
&> :not(panel) {
& > :not(panel,#zen-sidebar-top-buttons-separator) {
overflow: hidden !important;
padding: 0 !important;
width: 36px !important;
height: 36px !important;
min-width: fit-content !important;
min-height: fit-content !important;
flex-grow: 1 !important;
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed), margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
margin-inline: 2px !important;
}
toolbarspring {
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) cubic-bezier(.001,1,.003,0.99),
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;;
flex-grow: 100 !important;
display: flex !important;
}
@ -275,13 +198,50 @@
toolbarbutton {
margin: 0 !important;
flex-grow: 1 !important;
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed), margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
margin-inline: 2px !important;
overflow: hidden !important;
}
}
#tabbrowser-arrowscrollbox-periphery {
margin-inline: 0 !important;
/* Decrease the seperator line to the same length as before */
&::before {
margin-inline: var(--tab-block-margin);
}
}
#navigator-toolbox:not([zen-has-hover], [has-popup-menu], [movingtab]) #titlebar:not(#titlebar:hover, #titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button))) {
/* Expanded bar */
#navigator-toolbox:is(
[zen-has-hover],
[movingtab],
[flash-popup],
[has-popup-menu],
:has(.tabbrowser-tab:active),
:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button), #urlbar[open]),
) {
--zen-sidebar-width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
&::before {
opacity: 1.0;
transition: 60ms opacity ease-in, width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
}
}
/* Collapsed bar */
#navigator-toolbox:not(
[zen-has-hover],
[movingtab],
[flash-popup],
[has-popup-menu],
:has(.tabbrowser-tab:active),
:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button), #urlbar[open])
) {
/* Show only active/first/no(todo) button*/
#zen-workspaces-button {
toolbarbutton:not([active="true"]) {
flex-grow: 0 !important;
@ -289,11 +249,34 @@
margin-inline: 0 !important;
}
}
#zen-essentials-container:has([selected]) > .tabbrowser-tab:not([selected]),
#zen-essentials-container:not(:has([selected])) > .tabbrowser-tab:not(:first-child) {
flex-grow: 0 !important;
width: 0 !important;
min-width: 0 !important;
margin-inline: 0 !important;
}
toolbarspring {
flex-grow: 0 !important;
width: 0 !important;
min-width: 0 !important;
margin-inline: 0 !important;
}
/*Workaround for invisible top buttons seperator*/
#zen-sidebar-top-buttons-customization-target > :not(:nth-child(1 of toolbarbutton, toolbaritem))
{
flex-grow: 0 !important;
width: 0 !important;
min-width: 0 !important;
margin-inline: 0 !important;
}
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
#zen-sidebar-icons-wrapper>toolbarbutton:not(:first-child),
#zen-sidebar-top-buttons-customization-target>toolbarbutton:not(:first-child) {
#zen-sidebar-bottom-buttons > :not(:first-child)
{
flex-grow: 0 !important;
width: 0 !important;
min-width: 0 !important;
@ -302,13 +285,10 @@
}
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
/* Show first child only when no visible workspace switcher */
#zen-sidebar-icons-wrapper:not(:has(#zen-workspaces-button:not([dont-show="true"])))>*:not(:first-child),
#zen-sidebar-top-buttons-customization-target:not(:has(#zen-workspaces-button:not([dont-show="true"])))>*:not(:first-child),
#zen-sidebar-bottom-buttons:not(:has(#zen-workspaces-button:not([dont-show="true"]))) > :not(:first-child),
/* Show active workspace only when visible workspace switcher */
#zen-sidebar-icons-wrapper:has(#zen-workspaces-button:not([dont-show="true"]))>*:not(#zen-workspaces-button),
#zen-sidebar-top-buttons-customization-target:has(#zen-workspaces-button:not([dont-show="true"]))>*:not(#zen-workspaces-button) {
#zen-sidebar-bottom-buttons:has(#zen-workspaces-button:not([dont-show="true"])) > :not(#zen-workspaces-button) {
flex-grow: 0 !important;
width: 0 !important;
min-width: 0 !important;
@ -316,4 +296,24 @@
}
}
}
/* Support for tabs on the right */
#navigator-toolbox[zen-right-side="true"] {
direction: rtl !important;
#titlebar, #zen-sidebar-top-buttons {
direction: ltr !important;
}
#titlebar {
padding-left: var(--zen-toolbox-padding) !important;
padding-right: 0 !important;
}
@media (-moz-bool-pref: "zen.view.use-single-toolbar") {
#nav-bar {
direction: ltr !important;
}
}
}
}

View file

@ -5,24 +5,12 @@
"type": "checkbox",
"defaultValue": true
},
{
"property": "theme.sidebar_expand_on_hover.custom_background",
"label": "My theme overwrites the #TabsToolbar background (e.g. catppuccin)",
"type": "checkbox",
"defaultValue": false
},
{
"property": "theme.sidebar_expand_on_hover.collapse_buttons",
"label": "Collapse the buttons to only show current workspace",
"type": "checkbox",
"defaultValue": true
},
{
"property": "theme.sidebar_expand_on_hover.default_tab_background_shape",
"label": "Default Tab Background Shape",
"type": "checkbox",
"defaultValue": true
},
{
"property": "theme.sidebar_expand_on_hover.inverted_tabs",
"label": "Inverted Tab Direction",

View file

@ -2,16 +2,15 @@
## Description
**Important:** set the browser layout to Single Toolbar or Multiple Toolbar depending on how the expanded sidebar should look like.
With this mod the sidebar expands when you hover it. It only works when the browser layout setting is set to collapsed toolbar.
Addionally this mod collapses the buttons below the tabs to provide a smoother experience. Per default your active workspace is shown while the sidebar is collapsed (only works when the workspace switcher is placed there).
## Preferences
- **Hide top workspace indicator**: since the active workspace is already shown below, this theme hides the workspace indicator at the top, if you don't want this: deactivate this setting. _(default: on)_
- **My theme overwrites the #TabsToolbar background (e.g. catppuccin)**: Some themes overwrite the background property of #TabsToolbar (e.g. catppuccin). If you notice some visual issues while the sidebar is expanded due to the use of a theme: try activating this settings and hope that is helps _(default: off)_
- **Collapse the buttons to only show current workspace**: If you don't wish for your buttons to only show your current workspace when collapsed: deactivate this setting and it shows the first button instead when collapsed _(default: on)_
- **Default Tab Background Shape**: When turned on every corner of the tab background is rounded (like in default zen) _(default: on)_
- **Inverted Tab Direction**: Favicon on the right, title in the middle, close button on the left. Less moving parts when the sidebar is on the right. _(default: off)_
- **Width of the expanded sidebar**: Here you can change the width of the expanded sidebar _(default: 300px)_
- **Transition speed of the sidebar**: Speed of the collapsing/expanding animation _(default: 120ms)_
- **Hide top workspace indicator**: since the active workspace is already shown below, this theme hides the workspace indicator at the top, if you don't want this: deactivate this setting. *(default: on)*
- **Collapse the buttons to only show current workspace**: If you don't wish for your buttons to only show your current workspace when collapsed: deactivate this setting and it shows the first button instead when collapsed *(default: on)*
- **Inverted Tab Direction**: Favicon on the right, title in the middle, close button on the left. Less moving parts when the sidebar is on the right. *(default: off)*
- **Width of the expanded sidebar**: Here you can change the width of the expanded sidebar *(default: 300px)*
- **Transition speed of the sidebar**: Speed of the collapsing/expanding animation *(default: 120ms)*

View file

@ -7,9 +7,9 @@
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/image.png",
"author": "Uiniel",
"version": "1.1.4",
"version": "2.0.0",
"tags": [],
"createdAt": "2024-12-10",
"updatedAt": "2025-01-27",
"updatedAt": "2025-03-31",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json"
}

View file

@ -5,9 +5,16 @@
visibility: visible !important;
margin-right: -16px !important;
opacity: 1 !important;
transform: translate(60%, -35%) scale(0.7) !important;
transform: translate(40%, -35%) scale(0.8) !important;
color: light-dark(white, black) !important;
background-color: light-dark(black, white) !important;
position: absolute !important;
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important;
fill: none !important;
}
.tab-icon-overlay[muted] {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important;
}
@media (-moz-bool-pref: "uc.audio-tabicon.left-side") {

View file

@ -13,5 +13,5 @@
"tabs"
],
"createdAt": "2024-08-28",
"updatedAt": "2025-01-26"
"updatedAt": "2025-04-09"
}

View file

@ -0,0 +1,85 @@
/* Base styles always applied */
#urlbar-background {
border: 2px solid transparent !important;
border-radius: var(--mod-urlbar-border_radius) !important;
transition: box-shadow 0.3s ease-in-out !important;
}
/* Hide container icons when enabled */
@media (-moz-bool-pref: "mod.urlbar.hide_elements") {
#userContext-identity-icon,
#userContext-indicator {
display: none !important;
}
/* Hide permission icons by default */
#identity-permission-box {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
/* Hide or reduce some elements to improve appearance */
#identity-box {
margin-inline-end: 0 !important;
max-width: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
#page-action-buttons {
display: none !important;
}
}
/* Show elements on hover when enabled */
@media (-moz-bool-pref: "mod.urlbar.show_on_hover") {
/* Show permission icons when hovering over the URL bar */
#urlbar:hover #identity-permission-box {
opacity: 1;
}
/* Show these elements on hover if needed */
#urlbar:hover #identity-box,
#urlbar:focus-within #identity-box {
max-width: unset !important;
margin-inline-end: 4px !important;
}
#urlbar:hover #page-action-buttons,
#urlbar:focus-within #page-action-buttons {
display: flex !important;
}
}
/* Center the URL in the address bar when enabled */
@media (-moz-bool-pref: "mod.urlbar.center_url") {
#urlbar-input-container {
justify-content: center !important;
}
#urlbar-input {
text-align: center !important;
}
}
/* Apply colorful border when enabled */
@media (-moz-bool-pref: "mod.urlbar.colorful_border") {
#urlbar-background {
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
background-image: linear-gradient(rgba(59, 59, 61, 0.8), rgba(59, 59, 61, 0.8)),
linear-gradient(90deg, #ff7e5f, #feb47b, #7bc6cc, #8583ed) !important;
}
}
/* Apply glow effect on focus when enabled */
@media (-moz-bool-pref: "mod.urlbar.glow_effect") {
#urlbar-background {
box-shadow: 0 0 8px rgba(137, 137, 186, 0.3) !important;
}
#urlbar[focused="true"] #urlbar-background {
box-shadow: 0 0 12px rgba(99, 185, 255, 0.5) !important;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

View file

@ -0,0 +1,39 @@
[
{
"property": "mod.urlbar.hide_elements",
"label": "Hide container and permission icons",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.urlbar.show_on_hover",
"label": "Show hidden elements on hover",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.urlbar.center_url",
"label": "Center the URL in address bar",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.urlbar.colorful_border",
"label": "Use colorful gradient border",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.urlbar.glow_effect",
"label": "Enable glow effect on focus",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.urlbar.border_radius",
"label": "Border radius",
"type": "string",
"defaultValue": "8px",
"placeholder": "e.g: 8px"
}
]

View file

@ -0,0 +1,30 @@
# Zen URL Bar Tweaks
A collection of tweaks for the Zen browser URL bar.
To use the mod, just install it and go to the Zen Mods page on your Zen browser. You will see the mod listed there. Click on the settings icon to turn on/off the tweaks.
## Features
Here's a list of the tweak options included in this Zen browser mod:
- ✅ **Hide container and permission icons**
Clean up the URL bar by hiding container indicators and site permission icons.
- ✅ **Show hidden elements on hover**
Reveal icons and actions when hovering over the URL bar, keeping the look minimal when idle.
- ✅ **Center the URL in the address bar**
Align the URL to the center of the bar for a balanced aesthetic.
- ✅ **Use colorful gradient border**
Add a stylish colorful border around the URL bar (toggle only).
- ✅ **Enable glow effect on focus**
Make the URL bar glow subtly when focused, improving visual feedback.
- ✅ **Adjustable border radius**
Customize how rounded the corners of the URL bar look (e.g., 4px, 8px, 16px, etc.).
> You can turn on/off each of these tweaks individually in the Zen Mods page in `about:settings`.

View file

@ -0,0 +1,15 @@
{
"id": "fd79066d-ba22-4cd1-8ad0-cfd82c12026a",
"name": "Zen URL Bar Tweaks",
"description": "A collection of tweaks for the Zen browser URL bar with options to toggle each tweak.",
"homepage": "https://github.com/litegral/zen-url-bar-tweaks",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/image.png",
"author": "litegral",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-04-05",
"updatedAt": "2025-04-09",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/preferences.json"
}