mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-03-06 08:47:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance vertical tabs styling with new background color variable; adjust sidebar transition durations for smoother animations and improve hover handling logic

Browse Source
This commit is contained in:
mr. M
2025-01-17 22:50:05 +01:00
parent dfede695a7
commit d6823beb95
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -914,6 +914,8 @@
width: 100% !important;
border-radius: var(--border-radius-medium);
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
&[selected] .tab-background {
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.1));
}

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

@@ -147,7 +147,7 @@ var gZenCompactModeManager = {
if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => {
this.sidebar.style.position = 'unset';
this.sidebar.style.transition = 'margin .3s ease-in-out';
this.sidebar.style.transition = 'margin .25s ease-in-out';
this.sidebar.style.left = '0';
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
@@ -188,7 +188,7 @@ var gZenCompactModeManager = {
}
window.requestAnimationFrame(() => {
this.sidebar.style.transition = 'margin .3s ease-in-out, transform .275s ease-in-out, opacity .3s ease';
this.sidebar.style.transition = 'margin .25s ease, transform .275s ease, opacity .1s ease';
// we are in compact mode and we are exiting it
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = '0';
@@ -316,6 +316,7 @@ var gZenCompactModeManager = {
for (let i = 0; i < this.hoverableElements.length; i++) {
let target = this.hoverableElements[i].element;
target.addEventListener('mouseenter', (event) => {
if (!event.target.matches(':hover')) return;
this.clearFlashTimeout('has-hover' + target.id);
window.requestAnimationFrame(() => target.setAttribute('zen-has-hover', 'true'));
});