mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 20:35:28 +02:00
Added browser loading for glance and animations!
This commit is contained in:
parent
15548d9bb2
commit
c7bf92f20b
6 changed files with 200 additions and 32 deletions
|
@ -1 +1 @@
|
|||
Subproject commit 416369c981695af637ba640d11f49047473e276c
|
||||
Subproject commit 8cfb95a3ac9d98afb056af0b175ee321cc0298f8
|
|
@ -1,6 +1,12 @@
|
|||
<hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.closeGlance()">
|
||||
<hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.onOverlayClick(event)">
|
||||
<hbox id="zen-glance-content">
|
||||
<vbox id="zen-glance-browser-container"></vbox>
|
||||
<vbox id="zen-glance-sidebar-container"></vbox>
|
||||
<vbox id="zen-glance-browser-container">
|
||||
<vbox id="zen-glance-browser">
|
||||
<hbox id="zen-glance-loading"></hbox>
|
||||
</vbox>
|
||||
<vbox id="zen-glance-sidebar-container">
|
||||
<toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance()"/>
|
||||
</vbox>
|
||||
</vbox>
|
||||
</hbox>
|
||||
</hbox>
|
|
@ -227,32 +227,105 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes zen-glance-overlay-animation-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-glance-content-animation {
|
||||
/* make the box appear from initial width/height and x/y coordinates */
|
||||
0% {
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
75% {
|
||||
30% {
|
||||
top: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
70% {
|
||||
/* make the box grow to full width/height */
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: -5px;
|
||||
left: 50%;
|
||||
width: 92%;
|
||||
height: 92%;
|
||||
width: 78%;
|
||||
height: 103%;
|
||||
}
|
||||
|
||||
100% {
|
||||
/* make the box shrink to final width/height and x/y coordinates */
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translateX(-50%);
|
||||
opacity: 1;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
top: 50%;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
top: -5px;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-glance-content-animation-out {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
5% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
96% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
98% {
|
||||
/* make the box grow to full width/height */
|
||||
opacity: 1;
|
||||
transform: translateX(-50%);
|
||||
top: -5px;
|
||||
left: 50%;
|
||||
width: 77%;
|
||||
height: 102%;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
opacity: 1;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
top: -5px;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-glance-loading-animation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
90% {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-glance-buttons-animation {
|
||||
from {
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(105%);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,13 +5,15 @@
|
|||
position: relative;
|
||||
|
||||
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), var(--zen-colors-border));
|
||||
& .browserContainer {
|
||||
& .browserContainer,
|
||||
#zen-glance-browser-container browser {
|
||||
overflow: hidden;
|
||||
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
|
||||
&.deck-selected .browserContainer {
|
||||
&.deck-selected .browserContainer,
|
||||
#zen-glance-browser-container {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,9 +7,9 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
background: color-mix(in srgb, var(--zen-colors-tertiary) 5%, transparent 95%);
|
||||
background: color-mix(in srgb, var(--zen-colors-tertiary) 10%, transparent 90%);
|
||||
backdrop-filter: blur(2px);
|
||||
animation: zen-glance-overlay-animation 0.2s ease-in-out forwards;
|
||||
animation: zen-glance-overlay-animation 0.1s ease-in-out forwards;
|
||||
border-radius: var(--zen-border-radius);
|
||||
|
||||
&[hidden='true'] {
|
||||
|
@ -17,15 +17,29 @@
|
|||
}
|
||||
|
||||
&[fade-out='true'] {
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
|
||||
& #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;
|
||||
animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
|
||||
animation-direction: reverse !important;
|
||||
|
||||
& browser {
|
||||
opacity: 0;
|
||||
transition: all .8s ease-in-out;
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
|
||||
& #zen-glance-sidebar-container {
|
||||
opacity: 0;
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
|
||||
& #zen-glance-loading {
|
||||
width: 0 !important;
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -36,17 +50,89 @@
|
|||
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);
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
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;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
& #zen-glance-browser {
|
||||
border-radius: var(--zen-border-radius);
|
||||
background: var(--zen-dialog-background);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& #zen-glance-sidebar-container {
|
||||
position: fixed;
|
||||
top: 1%;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
border-radius: var(--zen-border-radius);
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
background: var(--zen-dialog-background);
|
||||
|
||||
padding: 3px;
|
||||
gap: 2px;
|
||||
|
||||
animation: zen-glance-buttons-animation 0.2s ease-in-out forwards;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
& #zen-glance-loading {
|
||||
height: 2px;
|
||||
background: var(--zen-primary-color);
|
||||
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&[not-loading='true'] {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&[loading='true'] {
|
||||
width: 80%;
|
||||
transition: width 8s ease-in-out;
|
||||
}
|
||||
|
||||
&:not([loading='true']):not([not-loading='true']) {
|
||||
animation: zen-glance-loading-animation .8s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
& browser {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
&[animate='true'] {
|
||||
animation: zen-glance-content-animation .4s ease-in-out forwards;
|
||||
animation-delay: 0.1s;
|
||||
|
||||
&:not([animate-end='true']) {
|
||||
pointer-events: none;
|
||||
|
||||
& browser {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #zen-glance-sidebar-container {
|
||||
opacity: 0;
|
||||
animation: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -44,6 +44,7 @@
|
|||
#stop-button,
|
||||
.close-icon,
|
||||
#zen-sidebar-web-panel-close,
|
||||
#zen-glance-sidebar-close,
|
||||
.zen-theme-picker-custom-list-item-remove {
|
||||
list-style-image: url('close.svg') !important;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue