Fix: Tab - Replace [first-visible-tab], [last-visible-tab] #628

This commit is contained in:
alstjr7375 2023-02-16 11:45:33 +09:00
parent 0c4691318a
commit 8f93dcdb35
5 changed files with 23 additions and 23 deletions

View file

@ -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: "";
}

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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: "";
}