From 8f93dcdb356bdac260a5600bb27c3ea4a8f9a3ad Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 16 Feb 2023 11:45:33 +0900 Subject: [PATCH] Fix: Tab - Replace `[first-visible-tab]`, `[last-visible-tab]` #628 --- css/leptonChrome.css | 24 +++++++++---------- src/padding/_tabbar_width.scss | 2 +- .../_bottom_rounded_corner_others.scss | 4 ++-- .../unselected_tab/_dynamic_separator.scss | 14 +++++------ src/tab/unselected_tab/_static_separator.scss | 2 +- 5 files changed, 23 insertions(+), 23 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index bee3e1a..32b962d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3363,7 +3363,7 @@ } } @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { - #TabsToolbar:not([multibar]) .tabbrowser-tab:not([last-visible-tab]) { + #TabsToolbar:not([multibar]) .tabbrowser-tab:not(:last-child) { margin-inline-end: -1px !important; } } @@ -6483,11 +6483,11 @@ } } #tabbrowser-tabs[positionpinnedtabs], - #tabbrowser-tabs:not([overflow]) .tabbrowser-tab[first-visible-tab], + #tabbrowser-tabs:not([overflow]) .tabbrowser-tab:first-child, #tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-unpinned-tab] { margin-left: var(--uc-tab-corner-half-size) !important; } - .tabbrowser-tab[last-visible-tab] { + .tabbrowser-tab:last-child { margin-right: var(--uc-tab-corner-half-size) !important; } } @@ -6618,7 +6618,7 @@ @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-child .tab-stack::after { /* Box Model */ content: ""; @@ -6636,7 +6636,7 @@ @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-child .tab-stack::after { background-color: var(--tabs-border-color); } @@ -6644,7 +6644,7 @@ .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab[last-visible-tab] .tab-stack::after { + .tabbrowser-tab:last-child .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } @@ -6677,7 +6677,7 @@ } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-child .tab-stack::after { opacity: var(--tab-separator-opacity); } @@ -6701,10 +6701,10 @@ ~ .tabbrowser-tab[afterhovered] .tab-stack::before, #navigator-toolbox:not([movingtab]) - .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:last-child:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, #navigator-toolbox:not([movingtab]) - .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:last-child:is([visuallyselected], [multiselected], :hover) ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { opacity: 0 !important; @@ -6735,14 +6735,14 @@ } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-child .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } } /* Latest Tab & New tab margin */ - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-child { margin-inline-end: 1px !important; } } @@ -6751,7 +6751,7 @@ #TabsToolbar { --toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent); } - .tabbrowser-tab[first-visible-tab="true"] .tab-stack::before, + .tabbrowser-tab:first-child .tab-stack::before, .tab-stack::after { content: ""; } diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 5c3047c..08d049a 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -96,7 +96,7 @@ } } @include NotOption("userChrome.tabbar.multi_row") { - #TabsToolbar:not([multibar]) .tabbrowser-tab:not([last-visible-tab]) { + #TabsToolbar:not([multibar]) .tabbrowser-tab:not(:last-child) { margin-inline-end: -1px !important; } } diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index 8e46083..9e1aa5e 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -217,11 +217,11 @@ #tabbrowser-tabs { &[positionpinnedtabs], - &:not([overflow]) .tabbrowser-tab[first-visible-tab], + &:not([overflow]) .tabbrowser-tab:first-child , &[overflow] .tabbrowser-tab[first-visible-unpinned-tab] { margin-left: var(--uc-tab-corner-half-size) !important; } } -.tabbrowser-tab[last-visible-tab] { +.tabbrowser-tab:last-child { margin-right: var(--uc-tab-corner-half-size) !important; } diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index b55384a..73af227 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -52,7 +52,7 @@ @include NotOption("userChrome.tab.newtab_button_like_tab") { .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-child .tab-stack::after { @include _dynamicSeparatorShape; } @@ -60,7 +60,7 @@ .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab[last-visible-tab] .tab-stack::after { + .tabbrowser-tab:last-child .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } @@ -86,7 +86,7 @@ } @include NotOption("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-child .tab-stack::after { opacity: var(--tab-separator-opacity); } @@ -111,10 +111,10 @@ ~ .tabbrowser-tab[afterhovered] .tab-stack::before, #navigator-toolbox:not([movingtab]) - .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:last-child:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, /* Legacy - v103 */ #navigator-toolbox:not([movingtab]) - .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:last-child:is([visuallyselected], [multiselected], :hover) ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { opacity: 0 !important; } @@ -146,7 +146,7 @@ } @include NotOption("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-child .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @@ -154,6 +154,6 @@ } /* Latest Tab & New tab margin */ -#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { +#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-child { margin-inline-end: 1px !important; } diff --git a/src/tab/unselected_tab/_static_separator.scss b/src/tab/unselected_tab/_static_separator.scss index e0bafd8..dedc6b0 100644 --- a/src/tab/unselected_tab/_static_separator.scss +++ b/src/tab/unselected_tab/_static_separator.scss @@ -2,7 +2,7 @@ --toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent); } -.tabbrowser-tab[first-visible-tab="true"] .tab-stack::before, +.tabbrowser-tab:first-child .tab-stack::before, .tab-stack::after { content: ""; }