diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 0520efab..6877fc13 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -262,14 +262,13 @@ var gZenVerticalTabsManager = { if (isSingleToolbar) { this._navbarParent = navBar.parentElement; - let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)'); + let elements = document.querySelectorAll('#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container)'); elements = Array.from(elements); // Add separator if it doesn't exist if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) { buttonsTarget.append(this._topButtonsSeparatorElement); } for (const button of elements) { - button.setAttribute('zen-single-toolbar', 'true'); buttonsTarget.append(button); } buttonsTarget.prepend(document.getElementById('unified-extensions-button')); @@ -290,12 +289,9 @@ var gZenVerticalTabsManager = { this._hasSetSingleToolbar = false; // Do the opposite this._navbarParent.prepend(navBar); - const elements = document.querySelectorAll('#zen-sidebar-top-buttons-customization-target > *:is(toolbarbutton, #stop-reload-button)'); + const elements = document.querySelectorAll('#zen-sidebar-top-buttons-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional)'); for (const button of elements) { - if (button.hasAttribute('zen-single-toolbar')) { - button.removeAttribute('zen-single-toolbar'); - document.getElementById('nav-bar-customization-target').append(button); - } + document.getElementById('nav-bar-customization-target').append(button); } document.documentElement.removeAttribute("zen-single-toolbar"); navBar.appendChild(document.getElementById('PanelUI-button')); diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index 55349367..0d20f0c4 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -9,6 +9,11 @@ --inactive-titlebar-opacity: 1; } +#nav-bar, +#navigator-toolbox { + position: inherit; +} + :root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) { #navigator-toolbox, #zen-sidebar-splitter { 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 c5e6a842..c4978e8b 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -90,7 +90,7 @@ #navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) { opacity: 1; - transform: translateX(calc(100% - var(--zen-element-separation))); + 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/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css index 5898f190..78dcde08 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css +++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css @@ -170,7 +170,7 @@ } #zen-sidebar-web-panel-wrapper { - margin: 0 calc(var(--zen-element-separation) / 2) var(--zen-element-separation) var(--zen-element-separation); + margin: 0 calc(var(--zen-element-separation) / 2) 0 var(--zen-element-separation); } #zen-sidebar-web-panel[pinned='true'] { 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 77549081..b50250a7 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 @@ -119,8 +119,8 @@ } #navigator-toolbox { - --border-radius-medium: 8px; - --tab-border-radius: var(--border-radius-medium); + --border-radius-medium: 10px; + --tab-border-radius: 10px; --zen-toolbox-min-width: 1px; --tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%); @@ -888,12 +888,14 @@ width: 100% !important; border-radius: var(--border-radius-medium); - &:not([selected]) .tab-background { - background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)); + &[selected] .tab-background { box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.1)); + outline: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4)) !important; } - backdrop-filter: blur(10px); + &:not([selected]) .tab-background { + background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)); + } & .tab-content { display: flex; diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index af900d3a..b2d3dcc4 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -133,6 +133,8 @@ --toolbar-field-background-color: var(--zen-colors-input-bg) !important; --arrowpanel-background: var(--zen-dialog-background) !important; + + --tab-selected-shadow: 0 0 1px 1px rgba(0,0,0,.1) !important; } @media (prefers-color-scheme: dark) { diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index d9b29dc3..46d466d5 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -20,7 +20,7 @@ min-width: 45%; --urlbar-container-height: 55px !important; --urlbar-margin-inline: 10px !important; - position: fixed; + position: absolute; top: calc(var(--zen-toolbar-height) * 4); left: 50%; @@ -74,7 +74,7 @@ } #urlbar:not([focused='true']):not([breakout-extend="true"]) > #urlbar-background { - background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important; + background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)) !important; backdrop-filter: blur(10px); }