diff --git a/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css b/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css index 322af009..4c1f30fd 100644 --- a/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css +++ b/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 */ -.browserStack { - browser { - @media -moz-pref( "mod.sameerasw.zen_light_tint_flip") { +:root:has([mod-sameerasw_zen_light_tint="1"]) { + .browserStack { + browser { 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; + } +} diff --git a/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json b/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json index 85c58389..92a04c0e 100644 --- a/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json +++ b/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)", - "type": "checkbox", - "defaultValue": false - }, - { - "property": "zen.widget.linux.transparency", - "label": "\ud83d\udc40 Allow transparency on linux (TURN OFF BEFORE UNINSTALL)", - "type": "checkbox", - "defaultValue": false, - "disabledOn": [ - "windows", - "macos" - ] - }, - { - "property": "mod.sameerasw.zen_bg_color_enabled", - "label": "\ud83c\udfa8 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)", - "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_disabled", - "label": "\ud83c\udf19 Disable the light website tint", - "type": "checkbox", - "defaultValue": true - }, - { - "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", - "type": "checkbox", - "defaultValue": false - }, - { - "property": "mod.sameerasw.zen_notab_img_enabled", - "label": "\ud83d\uddbc\ufe0f 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')", - "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", - "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)", - "type": "string", - "defaultValue": "1", - "placeholder": "0.75" - }, - { - "property": "mod.sameerasw.zen_notab_img_saturate", - "label": "\ud83d\uddbc\ufe0f 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)", - "type": "checkbox", - "defaultValue": false - } -] \ No newline at end of file + { + "property": "browser.tabs.allow_transparent_browser", + "label": "👀 Allow transparency (TURN OFF BEFORE UNINSTALL)", + "type": "checkbox", + "defaultValue": false + }, + { + "property": "zen.widget.linux.transparency", + "label": "👀 Allow transparency on linux (TURN OFF BEFORE UNINSTALL)", + "type": "checkbox", + "defaultValue": false, + "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": "🎨 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", + "label": "🌙 Light website tint", + "type": "dropdown", + "placeholder": "Select an option", + "defaultValue": "2", + "options": [ + { + "label": "Flip", + "value": "1" + }, + { + "label": "Remove", + "value": "2" + } + ] + }, + { + "property": "mod.sameerasw.zen_no_shadow", + "label": "🌑 Remove the shadow around the web page", + "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 + }, + { + "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" + } + ] + } +] diff --git a/themes/642854b5-88b4-4c40-b256-e035532109df/readme.md b/themes/642854b5-88b4-4c40-b256-e035532109df/readme.md index 76f2b523..035d81cf 100644 --- a/themes/642854b5-88b4-4c40-b256-e035532109df/readme.md +++ b/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 \ No newline at end of file +Enjoy <3 diff --git a/themes/642854b5-88b4-4c40-b256-e035532109df/theme.json b/themes/642854b5-88b4-4c40-b256-e035532109df/theme.json index 6b258c6f..912ae652 100644 --- a/themes/642854b5-88b4-4c40-b256-e035532109df/theme.json +++ b/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" -} \ No newline at end of file +}