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;