mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-04 08:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor vertical tab styles and improve toolbar layout for better usability

Browse Source
This commit is contained in:
mr. M
2024-11-29 00:33:32 +01:00
parent be92638cf2
commit 0b42ee83bb
2 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/ZenUIManager.mjs
View File

@@ -213,7 +213,7 @@ var gZenVerticalTabsManager = {
const isSingleToolbar = (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs;
const titlebar = document.getElementById('titlebar');
// gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');

82
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -42,41 +42,25 @@
}
}
}
}
:root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
margin-right: auto;
width: fit-content;
}
:root[zen-single-toolbar='true']:not([customizing]) {
#zen-appcontent-navbar-container {
display: flex;
-moz-window-dragging: drag;
min-height: var(--zen-element-separation);
height: var(--zen-element-separation);
& #PersonalToolbar {
width: -moz-available;
#TabsToolbar > * {
justify-content: center;
}
/* We enable this trick IF we follow any of theses conditions:
* - We are on a Mac
* - We are on a Linux with reversed CSD
* - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
*/
&:has(#PersonalToolbar[collapsed='false']) {
%include vertical-tabs-topbar.inc.css
#private-browsing-indicator-with-label {
display: none !important;
}
&[should-hide='true'] {
%include vertical-tabs-topbar.inc.css
}
:root[zen-window-buttons-reversed='true'] & {
&:has(#PersonalToolbar[collapsed="true"]) {
display: none;
}
}
#browser {
--zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
:root[zen-no-padding='true'] & {
--zen-toolbox-padding: 4px;
}
}
@@ -121,22 +105,6 @@
padding: 0 !important;
}
}
}
#TabsToolbar > * {
justify-content: center;
}
#private-browsing-indicator-with-label {
display: none !important;
}
#browser {
--zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
:root[zen-no-padding='true'] & {
--zen-toolbox-padding: 4px;
}
}
#vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
@@ -175,6 +143,38 @@
display: none;
}
:root[zen-single-toolbar='true']:not([customizing]) {
#zen-appcontent-navbar-container {
display: flex;
-moz-window-dragging: drag;
min-height: var(--zen-element-separation);
height: var(--zen-element-separation);
& #PersonalToolbar {
width: -moz-available;
}
/* We enable this trick IF we follow any of theses conditions:
* - We are on a Mac
* - We are on a Linux with reversed CSD
* - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
*/
&:has(#PersonalToolbar[collapsed='false']) {
%include vertical-tabs-topbar.inc.css
}
&[should-hide='true'] {
%include vertical-tabs-topbar.inc.css
}
:root[zen-window-buttons-reversed='true'] & {
&:has(#PersonalToolbar[collapsed="true"]) {
display: none;
}
}
}
}
#TabsToolbar-customization-target {
position: relative;
max-width: 100%;