Enhance Zen Browser UI with layout adjustments, z-index updates, and color changes

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

@@ -76,7 +76,7 @@ pref('zen.welcomeScreen.seen', false);
 
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
-pref('zen.theme.accent-color', "#aac7ff");
+pref('zen.theme.accent-color', "#ffb787");
 pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);

src/browser/base/content/ZenUIManager.mjs

@@ -208,9 +208,9 @@ var gZenVerticalTabsManager = {
     const topButtons = document.getElementById('zen-sidebar-top-buttons');
     const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
     const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
-    const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') && isVerticalTabs;
+    const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') || !isVerticalTabs;
     const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
-    const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs && isSidebarExpanded;
+    const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) || !isVerticalTabs;
     const titlebar = document.getElementById('titlebar');
 
     gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
@@ -250,9 +250,9 @@ var gZenVerticalTabsManager = {
     //  tabboxWrapper.prepend(this.navigatorToolbox);
     }
 
-    if (!isVerticalTabs) {
-      document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
-    }
+    //if (!isVerticalTabs) {
+    //  document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
+    //}
 
     let windowButtons = this.actualWindowButtons;
     let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;

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

@@ -75,6 +75,7 @@
 #zen-appcontent-wrapper {
   max-width: 100%;
   overflow-x: hidden;
+  z-index: 1;
 }
 
 :root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -80,7 +80,7 @@
 
 #zen-sidebar-web-panel {
   border-radius: var(--zen-panel-radius);
-  overflow: hidden;
+  z-index: 2;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--zen-colors-border);
   background: var(--zen-colors-tertiary);
@@ -105,21 +105,47 @@
   top: 0;
   left: 0;
   height: 100%;
-  width: 4px;
+  width: calc(var(--zen-element-separation) * 2 - 3px);
   background: transparent;
   border: none;
   cursor: ew-resize;
+
+  &::before {
+    height: 30px;
+    width: 3px;
+    background: var(--zen-colors-border);
+    border-radius: 2px;
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    pointer-events: none;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
 }
 
 .zen-sidebar-web-panel-splitter[side='right'] {
-  left: initial;
-  right: 0;
+  left: 100%;
+}
+
+.zen-sidebar-web-panel-splitter[side='left'] {
+  right: 100%;
 }
 
 .zen-sidebar-web-panel-splitter[orient='horizontal'] {
   width: 100%;
   height: 7px;
   cursor: ns-resize;
+
+  &::before {
+    display: none;
+  }
 }
 
 .zen-sidebar-web-panel-splitter[side='bottom'] {
@@ -253,6 +279,7 @@
 :root:not([zen-right-side='true']) {
   #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
     margin-left: 0 !important;
+    margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
   }
 }
 

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

@@ -1,6 +1,6 @@
 /* Styles for both vertical and horizontal tabs */
-@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
 @import url('chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css');
+@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
 
 #zen-tabbox-wrapper {
   position: relative;

src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css

@@ -1,20 +1,332 @@
 @media not (-moz-bool-pref: 'zen.tabs.vertical') {
-  #browser,
-  #navigator-toolbox {
-    flex-direction: row;
-
-    max-width: unset !important;
-    width: 100% !important;
+  :root #browser {
+    display: flex !important;
+    flex-direction: column !important;
   }
 
-  #zen-sidebar-splitter {
-    display: none !important;
+    & #navigator-toolbox {
+        display: flex !important;
+        flex-direction: row !important;
+        max-width: unset !important;
+        min-width: unset !important;
+        width: 100%;
+        padding: var(--zen-toolbox-padding) !important;
+    }
+
+
+  #tabbrowser-tabs {
+      display: -webkit-box !important;
+      -webkit-box-orient: horizontal;
+      -webkit-box-pack: start;
+      max-width: 10000px !important;
   }
 
+  #vertical-pinned-tabs-container-separator {
+      display: none !important;
+  }
+
+  #zen-essentials-container, 
+  #vertical-pinned-tabs-container, 
   #tabbrowser-arrowscrollbox {
-    max-height: unset !important;
+      -webkit-box-flex: 1;
+  }
+
+  #vertical-pinned-tabs-container:empty {
+      -webkit-box-flex: 0 !important;
+      width: 0 !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      border: none !important;
+      visibility: collapse !important;
+  }
+  #navigator-toolbox {
+      flex-direction: row !important;
   }
 
   #titlebar {
+      flex-direction: row !important;
+      width: 100%;
+      height: 40px !important;
+  }
+
+  #zen-essentials-container {
+      --tab-min-height: 36px !important;
+      display: flex !important;
+      flex-direction: row !important;
+      padding-inline-end: 0 !important;
+  }
+
+  #vertical-pinned-tabs-container {
+      display: flex !important;
+      flex-direction: row !important;
+      padding-inline-end: 0 !important;
+  }
+
+  #zen-essentials-container .tabbrowser-tab {
+      width: 0% !important;
+  }
+
+  #vertical-pinned-tabs-container .tabbrowser-tab {
+      width: 0% !important;
+  }
+
+  .tabbrowser-tab[zen-glance-tab="true"] {
+      .tab-content {
+      }
+      
+      .tab-label-container {
+          display: none !important;
+          width: 0px !important;
+          max-width: 0px !important;
+      }
+  }
+
+  #tabbrowser-arrowscrollbox {
+      display: flex !important;
+      max-width: -moz-available;
+      overflow: hidden !important;
+  }
+
+  #TabsToolbar {
+      flex-direction: row !important;
+      gap: 8px;
+      overflow: hidden !important;
+      display: flex !important;
+  }
+
+  #TabsToolbar-customization-target {
+      flex-direction: row !important;
+  }
+
+  #tabbrowser-tabs[orient="vertical"] {
+      flex-direction: row !important;
+  }
+
+  tabs {
+      flex-direction: row !important;
+  }
+
+  #zen-essentials-container {
+      container-name: tab-container;
+      container-type: normal;
+      max-width: 36px !important;
+      flex: 1 1 36px !important; 
+  }
+  #vertical-pinned-tabs-container {
+      container-name: tab-container;
+      container-type: normal;
+      max-width: 36px !important;
+      min-width: 36px !important;
+      flex: 1 1 36px !important; 
+  }
+
+  #vertical-pinned-tabs-container .tab-close-button {
+      display: none !important;
+  }
+
+  #vertical-pinned-tabs-container .tab-label-container {
+      display: none !important;
+  }
+
+  #vertical-pinned-tabs-container .tab-icon-image {
+      margin: 0 !important;
+  }
+
+  .tabbrowser-tab {
+      container-name: tab-container;
+      container-type: normal;
+      max-width: 200px !important;
+      min-width: 36px !important;
+      flex: 1 1 150px !important; 
+  }
+
+  .tabbrowser-tab[selected] {
+      flex: 2 1 150px !important; 
+      min-width: 32px !important;
+  }
+
+  @container tab-container (max-width: 80px) {
+      .tab-close-button {
+          margin-right: 0px !important;
+      }
+      .tab-icon-image {
+          padding: 0 !important;
+          margin-left: min(2.5px, 5%) !important;
+          margin-right: min(10px, 5%) !important;
+      }
+      .tab-label-container,
+      .tab-content {
+          margin: 0 !important;
+          padding-left: min(8px, 5%) !important;
+          padding-right: min(8px, 5%) !important;
+      }
+  }
+
+  @container tab-container (max-width: 44px) {
+      .tab-label-container {
+          display: none !important;
+      }
+      .tab-content {
+          justify-content: space-around !important;
+      }
+      .tab-close-button {
+          display: none !important;
+      }
+      .tabbrowser-tab[selected] {
+          & .tab-icon-image,
+          .tab-icon-stack {
+              display: none !important;
+          }
+          & .tab-content {
+              justify-content: space-around !important;
+              padding: 0 !important;
+          }
+          .tab-close-button {
+              display: block !important;
+          }
+      }
+  }
+
+  #vertical-pinned-tabs-container::after {
+      z-index: -1;
+      content: "";
+      position: absolute;
+      right: 0;
+      width: 1px;
+      height: 45%;
+      top: 50%;
+      transform: translateY(-50%);
+      background: hsl(255, 10%, 100%);
+  }
+
+  slot {
+      flex-direction: row !important;
+  }
+
+  box.scrollbox-clip scrollbox slot {
+      display: flex !important;
+      width: 100% !important;
+      overflow: hidden !important;
+  }
+
+  .menupopup-arrowscrollbox > slot:nth-child(1) {
+      display: flex;
+      flex-direction: column !important;
+  }
+
+  /* Other UI Elements */
+  #zen-current-workspace-indicator {
+      display: none !important;
+  }
+
+  #zen-sidebar-splitter {
+      display: none !important;
+  }
+
+  #tabbrowser-tabpanels {
+      padding-left: var(--zen-element-separation) !important;
+  }
+
+  #appcontent * {
+      overflow: visible !important;
+  }
+
+  #TabsToolbar-customization-target::after {
+      display: none !important;
+  }
+
+  #zen-sidebar-icons-wrapper {
+      width: auto !important;
+      padding: 0 !important;
+  }
+
+  /* Height Adjustments */
+  #vertical-pinned-tabs-container,
+  #zen-essentials-container,
+  #tabbrowser-arrowscrollbox {
+      max-height: none !important;
+  }
+
+  #PanelUI-zen-gradient-generator {
+      min-width: 390px !important;
+  }
+
+
+  #zen-essentials-container:not(:empty), 
+  #vertical-pinned-tabs-container:not(:empty), 
+  #tabbrowser-arrowscrollbox {
+      -webkit-box-flex: 1;
+      min-width: min-content;
+      width: auto !important;
+  }
+
+  #vertical-pinned-tabs-container:not(:empty) {
+      display: -webkit-box !important;
+      -webkit-box-orient: horizontal;
+      min-width: fit-content !important;
+      width: fit-content !important;
+      position: relative;
+      margin-right: -1px !important;
+  }
+
+  #vertical-pinned-tabs-container:not(:empty) .tabbrowser-tab {
+      position: relative;
+      display: -webkit-box !important;
+  }
+
+  #tabbrowser-arrowscrollbox {
+      margin-left: 0 !important;
+  }
+
+  #vertical-pinned-tabs-container:empty,
+  #zen-essentials-container:empty {
+      -webkit-box-flex: 0 !important;
+      width: 0 !important;
+      min-width: 0 !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      border: none !important;
+      visibility: collapse !important;
+  }
+
+  #tabbrowser-arrowscrollbox-periphery {
+    margin: 0 !important;
+  }
+
+  hbox#nav-bar-customization-target toolbarbutton.chromeclass-toolbar-additional:nth-of-type(1) {
+      padding-inline-start: var(--toolbar-start-end-padding) !important;
+  }
+
+  toolbar#PersonalToolbar {
+      padding-left: 6px !important;
+  }
+
+  .tab-context-line {
+      width: 100% !important;
+      height: 3px !important;
+  }
+
+  .tabbrowser-tab[zen-glance-tab="true"] { 
+      flex-basis: fit-content !important;
+      max-width: 36px !important;
+  }
+
+  #zen-essentials-container .tabbrowser-tab[zen-glance-tab="true"] {
+      left: 2px;
+  }
+
+  #vertical-pinned-tabs-container .tabbrowser-tab[zen-glance-tab="true"] {
+      position: absolute !important;
+  }
+
+  #TabsToolbar-customization-target toolbarbutton,
+  #TabsToolbar-customization-target toolbarpaletteitem {
+      -webkit-box-flex: 0 !important;
+      min-width: min-content;
+      width: auto !important;
+      
+      .toolbarbutton-text {
+          display: none !important;
+      }
   }
 }

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -1,4 +1,3 @@
-@media (-moz-bool-pref: 'zen.tabs.vertical') {
   #tabbrowser-tabs,
   #TabsToolbar,
   #titlebar,
@@ -350,16 +349,13 @@
         margin-left: var(--zen-toolbox-padding);
         width: calc(100% - var(--zen-toolbox-padding));
         & .urlbar-input-container {
-          padding-left: 2px;
+          padding-left: 4px;
+          padding-right: 4px;
         }
         
         :root[zen-right-side='true'] & {
           margin-left: 0;
           margin-right: var(--zen-toolbox-padding);
-  
-          & .urlbar-input-container {
-            padding-right: 2px;
-          }
         }
       }
     }
@@ -830,7 +826,7 @@
     }
     }
   }
-}
+
 
 /* Mark: Essentials Toolbar */
 #zen-essentials-container {
@@ -858,8 +854,8 @@
   border-radius: var(--border-radius-medium);
 
   &:not([selected]) .tab-background {
-    background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
-    box-shadow: none;
+    background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   }
 
   backdrop-filter: blur(10px);

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

@@ -1,4 +1,4 @@
-/* Here, we contain all the theme related variables, for example theme
+  /* Here, we contain all the theme related variables, for example theme
  * colors, border radius, etc.
  * We have `--zen-border-radius` and `--zen-primary-color` as variables.
  */
@@ -12,7 +12,11 @@
 
   /* Default values */
   --zen-border-radius: 7px;
-  --zen-primary-color: #4a90e2;
+  --zen-primary-color: #ffb787;
+
+  --zen-branding-bg-dark: #202020;
+  --zen-branding-bg: light-dark(#F2F0E3, var(--zen-branding-bg-dark));
+  --zen-branding-bg-reverse: light-dark(var(--zen-branding-bg-dark), #F2F0E3);
 
   /** Zen colors are generated automatically from the primary color */
   --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
@@ -20,7 +24,7 @@
   --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 2%, white 98%);
 
   --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
-  --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
+  --zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
   --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
 
   --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
@@ -30,19 +34,10 @@
 
   --zen-secondary-btn-color: var(--zen-colors-primary-foreground);
 
-  --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) 85%, black 15%)
-  ) !important;
-  --in-content-primary-button-background-hover: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
-    color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
-  ) !important;
-  --in-content-primary-button-background-active: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 50%, black 50%),
-    color-mix(in srgb, var(--zen-primary-color) 80%, rgba(255,255,255,.2) 20%)
-  ) !important;
-  --in-content-primary-button-text-color: light-dark(white, black) !important;
+  --in-content-primary-button-background: color-mix(in srgb, var(--zen-primary-color) 10%, var(--zen-branding-bg-reverse) 90%) !important;
+  --in-content-primary-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
+  --in-content-primary-button-background-active: color-mix(in srgb, var(--zen-primary-color) 7%, var(--zen-branding-bg-reverse) 50%) !important;
+  --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
   --in-content-primary-button-border-color: transparent !important;
   --in-content-primary-button-border-hover: transparent !important;
   --in-content-primary-button-border-active: var(--zen-colors-border) !important;
@@ -51,18 +46,14 @@
   --in-content-accent-color: var(--zen-colors-primary) !important;
 
   /* This is like the secondary button */
-  --in-content-button-background: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 20%, transparent 80%),
-    color-mix(in srgb, var(--zen-primary-color) 10%, transparent 90%)
-  ) !important;
-  --in-content-button-background-hover: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 10%, rgb(255, 255, 255) 90%),
-    color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
-  ) !important;
+  --in-content-button-background: transparent !important;
+  --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
+  --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
+  --in-content-button-text-color-hover: var(--zen-branding-bg) !important;
   --button-bgcolor: var(--in-content-button-background) !important;
   --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
+  --button-hover-color: var(--in-content-button-text-color-hover) !important;
   --focus-outline-color: var(--button-bgcolor) !important;
-  --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
 
   --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
   --toolbarbutton-icon-fill: light-dark(rgb(57, 57, 58), rgb(251, 251, 254)) !important;
@@ -74,6 +65,7 @@
 
   --button-background-color: var(--in-content-button-background) !important;
   --button-background-color-hover: var(--in-content-button-background-hover) !important;
+  --button-text-color-hover: var(--in-content-button-text-color-hover) !important;
   --button-background-color-active: var(--in-content-primary-button-background-active) !important;
 
   --color-accent-primary: var(--button-primary-bgcolor) !important;
@@ -91,16 +83,18 @@
   --zen-toolbar-button-inner-padding: 6px;
   --toolbarbutton-outer-padding: 4px;
 
+  --toolbarbutton-hover-background: color-mix(in srgb, var(--zen-branding-bg-reverse) 10%, transparent 90%);
+
   /* Other colors */
   --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
   --urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
   --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
   --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
+  --urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;
 
   /* XUL */
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
   --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
-  --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
 
   --zen-appcontent-border: 1px solid var(--zen-colors-border);
   --zen-panel-radius: var(--zen-border-radius);
@@ -127,8 +121,8 @@
 
   --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));
-  --zen-themed-toolbar-bg-transparent: light-dark(#f7f7f7, var(--zen-colors-tertiary));
+  --zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
+  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
 
   @supports (-moz-osx-font-smoothing: auto) {
     --zen-themed-toolbar-bg-transparency: 0.05;
@@ -142,8 +136,8 @@
 @media (prefers-color-scheme: dark) {
   :host(:is(.anonymous-content-host, notification-message)),
   :root {
-    --zen-in-content-dialog-background: rgb(23, 23, 23);
-    --zen-dark-color-mix-base: rgb(21, 21, 21);
+    --zen-in-content-dialog-background: var(--zen-branding-bg);
+    --zen-dark-color-mix-base: var(--zen-branding-bg);
     --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%);
     --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
     --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);

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

@@ -127,7 +127,8 @@
 
 :root[zen-single-toolbar='true'] {
   #urlbar[breakout-extend='true'] {
-    top: calc(var(--zen-toolbar-height) + 2px) !important;
+    top: 0px !important;
+    width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline) * 4);
   }
 
   #notification-popup-box {

src/browser/base/zen-components/ZenProfileDialogUI.mjs

@@ -49,7 +49,11 @@ var ZenProfileDialogUI = {
   },
 
   _openProfile(profile) {
-    Services.startup.createInstanceWithProfile(profile);
+    SelectableProfileService.getProfile(
+      aEvent.target.getAttribute("profileid")
+    ).then(profile => {
+      SelectableProfileService.launchInstance(profile);
+    });
   },
 
   _getProfilesSize(profiles) {

src/browser/base/zen-components/ZenThemeBuilder.mjs

@@ -120,7 +120,7 @@ var gZenThemeBuilder = {
     //ctx.fillRect(0, 0, size, size);
 
     // Add the thumb.
-    const accentColor = Services.prefs.getStringPref(kZenAccentColorConfigKey, '#aac7ff');
+    const accentColor = Services.prefs.getStringPref(kZenAccentColorConfigKey, '#ffb787');
     const pos = this._getPositionFromColor(ctx, this._hexToRgb(accentColor));
 
     let x = pos ? pos[0] : center;

src/browser/themes/shared/light-dark-overrides-css.patch

@@ -0,0 +1,10 @@
+diff --git a/browser/themes/shared/light-dark-overrides.css b/browser/themes/shared/light-dark-overrides.css
+index 8b10da7c3ccbbfca30f77e2b7602794dccbf306d..f9188accee0e02d3ef6944b155da613fa6bd335d 100644
+--- a/browser/themes/shared/light-dark-overrides.css
++++ b/browser/themes/shared/light-dark-overrides.css
+@@ -5,5 +5,4 @@
+ #urlbar {
+   --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color);
+   --urlbar-box-focus-bgcolor: var(--button-background-color);
+-  --urlbar-box-hover-bgcolor: var(--button-background-color-hover);
+ }

src/toolkit/themes/shared/in-content/common-shared-css.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
-index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815abfe67087 100644
+index 646a11b699a0b34204cd766836678bfc17e8548e..14ebf803000ccea0de7c4f09ed2a9528bb017778 100644
 --- a/toolkit/themes/shared/in-content/common-shared.css
 +++ b/toolkit/themes/shared/in-content/common-shared.css
 @@ -5,6 +5,8 @@
@@ -11,7 +11,7 @@ index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815a
  @namespace html "http://www.w3.org/1999/xhtml";
  @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  
-@@ -63,7 +65,7 @@
+@@ -54,7 +56,7 @@
    --in-content-table-border-color: var(--in-content-box-border-color);
    --in-content-table-header-background: var(--in-content-primary-button-background);
    --in-content-table-header-color: var(--in-content-primary-button-text-color);
@@ -20,7 +20,15 @@ index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815a
  
    --dialog-warning-text-color: var(--red-60);
  
-@@ -791,7 +793,8 @@ html|*#categories > html|*.category:dir(rtl) {
+@@ -740,7 +742,6 @@ html|*#categories {
+   color: inherit;
+   margin-inline-start: 34px;
+   padding-inline: 10px;
+-  transition: background-color 150ms;
+ }
+ 
+ html|*#categories > html|*.category {
+@@ -777,7 +778,8 @@ html|*#categories > html|*.category:dir(rtl) {
  @media not (forced-colors) {
    #categories > .category[selected],
    #categories > .category.selected {