mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-01 23:48:37 +00:00
Update subproject commit in zen-components
This commit is contained in:
mr. M
@@ -49,7 +49,7 @@ var gZenUIManager = {
|
||||
for (const el of this._popupTrackingElements) {
|
||||
// target may be inside a shadow root, not directly under the element
|
||||
// we also ignore menus inside panels
|
||||
if (!el.contains(showEvent.explicitOriginalTarget) || showEvent.explicitOriginalTarget.closest('panel')) {
|
||||
if (!el.contains(showEvent.explicitOriginalTarget) || (showEvent.explicitOriginalTarget && showEvent.explicitOriginalTarget?.closest('panel'))) {
|
||||
continue;
|
||||
}
|
||||
document.removeEventListener('mousemove', this.__removeHasPopupAttribute);
|
||||
|
||||
Submodule src/browser/base/content/zen-components updated: c8ab57a01e...ec38032192
@@ -1,14 +1,4 @@
|
||||
<hbox id="zen-glance-overlay" hidden="true" onclick="gZenGlanceManager.onOverlayClick(event)">
|
||||
<hbox id="zen-glance-content">
|
||||
<vbox id="zen-glance-browser-container">
|
||||
<vbox id="zen-glance-sidebar-container">
|
||||
<toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance()"/>
|
||||
<toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
|
||||
</vbox>
|
||||
<vbox id="zen-glance-browser">
|
||||
<hbox id="zen-glance-loading"></hbox>
|
||||
</vbox>
|
||||
</vbox>
|
||||
</hbox>
|
||||
<hbox id="zen-glance-tabs" hidden="true"></hbox>
|
||||
</hbox>
|
||||
<vbox id="zen-glance-sidebar-container">
|
||||
<toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance()"/>
|
||||
<toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
|
||||
</vbox>
|
||||
@@ -3,10 +3,6 @@
|
||||
@media (-moz-bool-pref: 'zen.view.compact') {
|
||||
:root:not([customizing]):not([inDOMFullscreen='true']) {
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
|
||||
#zen-glance-overlay {
|
||||
width: calc(100% - var(--zen-element-separation) * 2);
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
|
||||
}
|
||||
@@ -15,11 +11,6 @@
|
||||
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
||||
}
|
||||
|
||||
&:not([inDOMFullscreen='true']) #zen-glance-overlay {
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
padding-right: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
/* Set the extra paddings */
|
||||
#tabbrowser-tabpanels {
|
||||
:root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
@@ -108,10 +99,6 @@
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
#zen-glance-overlay {
|
||||
height: calc(100% - var(--zen-element-separation) * 2);
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-top-align: var(--zen-element-separation);
|
||||
}
|
||||
@@ -120,10 +107,6 @@
|
||||
padding-top: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
&:not([inDOMFullscreen='true']) #zen-glance-overlay {
|
||||
margin-top: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
#sidebar-box,
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
|
||||
margin-top: var(--zen-element-separation) !important;
|
||||
|
||||
@@ -1,186 +1,146 @@
|
||||
|
||||
#zen-glance-overlay {
|
||||
height: calc(100% - var(--zen-element-separation));
|
||||
width: calc(100% - var(--zen-element-separation));
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
.browserSidebarContainer:has([zen-glance-selected]),
|
||||
.browserSidebarContainer.zen-glance-overlay {
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
margin-left: var(--zen-element-separation);
|
||||
#tabbrowser-tabpanels {
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels:has(.zen-glance-background) {
|
||||
transform: scale(0.98);
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
& .zen-glance-background {
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:has([animate-full-end='true'])):not(:has([animate-full='true'])) {
|
||||
background: color-mix(in srgb, var(--zen-colors-secondary) 30%, transparent 70%);
|
||||
backdrop-filter: blur(2px);
|
||||
animation: zen-glance-overlay-animation 0.1s ease-in-out forwards;
|
||||
}
|
||||
|
||||
border-radius: var(--zen-border-radius);
|
||||
|
||||
&[hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
#zen-glance-sidebar-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.browserSidebarContainer.zen-glance-overlay {
|
||||
&[fade-out='true'] {
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
|
||||
& #zen-glance-content {
|
||||
& #zen-glance-browser-container {
|
||||
animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
|
||||
animation-direction: reverse !important;
|
||||
& .browserContainer {
|
||||
animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
|
||||
animation-direction: reverse !important;
|
||||
|
||||
& browser {
|
||||
opacity: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-glance-content {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
& #zen-glance-browser-container {
|
||||
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);
|
||||
position: absolute;
|
||||
border-radius: var(--zen-border-radius);
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&[has-finished-animation='true'] {
|
||||
position: relative !important;
|
||||
transition: 0s !important;
|
||||
transform: none !important;
|
||||
margin: auto !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
& #zen-glance-browser {
|
||||
border-radius: var(--zen-border-radius);
|
||||
background: var(--zen-dialog-background);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: var(--zen-border-radius);
|
||||
height: 100%;
|
||||
& browser {
|
||||
opacity: 0;
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
|
||||
& #zen-glance-sidebar-container {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
background: var(--zen-dialog-background);
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
border-right: none;
|
||||
& .browserContainer {
|
||||
background: var(--zen-dialog-background);
|
||||
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);
|
||||
position: absolute;
|
||||
border-radius: var(--zen-border-radius);
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex: unset !important;
|
||||
|
||||
border-top-left-radius: var(--zen-border-radius);
|
||||
border-bottom-left-radius: var(--zen-border-radius);
|
||||
&[has-finished-animation='true'] {
|
||||
position: relative !important;
|
||||
transition: 0s !important;
|
||||
transform: none !important;
|
||||
margin: auto !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
padding: 5px;
|
||||
gap: 6px;
|
||||
& #zen-glance-browser {
|
||||
border-radius: var(--zen-border-radius);
|
||||
background: var(--zen-dialog-background);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: var(--zen-border-radius);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
animation: zen-glance-buttons-animation 0.2s ease-in-out forwards;
|
||||
animation-delay: 0.3s;
|
||||
& #zen-glance-sidebar-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 10%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
background: var(--zen-dialog-background);
|
||||
|
||||
& toolbarbutton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
border-right: none;
|
||||
|
||||
& label {
|
||||
display: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-glance-loading {
|
||||
height: 2px;
|
||||
background: var(--zen-primary-color);
|
||||
& browser {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
&[animate-full='true'] {
|
||||
opacity: 1;
|
||||
animation: zen-glance-buttons-animation-full 0.3s ease-in-out forwards !important;
|
||||
|
||||
& #zen-glance-sidebar-container {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[animate='true'] {
|
||||
animation: zen-glance-content-animation .4s ease-in-out forwards;
|
||||
animation-delay: 0.1s;
|
||||
|
||||
&:not([animate-end='true']) {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&[not-loading='true'] {
|
||||
width: 0;
|
||||
& browser {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&[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-full='true'] {
|
||||
opacity: 1;
|
||||
animation: zen-glance-buttons-animation-full 0.3s ease-in-out forwards !important;
|
||||
|
||||
& #zen-glance-sidebar-container {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
& #zen-glance-loading {
|
||||
width: 0 !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[animate='true'] {
|
||||
animation: zen-glance-content-animation .4s ease-in-out forwards;
|
||||
animation-delay: 0.1s;
|
||||
|
||||
&:not([animate-end='true']) {
|
||||
opacity: 0;
|
||||
animation: none;
|
||||
pointer-events: none;
|
||||
|
||||
& browser {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& #zen-glance-sidebar-container {
|
||||
opacity: 0;
|
||||
animation: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -128,6 +128,26 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* We have a tab inside a tab, this means, it's a glance tab */
|
||||
& .tabbrowser-tab {
|
||||
border-radius: 5px;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
|
||||
& .tab-background {
|
||||
background: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
& label { display: none !important; }
|
||||
& .tab-close-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
& .tab-icon-image {
|
||||
--toolbarbutton-inner-padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -321,7 +341,7 @@
|
||||
& .tab-background {
|
||||
@media not (prefers-color-scheme: dark) {
|
||||
&:is([selected], [multiselected]) {
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15) !important;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
margin-inline: var(--tab-block-margin);
|
||||
@@ -329,7 +349,7 @@
|
||||
}
|
||||
|
||||
&:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
|
||||
display: block !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-throbber,
|
||||
@@ -474,6 +494,11 @@
|
||||
& .tab-icon-pending {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide glances */
|
||||
& .tabbrowser-tab {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user