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">
|
<hbox id="zen-glance-content">
|
||||||
<vbox id="zen-glance-browser-container"></vbox>
|
<vbox id="zen-glance-browser-container">
|
||||||
<vbox id="zen-glance-sidebar-container"></vbox>
|
<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>
|
||||||
</hbox>
|
</hbox>
|
|
@ -227,32 +227,105 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes zen-glance-overlay-animation-out {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes zen-glance-content-animation {
|
@keyframes zen-glance-content-animation {
|
||||||
/* make the box appear from initial width/height and x/y coordinates */
|
/* make the box appear from initial width/height and x/y coordinates */
|
||||||
0% {
|
0% {
|
||||||
}
|
|
||||||
|
|
||||||
25% {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
75% {
|
30% {
|
||||||
|
top: -5px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
/* make the box grow to full width/height */
|
/* make the box grow to full width/height */
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%, -50%);
|
transform: translateX(-50%);
|
||||||
top: 50%;
|
top: -5px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 92%;
|
width: 78%;
|
||||||
height: 92%;
|
height: 103%;
|
||||||
}
|
}
|
||||||
|
|
||||||
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: translate(-50%, -50%);
|
transform: translateX(-50%);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
width: 90%;
|
width: 75%;
|
||||||
height: 90%;
|
height: 100%;
|
||||||
top: 50%;
|
top: -5px;
|
||||||
left: 50%;
|
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;
|
position: relative;
|
||||||
|
|
||||||
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), var(--zen-colors-border));
|
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;
|
overflow: hidden;
|
||||||
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
|
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
|
@media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
|
||||||
&.deck-selected .browserContainer {
|
&.deck-selected .browserContainer,
|
||||||
|
#zen-glance-browser-container {
|
||||||
mix-blend-mode: multiply;
|
mix-blend-mode: multiply;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,9 +7,9 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 3;
|
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);
|
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);
|
border-radius: var(--zen-border-radius);
|
||||||
|
|
||||||
&[hidden='true'] {
|
&[hidden='true'] {
|
||||||
|
@ -17,15 +17,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&[fade-out='true'] {
|
&[fade-out='true'] {
|
||||||
|
background: transparent;
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
& #zen-glance-content {
|
& #zen-glance-content {
|
||||||
& #zen-glance-browser-container {
|
& #zen-glance-browser-container {
|
||||||
transform: translate(var(--initial-x), var(--initial-y));
|
animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
|
||||||
width: var(--initial-width);
|
animation-direction: reverse !important;
|
||||||
height: var(--initial-height);
|
|
||||||
top: 0;
|
& browser {
|
||||||
left: 0;
|
opacity: 0;
|
||||||
opacity: 0;
|
transition: opacity .1s ease-in-out;
|
||||||
transition: all .8s 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;
|
display: flex;
|
||||||
|
|
||||||
& #zen-glance-browser-container {
|
& #zen-glance-browser-container {
|
||||||
opacity: .5;
|
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||||
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));
|
transform: translate(var(--initial-x), var(--initial-y));
|
||||||
width: var(--initial-width);
|
width: var(--initial-width);
|
||||||
height: var(--initial-height);
|
height: var(--initial-height);
|
||||||
animation: zen-glance-content-animation .8s ease-in-out forwards;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 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,
|
#stop-button,
|
||||||
.close-icon,
|
.close-icon,
|
||||||
#zen-sidebar-web-panel-close,
|
#zen-sidebar-web-panel-close,
|
||||||
|
#zen-glance-sidebar-close,
|
||||||
.zen-theme-picker-custom-list-item-remove {
|
.zen-theme-picker-custom-list-item-remove {
|
||||||
list-style-image: url('close.svg') !important;
|
list-style-image: url('close.svg') !important;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue