mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-02 16:08:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix animation and layout issues in zen-components and zen-styles

Browse Source
This commit is contained in:
mr. M
2024-10-30 13:18:27 +01:00
parent d978d35533
commit 2b18df8398
3 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: b1b3cb8555...16fc60e1f0

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

@@ -244,28 +244,28 @@
} }
30% { 30% {
top: -5px; top: 50%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translate(-50%, -50%);
} }
70% { 70% {
/* make the box grow to full width/height */ /* make the box grow to full width/height */
opacity: 1; opacity: 1;
transform: translateX(-50%); transform: translate(-50%, -50%);
top: -5px; top: 50%;
left: 50%; left: 50%;
width: 78%; width: 87%;
height: 103%; height: 87%;
} }
100% { 100% {
/* make the box shrink to final width/height and x/y coordinates */ /* make the box shrink to final width/height and x/y coordinates */
transform: translateX(-50%); transform: translate(-50%, -50%);
opacity: 1; opacity: 1;
width: 75%; width: 85%;
height: 100%; height: 85%;
top: -5px; top: 50%;
left: 50%; left: 50%;
} }
} }
@@ -284,22 +284,22 @@
} }
100% { 100% {
transform: translateX(-50%); transform: translate(-50%, -50%);
opacity: 1; opacity: 1;
width: 75%; width: 85%;
height: 100%; height: 85%;
top: -5px; top: 50%;
left: 50%; left: 50%;
} }
} }
@keyframes zen-glance-buttons-animation-full { @keyframes zen-glance-buttons-animation-full {
from { from {
width: 75%; width: 85%;
height: 100%; height: 85%;
top: -5px; top: 50%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translate(-50%, -50%);
} }
to { to {

3
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -60,6 +60,7 @@
width: var(--initial-width); width: var(--initial-width);
height: var(--initial-height); height: var(--initial-height);
position: absolute; position: absolute;
border-radius: var(--zen-border-radius);
opacity: 0; opacity: 0;
top: 0; top: 0;
left: 0; left: 0;
@@ -126,7 +127,7 @@
&[animate-full='true'] { &[animate-full='true'] {
opacity: 1; opacity: 1;
animation: zen-glance-buttons-animation-full 0.2s ease-in-out forwards !important; animation: zen-glance-buttons-animation-full 0.3s ease-in-out forwards !important;
& #zen-glance-sidebar-container { & #zen-glance-sidebar-container {
opacity: 0 !important; opacity: 0 !important;