From fdf83eaef8721c27d255dc8a3408b5239ca8b24c Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Tue, 5 Nov 2024 20:29:27 +0100
Subject: [PATCH] Added better support for macos transparency

---
 src/browser/app/profile/zen-browser.js                | 11 +++++++++++
 .../base/content/zen-styles/zen-browser-ui.css        |  9 ++++-----
 src/browser/base/content/zen-styles/zen-buttons.css   |  5 ++++-
 src/browser/base/content/zen-styles/zen-theme.css     |  6 +++---
 .../base/content/zen-styles/zen-workspaces.css        |  9 ++++++++-
 5 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 44296012a..18b456e1a 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/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
diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css
index d4de1ed15..078b79838 100644
--- a/src/browser/base/content/zen-styles/zen-browser-ui.css
+++ b/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;
   }
 }
 
diff --git a/src/browser/base/content/zen-styles/zen-buttons.css b/src/browser/base/content/zen-styles/zen-buttons.css
index b97423f69..af7d46c69 100644
--- a/src/browser/base/content/zen-styles/zen-buttons.css
+++ b/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, )),
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 623611374..72c851854 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/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;
   }
 
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index cd097c555..91d938323 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/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 {