Merge pull request #1572 from sameerasw/main

This commit is contained in:
mr. m 2025-06-22 11:38:46 +02:00 committed by GitHub
commit 9098202bef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 449 additions and 119 deletions

View file

@ -8,16 +8,52 @@
}
}
/* animation smoothness */
:root:has([mod-sameerasw_zen_animations="0"]) {
--mod-sameerasw-zen-animation-smoothness: all 0.15s
cubic-bezier(0.175, 0.885, 0.3, 1.3),
filter 0.15s ease-in-out, opacity 0.2s ease-in-out !important;
}
:root:has([mod-sameerasw_zen_animations="1"]) {
--mod-sameerasw-zen-animation-smoothness: all 0.25s
cubic-bezier(0.175, 0.885, 0.32, 1.35),
filter 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
}
:root:has([mod-sameerasw_zen_animations="2"]) {
--mod-sameerasw-zen-animation-smoothness: all 0.4s
cubic-bezier(0.175, 0.885, 0.32, 1.55),
filter 0.4s ease-in-out, opacity 0.45s ease-in-out !important;
}
:root:has([mod-sameerasw_zen_animations="3"]) {
--mod-sameerasw-zen-animation-smoothness: all 0.25s
cubic-bezier(0.575, 0.685, 0.52, 1.55),
filter 0.3s ease-in-out, opacity 0.35s ease-in-out !important;
}
/* default */
:root:not(:has([mod-sameerasw_zen_animations])) {
--mod-sameerasw-zen-animation-smoothness: all 0.25s
cubic-bezier(0.175, 0.885, 0.32, 1.35),
filter 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
}
/* tab tint */
:root:has([mod-sameerasw_zen_light_tint="1"]) {
.browserStack {
browser {
@media -moz-pref( "mod.sameerasw.zen_light_tint_flip") {
background-color: light-dark(
rgba(255, 255, 255, 0.1),
rgba(0, 0, 0, 0.1)
) !important;
}
@media -moz-pref( "mod.sameerasw.zen_light_tint_disabled") {
}
}
:root:has([mod-sameerasw_zen_light_tint="2"]) {
.browserStack {
browser {
background-color: transparent !important;
}
}
@ -36,8 +72,7 @@ hbox.browserSidebarContainer,
#tabbrowser-tabpanels
> hbox:not([zen-split="true"]):not(:has(.zen-glance-background)) {
@media -moz-pref( "mod.sameerasw.zen_tab_switch_anim") {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35),
filter 0.45s ease-in-out, opacity 0.35s ease-in-out !important;
transition: var(--mod-sameerasw-zen-animation-smoothness) !important;
scale: 0.9 !important;
opacity: 0;
}
@ -52,7 +87,7 @@ hbox.browserSidebarContainer,
/* website switch animations */
#browser:not(:has(.zen-glance-background)) #tabbrowser-tabpanels {
@media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.35) !important;
transition: var(--mod-sameerasw-zen-animation-smoothness) !important;
}
}
@ -75,7 +110,6 @@ hbox.browserSidebarContainer,
tabpanels .browserStack browser {
@media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.1s !important;
border-radius: 0.75em !important;
}
}
@ -104,7 +138,7 @@ tabpanels .browserStack browser {
}
/* no tab image */
#browser:has([zen-has-empty-tab=""]) .deck-selected .browserStack {
#browser:has([zen-empty-tab="true"][selected="true"]) .browserStack {
@media -moz-pref( "mod.sameerasw.zen_notab_img_enabled") {
background-image: var(
--mod-sameerasw-zen_notab_img,
@ -129,3 +163,230 @@ tabpanels .browserStack browser {
}
}
}
/* ============= Transparent Sidebar: Mask or Push ============= */
:root:has(
[mod-sameerasw_zen_compact_sidebar_type="1"],
[mod-sameerasw_zen_compact_sidebar_type="2"]
) {
#zen-main-app-wrapper {
--zen-sidebar-custom-width: var(
--mod-sameerasw-zen_compact_sidebar_width,
165px
) !important;
}
[zen-compact-mode="true"] #navigator-toolbox {
--zen-sidebar-width: var(--zen-sidebar-custom-width) !important;
--actual-zen-sidebar-width: var(--zen-sidebar-custom-width) !important;
width: var(--zen-sidebar-custom-width) !important;
}
}
/* Shared: Soft mask background and shadow */
#main-window:has([mod-sameerasw_zen_compact_sidebar_type="2"])
#titlebar::before {
box-shadow: light-dark(#fff3, #0003) 0px -36px 30px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
background-color: light-dark(#fff8, #0005) !important;
}
/* Shared: Content reveal trigger condition */
#zen-main-app-wrapper[zen-compact-mode="true"]:has(
[zen-user-show=""],
#navigator-toolbox[zen-has-hover="true"],
[has-popup-menu=""]
) {
/* Content styles when sidebar is revealed */
}
/* Mask type - left sidebar */
#main-window:not([zen-right-side="true"]):has(
[mod-sameerasw_zen_compact_sidebar_type="2"]
)
#zen-main-app-wrapper[zen-compact-mode="true"]:has(
[zen-user-show=""],
#navigator-toolbox[zen-has-hover="true"],
[has-popup-menu=""]
)
#tabbrowser-tabpanels {
mask-image: linear-gradient(
to right,
transparent 0,
transparent calc(var(--zen-sidebar-custom-width) + 4px),
black calc(var(--zen-sidebar-custom-width) + 8px),
black 100%
) !important;
}
/* Mask type - right sidebar */
#main-window[zen-right-side="true"]:has(
[mod-sameerasw_zen_compact_sidebar_type="2"]
)
#zen-main-app-wrapper[zen-compact-mode="true"]:has(
[zen-user-show=""],
#navigator-toolbox[zen-has-hover="true"],
[has-popup-menu=""]
)
#tabbrowser-tabpanels {
mask-image: linear-gradient(
to left,
transparent 0,
transparent calc(var(--zen-sidebar-custom-width) + 4px),
black calc(var(--zen-sidebar-custom-width) + 8px),
black 100%
) !important;
}
/* Push type - left sidebar */
#main-window:not([zen-right-side="true"]):has(
[mod-sameerasw_zen_compact_sidebar_type="1"]
)
#zen-main-app-wrapper[zen-compact-mode="true"]:has(
[zen-user-show=""],
#navigator-toolbox[zen-has-hover="true"],
[has-popup-menu=""]
)
#zen-appcontent-wrapper {
transform: translateX(var(--zen-sidebar-custom-width)) !important;
}
/* Push type - right sidebar */
#main-window[zen-right-side="true"]:has(
[mod-sameerasw_zen_compact_sidebar_type="1"]
)
#zen-main-app-wrapper[zen-compact-mode="true"]:has(
[zen-user-show=""],
#navigator-toolbox[zen-has-hover="true"],
[has-popup-menu=""]
)
#zen-appcontent-wrapper {
transform: translateX(calc(0px - var(--zen-sidebar-custom-width))) !important;
}
/* Shared Push Transition (used in both left and right) */
#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"])
#zen-appcontent-wrapper {
--zen-compact-mode-func: linear(
0 0%,
0.002748 1%,
0.010544 2%,
0.022757 3%,
0.038804 4%,
0.058151 5%,
0.080308 6%,
0.104828 7%,
0.131301 8%,
0.159358 9%,
0.188662 10%,
0.21891 11%,
0.249828 12%,
0.281172 13%,
0.312724 14%,
0.344288 15%,
0.375693 16%,
0.40679 17%,
0.437447 18%,
0.467549 19%,
0.497 20%,
0.525718 21%,
0.553633 22%,
0.580688 23%,
0.60684 24%,
0.632052 25%,
0.656298 26%,
0.679562 27%,
0.701831 28%,
0.723104 29%,
0.743381 30%,
0.76267 31%,
0.780983 32%,
0.798335 33%,
0.814744 34%,
0.830233 35%,
0.844826 36%,
0.858549 37%,
0.87143 38%,
0.883498 39%,
0.894782 40%,
0.905314 41%,
0.915125 42%,
0.924247 43%,
0.93271 44%,
0.940547 45%,
0.947787 46%,
0.954463 47%,
0.960603 48%,
0.966239 49%,
0.971397 50%,
0.976106 51%,
0.980394 52%,
0.984286 53%,
0.987808 54%,
0.990984 55%,
0.993837 56%,
0.99639 57%,
0.998664 58%,
1.000679 59%,
1.002456 60%,
1.004011 61%,
1.005363 62%,
1.006528 63%,
1.007522 64%,
1.008359 65%,
1.009054 66%,
1.009618 67%,
1.010065 68%,
1.010405 69%,
1.010649 70%,
1.010808 71%,
1.01089 72%,
1.010904 73%,
1.010857 74%,
1.010757 75%,
1.010611 76%,
1.010425 77%,
1.010205 78%,
1.009955 79%,
1.009681 80%,
1.009387 81%,
1.009077 82%,
1.008754 83%,
1.008422 84%,
1.008083 85%,
1.00774 86%,
1.007396 87%,
1.007052 88%,
1.00671 89%,
1.006372 90%,
1.00604 91%,
1.005713 92%,
1.005394 93%,
1.005083 94%,
1.004782 95%,
1.004489 96%,
1.004207 97%,
1.003935 98%,
1.003674 99%,
1.003423 100%
) !important;
transition: transform 0.25s var(--zen-compact-mode-func) !important;
}
/* Push: transparent titlebar */
#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"])
#titlebar::before {
background-color: transparent !important;
outline: none !important;
box-shadow: none !important;
}
/* Sidebar background transparency */
#sidebar-box {
@media -moz-pref( "mod.sameerasw.zen_transparent_sidebar_enabled") {
background-color: transparent !important;
box-shadow: none !important;
}
}

View file

@ -1,106 +1,174 @@
[
{
"property": "browser.tabs.allow_transparent_browser",
"label": "\ud83d\udc40 Allow transparency (TURN OFF BEFORE UNINSTALL)",
"label": "👀 Allow transparency (TURN OFF BEFORE UNINSTALL)",
"type": "checkbox",
"defaultValue": false
},
{
"property": "zen.widget.linux.transparency",
"label": "\ud83d\udc40 Allow transparency on linux (TURN OFF BEFORE UNINSTALL)",
"label": "👀 Allow transparency on linux (TURN OFF BEFORE UNINSTALL)",
"type": "checkbox",
"defaultValue": false,
"disabledOn": [
"windows",
"macos"
]
"disabledOn": ["windows", "macos"]
},
{
"property": "zen.view.grey-out-inactive-windows",
"label": "👀 Keep transparency when not in focus on linux",
"type": "checkbox",
"defaultValue": false,
"disabledOn": ["windows", "macos"]
},
{
"property": "mod.sameerasw.zen_transparent_sidebar_enabled",
"label": "👀 Transparent sidebar (bookmarks, history and sync)",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.sameerasw.zen_bg_color_enabled",
"label": "\ud83c\udfa8 Enable custom background color for Zen",
"label": "🎨 Enable custom background color for Zen",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_transparency_color",
"label": "\ud83c\udfa8 Set custom background color (Overrides theme)",
"label": "🎨 Set custom background color (Overrides theme)",
"type": "string",
"defaultValue": "#00000000",
"placeholder": "light-dark(#fff, #222) or RGBA or hex"
},
{
"property": "mod.sameerasw.zen_light_tint_flip",
"label": "\ud83c\udf19 Flip the light website tint to dark",
"type": "checkbox",
"defaultValue": false
"property": "mod.sameerasw_zen_light_tint",
"label": "🌙 Light website tint",
"type": "dropdown",
"placeholder": "Select an option",
"defaultValue": "2",
"options": [
{
"label": "Flip",
"value": "1"
},
{
"property": "mod.sameerasw.zen_light_tint_disabled",
"label": "\ud83c\udf19 Disable the light website tint",
"type": "checkbox",
"defaultValue": true
"label": "Remove",
"value": "2"
}
]
},
{
"property": "mod.sameerasw.zen_no_shadow",
"label": "\ud83c\udf11 Remove the shadow around the web page",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_tab_switch_anim",
"label": "\u2728 Tab switch animation",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.sameerasw.zen_urlbar_zoom_anim",
"label": "\u2728 URL bar zoom animation",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_trackpad_anim",
"label": "\u2728 Trackpad swipe animations",
"label": "🌑 Remove the shadow around the web page",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_notab_img_enabled",
"label": "\ud83d\uddbc\ufe0f Add no tab screen background image",
"label": "🖼️ Add no tab screen background image",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_notab_img",
"label": "\ud83d\uddbc\ufe0f Image URL, format: url('example.com/1.png')",
"label": "🖼️ Image URL, format: url('example.com/1.png')",
"type": "string",
"defaultValue": "url('https://github.com/sameerasw/my-internet/blob/main/wave-light.png?raw=true')",
"placeholder": "url('example.com/1.png')"
},
{
"property": "mod.sameerasw.zen_notab_img_size",
"label": "\ud83d\uddbc\ufe0f No tab screen image size with unit",
"label": "🖼️ No tab screen image size with unit",
"type": "string",
"defaultValue": "150px",
"placeholder": "50px (px, em, % ...)"
},
{
"property": "mod.sameerasw.zen_notab_img_opacity",
"label": "\ud83d\uddbc\ufe0f No tab screen image opacity (0-1)",
"label": "🖼️ No tab screen image opacity (0-1)",
"type": "string",
"defaultValue": "1",
"placeholder": "0.75"
},
{
"property": "mod.sameerasw.zen_notab_img_saturate",
"label": "\ud83d\uddbc\ufe0f Grayscale the no tab screen image",
"label": "🖼️ Grayscale the no tab screen image",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_notab_img_invert",
"label": "\ud83d\uddbc\ufe0f Invert above image in light theme (white \u2192 black)",
"label": "🖼️ Invert above image in light theme (white → black)",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw_zen_compact_sidebar_type",
"label": "↔️ Compact transparent sidebar type",
"type": "dropdown",
"placeholder": "Select an option",
"defaultValue": "0",
"options": [
{
"label": "Default",
"value": "0"
},
{
"label": "Push",
"value": "1"
},
{
"label": "Mask",
"value": "2"
}
]
},
{
"property": "mod.sameerasw.zen_compact_sidebar_width",
"label": "↔️ Custom compact sidebar width",
"type": "string",
"defaultValue": "165px",
"placeholder": "165px (use px)"
},
{
"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_animations",
"label": "✨ Animation smoothness",
"type": "dropdown",
"placeholder": "Select an option",
"defaultValue": "1",
"options": [
{
"label": "Quick Snap",
"value": "0"
},
{
"label": "Smooth Flow",
"value": "1"
},
{
"label": "Diabolical",
"value": "2"
},
{
"label": "Springy",
"value": "3"
}
]
}
]

View file

@ -1,5 +1,6 @@
Make the Zen Browser's background transparent allowing the system blur to come through.
This will utilize the browser.tabs.allow_transparent_browser flag in about:config to enable transparency. You can use the ["Zen Internet"](https://addons.mozilla.org/en-US/firefox/addon/zen-internet/) firefox addon to get website transparency.
This will utilize the browser.tabs.allow_transparent_browser flag in about:config to enable transparency.
Follow the guide : sameerasw.com/zen
Enjoy <3

View file

@ -7,9 +7,9 @@
"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.12.0",
"version": "1.13.0",
"tags": [],
"createdAt": "2025-02-04",
"updatedAt": "2025-05-30",
"updatedAt": "2025-06-14",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json"
}