Refactor sidebar panel animation and update subproject commit

This commit is contained in:
mr. M
2024-10-27 20:32:24 +01:00
parent ea871aaa7b
commit 25c8796888
3 changed files with 8 additions and 14 deletions

View File

@@ -80,11 +80,11 @@
@keyframes better-sidebar-pinned-hide { @keyframes better-sidebar-pinned-hide {
0% { 0% {
opacity: 1; opacity: 1;
transform: perspective(var(--sideper)) scale(1) rotateX(0deg); transform: scale(1) rotateX(0deg);
} }
100% { 100% {
transform: perspective(var(--sideper)) scale(0.99) rotateX(-5deg); transform: scale(0.99) rotateX(-5deg);
opacity: 0; opacity: 0;
} }
} }
@@ -93,11 +93,11 @@
0% { 0% {
opacity: 0; opacity: 0;
transform: perspective(var(--sideper)) scale(0.99) rotateX(-5deg); transform: scale(0.99) rotateX(-5deg);
} }
100% { 100% {
transform: perspective(var(--sideper)) scale(1) rotateX(0deg); transform: scale(1) rotateX(0deg);
opacity: 1; opacity: 1;
} }
} }
@@ -106,11 +106,11 @@
0% { 0% {
opacity: 1; opacity: 1;
transform: perspective(var(--sideper)) scale(1) rotateX(0deg); transform: scale(1) rotateX(0deg);
} }
100% { 100% {
transform: perspective(var(--sideper)) scale(0.99) rotateX(-5deg); transform: scale(0.99) rotateX(-5deg);
opacity: 0; opacity: 0;
} }
} }
@@ -121,7 +121,7 @@
} }
100% { 100% {
transform: perspective(var(--sideper)) scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
} }

View File

@@ -192,10 +192,6 @@
#zen-sidebar-web-panel-browser-containers { #zen-sidebar-web-panel-browser-containers {
height: 100%; height: 100%;
position: relative; position: relative;
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
mix-blend-mode: multiply;
}
} }
#zen-sidebar-introduction-panel { #zen-sidebar-introduction-panel {
@@ -243,7 +239,6 @@
} }
#zen-sidebar-web-panel[pinned] { #zen-sidebar-web-panel[pinned] {
--sideper: 4000px;
transform-origin: 50% 20%; transform-origin: 50% 20%;
} }
@@ -257,7 +252,6 @@
/** UNPINNED **/ /** UNPINNED **/
#zen-sidebar-web-panel { #zen-sidebar-web-panel {
--sideper: 4000px;
/* Sets perspective */ /* Sets perspective */
transform-origin: 50% 20%; transform-origin: 50% 20%;
} }