ZenBrowserMirrors/theme-store
1
0
Fork 0
mirror of https://github.com/zen-browser/theme-store.git synced 2025-07-07 00:45:30 +02:00
Code Issues Projects Releases Packages Wiki Activity

Update chrome.css - added animation smoothness control

Browse source
This commit is contained in:
Sameera Sandakelum 2025-06-14 20:13:20 +05:30 • committed by GitHub
parent cfd699adcd
commit b2b47dc717
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 59 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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