From a6546e69555aff1d82760a3a4e3f9fa3d77cf2c7 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sun, 21 Dec 2025 00:00:00 +0900
Subject: [PATCH] Fix: Tab - Vertical Tab with close button #1095

---
 css/leptonChrome.css                          | 26 +++++++++++++++++++
 css/leptonChromeESR.css                       | 12 +++++++++
 .../_show_close_button_at_hover.scss          | 11 ++++++++
 3 files changed, 49 insertions(+)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index ac04439..7bd0d8c 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -8629,6 +8629,18 @@
     padding-inline-start: 3px !important; /* Original: 0px */
     width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding)  */
   }
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button {
+    padding: 2px !important;
+    width: 16px !important;
+    height: 16px !important;
+    background-image: linear-gradient(var(--close-button-extra-background)),
+      linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important;
+  }
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive {
+    background-image: linear-gradient(var(--close-button-extra-background)),
+      linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))),
+      linear-gradient(var(--toolbox-bgcolor-inactive)) !important;
+  }
 }
 /** Clipped tabs - Show close button at pinned tab ****************************/
 @media -moz-pref("userChrome.tab.close_button_at_pinned") {
@@ -24011,6 +24023,20 @@
     width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding)  */
   }
 }
+@media (-moz-bool-pref: "userChrome.tab.close_button_at_hover") {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button {
+    padding: 2px !important;
+    width: 16px !important;
+    height: 16px !important;
+    background-image: linear-gradient(var(--close-button-extra-background)),
+      linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important;
+  }
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive {
+    background-image: linear-gradient(var(--close-button-extra-background)),
+      linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))),
+      linear-gradient(var(--toolbox-bgcolor-inactive)) !important;
+  }
+}
 /** Clipped tabs - Show close button at pinned tab ****************************/
 @media (-moz-bool-pref: "userChrome.tab.close_button_at_pinned") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) {
   #tabbrowser-tabs {
diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css
index 6e38098..fce8c4d 100644
--- a/css/leptonChromeESR.css
+++ b/css/leptonChromeESR.css
@@ -9088,6 +9088,18 @@
     padding-inline-start: 3px !important; /* Original: 0px */
     width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding)  */
   }
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button {
+    padding: 2px !important;
+    width: 16px !important;
+    height: 16px !important;
+    background-image: linear-gradient(var(--close-button-extra-background)),
+      linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important;
+  }
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive {
+    background-image: linear-gradient(var(--close-button-extra-background)),
+      linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))),
+      linear-gradient(var(--toolbox-bgcolor-inactive)) !important;
+  }
 }
 /** Clipped tabs - Show close button at pinned tab ****************************/
 @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
diff --git a/src/tab/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss
index 34bda20..a1a44f4 100644
--- a/src/tab/clipped_tab/_show_close_button_at_hover.scss
+++ b/src/tab/clipped_tab/_show_close_button_at_hover.scss
@@ -79,3 +79,14 @@
   padding-inline-start: 3px !important; /* Original: 0px */
   width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding)  */
 }
+
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button {
+  padding: 2px !important;
+  width: 16px !important;
+  height: 16px !important;
+  background-image: linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important;
+
+  &:-moz-window-inactive {
+    background-image: linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor-inactive)) !important;
+  }
+}
\ No newline at end of file