feat: Improve border rendering for compact mode, b=no-bug, c=common, compact-mode, tabs

src/zen/common/styles/zen-browser-ui.css

@@ -89,8 +89,8 @@
       }
     }
 
-    :root[animating-background='true'] &::after,
-    :root[animating-background='true'] &::before {
+    &::after,
+    &::before {
       mix-blend-mode: plus-lighter;
     }
   }

src/zen/compact-mode/zen-compact-mode.css

@@ -147,13 +147,23 @@
 
         & #zen-toolbar-background {
           display: flex;
-          outline: 1px solid rgba(255, 255, 255, .15);
-          border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4 - var(--zen-compact-mode-no-padding-radius-fix, 0px));
+          overflow: clip;
+          background: transparent;
           z-index: -1;
           box-shadow: var(--zen-big-shadow);
           @media -moz-pref('zen.theme.acrylic-elements') {
             backdrop-filter: blur(42px) saturate(110%) brightness(0.25) contrast(100%) !important;
           }
+          &::before,
+          &::after {
+            outline: 1px solid rgba(255, 255, 255, .15);
+            outline-offset: -1px;
+          }
+          &,
+          &::before,
+          &::after {
+            border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4 - var(--zen-compact-mode-no-padding-radius-fix, 0px));
+          }
         }
       }
 

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -200,7 +200,7 @@
 
   @media (-moz-platform: macos) {
     --border-radius-medium: 12px;
-    --tab-border-radius: 10px;
+    --tab-border-radius: 8px;
   }
 
   min-width: var(--zen-toolbox-min-width);