From 9c34fe92348b5c5e7bd35d7ddfaef35c878e527c Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 21 Jul 2022 09:59:26 +0900
Subject: [PATCH] Fix: Letters Cleary - Adjust mask image

---
 css/leptonChrome.css                        | 25 +++++++++++++++------
 src/tabbar/clipped_tab/_letters_cleary.scss | 25 ++++++++++++++-------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 347e54b..3ae1abf 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -4636,16 +4636,27 @@
     --inline-tab-padding: 8px;
   }
 
-  #tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
-  #tabbrowser-tabs[closebuttons="activetab"]
-    .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) {
-    mask-image: linear-gradient(to right, black 70%, transparent) !important;
+  .tabbrowser-tab .tab-label-container {
+    --tab-label-mask-size: 1.8em;
+    /* Original: 2em */
   }
 
-  #tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
+  #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container {
+    --tab-label-mask-size: 30%;
+  }
   #tabbrowser-tabs[closebuttons="activetab"]
-    .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) {
-    mask-image: linear-gradient(to left, black 70%, transparent) !important;
+    .tabbrowser-tab:is([visuallyselected="true"], [multiselected="true"])
+    .tab-label-container {
+    --tab-label-mask-size: 25%;
+  }
+
+  .tabbrowser-tab[visuallyselected="true"]:not([labelendaligned]):hover .tab-label-container,
+  #tabbrowser-tabs:not([closebuttons="activetab"])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab:not([visuallyselected="true"], [labelendaligned]):hover
+    .tab-label-container {
+    --tab-label-mask-size: 0.9em;
+    /* Original: 1em */
   }
 }
 /** Clipped tabs - Show close button at hover *********************************/
diff --git a/src/tabbar/clipped_tab/_letters_cleary.scss b/src/tabbar/clipped_tab/_letters_cleary.scss
index a4b4446..8b9f899 100644
--- a/src/tabbar/clipped_tab/_letters_cleary.scss
+++ b/src/tabbar/clipped_tab/_letters_cleary.scss
@@ -13,14 +13,23 @@
   --inline-tab-padding: 8px;
 }
 
-#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
-#tabbrowser-tabs[closebuttons="activetab"]
-  .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) {
-  mask-image: linear-gradient(to right, black 70%, transparent) !important;
+// mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
+.tabbrowser-tab {
+  .tab-label-container {
+    --tab-label-mask-size: 1.8em; /* Original: 2em */
+  }
 }
 
-#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
-#tabbrowser-tabs[closebuttons="activetab"]
-  .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) {
-  mask-image: linear-gradient(to left, black 70%, transparent) !important;
+#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab {
+  .tab-label-container {
+    --tab-label-mask-size: 30%;
+  }
+  &:is([visuallyselected="true"], [multiselected="true"]) .tab-label-container {
+    --tab-label-mask-size: 25%;
+  }
+}
+
+.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover .tab-label-container,
+#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover .tab-label-container {
+  --tab-label-mask-size: 0.9em; /* Original: 1em */
 }