Update: Transparent Zen

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

@@ -1,89 +1,79 @@
-/* transparency */
+/* variables */
 :root {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_bg_color_enabled") {
+  @media -moz-pref( "mod.sameerasw.zen_bg_color_enabled") {
     --zen-main-browser-background: var(
       --mod-sameerasw-zen_transparency_color,
       #00000000
     ) !important;
   }
 }
 
-/* Remove new tab background color added in 1.8b */
+/* tab tint */
 .browserStack {
   browser {
-    @media (-moz-bool-pref: "mod.sameerasw.zen_light_tint_flip") {
+    @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-bool-pref: "mod.sameerasw.zen_light_tint_disabled") {
+    @media -moz-pref( "mod.sameerasw.zen_light_tint_disabled") {
       background-color: transparent !important;
     }
   }
 }
 
-/* hide shadow */
+/* hide shadows */
 hbox.browserSidebarContainer,
 #zen-tabbox-wrapper {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_no_shadow") {
+  @media -moz-pref( "mod.sameerasw.zen_no_shadow") {
     box-shadow: none !important;
   }
 }
 
-/* removed tab bg added in 1.9b */
-#browser:has([zen-empty-tab="true"][selected="true"]) .browserStack {
-  browser {
-    @media (-moz-bool-pref: "mod.sameerasw.zen_empty_page_transparency") {
-      background-color: transparent !important;
-      opacity: 0 !important;
-    }
-  }
-}
-
 /* Animations */
 /* Tab switch animation */
 #tabbrowser-tabpanels
   > hbox:not([zen-split="true"]):not(:has(.zen-glance-background)) {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_tab_switch_anim") {
+  @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;
     scale: 0.9 !important;
     opacity: 0;
   }
 }
 #tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]) {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_tab_switch_anim") {
+  @media -moz-pref( "mod.sameerasw.zen_tab_switch_anim") {
     scale: 1 !important;
     opacity: 1 !important;
   }
 }
 
-/* website view animations */
+/* website switch animations */
 #browser:not(:has(.zen-glance-background)) #tabbrowser-tabpanels {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_urlbar_zoom_anim") {
+  @media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
     transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.35) !important;
   }
 }
 
-/* URL bar page animation */
+/* URL bar zoom animation */
 #browser:has(#urlbar[open][zen-floating-urlbar="true"]) #tabbrowser-tabpanels {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_urlbar_zoom_anim") {
+  @media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
     pointer-events: none;
     scale: 1.1 !important;
     filter: blur(10px) brightness(70%) !important;
   }
 }
 
 #urlbar[open][zen-floating-urlbar="true"] #urlbar-background {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_urlbar_zoom_anim") {
+  @media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
     border-radius: 1em !important;
   }
 }
 
 /* trackpad gestures*/
 tabpanels .browserStack browser {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_trackpad_anim") {
+  @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;
   }
@@ -94,7 +84,7 @@ tabpanels .browserStack browser {
     #historySwipeAnimationPreviousArrow:not([style="translate: none;"])
   )
   browser {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_trackpad_anim") {
+  @media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
     scale: 0.95 !important;
     transform: translateX(3%) !important;
     border-radius: 2em !important;
@@ -106,9 +96,36 @@ tabpanels .browserStack browser {
     #historySwipeAnimationNextArrow:not([style="translate: none;"])
   )
   browser {
-  @media (-moz-bool-pref: "mod.sameerasw.zen_trackpad_anim") {
+  @media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
     scale: 0.95 !important;
     transform: translateX(-3%) !important;
     border-radius: 2em !important;
   }
 }
+
+/* no tab image */
+#browser:has([zen-has-empty-tab=""]) .deck-selected .browserStack {
+  @media -moz-pref( "mod.sameerasw.zen_notab_img_enabled") {
+    background-image: var(
+      --mod-sameerasw-zen_notab_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, 150px) !important;
+
+    opacity: var(--mod-sameerasw-zen_notab_img_opacity, 1) !important;
+
+    @media -moz-pref( "mod.sameerasw.zen_notab_img_saturate") {
+      filter: saturate(0) !important;
+
+      @media -moz-pref( "mod.sameerasw.zen_notab_img_invert") {
+        @media (prefers-color-scheme: light) {
+          filter: saturate(0) invert(1) !important;
+        }
+      }
+    }
+  }
+}

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

@@ -1,72 +1,106 @@
 [
-    {
-        "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 transparency (TURN OFF BEFORE UNINSTALL)",
+    "type": "checkbox",
+    "defaultValue": true
+  },
+  {
+      "property": "zen.widget.linux.transparency",
+      "label": "👀 Allow transparency on linux (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 theme)",
+    "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_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": "🖼️ 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": "🖼️ No tab screen image size with unit",
+    "type": "string",
+    "defaultValue": "150px",
+    "placeholder": "50px (px, em, % ...)"
+  },
+  {
+    "property": "mod.sameerasw.zen_notab_img_opacity",
+    "label": "🖼️ No tab screen image opacity (0-1)",
+    "type": "string",
+    "defaultValue": "1",
+    "placeholder": "0.75"
+  },
+  {
+    "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 above image in light theme (white → black)",
+    "type": "checkbox",
+    "defaultValue": false
+  }
+]

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

@@ -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 tab background transparent, get smooth animations and more. Enable  features in mod settings and visit the homepage below to learn more about the features. 👇",
     "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-03",
     "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json"
-}
+}