From f000af56e779faa9eabb4e7415a3c0b8fc293275 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Mon, 20 Jan 2025 08:10:08 +0100
Subject: [PATCH] Refactor tab and URL bar styles for improved transparency and
 backdrop filtering

---
 .../base/content/zen-styles/zen-tabs/vertical-tabs.css      | 6 +++---
 src/browser/base/content/zen-styles/zen-theme.css           | 5 ++++-
 src/browser/base/content/zen-styles/zen-urlbar.css          | 4 +++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index ae1d0058f..02fe5c5c1 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -228,7 +228,7 @@
   border-bottom: 0px solid transparent !important;
 
   --tab-block-margin: 2px;
-  --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.75), var(--zen-toolbar-element-bg));
+  --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.11));
   grid-gap: 0 !important;
 
   &[overflow]::after,
@@ -916,8 +916,8 @@
   }
 
   &:not([selected], [multiselected="true"]) .tab-background {
-    background: var(--zen-toolbar-element-bg);
-    backdrop-filter: none !important;
+    background: transparent;
+    backdrop-filter: var(--zen-toolbar-element-filter) !important;
     border: none;
   }
 
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 7f219a284..7db6252fb 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -104,7 +104,10 @@
   --zen-button-border-radius: 5px;
   --zen-button-padding: 0.6rem 1.2rem;
 
-  --zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.11));
+  --zen-toolbar-element-filter: brightness(0.95);
+  @media (prefers-color-scheme: dark) {
+    --zen-toolbar-element-filter: brightness(1.2);
+  }
 
   /* Toolbar */
   --zen-toolbar-height: 38px;
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index 813227755..4cc479090 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -27,7 +27,8 @@
 }
 
 #urlbar-background {
-  background: var(--zen-toolbar-element-bg) !important;
+  background: transparent !important;
+  backdrop-filter: var(--zen-toolbar-element-filter);
   outline: none !important;
 }
 
@@ -120,6 +121,7 @@
 #urlbar[breakout-extend='true'] #urlbar-background {
   border: 1px solid var(--zen-colors-border) !important;
   box-shadow: var(--zen-big-shadow) !important;
+  backdrop-filter: none !important;
 }
 
 :root[zen-single-toolbar='true'] {