Worked on animations

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

@@ -30,6 +30,8 @@
       #navigator-toolbox {
         --zen-toolbox-max-width: 54px !important;
         --zen-compact-float: calc(var(--zen-element-separation) - 1px);
+
+        &:not([animate='true']) {
           position: absolute;
           z-index: 10;
           transition: transform 0.25s ease, opacity 0.1s ease-in-out;
@@ -48,6 +50,7 @@
             }
           }
         }
+      }
 
       &:not([zen-right-side='true']) #navigator-toolbox {
         right: calc(100% - var(--zen-element-separation));
@@ -76,7 +79,7 @@
         }
       }
 
-      #titlebar {
+      #navigator-toolbox:not([animate='true']) #titlebar {
         box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
         border-radius: calc(var(--zen-border-radius) - 2px);
         padding: var(--zen-toolbox-padding) !important;

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

@@ -227,11 +227,11 @@
     transition: scale 0.1s ease-in-out;
     &[fadein='true']:not([zen-essential='true']) {
       #tabbrowser-tabs[zen-workspace-animation='previous'] & {
-        animation: zen-slide-in 0.2s ease-in-out;
+        animation: zen-slide-in 0.2s ease;
       }
 
       #tabbrowser-tabs[zen-workspace-animation='next'] & {
-        animation: zen-slide-in-reverse 0.2s ease-in-out;
+        animation: zen-slide-in-reverse 0.2s ease;
       }
     }
 

src/browser/base/content/zen-styles/zen-theme.css

@@ -17,7 +17,7 @@
   /* Branding */
   --zen-branding-dark: #202020;
   --zen-branding-coral: #F76F53;
-  --zen-branding-paper: #F2F0E3;
+  --zen-branding-paper: #ebebeb;
 
   --zen-branding-bg: light-dark(var(--zen-branding-paper), var(--zen-branding-dark));
   --zen-branding-bg-reverse: light-dark(var(--zen-branding-dark), var(--zen-branding-paper));

src/browser/base/zen-components/ZenCompactMode.mjs

@@ -104,13 +104,13 @@ var gZenCompactModeManager = {
       return;
     }
     this._isAnimating = true;
-    let sidebarWidth = this.sidebar.getBoundingClientRect().width;
-    if (sidebarWidth < 300) {
-      sidebarWidth += sidebarWidth < 210 ? 9 : 11; // Bug: IF sidebar is too small, it will not animate properly
-    }
+    // Do this so we can get the correct width ONCE compact mode styled have been applied
+    this.sidebar.setAttribute("animate", "true");
+    window.requestAnimationFrame(() => {
+      let sidebarWidth = Math.max(this.sidebar.getAttribute("width"), this.sidebar.getBoundingClientRect().width);
       if (canHideSidebar && isCompactMode) {
         this.sidebar.style.position = "relative";
-      this.sidebar.style.transition = "margin .3s ease, opacity .3s ease";
+        this.sidebar.style.transition = "margin .4s ease, opacity .4s ease";
         this.sidebar.style.left = "0";
         this.sidebar.style.setProperty("opacity", "1", "important");
         if (!this.sidebarIsOnRight) {
@@ -121,7 +121,7 @@ var gZenCompactModeManager = {
         this.sidebar.style.pointerEvents = "none";
 
         window.requestAnimationFrame(() => {
-        this.sidebar.style.removeProperty("opacity");
+          this.sidebar.style.opacity = "0";
           setTimeout(() => {
             window.requestAnimationFrame(() => {
               this._isAnimating = false;
@@ -134,8 +134,9 @@ var gZenCompactModeManager = {
               this.sidebar.style.removeProperty("transform");
               this.sidebar.style.removeProperty("left");
               document.getElementById('browser').style.removeProperty("overflow");
+              this.sidebar.removeAttribute("animate");
             });
-        }, 400);
+          }, 450);
         });
       } else if (canHideSidebar && !isCompactMode) {
         document.getElementById('browser').style.overflow = "hidden";
@@ -173,10 +174,12 @@ var gZenCompactModeManager = {
               this.sidebar.style.removeProperty("left");
 
               document.getElementById('browser').style.removeProperty("overflow");
+              this.sidebar.removeAttribute("animate");
             });
           }, 400);
         });
       }
+    });
   },
 
   updateContextMenu() {

src/browser/components/zen-welcome/welcome.css

@@ -39,7 +39,7 @@ body {
 #welcome .zen-branding-title,
 #thanks .zen-branding-title {
   text-align: center;
-  font-size: 11rem;
+  font-size: 9rem;
 }
 
 #buttons-footer {