diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 387b8db2..52cb2afa 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -15,8 +15,6 @@ margin-left: var(--zen-sidebar-web-panel-spacing) !important; } - #urlbar[open] - #zen-appcontent-wrapper { margin-left: var(--zen-element-separation) !important; } @@ -36,7 +34,7 @@ &:not([animate='true']) { position: absolute; z-index: 10; - transition: transform 0.25s ease, opacity 1s ease; + transition: transform 0.25s ease, opacity 1.5s ease; transform: translateX(0); top: 0; bottom: var(--zen-element-separation); @@ -112,15 +110,16 @@ #navigator-toolbox[flash-popup], #navigator-toolbox[has-popup-menu], #navigator-toolbox[movingtab], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) { - transition: transform 0.25s ease; - opacity: 1; + &:not([animate='true']) { + transition: transform 0.25s ease; + opacity: 1; - transform: translateX(calc(100% - var(--zen-element-separation) - 1px)); - :root[zen-right-side='true'] & { - transform: translateX(calc(-100% + var(--zen-element-separation) + 1px)); + transform: translateX(calc(100% - var(--zen-element-separation) - 1px)); + :root[zen-right-side='true'] & { + transform: translateX(calc(-100% + var(--zen-element-separation) + 1px)); + } } } } diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs index 3b06ae88..f258f051 100644 --- a/src/browser/base/zen-components/ZenCompactMode.mjs +++ b/src/browser/base/zen-components/ZenCompactMode.mjs @@ -111,34 +111,33 @@ var gZenCompactModeManager = { window.requestAnimationFrame(() => { let sidebarWidth = this.sidebar.getBoundingClientRect().width; if (canHideSidebar && isCompactMode) { - this.sidebar.style.position = "relative"; - this.sidebar.style.transition = "margin .4s ease, opacity .4s ease"; - this.sidebar.style.left = "0"; - this.sidebar.style.setProperty("opacity", "1", "important"); - if (!this.sidebarIsOnRight) { - this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`; - } else { - this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`; - } - this.sidebar.style.pointerEvents = "none"; - window.requestAnimationFrame(() => { - this.sidebar.style.opacity = "0"; - setTimeout(() => { - window.requestAnimationFrame(() => { - this._isAnimating = false; - this.sidebar.style.removeProperty("opacity"); - this.sidebar.style.removeProperty("position"); - this.sidebar.style.removeProperty("transition"); - this.sidebar.style.removeProperty("pointer-events"); - this.sidebar.style.removeProperty("margin-left"); - this.sidebar.style.removeProperty("margin-right"); - this.sidebar.style.removeProperty("transform"); - this.sidebar.style.removeProperty("left"); - document.getElementById('browser').style.removeProperty("overflow"); - this.sidebar.removeAttribute("animate"); - }); - }, 450); + this.sidebar.style.position = "unset"; + this.sidebar.style.transition = "margin .4s ease"; + this.sidebar.style.left = "0"; + if (!this.sidebarIsOnRight) { + this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`; + } else { + this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`; + } + this.sidebar.style.pointerEvents = "none"; + + window.requestAnimationFrame(() => { + setTimeout(() => { + window.requestAnimationFrame(() => { + this._isAnimating = false; + this.sidebar.style.removeProperty("position"); + this.sidebar.style.removeProperty("pointer-events"); + this.sidebar.style.removeProperty("margin-left"); + this.sidebar.style.removeProperty("margin-right"); + this.sidebar.style.removeProperty("transform"); + this.sidebar.style.removeProperty("left"); + document.getElementById('browser').style.removeProperty("overflow"); + this.sidebar.removeAttribute("animate"); + this.sidebar.style.removeProperty("transition"); + }); + }, 450); + }); }); } else if (canHideSidebar && !isCompactMode) { document.getElementById('browser').style.overflow = "hidden";