mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-21 23:05:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added glance animations

Browse Source
This commit is contained in:
mr. M
2024-10-28 16:59:41 +01:00
parent 441379b6e8
commit 15548d9bb2
4 changed files with 69 additions and 5 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: a942043645...416369c981

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

@@ -226,3 +226,33 @@
transform: scale(1);
}
}
@keyframes zen-glance-content-animation {
/* make the box appear from initial width/height and x/y coordinates */
0% {
}
25% {
opacity: 1;
}
75% {
/* make the box grow to full width/height */
opacity: 1;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 92%;
height: 92%;
}
100% {
/* make the box shrink to final width/height and x/y coordinates */
transform: translate(-50%, -50%);
opacity: 1;
width: 90%;
height: 90%;
top: 50%;
left: 50%;
}
}

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

@@ -7,12 +7,46 @@
top: 0;
left: 0;
z-index: 3;
background: color-mix(in srgb, var(--zen-colors-tertiary) 20%, transparent 80%);
backdrop-filter: blur(3px);
background: color-mix(in srgb, var(--zen-colors-tertiary) 5%, transparent 95%);
backdrop-filter: blur(2px);
animation: zen-glance-overlay-animation 0.2s ease-in-out forwards;
border-radius: var(--zen-border-radius);
&[hidden='true'] {
display: none;
}
&[fade-out='true'] {
& #zen-glance-content {
& #zen-glance-browser-container {
transform: translate(var(--initial-x), var(--initial-y));
width: var(--initial-width);
height: var(--initial-height);
top: 0;
left: 0;
opacity: 0;
transition: all .8s ease-in-out;
}
}
}
& #zen-glance-content {
width: 100%;
height: 100%;
display: flex;
& #zen-glance-browser-container {
opacity: .5;
background: var(--zen-dialog-background);
border-radius: var(--zen-border-radius);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
transform: translate(var(--initial-x), var(--initial-y));
width: var(--initial-width);
height: var(--initial-height);
animation: zen-glance-content-animation .8s ease-in-out forwards;
position: absolute;
top: 0;
left: 0;
}
}
}

4
src/browser/base/content/zen-styles/zen-panel-ui.css
View File

@@ -1,7 +1,7 @@
panel[type='arrow'][animate][animate='open'] {
animation: zen-jello-animation 0.2s ease-in-out;
animation: zen-jello-animation 0.3s ease-in-out;
}
panel[type='arrow'][animate]:not([animate='open']) {
animation: zen-jello-out-animation 0.2s ease-in-out;
animation: zen-jello-out-animation 0.3s ease-in-out;
}