mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(workspaces): adjust toolbar background transparency and optimize button alignment during resize

Browse Source
This commit is contained in:
mr. M
2025-03-21 07:59:30 +01:00
parent 9c7c44cb49
commit 4f140893c9
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -164,7 +164,7 @@
background: transparent;
--zen-themed-toolbar-bg-transparent: transparent;
@media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 35%, transparent 65%);
}
}

12
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -2378,19 +2378,21 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!(!event || event.target === window)) return;
// Check if workspace icons overflow the parent container
const parent = document.getElementById('zen-workspaces-button');
if (!parent) {
if (!parent || this._processingResize) {
return;
}
window.requestAnimationFrame(() => {
// Once we are overflowing, we align the buttons to always stay inside the container,
// meaning we need to remove the overflow attribute to reset the width
parent.removeAttribute('overflow');
this._processingResize = true;
// Once we are overflowing, we align the buttons to always stay inside the container,
// meaning we need to remove the overflow attribute to reset the width
parent.removeAttribute('overflow');
requestAnimationFrame(() => {
const overflow = parent.scrollWidth > parent.clientWidth;
parent.toggleAttribute('overflow', overflow);
// The maximum width a button has when it overflows based on the number of buttons
const numButtons = parent.children.length + 1; // +1 to exclude the active button
const maxWidth = 100 / numButtons;
parent.style.setProperty('--zen-overflowed-workspace-button-width', `${maxWidth}%`);
this._processingResize = false;
});
}
})();