Added better support for macos transparency

src/browser/app/profile/zen-browser.js

@@ -80,7 +80,13 @@ pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);
+
+#ifdef XP_MACOSX
+// Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
+pref('zen.view.experimental-rounded-view', false);
+#else
 pref('zen.view.experimental-rounded-view', true);
+#endif
 
 #ifdef XP_MACOSX
 pref('zen.theme.border-radius', 10); // In pixels
@@ -270,3 +276,8 @@ pref("network.proxy.type", 0);
 
 // for the new layout:
 pref('browser.download.autohideButton', false);
+
+// Enable transparent background for macos
+#ifdef XP_MACOSX
+pref('widget.macos.titlebar-blend-mode.behind-window', true);
+#endif

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

@@ -38,11 +38,10 @@
   border: none;
 }
 
-@media (-moz-platform: macos) {
-  :root #zen-main-app-wrapper {
-    /** Add transparency to the titlebar */
-    -moz-default-appearance: menupopup !important;
-    appearance: auto !important;
+
+@supports (-moz-osx-font-smoothing: auto) {
+  #zen-main-app-wrapper {
+    appearance: -moz-window-titlebar !important;
   }
 }
 

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

@@ -16,10 +16,13 @@ xul|button {
   transition: 0.1s;
   min-width: 100px !important;
   font-weight: 500 !important;
+
+  border: 1px solid var(--zen-colors-border);
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05) !important;
 }
 
 button:active {
-  transform: scale(0.95);
+  transform: scale(0.98);
 }
 
 html|button:not(:is(.tab-button, .ghost-button, .button-toggle, .button-edit, .button-add, )),

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

@@ -32,7 +32,7 @@
 
   --in-content-primary-button-background: light-dark(
     color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
-    color-mix(in srgb, var(--zen-primary-color) 35%, white 65%)
+    color-mix(in srgb, var(--zen-primary-color) 85%, black 15%)
   ) !important;
   --in-content-primary-button-background-hover: light-dark(
     color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
@@ -83,7 +83,7 @@
   --in-content-page-background: var(--zen-colors-tertiary) !important;
   --zen-in-content-dialog-background: var(--zen-colors-tertiary);
 
-  --zen-button-border-radius: 7px;
+  --zen-button-border-radius: 5px;
   --zen-button-padding: 0.6rem 1.2rem;
 
   /* Toolbar */
@@ -128,7 +128,7 @@
   --input-border-color: var(--zen-input-border-color) !important;
   --zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary));
 
-  @media (-moz-platform: macos) {
+  @supports (-moz-osx-font-smoothing: auto) {
     --zen-themed-toolbar-bg: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
   }
 

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

@@ -410,9 +410,11 @@
 
 /* Mark workspaces indicator */
 #zen-current-workspace-indicator {
-  margin: calc(var(--zen-toolbox-padding) * 3) calc(4px + var(--tab-inline-padding)) calc(var(--zen-toolbox-padding) * 2);
+  margin: calc(var(--zen-toolbox-padding) * 4) calc(4px + var(--tab-inline-padding)) calc(var(--zen-toolbox-padding) * 3);
   font-weight: 600;
   align-items: center;
+  max-width: 100%;
+  position: relative;
 
   & #zen-current-workspace-indicator-icon {
     font-size: 14px;
@@ -421,6 +423,11 @@
   #zen-current-workspace-indicator-name {
     font-size: 13px;
     opacity: 0.5;
+
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   & #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {