feat: Add different UI for non-macos devices and other small tweaks, b=no-bug, c=common, glance

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

@@ -136,9 +136,13 @@
   z-index: 2;
 }
 
-:root[zen-single-toolbar='true'] #nav-bar {
-  border-top: none !important;
-  --zen-toolbar-height: 37px;
+#nav-bar {
+  border-top-color: transparent !important;
+
+  :root[zen-single-toolbar='true'] & {
+    border-top: none !important;
+    --zen-toolbar-height: 37px;
+  }
 }
 
 #zen-main-app-wrapper {

src/zen/common/styles/zen-single-components.css

@@ -511,18 +511,27 @@ body > #confetti {
       position: absolute;
       width: 100%;
       height: 100%;
-      background: linear-gradient(
-        to bottom,
-        light-dark(rgb(255, 255, 255), rgb(34, 34, 34)),
-        light-dark(rgb(246, 246, 246), rgb(21, 21, 21))
-      );
+      @media (-moz-platform: macos) {
+        background: linear-gradient(
+          to bottom,
+          light-dark(rgb(255, 255, 255), rgb(34, 34, 34)),
+          light-dark(rgb(246, 246, 246), rgb(21, 21, 21))
+        );
+
+        box-shadow:
+          0px 2px 4px rgba(0, 0, 0, 0.075),
+          inset 0px 1px 0px light-dark(transparent, rgba(255, 255, 255, 0.15));
+        border-radius: 6px;
+        --base-border-color: light-dark(rgba(0, 0, 0, 0.175), rgba(255, 255, 255, 0.1));
+        border: 1px solid light-dark(var(--base-border-color), rgb(21, 21, 21));
+      }
+
+      @media not (-moz-platform: macos) {
+        border-radius: 6px;
+        background-color: color-mix(in srgb, currentcolor 6%, transparent);
+      }
+
       transition: transform 0.12s ease-in-out;
-      box-shadow:
-        0px 2px 4px rgba(0, 0, 0, 0.075),
-        inset 0px 1px 0px light-dark(transparent, rgba(255, 255, 255, 0.15));
-      border-radius: 6px;
-      --base-border-color: light-dark(rgba(0, 0, 0, 0.175), rgba(255, 255, 255, 0.1));
-      border: 1px solid light-dark(var(--base-border-color), rgb(21, 21, 21));
       box-sizing: border-box;
       will-change: transform;
     }

src/zen/glance/ZenGlanceManager.mjs

@@ -457,7 +457,7 @@
           opacity: [1, 0],
         },
         {
-          duration: 0.3,
+          duration: 0.25,
           easing: 'easeInOut',
         }
       );

src/zen/glance/zen-glance.css

@@ -176,5 +176,6 @@
   top: 0%;
   left: 50%;
   translate: -50% 0%;
+  max-height: 100%;
   will-change: transform, opacity;
 }

src/zen/urlbar/ZenSiteDataPanel.sys.mjs

@@ -580,7 +580,6 @@ export class nsZenSiteDataPanel {
       };
       checkEmptyTab();
     });
-    this.anchor.setAttribute('open', 'true');
     const callout = new FeatureCallout({
       win: this.window,
       location: 'chrome',