From d6823beb9512183a0ec851bd9ccd465a84395828 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Fri, 17 Jan 2025 22:50:05 +0100
Subject: [PATCH] Enhance vertical tabs styling with new background color
 variable; adjust sidebar transition durations for smoother animations and
 improve hover handling logic

---
 .../base/content/zen-styles/zen-tabs/vertical-tabs.css       | 2 ++
 src/browser/base/zen-components/ZenCompactMode.mjs           | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

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 bdcb201aa..ac026752e 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
@@ -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));
   }
diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs
index bd54af1f0..89369cfae 100644
--- a/src/browser/base/zen-components/ZenCompactMode.mjs
+++ b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -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'));
       });