Refactor styles and animations for improved UI consistency and perfor…

…mance
zen-browser · Jan 17, 2025 · e950e01 · e950e01
1 parent 4fdd099
commit e950e01
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 14 deletions.
diff --git a/src/browser/base/content/ZenCustomizableUI.sys.mjs b/src/browser/base/content/ZenCustomizableUI.sys.mjs
@@ -11,7 +11,7 @@ export var ZenCustomizableUI = new (class {
       'zen-sidebar-top-buttons',
       {
         type: this.TYPE_TOOLBAR,
-        defaultPlacements: AppConstants.platform === 'macosx' ? [] : ['zen-sidepanel-button'],
+        defaultPlacements: [],
         defaultCollapsed: null,
       },
       true

diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css
@@ -30,7 +30,7 @@
 
     :root:not([zen-no-padding='true']) & {
       margin: 1px;
-      box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
+      box-shadow: 0 0 9.73px 0px rgba(0, 0, 0, 0.25);
     }
   }
 

diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css
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
@@ -228,7 +228,7 @@
   border-bottom: 0px solid transparent !important;
 
   --tab-block-margin: 2px;
-  --tab-selected-bgcolor: light-dark(rgba(255,255,255,.8), rgba(255,255,255,.25));
+  --tab-selected-bgcolor: var(--zen-toolbar-element-bg);
   grid-gap: 0 !important;
 
   &[overflow]::after,
@@ -924,7 +924,7 @@
   &:not([selected], [multiselected="true"]) .tab-background {
     background: var(--zen-toolbar-element-bg);
     backdrop-filter: none !important;
-    border: 1px solid light-dark(transparent, rgba(255, 255, 255, 0.05));
+    border: none;
   }
 
   & .tab-content {
@@ -960,9 +960,10 @@
 
       background: transparent;
       overflow: hidden;
+      position: relative;
 
       &::before {
-        background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.80));
+        background: light-dark(rgba(255, 255, 255, 0.75), rgba(68, 64, 64, 0.75));
         margin: 2px;
         border-radius: calc(var(--tab-border-radius) - 2px);
         position: absolute;
@@ -974,7 +975,7 @@
     }
 
     &[selected]:hover .tab-background::before {
-      background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.85));
+      background: light-dark(rgba(255, 255, 255, 0.70), rgba(68, 64, 64, 0.70));
     }
   }
 }

diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
@@ -20,7 +20,7 @@
   --zen-primary-color: #ffb787;
 
   /* Branding */
-  --zen-branding-dark: #202020;
+  --zen-branding-dark: #1d1d1d;
   --zen-branding-coral: #f76f53;
   --zen-branding-paper: #ebebeb;
 
@@ -103,7 +103,7 @@
   --zen-button-border-radius: 5px;
   --zen-button-padding: 0.6rem 1.2rem;
 
-  --zen-toolbar-element-bg: light-dark(rgba(255, 255, 255, 0.65), rgba(170, 170, 170, 0.2));
+  --zen-toolbar-element-bg: light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.11));
 
   /* Toolbar */
   --zen-toolbar-height: 38px;
@@ -169,6 +169,9 @@
   --arrowpanel-background: var(--zen-dialog-background) !important;
 
   --tab-selected-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
+
+  /** Other theme-related styles */
+  font-family: SF Pro,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -32,7 +32,7 @@
 }
 
 #urlbar-background {
-  border: 1px solid light-dark(transparent, rgba(255, 255, 255, 0.1)) !important;
+  border: none !important;
   margin: 1px;
 
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;

diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -659,7 +659,7 @@
                 // Reactivate the transition after the animation
                 appWrapper.removeAttribute('post-animating');
               }, 100);
-            }, 700);
+            }, 500);
           });
         }
 

diff --git a/src/browser/themes/shared/identity-block/identity-block-css.patch b/src/browser/themes/shared/identity-block/identity-block-css.patch
@@ -1,8 +1,8 @@
 diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css
-index cb6bb55dd3aebdaebb92c9e2cba1f2a108b4d7bb..9d5055a007c63cb779e67ae58a1d937ad2a31bfe 100644
+index 11ff8f62c9e40fd2f523387a4325518f383f5d11..d6563e2ddf963caa34bee716c42f9d440c327b61 100644
 --- a/browser/themes/shared/identity-block/identity-block.css
 +++ b/browser/themes/shared/identity-block/identity-block.css
-@@ -70,7 +70,7 @@
+@@ -80,7 +80,7 @@
 
  #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button,
  #urlbar-label-box {
@@ -11,12 +11,13 @@ index cb6bb55dd3aebdaebb92c9e2cba1f2a108b4d7bb..9d5055a007c63cb779e67ae58a1d937a
    color: var(--urlbar-box-text-color);
    padding-inline: 8px;
    border-radius: var(--urlbar-icon-border-radius);
-@@ -164,16 +164,16 @@
+@@ -174,16 +174,17 @@
    }
 
    #identity-icon {
 -    list-style-image: url(chrome://global/skin/icons/search-glass.svg);
 +    list-style-image: url(chrome://global/skin/icons/search-glass.svg) !important;
++    fill-opacity: 0.5;
    }
  }