From b2b47dc717428668aa548053ed1a22cc80efe033 Mon Sep 17 00:00:00 2001 From: Sameera Sandakelum Date: Sat, 14 Jun 2025 20:13:20 +0530 Subject: [PATCH] Update chrome.css - added animation smoothness control --- .../chrome.css | 73 +++++++++++++++---- 1 file changed, 59 insertions(+), 14 deletions(-) diff --git a/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css b/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css index 792a1f41..e0ec47d6 100644 --- a/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css +++ b/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css @@ -8,6 +8,37 @@ } } +/* 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 { @@ -41,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; } @@ -57,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; } } @@ -155,7 +185,8 @@ tabpanels .browserStack browser { } /* Shared: Soft mask background and shadow */ -#main-window:has([mod-sameerasw_zen_compact_sidebar_type="2"]) #titlebar::before { +#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, @@ -173,12 +204,15 @@ tabpanels .browserStack browser { } /* Mask type - left sidebar */ -#main-window:not([zen-right-side="true"]):has([mod-sameerasw_zen_compact_sidebar_type="2"]) +#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 { + ) + #tabbrowser-tabpanels { mask-image: linear-gradient( to right, transparent 0, @@ -189,12 +223,15 @@ tabpanels .browserStack browser { } /* Mask type - right sidebar */ -#main-window[zen-right-side="true"]:has([mod-sameerasw_zen_compact_sidebar_type="2"]) +#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 { + ) + #tabbrowser-tabpanels { mask-image: linear-gradient( to left, transparent 0, @@ -205,27 +242,34 @@ tabpanels .browserStack browser { } /* Push type - left sidebar */ -#main-window:not([zen-right-side="true"]):has([mod-sameerasw_zen_compact_sidebar_type="1"]) +#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 { + ) + #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"]) +#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 { + ) + #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 { +#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"]) + #zen-appcontent-wrapper { --zen-compact-mode-func: linear( 0 0%, 0.002748 1%, @@ -333,7 +377,8 @@ tabpanels .browserStack browser { } /* Push: transparent titlebar */ -#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"]) #titlebar::before { +#main-window:has([mod-sameerasw_zen_compact_sidebar_type="1"]) + #titlebar::before { background-color: transparent !important; outline: none !important; box-shadow: none !important;