Add media query for macOS to enhance tab border radius and improve na…

…tive appearance

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

@@ -148,6 +148,12 @@
     --tab-border-radius: 6px;
   }
 
+  @media (-moz-platform: macos) {
+    /* More native look */
+    --border-radius-medium: 12px;
+    --tab-border-radius: 10px;
+  }
+
   --tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
 
   min-width: var(--zen-toolbox-min-width);
@@ -237,7 +243,8 @@
 #tabbrowser-tabs {
   margin-inline-start: 0 !important;
   padding-inline-start: 0 !important;
-  overflow: hidden;
+  overflow-y: unset !important; /* DO NOT CHANGE THIS: Firefox renders badly workspace changes */
+  overflow-x: clip;
 
   --tab-inner-inline-margin: 0;
 
@@ -361,6 +368,7 @@
 #zen-browser-tabs-wrapper {
   min-height: fit-content;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 #vertical-pinned-tabs-container {

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

@@ -61,18 +61,13 @@
 
       @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
         & {
-          opacity: 0.4;
-          filter: grayscale(1);
-          transition:
-            opacity 0.2s,
-            filter 0.2s;
+          color: transparent;
+          text-shadow: 0 0 0 var(--zen-toolbar-element-bg);
+          transition: text-shadow 0.4s ease;
+          transition-delay: 0.2s; /* Wait for new accent color to be applied */
         }
 
-        #zen-current-workspace-indicator-icon,
         &[active='true'] {
-          filter: none;
-          opacity: 1;
-          color: transparent;
           text-shadow: 0 0 0 color-mix(in srgb, var(--zen-primary-color) 80%, transparent 20%);
         }
       }

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

@@ -1317,42 +1317,37 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async _animateTabs(direction, out = false) {
-    const selector = `#tabbrowser-tabs *:is(#zen-current-workspace-indicator, #vertical-pinned-tabs-container-separator, .tabbrowser-tab:not([zen-essential], [hidden]))`;
-    const extraSelector = `#tabbrowser-arrowscrollbox-periphery > toolbarbutton`;
+    const selector = `#zen-browser-tabs-wrapper`;
+    const extraSelector = `#zen-current-workspace-indicator`;
     this.tabContainer.removeAttribute('dont-animate-tabs');
+    const tabsWidth = this.tabContainer.getBoundingClientRect().width;
     // order by actual position in the children list to animate
     const elements = Array.from([
       ...this.tabContainer.querySelectorAll(selector),
       ...this.tabContainer.querySelectorAll(extraSelector),
-    ])
-      .sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING)
-      .reverse();
+    ]);
     if (out) {
       return gZenUIManager.motion.animate(
         elements,
         {
-          transform: `translateX(${direction === 'left' ? '-' : ''}100%)`,
-          opacity: 0,
+          transform: `translateX(${direction === 'left' ? '-' : ''}${tabsWidth}px)`,
         },
         {
           type: 'spring',
           bounce: 0,
           duration: 0.12,
-          // delay: gZenUIManager.motion.stagger(0.01),
         }
       );
     }
     return gZenUIManager.motion.animate(
       elements,
       {
-        transform: [`translateX(${direction === 'left' ? '-' : ''}100%)`, 'translateX(0%)'],
-        opacity: 1,
+        transform: [`translateX(${direction === 'left' ? '-' : ''}${tabsWidth}px)`, 'translateX(0px)'],
       },
       {
         duration: 0.15,
         type: 'spring',
         bounce: 0,
-        // delay: gZenUIManager.motion.stagger(0.02),
       }
     );
   }