mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 00:45:30 +02:00
Update chrome.css - added animation smoothness control
This commit is contained in:
parent
cfd699adcd
commit
b2b47dc717
1 changed files with 59 additions and 14 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue