forked from ZenBrowserMirrors/zen-desktop
52 lines
1.3 KiB
CSS
52 lines
1.3 KiB
CSS
|
|
#zen-glance-overlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
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;
|
|
}
|
|
}
|
|
}
|