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 12:12:00 +01:00
parent 9d5ee6291d
commit 0b77b93801
5 changed files with 85 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/zen-sidebar-panel.inc.xhtml
View File

@@ -1,5 +1,5 @@
<hbox id="zen-sidebar-web-panel-wrapper">
<box id="zen-sidebar-web-panel" class="chromeclass-extrachrome" hidden="true" persist="pinned style hidden">
<box id="zen-sidebar-web-panel" class="chromeclass-extrachrome" hidden="true" persist="pinned style hidden" pinned="true">
<toolbar mode="icons" flex="1" id="zen-sidebar-web-header" fullscreentoolbar="true">
<hbox>
<toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.back();"/>

55
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -77,26 +77,63 @@
}
}
@keyframes zen-sidebar-panel-animation {
@keyframes better-sidebar-pinned-hide {
0% {
opacity: 0;
transform: scale3d(0.9, 0.9, 0.9);
opacity: 1;
transform: perspective(var(--sideper)) scale(1) rotateX(0deg);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
transform: perspective(var(--sideper)) scale(0.99) rotateX(-5deg);
opacity: 0;
}
}
@keyframes zen-sidebar-panel-animation-2 {
@keyframes better-sidebar-pinned-show {
0% {
opacity: 1;
transform: translateX(-50px);
opacity: 0;
transform: perspective(var(--sideper)) scale(0.99) rotateX(-5deg);
}
100% {
transform: translateX(0);
transform: perspective(var(--sideper)) scale(1) rotateX(0deg);
opacity: 1;
}
}
@keyframes better-sidebar-hide {
0% {
opacity: 1;
transform: perspective(var(--sideper)) scale(1) rotateX(0deg);
}
100% {
transform: perspective(var(--sideper)) scale(0.99) rotateX(-5deg);
opacity: 0;
}
}
@keyframes better-sidebar-show {
0% {
opacity: 0;
}
100% {
transform: perspective(var(--sideper)) scale(1);
opacity: 1;
}
}
@keyframes better-sidebar-intro-show {
0% {
opacity: 0;
transform: translateY(5px);
}
100% {
transform: translateY(0px);
opacity: 1;
}
}

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

@@ -137,10 +137,6 @@
margin: 0;
}
#zen-sidebar-web-panel:not([pinned='true']) {
animation: zen-sidebar-panel-animation 0.3s ease-in-out forwards;
}
#main-window[customizing='true'] #zen-sidebar-web-panel-wrapper {
display: none !important;
}
@@ -156,14 +152,12 @@
#zen-sidebar-web-panel[pinned='true'] {
position: absolute;
z-index: 1;
animation: zen-sidebar-panel-animation-2 0.15s ease-in-out forwards;
max-height: 100%;
}
#zen-sidebar-web-panel[hidden='true'][pinned='true'] {
display: flex;
pointer-events: none;
animation: zen-sidebar-panel-animation-reverse 0.15s ease-in-out forwards;
}
#zen-sidebar-web-header,

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

@@ -73,3 +73,41 @@
#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;
}

2
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -594,8 +594,6 @@
}
&[zen-right-side='true'] #TabsToolbar {
animation: zen-sidebar-panel-animation-right 0.3s ease-in-out;
right: 0;
border-right: 0;
border-left: 1px solid var(--zen-colors-border);