mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor sidebar panel animation in zen-sidebar-panel.inc.xhtml and zen-styles/zen-animations.css

Browse Source
This commit is contained in:
mr. M
2024-10-27 13:34:04 +01:00
parent be376ef2ac
commit ea871aaa7b
2 changed files with 42 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/browser/base/content/zen-styles/zen-sidebar-panels.css
View File

@@ -192,6 +192,10 @@
#zen-sidebar-web-panel-browser-containers {
height: 100%;
position: relative;
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
mix-blend-mode: multiply;
}
}
#zen-sidebar-introduction-panel {
@@ -237,3 +241,41 @@
text-align: center;
display: block;
}
#zen-sidebar-web-panel[pinned] {
--sideper: 4000px;
transform-origin: 50% 20%;
}
#zen-sidebar-web-panel[pinned]:not([hidden]) {
animation: better-sidebar-pinned-show 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel[pinned][hidden] {
animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
}
/** UNPINNED **/
#zen-sidebar-web-panel {
--sideper: 4000px;
/* Sets perspective */
transform-origin: 50% 20%;
}
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel * {
opacity: 0;
animation: better-sidebar-intro-show 0.5s 0.4s ease-out forwards !important;
}
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel p {
animation: better-sidebar-intro-show 0.5s 0.8s ease-out forwards !important;
}
#zen-sidebar-web-panel:not([hidden]) {
animation: better-sidebar-show 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel[hidden] {
animation: better-sidebar-hide 0.15s ease-in-out forwards !important;
}

38
src/browser/base/content/zen-styles/zen-sidebar.css
View File

@@ -73,41 +73,3 @@
#toolbar-menubar {
display: none !important;
}
#zen-sidebar-web-panel[pinned] {
--sideper: 4000px;
transform-origin: 50% 20%;
}
#zen-sidebar-web-panel[pinned]:not([hidden]) {
animation: better-sidebar-pinned-show 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel[pinned][hidden] {
animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
}
/** UNPINNED **/
#zen-sidebar-web-panel {
--sideper: 4000px;
/* Sets perspective */
transform-origin: 50% 20%;
}
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel * {
opacity: 0;
animation: better-sidebar-intro-show 0.5s 0.4s ease-out forwards !important;
}
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel p {
animation: better-sidebar-intro-show 0.5s 0.8s ease-out forwards !important;
}
#zen-sidebar-web-panel:not([hidden]) {
animation: better-sidebar-show 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel[hidden] {
animation: better-sidebar-hide 0.15s ease-in-out forwards !important;
}