forked from ZenBrowserMirrors/zen-desktop
139 lines
3 KiB
CSS
139 lines
3 KiB
CSS
/*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
.browserSidebarContainer:has([zen-glance-selected]),
|
|
.browserSidebarContainer.zen-glance-overlay {
|
|
visibility: inherit;
|
|
}
|
|
|
|
.zen-glance-background {
|
|
transform: scale(0.98);
|
|
backdrop-filter: blur(5px);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#zen-glance-sidebar-container {
|
|
display: none;
|
|
|
|
& toolbarbutton:hover {
|
|
background: var(--button-background-color-hover);
|
|
}
|
|
}
|
|
|
|
.browserSidebarContainer.zen-glance-overlay {
|
|
box-shadow: none !important;
|
|
|
|
&[fade-out='true'] {
|
|
background: transparent;
|
|
opacity: 1;
|
|
|
|
& .browserContainer {
|
|
opacity: 1;
|
|
animation: zen-glance-content-animation-out 0.3s ease-in-out forwards !important;
|
|
|
|
& browser {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
& #zen-glance-sidebar-container {
|
|
opacity: 0;
|
|
transition: opacity 0.1s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .browserContainer {
|
|
background: var(--zen-dialog-background);
|
|
position: fixed;
|
|
border-radius: var(--zen-border-radius);
|
|
opacity: 0;
|
|
top: 0;
|
|
left: 0;
|
|
flex: unset !important;
|
|
border: 1px solid var(--zen-colors-border);
|
|
|
|
&[has-finished-animation='true'] {
|
|
position: relative !important;
|
|
transition: 0s !important;
|
|
transform: none !important;
|
|
margin: auto !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
}
|
|
|
|
& .browserStack {
|
|
border-radius: var(--zen-border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
& #zen-glance-sidebar-container {
|
|
position: absolute;
|
|
display: flex;
|
|
top: 10%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
opacity: 0;
|
|
background: var(--zen-dialog-background);
|
|
|
|
border: 1px solid var(--zen-colors-border);
|
|
border-right: none;
|
|
|
|
border-top-left-radius: var(--zen-border-radius);
|
|
border-bottom-left-radius: var(--zen-border-radius);
|
|
|
|
padding: 5px;
|
|
gap: 6px;
|
|
|
|
animation: zen-glance-buttons-animation 0.2s ease-in-out forwards;
|
|
animation-delay: 0.3s;
|
|
|
|
& toolbarbutton {
|
|
width: 32px;
|
|
height: 32px;
|
|
|
|
& label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
& browser {
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 1;
|
|
transition: opacity 0.2s ease-in-out;
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
&[animate-full='true'] {
|
|
opacity: 1;
|
|
animation: zen-glance-buttons-animation-full 0.2s ease-in-out forwards !important;
|
|
|
|
& #zen-glance-sidebar-container {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
&[animate='true'] {
|
|
animation: zen-glance-content-animation 0.4s ease-in-out forwards;
|
|
|
|
&:not([animate-end='true']) {
|
|
pointer-events: none;
|
|
|
|
& browser {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
& #zen-glance-sidebar-container {
|
|
opacity: 0;
|
|
animation: none;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|