From 6dc755d4fe99645f10e5d65fc226abf750330135 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 18 Feb 2023 11:13:22 +0900
Subject: [PATCH] Fix: Tab - Replace `[beforeselected-visible]` #628

---
 css/leptonChrome.css                              | 15 ++++++++-------
 .../_bottom_rounded_corner_others.scss            |  2 +-
 src/tab/unselected_tab/_static_separator.scss     |  9 +++++----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 9bd12a6..e383102 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -6430,7 +6430,7 @@
       background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage);
       clip-path: var(--uc-tab-corner-right-side-clipPath);
     }
-    .tabbrowser-tab[beforeselected-visible] .tab-background::after {
+    .tabbrowser-tab:has(+ .tabbrowser-tab[visuallyselected]) .tab-background::after {
       --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped);
     }
     .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-background::before {
@@ -6747,8 +6747,8 @@
   #TabsToolbar {
     --toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent);
   }
-  .tabbrowser-tab:first-of-type .tab-stack::before,
-  .tab-stack::after {
+  .tab-stack::before,
+  .tabbrowser-tab:last-of-type .tab-stack::after {
     content: "";
   }
   .tab-stack::before,
@@ -6759,6 +6759,7 @@
     /* Position */
     top: 50%;
     transform: translateY(-50%);
+    z-index: 1;
     /* Bar shape */
     width: 0px;
     height: 100%;
@@ -6770,15 +6771,15 @@
   }
   @supports -moz-bool-pref("userChrome.tab.static_separator.selected_accent") {
     .tabbrowser-tab[visuallyselected] .tab-stack::before,
-    .tabbrowser-tab[visuallyselected] .tab-stack::after,
-    .tabbrowser-tab[beforeselected-visible] .tab-stack::after {
+    .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-stack::before,
+    .tabbrowser-tab[visuallyselected] .tab-stack::after {
       --toolbarseparator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255)));
     }
   }
   @supports not -moz-bool-pref("userChrome.tab.static_separator.selected_accent") {
     .tabbrowser-tab[visuallyselected] .tab-stack::before,
-    .tabbrowser-tab[visuallyselected] .tab-stack::after,
-    .tabbrowser-tab[beforeselected-visible] .tab-stack::after {
+    .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-stack::before,
+    .tabbrowser-tab[visuallyselected] .tab-stack::after {
       opacity: 0;
     }
   }
diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss
index 4863f51..1bb55a5 100644
--- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss
+++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss
@@ -153,7 +153,7 @@
     }
   }
 
-  &[beforeselected-visible] .tab-background::after {
+  &:has(+ .tabbrowser-tab[visuallyselected]) .tab-background::after {
     --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped);
   }
   &[visuallyselected] + .tabbrowser-tab .tab-background::before {
diff --git a/src/tab/unselected_tab/_static_separator.scss b/src/tab/unselected_tab/_static_separator.scss
index 6aa29cd..4107155 100644
--- a/src/tab/unselected_tab/_static_separator.scss
+++ b/src/tab/unselected_tab/_static_separator.scss
@@ -2,8 +2,8 @@
   --toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent);
 }
 
-.tabbrowser-tab:first-of-type .tab-stack::before,
-.tab-stack::after {
+.tab-stack::before,
+.tabbrowser-tab:last-of-type .tab-stack::after {
   content: "";
 }
 
@@ -16,6 +16,7 @@
   /* Position */
   top: 50%;
   transform:  translateY(-50%);
+  z-index: 1;
 
   /* Bar shape */
   width: 0px;
@@ -29,8 +30,8 @@
 }
 
 .tabbrowser-tab[visuallyselected] .tab-stack::before,
-.tabbrowser-tab[visuallyselected] .tab-stack::after,
-.tabbrowser-tab[beforeselected-visible] .tab-stack::after {
+.tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-stack::before,
+.tabbrowser-tab[visuallyselected] .tab-stack::after {
   @include Option("userChrome.tab.static_separator.selected_accent") {
     --toolbarseparator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255)));
   }