diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index feb5e9dfe..25245093a 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -74,7 +74,7 @@ pref('zen.tabs.vertical', true); pref('zen.tabs.vertical.right-side', false); pref('zen.theme.accent-color', "#aac7ff"); pref('zen.theme.border-radius', 5); // In pixels -pref('zen.theme.content-element-separation', 4); // In pixels +pref('zen.theme.content-element-separation', 8); // In pixels pref('zen.theme.toolbar-themed', true); pref('zen.theme.pill-button', false); pref('zen.view.compact', false); diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index 366ed939d..18f255708 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -177,10 +177,6 @@ const newTab = document.getElementById('vertical-tabs-newtab-button'); newTab.classList.add('zen-sidebar-action-button'); - newTab.setAttribute('cui-areatype', 'toolbar'); - - const iconsWrapper = document.getElementById('zen-sidebar-icons-wrapper'); - iconsWrapper.appendChild(newTab); setTimeout(() => { CustomizableUI.registerArea( diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index 20c2fc640..3c66cbdc2 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit 20c2fc640f92fa0dbfdb720217cf0be0e8c411e7 +Subproject commit 3c66cbdc24936c4827443d6946baa708173c6d62 diff --git a/src/browser/base/content/zen-sidebar-panel.inc.xhtml b/src/browser/base/content/zen-sidebar-panel.inc.xhtml index aed10e105..4330ef51f 100644 --- a/src/browser/base/content/zen-sidebar-panel.inc.xhtml +++ b/src/browser/base/content/zen-sidebar-panel.inc.xhtml @@ -1,4 +1,4 @@ - + - + diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css index b09c1b151..e7bf4d44d 100644 --- a/src/browser/base/content/zen-styles/zen-browser-container.css +++ b/src/browser/base/content/zen-styles/zen-browser-container.css @@ -1,27 +1,10 @@ :root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) { - #tabbrowser-tabbox { - --zen-webview-correction-margin: 2px; - - & > *:not(#tabbrowser-tabpanels) { - margin-top: var(--zen-webview-correction-margin); - } - } - & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer { width: -moz-available; border-radius: var(--zen-webview-border-radius, var(--zen-border-radius)); transform: translate3d(0, 0, 0); position: relative; - /* This fixes an issue with the left border */ - margin-left: var(--zen-webview-correction-margin); - margin-top: var(--zen-webview-correction-margin); - - #browser:has(#navigator-toolbox[zen-right-side="true"]) & { - margin-left: 0; - margin-right: var(--zen-webview-correction-margin); - } - --uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border); --uc-tweak-rounded-corners-shadow: 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 3ad381252..59f288cda 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css +++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css @@ -68,12 +68,16 @@ } #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) { - margin: var(--zen-appcontent-separator-from-window); position: absolute; z-index: 1; width: -moz-available; - padding: var(--zen-sidebar-web-panel-spacing); - height: calc(100% - var(--zen-element-separation)); + margin: var(--zen-sidebar-web-panel-spacing); + /* Why times 3? + * + 1 for the top margin, making the element overflow the view. + * + 1 for the margin we want to add at the bottom + * + 1 so that the panel can be correctly spaced from the border of the webview + */ + height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3); } #zen-sidebar-web-panel { @@ -147,6 +151,7 @@ position: absolute; z-index: 1; animation: zen-sidebar-panel-animation-2 0.15s ease-in-out forwards; + max-height: 100%; } #zen-sidebar-web-panel[hidden='true'][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 a05120cd3..eefe9251a 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 @@ -8,6 +8,11 @@ height: 100%; } + #TabsToolbar > * { + justify-content: center; + + } + #private-browsing-indicator-with-label { display: none !important; } @@ -29,14 +34,14 @@ padding-top: var(--zen-toolbox-top-align); padding-bottom: var(--zen-element-separation); - margin-top: 0 !important; + margin-top: -4px !important; display: flex; } #TabsToolbar-customization-target { position: relative; - gap: var(--zen-toolbox-padding); + gap: 0; &::after { content: ''; display: block; @@ -49,6 +54,10 @@ position: absolute; bottom: calc(-1 * var(--zen-toolbox-padding)); } + + & > * { + border-top-width: 0 !important; + } } #vertical-tabs-newtab-button { @@ -101,6 +110,7 @@ background: transparent; padding: 0; gap: 5px; + align-items: center; & > toolbarbutton:not(#zen-workspaces-button) { padding: 0 !important; @@ -182,6 +192,41 @@ width: 100%; bottom: calc(-0.5 * var(--zen-toolbox-padding)); } + + & > *:not(tabs):not(#search-container) { + width: 100%; + border-radius: var(--tab-border-radius); + + padding-left: var(--toolbarbutton-inner-padding); + padding-right: var(--toolbarbutton-inner-padding); + + & label { + display: flex; + width: 0; + } + + & image { + height: 16px; + width: 16px; + padding: 0 !important; + } + + &:is([open], [checked]) { + background: var(--toolbarbutton-active-background) !important; + + & image, label { + background: transparent !important; + } + } + + &:hover { + background: var(--toolbarbutton-hover-background) !important; + + & image, label { + background: transparent !important; + } + } + } } & #tabbrowser-tabs { @@ -285,8 +330,12 @@ border-bottom-right-radius: 0; } - & #TabsToolbar-customization-target::after { - bottom: 0 !important; + & #TabsToolbar-customization-target { + padding-bottom: var(--zen-toolbox-padding); + + &::after { + bottom: -1px !important; + } } & #tabbrowser-tabs { @@ -348,12 +397,6 @@ &[active='true']::after { bottom: 50% !important; transform: translateY(50%) !important; - - :root:has(#navigator-toolbox[zen-right-side='true']) & { - left: unset !important; - right: -2px !important; - animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important; - } } :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after { @@ -363,7 +406,7 @@ :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after { left: unset !important; - right: -2px !important; + right: -2px; animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important; } } @@ -478,13 +521,17 @@ } /* Customization mode */ - :root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) { + /*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) { overflow: hidden; max-width: 0 !important; margin-right: var(--zen-element-separation); padding: 0 !important; opacity: 0; display: none; + }*/ + + :root[customizing] #TabsToolbar > * { + min-width: unset !important; } /* Mark: Sidebar top buttons */ @@ -497,7 +544,7 @@ align-items: center; #nav-bar:has(&) & { - padding-inline-start: calc(var(--zen-toolbox-padding) * 1.5) !important; + padding-inline-start: calc(var(--zen-toolbox-padding) + var(--toolbarbutton-outer-padding)) !important; } & toolbarbutton { @@ -514,9 +561,4 @@ } } } - - /** Add transition delays */ - #navigator-toolbox, #navigator-toolbox > * { - transition-delay: 2s !important; - } } \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index db829dcfd..15973c8f8 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -1,5 +1,10 @@ /* URL and tool bars */ +#urlbar-container { + padding-block: 0 !important; + padding-bottom: 2px !important; +} + #urlbar { --toolbarbutton-border-radius: 10px; --urlbarView-separator-color: var(--zen-colors-border); diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index a0463c4b2..26abea2ab 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -8,7 +8,8 @@ &:not([as-button='true']) { border-radius: var(--zen-button-border-radius); background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%); - padding: 7px; + padding: 5px; + height: fit-content; gap: 3px; & toolbarbutton { diff --git a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch index e12859749..03d93876e 100644 --- a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch +++ b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch @@ -1,5 +1,5 @@ diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs -index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..10967d5e2e1c5f3804ea367caf7b1e075a5680d0 100644 +index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..07ecece92643203d376378818facfc55774c63e9 100644 --- a/browser/components/customizableui/CustomizableUI.sys.mjs +++ b/browser/components/customizableui/CustomizableUI.sys.mjs @@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () { @@ -30,8 +30,9 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..10967d5e2e1c5f3804ea367caf7b1e07 - "firefox-view-button", +// "firefox-view-button", "tabbrowser-tabs", - "new-tab-button", +- "new-tab-button", - "alltabs-button", ++// "new-tab-button", +// "alltabs-button", ], defaultCollapsed: null,