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

Fix sidebar width in compact mode and add top buttons visibility fix

Browse Source
This commit is contained in:
mr. M
2024-12-16 23:16:23 +01:00
parent e31e18b3f3
commit 6c330fe4d2
4 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -28,7 +28,7 @@
} }
#navigator-toolbox { #navigator-toolbox {
--zen-toolbox-max-width: 54px !important; --zen-toolbox-max-width: 64px !important;
--zen-compact-float: calc(var(--zen-element-separation) - 1px); --zen-compact-float: calc(var(--zen-element-separation) - 1px);
&:not([animate='true']) { &:not([animate='true']) {

8
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbuttons-fix.css Normal file
View File

@@ -0,0 +1,8 @@
& #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
max-height: 0 !important;
min-height: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
}

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

@@ -553,13 +553,6 @@
:root[customizing] & #zen-sidebar-icons-wrapper { :root[customizing] & #zen-sidebar-icons-wrapper {
min-width: unset !important; min-width: unset !important;
} }
#zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
max-height: 0 !important;
min-height: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
& #zen-sidebar-top-buttons { & #zen-sidebar-top-buttons {
justify-content: center; justify-content: center;
max-height: unset !important; max-height: unset !important;
@@ -964,6 +957,8 @@
& #zen-appcontent-navbar-container { & #zen-appcontent-navbar-container {
padding-left: var(--zen-element-separation); padding-left: var(--zen-element-separation);
} }
%include vertical-tabs-topbuttons-fix.css
} }
:root:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] { :root:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
@@ -986,5 +981,7 @@
& #zen-appcontent-navbar-container { & #zen-appcontent-navbar-container {
padding-right: var(--zen-element-separation); padding-right: var(--zen-element-separation);
} }
%include vertical-tabs-topbuttons-fix.css
} }
} }

2
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -107,7 +107,7 @@ var gZenCompactModeManager = {
// Do this so we can get the correct width ONCE compact mode styled have been applied // Do this so we can get the correct width ONCE compact mode styled have been applied
this.sidebar.setAttribute("animate", "true"); this.sidebar.setAttribute("animate", "true");
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
let sidebarWidth = Math.max(this.sidebar.getAttribute("width"), this.sidebar.getBoundingClientRect().width); let sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (canHideSidebar && isCompactMode) { if (canHideSidebar && isCompactMode) {
this.sidebar.style.position = "relative"; this.sidebar.style.position = "relative";
this.sidebar.style.transition = "margin .4s ease, opacity .4s ease"; this.sidebar.style.transition = "margin .4s ease, opacity .4s ease";