Merge pull request #1572 from sameerasw/main

themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css

@@ -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),
+    transition: var(--mod-sameerasw-zen-animation-smoothness) !important;
-      filter 0.45s ease-in-out, opacity 0.35s ease-in-out !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;
+  }
+}

themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json

@@ -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": [
+    "disabledOn": ["windows", "macos"]
-            "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",
+    "property": "mod.sameerasw_zen_light_tint",
-        "label": "\ud83c\udf19 Flip the light website tint to dark",
+    "label": "🌙 Light website tint",
-        "type": "checkbox",
+    "type": "dropdown",
-        "defaultValue": false
+    "placeholder": "Select an option",
+    "defaultValue": "2",
+    "options": [
+      {
+        "label": "Flip",
+        "value": "1"
       },
       {
-        "property": "mod.sameerasw.zen_light_tint_disabled",
+        "label": "Remove",
-        "label": "\ud83c\udf19 Disable the light website tint",
+        "value": "2"
-        "type": "checkbox",
+      }
-        "defaultValue": true
+    ]
   },
   {
     "property": "mod.sameerasw.zen_no_shadow",
-        "label": "\ud83c\udf11 Remove the shadow around the web page",
+    "label": "🌑 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",
     "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"
+      }
+    ]
   }
 ]

themes/642854b5-88b4-4c40-b256-e035532109df/readme.md

@@ -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

themes/642854b5-88b4-4c40-b256-e035532109df/theme.json

@@ -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"
 }