diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css index 7b2fc796a..c06def63c 100644 --- a/src/zen/common/styles/zen-browser-container.css +++ b/src/zen/common/styles/zen-browser-container.css @@ -45,7 +45,7 @@ @media not ((-moz-pref('zen.view.experimental-no-window-controls') or (not -moz-pref('zen.view.hide-window-controls'))) and -moz-pref('zen.view.use-single-toolbar')) { .browserSidebarContainer:is(.deck-selected, [zen-split='true']) .browserContainer { - transition: margin 0.1s ease; + transition: margin var(--zen-hidden-toolbar-transition); :root[zen-single-toolbar='true'] & { transition-delay: 0.2s; diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 77472547b..859e08293 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -192,6 +192,7 @@ /* Transitions */ --zen-tabbox-element-indent-transition: margin-inline-start 0.1s ease-in-out; + --zen-hidden-toolbar-transition: 0.15s ease-in-out; /* XUL */ --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b); diff --git a/src/zen/compact-mode/toolbar.inc.css b/src/zen/compact-mode/toolbar.inc.css index 5d147ee78..8cd55c910 100644 --- a/src/zen/compact-mode/toolbar.inc.css +++ b/src/zen/compact-mode/toolbar.inc.css @@ -15,6 +15,12 @@ } } + &[zen-right-side='true'][zen-window-buttons-reversed='true'] #titlebar, + &:not([zen-right-side='true']):not([zen-window-buttons-reversed='true']) #titlebar { + /* The same as the expression above */ + margin-top: var(--zen-element-separation) !important; + } + & #zen-appcontent-wrapper { z-index: 3 !important; } @@ -23,28 +29,22 @@ & .zen-toolbar-background { display: flex; } - transition: height 0.1s ease; - + transition: height var(--zen-hidden-toolbar-transition); + height: var(--zen-element-separation); overflow: clip; & #urlbar:not([breakout-extend='true']) { opacity: 0; pointer-events: none; - transition: opacity 0.1s ease; + transition: opacity var(--zen-hidden-toolbar-transition); } - & .titlebar-buttonbox-container { - visibility: hidden; - /* We need to hide them since on Windows the native - * panels when hovering over them can interfere with the - * web content */ - transition: visibility 0.1s ease; - } +%include windows-captions-fix-default.inc.css & #zen-appcontent-navbar-container { opacity: 0; - transition: opacity 0.1s ease; + transition: opacity var(--zen-hidden-toolbar-transition); } } @@ -61,10 +61,7 @@ height: var(--zen-toolbar-height-with-bookmarks); overflow: inherit; - & .titlebar-buttonbox-container { - visibility: visible; - transition: none; - } +%include windows-captions-fix-active.inc.css & #urlbar { opacity: 1; @@ -73,7 +70,6 @@ & #zen-appcontent-navbar-container { opacity: 1; - transition: none; } } } diff --git a/src/zen/compact-mode/windows-captions-fix-active.inc.css b/src/zen/compact-mode/windows-captions-fix-active.inc.css new file mode 100644 index 000000000..252de7bf4 --- /dev/null +++ b/src/zen/compact-mode/windows-captions-fix-active.inc.css @@ -0,0 +1,10 @@ +/* + * 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/. + */ + +& .titlebar-buttonbox-container { + visibility: visible; + transition: none; +} diff --git a/src/zen/compact-mode/windows-captions-fix-default.inc.css b/src/zen/compact-mode/windows-captions-fix-default.inc.css new file mode 100644 index 000000000..586949124 --- /dev/null +++ b/src/zen/compact-mode/windows-captions-fix-default.inc.css @@ -0,0 +1,13 @@ +/* + * 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/. + */ + +& .titlebar-buttonbox-container { + display: collapse; + /* We need to hide them since on Windows the native + * panels when hovering over them can interfere with the + * web content */ + transition: visibility var(--zen-hidden-toolbar-transition); +} diff --git a/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css b/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css index 2251b02d8..fede2685a 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css @@ -12,11 +12,13 @@ z-index: 1; } @media -moz-pref('zen.view.hide-window-controls') { - transition: height 0.1s ease, opacity 0.1s ease; + transition: height var(--zen-hidden-toolbar-transition), opacity var(--zen-hidden-toolbar-transition); will-change: height, opacity; transition-delay: 0.2s; overflow: clip; +%include ../../compact-mode/windows-captions-fix-active.inc.css + &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not( :has(*:is([panelopen='true'], [open='true'])) ) { @@ -26,6 +28,8 @@ z-index: 1; pointer-events: none; } +%include ../../compact-mode/windows-captions-fix-default.inc.css + & .titlebar-button { padding-top: 0 !important; padding-bottom: 0 !important; diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 6a7591340..557e769ba 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -1531,6 +1531,13 @@ 'color' ]; rgb = rawRgb.match(/\d+/g).map(Number); + // Match our theme a bit more, since we can't always expect the OS + // to give us a color matching our theme scheme + rgb = this.blendColors( + rgb, + this.getToolbarModifiedBaseRaw().slice(0, 3), + this.isDarkMode ? 80 : 50 + ); } else { rgb = this.hexToRgb(accentColor); }