Refactor split view styles and update theme variables for improved UI consistency

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

@@ -45,8 +45,7 @@
 }
 
 #tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer.deck-selected {
-  outline: 2px solid var(--zen-primary-color) !important;
-  outline-offset: -1px;
+  outline: 1px solid var(--zen-primary-color) !important;
 }
 
 #tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
@@ -214,38 +213,69 @@
   display: revert;
 }
 
-.zen-view-splitter-header {
-  display: flex;
-  width: 100%;
-  height: 20px;
-  /*TODO: update with appropriate color*/
-  background-color: var(--zen-colors-secondary);
-  align-items: center;
+.zen-view-splitter-header-container {
+  position: absolute;
+  top: calc(var(--zen-split-column-gap) / -2);
+  left: 50%;
+  opacity: 0;
+  transition: opacity 0.2s;
   z-index: 100;
-  cursor: move;
+  transform: translateX(-50%);
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 6px;
+    background: var(--zen-colors-border);
+  }
 }
 
-.zen-tab-unsplit-button {
+.zen-view-splitter-header {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  padding: 0.4rem 0.6rem;
+  border-radius: 8px;
+  background-color: light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));
+  box-shadow: 0 0 0 1px var(--button-primary-border-color);
+  gap: 0.8rem;
+}
+
+:root:not([inDOMFullscreen='true']) .browserSidebarContainer:hover .zen-view-splitter-header-container,
+.zen-view-splitter-header-container:hover {
+  pointer-events: all;
+  opacity: 1;
+  transition-delay: 0.2s;
+}
+
+.zen-view-splitter-header-container toolbarbutton {
   display: block;
   -moz-context-properties: fill, fill-opacity;
   border-radius: var(--tab-border-radius);
-  /*TODO: update with appropriate color*/
   color: inherit;
   fill: currentColor;
-  padding: var(--tab-close-button-padding);
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
   appearance: none;
-  margin-left: auto;
-  outline: var(--toolbarbutton-outline);
-  list-style-image: url('chrome://global/skin/icons/close-fill.svg') !important;
-  &:hover {
-    outline-color: var(--toolbarbutton-hover-outline-color);
+  outline: none;
+  color: var(--button-primary-color);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+
+  & image {
+    width: 14px;
+    height: 14px;
   }
 
-  &:hover:active {
-    outline-color: var(--toolbarbutton-active-outline-color);
+  &.zen-tab-rearrange-button image {
+    transform: rotate(90deg);
+    cursor: move;
   }
 }
 
@@ -264,6 +294,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     width: 3.5rem;
+    pointer-events: none;
     height: 3.5rem;
     background: var(--zen-split-view-fake-icon);
     background-size: contain;

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

@@ -122,7 +122,7 @@
   &::before {
     height: 50px;
     width: 4px;
-    background: var(--zen-colors-primary);
+    background: var(--button-primary-bgcolor);
     border-radius: 2px;
     content: '';
     position: absolute;

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

@@ -164,7 +164,7 @@
     background: transparent;
     --zen-themed-toolbar-bg-transparent: transparent;
     @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, transparent 20%);
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
     }
   }