Update zen-browser-ui.css, zen-compact-mode.css, and zen-theme.css

- Add transparency to the titlebar on macOS
- Apply backdrop filter and border to the compact mode toolbar
- Adjust themed toolbar background for macOS

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

@@ -38,6 +38,14 @@
   border: none;
 }
 
+@media (-moz-platform: macos) {
+  :root #zen-main-app-wrapper {
+    /** Add transparency to the titlebar */
+    -moz-default-appearance: menupopup !important;
+    appearance: auto !important;
+  }
+}
+
 #zen-main-app-wrapper {
   background: var(--zen-main-browser-background);
 

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

@@ -60,6 +60,7 @@
           background: var(--zen-main-browser-background) !important;
           background-attachment: fixed !important;
           background-size: 2000px !important; /* Dont ask me why */
+          backdrop-filter: blur(5px) !important;
         }
       }
       /* Mark: toolbox as collapsed */
@@ -136,6 +137,7 @@
           backdrop-filter: blur(5px);
           background: var(--zen-main-browser-background);
           background-size: 100% 2000px;
+          border-bottom: 1px solid var(--zen-colors-border);
         }
       }
 

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

@@ -126,7 +126,11 @@
 
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary)) !important;
+  --zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary));
+
+  @media (-moz-platform: macos) {
+    --zen-themed-toolbar-bg: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
+  }
 
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
   --arrowpanel-background: var(--zen-dialog-background) !important;