Added new bg image feature for empty tab and more improvements

This commit is contained in:
sameerasw 2025-05-03 19:18:16 +05:30
parent 2e27bdad86
commit 67af57c711
4 changed files with 137 additions and 75 deletions

View file

@ -1,4 +1,4 @@
/* transparency */
/* variables */
:root {
@media (-moz-bool-pref: "mod.sameerasw.zen_bg_color_enabled") {
--zen-main-browser-background: var(
@ -6,6 +6,10 @@
#00000000
) !important;
}
@media (-moz-bool-pref: "mod.sameerasw.zen_notab_img_enabled") {
--notab_bg_img: image-set(var(--mod_sameerasw_zen_notab_img)) !important;
}
}
/* Remove new tab background color added in 1.8b */
@ -112,3 +116,28 @@ tabpanels .browserStack browser {
border-radius: 2em !important;
}
}
/* no tab image */
#browser:has([zen-empty-tab="true"][selected="true"]) .browserStack {
@media (-moz-bool-pref: "mod.sameerasw.zen_notab_img_enabled") {
background-image: var(
--notab_bg_img,
url("https://raw.githubusercontent.com/zen-browser/branding/refs/heads/main/Official/Word%20Marks/SVG/zen_logo_icon_white.svg")
) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: var(--mod_sameerasw_zen_notab_img_size, 50px) !important;
@media (-moz-bool-pref: "mod.sameerasw.zen_notab_img_enabled") {
filter: saturate(0) !important;
@media (-moz-bool-pref: "mod.sameerasw.zen_notab_img_enabled") {
@media (prefers-color-scheme: light) {
filter: saturate(0) invert(1) !important;
}
}
}
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 237 KiB

Before After
Before After

View file

@ -1,72 +1,105 @@
[
{
"property": "browser.tabs.allow_transparent_browser",
"label": "Allow zen browser to be transparent (Turn off before uninstall)",
"type": "checkbox",
"defaultvalue": true
},
{
"property": "zen.widget.linux.transparency",
"label": "Allow zen browser on linux to be transparent (Turn off before uninstall)",
"type": "checkbox",
"defaultvalue": true,
"disabledOn": [
"windows",
"macos"
]
},
{
"property": "mod.sameerasw.zen_bg_color_enabled",
"label": "Enable custom background color for Zen",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_transparency_color",
"label": "Set background color for Zen (Overrides default theme colors)",
"type": "string",
"defaultvalue": "#00000000"
},
{
"property": "mod.sameerasw.zen_light_tint_flip",
"label": "Flip light tint for Zen after 1.8b to dark",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_light_tint_disabled",
"label": "Disable light tint for Zen after 1.8b",
"type": "checkbox",
"defaultvalue": true
},
{
"property": "mod.sameerasw.zen_empty_page_transparency",
"label": "Make the empty page transparent after Zen 1.9b",
"type": "checkbox",
"defaultvalue": true
},
{
"property": "mod.sameerasw.zen_no_shadow",
"label": "Remove the shadow around the web page",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_tab_switch_anim",
"label": "Enable tab switch animation",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_urlbar_zoom_anim",
"label": "Enable URL bar zoom animation",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_trackpad_anim",
"label": "Enable trackpad animation",
"type": "checkbox",
"defaultvalue": false
}
{
"property": "browser.tabs.allow_transparent_browser",
"label": "Allow zen browser to be transparent (Turn off before uninstall)",
"type": "checkbox",
"defaultvalue": true
},
{
"property": "zen.widget.linux.transparency",
"label": "Allow zen browser on linux to be transparent (Turn off before uninstall)",
"type": "checkbox",
"defaultvalue": true,
"disabledOn": [
"windows",
"macos"
]
},
{
"property": "mod.sameerasw.zen_bg_color_enabled",
"label": "Enable custom background color for Zen",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_transparency_color",
"label": "Set custom background color (Overrides default theme colors)",
"type": "string",
"defaultvalue": "#00000000",
"placeholder": "light-dark(#fff, #222) or RGBA or hex"
},
{
"property": "mod.sameerasw.zen_light_tint_flip",
"label": "Flip the light website tint to dark",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_light_tint_disabled",
"label": "Disable the light website tint",
"type": "checkbox",
"defaultvalue": true
},
{
"property": "mod.sameerasw.zen_empty_page_transparency",
"label": "Transparent empty no tabs page",
"type": "checkbox",
"defaultvalue": true
},
{
"property": "mod.sameerasw.zen_no_shadow",
"label": "Remove the shadow around the web page",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_tab_switch_anim",
"label": "Tab switch animation",
"type": "checkbox",
"defaultvalue": true
},
{
"property": "mod.sameerasw.zen_urlbar_zoom_anim",
"label": "URL bar zoom animation",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_trackpad_anim",
"label": "Trackpad swipe animations",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_notab_img_enabled",
"label": "Add no tab screen background image",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_notab_img",
"label": "Set no tab scren image URL (updating the image may need a new url)",
"type": "string",
"defaultvalue": "https://github.com/sameerasw/my-internet/blob/main/wave-light.png?raw=true",
"placeholder": "https://example.com/image.png"
},
{
"property": "mod.sameerasw.zen_notab_img_size",
"label": "Set no tab scren image size with unit",
"type": "string",
"defaultvalue": "50px",
"placeholder": "50px (include units px, % ...)"
},
{
"property": "mod.sameerasw.zen_notab_img_saturate",
"label": "Grayscale the no tab screen image",
"type": "checkbox",
"defaultvalue": false
},
{
"property": "mod.sameerasw.zen_notab_img_invert",
"label": "Invert the grayscaled no tab screen image in light theme (white → black)",
"type": "checkbox",
"defaultvalue": true
}
]

View file

@ -1,15 +1,15 @@
{
"id": "642854b5-88b4-4c40-b256-e035532109df",
"name": "Transparent Zen",
"description": "Make the Zen Browser's background transparent and modify the empty tab page and have animations that goes along with the transparency. Turn off transparency in mod settings before uninstallation.",
"description": "Make the Zen Browser's background and empty tab pages transparent and get animations that smoothen the navigation. Now with option to set no tab page a background. Enable features in mod settings and visit the homepage from below to learn more what it can do. 👇",
"homepage": "https://github.com/sameerasw/zen-themes/tree/main/TransparentZen",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/image.png",
"author": "sameerasw",
"version": "1.11.2b",
"version": "1.12.0",
"tags": [],
"createdAt": "2025-02-04",
"updatedAt": "2025-04-17",
"updatedAt": "2025-05-103",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json"
}