💄 Clean up vertical tabs

Author: trickypr

src/browser/themes/pulse/addons/shared.css

@@ -87,6 +87,11 @@ tab.tabbrowser-tab:nth-child(1) {
   right: var(--tab-rounding-size-neg);
 }
 
+/* This overrides our settings for the proton theme */
+#browser #TabsToolbar .tab-background {
+  height: var(--tab-min-height);
+}
+
 #tabbrowser-arrowscrollbox .tabbrowser-tab {
   /* Specifies the padding to the left and right of the tab */
   padding-inline: var(--tab-padding-inline) !important;
@@ -103,11 +108,6 @@ tab.tabbrowser-tab:nth-child(1) {
   border-radius: var(--toolbarbutton-border-radius) !important;
 }
 
-/* Vertical tab new button stuff */
-#browser #TabsToolbar #new-tab-button {
-  margin: 8px;
-}
-
 #verticaltabs-splitter {
   background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
   background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));

src/browser/themes/pulse/vertical_tabs.css

@@ -71,11 +71,16 @@
 
   /* Stops the tabs from getting squished or stretched */
   min-height: unset;
+  height: var(--tab-min-height);
   max-height: var(--tab-min-height);
 
   transition: min-height 150ms ease-in-out, max-height 150ms ease-in-out;
 }
 
+#browser #TabsToolbar .tab-background {
+  height: calc(var(--tab-min-height) - 2px);
+}
+
 /* Work around for tab closing animation whilst in vertical tabs. Without this
     the clean up code (created by 608589) will not work correctly */
 /* TODO: This causes tabs to stick around for longer and trigger a clean up
@@ -115,6 +120,17 @@
 
 #browser #new-tab-button {
   display: inherit !important;
+  appearance: inherit !important;
+
+  border-radius: var(--tab-border-radius);
+  margin: 2px;
+  padding: var(--inline-tab-padding);
+
+  height: calc(var(--tab-min-height) - 2px);
+}
+
+#browser #new-tab-button:hover {
+  background: var(--toolbarbutton-hover-background);
 }
 
 #browser #tabbrowser-tabs {
@@ -136,14 +152,3 @@
 :root[sizemode='fullscreen'] #browser #TabsToolbar {
   display: none;
 }
-
-#new-tab-button {
-  appearance: inherit !important;
-  border-radius: 5px;
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-}
-
-#new-tab-button:hover {
-  background: var(--toolbarbutton-hover-background);
-}