diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 9f904475..f7df0d30 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -121,7 +121,7 @@ pref('zen.view.sidebar-height-throttle', 200); // in ms pref('zen.view.sidebar-expanded.max-width', 400); pref('zen.view.show-bottom-border', false); -pref('zen.view.use-single-toolbar', true); +pref('zen.view.use-single-toolbar', false, locked); #ifndef XP_MACOSX pref('zen.view.hide-window-controls', true); diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 3ee1d41c..bc17c295 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -310,6 +310,8 @@ var gZenVerticalTabsManager = { navBar.prepend(windowButtons); } } + } else if (!isSingleToolbar && isCompactMode) { + navBar.appendChild(windowButtons); } // Always move the splitter next to the sidebar diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css index 9583d87c..b6fe193f 100644 --- a/src/browser/base/content/zen-styles/zen-animations.css +++ b/src/browser/base/content/zen-styles/zen-animations.css @@ -220,23 +220,22 @@ @keyframes zen-glance-content-animation { /* make the box appear from initial width/height and x/y coordinates */ 0% { - opacity: 1; - } - - 30% { + opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(0); + width: 0%; + height: 0%; } 70% { /* make the box grow to full width/height */ - opacity: 1; + opacity: .5; transform: translate(-50%, -50%) translateZ(0); top: 50%; left: 50%; width: 87%; - height: calc(102% + 10px); + height: 102%; } 100% { @@ -244,7 +243,7 @@ transform: translate(-50%, -50%) translateZ(0); opacity: 1; width: 85%; - height: calc(100% + 10px); + height: 100%; top: 50%; left: 50%; } @@ -252,16 +251,33 @@ @keyframes zen-glance-content-animation-out { 0% { - border: none; + /* make the box shrink to final width/height and x/y coordinates */ + transform: translate(-50%, -50%) translateZ(0); + opacity: 1; + width: 85%; + height: 100%; + top: 50%; + left: 50%; + } + + 50% { + /* make the box grow to full width/height */ + opacity: 1; + transform: translate(-50%, -50%) translateZ(0); + top: 50%; + left: 50%; + width: 87%; + height: 102%; } 100% { - transform: translate(-50%, -50%); - opacity: 1; - width: 85%; - height: calc(100% + 10px); + /* make the box appear from initial width/height and x/y coordinates */ + opacity: 0; top: 50%; left: 50%; + transform: translate(-50%, -50%) translateZ(0); + width: 0%; + height: 0%; } } diff --git a/src/browser/base/content/zen-styles/zen-glance.css b/src/browser/base/content/zen-styles/zen-glance.css index cc7bd901..203ad53d 100644 --- a/src/browser/base/content/zen-styles/zen-glance.css +++ b/src/browser/base/content/zen-styles/zen-glance.css @@ -4,18 +4,11 @@ visibility: inherit; } -#tabbrowser-tabpanels { - transition: transform 0.1s ease-in-out; -} - -#tabbrowser-tabpanels:has(.zen-glance-background) { +.zen-glance-background { + transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; transform: scale(0.98); backdrop-filter: blur(5px); - - & .zen-glance-background { - opacity: 0.6; - transition: opacity 0.1s ease-in-out; - } + opacity: 0.6; } #zen-glance-sidebar-container { @@ -27,18 +20,19 @@ } .browserSidebarContainer.zen-glance-overlay { + box-shadow: none !important; + &[fade-out='true'] { background: transparent; opacity: 1; & .browserContainer { - opacity: 1 !important; - animation: zen-glance-content-animation-out .3s ease-out forwards !important; - animation-direction: reverse !important; + opacity: 1; + animation: zen-glance-content-animation-out .5s ease-in-out forwards !important; & browser { opacity: 0; - transition: opacity .1s ease-in-out; + transition: opacity .3s ease-in-out; } & #zen-glance-sidebar-container { @@ -50,10 +44,6 @@ & .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: fixed; border-radius: var(--zen-border-radius); overflow: hidden; @@ -68,7 +58,7 @@ transition: 0s !important; transform: none !important; margin: auto !important; - top: -5px !important; + top: 0 !important; left: 0 !important; } @@ -121,8 +111,7 @@ } &[animate='true'] { - animation: zen-glance-content-animation .3s ease-in-out forwards; - animation-delay: 0.1s; + animation: zen-glance-content-animation .4s ease-in-out forwards; &:not([animate-end='true']) { pointer-events: none; diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css index 0e84a526..8cf35794 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css @@ -16,8 +16,3 @@ height: var(--zen-toolbar-height); } } } - -:root:not([zen-window-buttons-reversed='true']) & .titlebar-buttonbox-container { - margin-left: auto; - width: fit-content; -} \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index 95288c7e..c8eecc8b 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -25,6 +25,11 @@ } } + :root:not([zen-window-buttons-reversed='true']) .titlebar-buttonbox-container { + margin-left: auto; + width: fit-content; + } + #TabsToolbar > * { justify-content: center; } diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index 7668539e..cc02bd8d 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -41,7 +41,7 @@ #urlbar-background { border: transparent !important; - margin: 1px 0; + margin: 1px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); }