mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 02:30:54 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix: support vertical tabs
Some checks failed
CI / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
alstjr7375 2025-04-28 09:36:57 +09:00
parent 9f52697dd2
commit db615f1753
6 changed files with 286 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

235
css/leptonChrome.css generated
View file

@ -6914,27 +6914,27 @@
/** Tab UI ********************************************************************/ /** Tab UI ********************************************************************/
/*= Tab - Connect to window ==============================================*/ /*= Tab - Connect to window ==============================================*/
@media -moz-pref("userChrome.tab.connect_to_window") { @media -moz-pref("userChrome.tab.connect_to_window") {
#tabbrowser-tabs[orient="horizontal"] { #tabbrowser-tabs:not([orient="vertical"]) {
min-height: unset !important; /* Original: var(--tabstrip-min-height) */ min-height: unset !important; /* Original: var(--tabstrip-min-height) */
} }
#tabbrowser-tabs[orient="vertical"] { #tabbrowser-tabs:not([orient="vertical"]) .tab-background {
--uc-tab-border-bottom-radius: var(--tab-border-radius);
}
.tab-background {
border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px)
var(--uc-tab-border-bottom-radius, 0px) !important; var(--uc-tab-border-bottom-radius, 0px) !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
.tab-content { #tabbrowser-tabs:not([orient="vertical"]) .tab-content {
margin-top: 0px; margin-top: 0px;
} }
.tab-stack { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack {
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
#tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { #tabbrowser-tabs:not([orient="vertical"]) tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
transform: translateY(calc(var(--tab-group-line-thickness) * -1)); transform: translateY(calc(var(--tab-group-line-thickness) * -1));
} }
#tabbrowser-tabs[orient="vertical"] {
--uc-tab-border-bottom-radius: var(--tab-border-radius);
}
/* Remove line at Toolbar's top */ /* Remove line at Toolbar's top */
#tabbrowser-tabs { #tabbrowser-tabs {
z-index: 1 !important; z-index: 1 !important;
@ -7048,10 +7048,12 @@
} }
/*= Multi Selected Color - More Contrast =====================================*/ /*= Multi Selected Color - More Contrast =====================================*/
@media -moz-pref("userChrome.tab.multi_selected") { @media -moz-pref("userChrome.tab.multi_selected") {
#TabsToolbar { #TabsToolbar,
#vertical-tabs {
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent));
} }
#TabsToolbar[brighttext] { #TabsToolbar[brighttext],
#vertical-tabs[brighttext] {
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
} }
#tabbrowser-tabs:not([movingtab]) #tabbrowser-tabs:not([movingtab])
@ -7742,8 +7744,8 @@
position: relative; position: relative;
} }
@media -moz-pref("userChrome.tab.newtab_button_like_tab") { @media -moz-pref("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
/* Box Model */ /* Box Model */
content: ""; content: "";
display: block; display: block;
@ -7760,18 +7762,19 @@
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
@media -moz-pref("userChrome.compatibility.dynamic_separator") { @media -moz-pref("userChrome.compatibility.dynamic_separator") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
background-color: var(--tabs-border-color); background-color: var(--tabs-border-color);
} }
} }
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); left: calc(50% - (8px + var(--toolbarbutton-inner-padding)));
} }
} }
@media not -moz-pref("userChrome.tab.newtab_button_like_tab") { @media not -moz-pref("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
/* Box Model */ /* Box Model */
@ -7788,35 +7791,42 @@
background-color: var(--toolbarseparator-color); background-color: var(--toolbarseparator-color);
} }
@media -moz-pref("userChrome.compatibility.dynamic_separator") { @media -moz-pref("userChrome.compatibility.dynamic_separator") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
background-color: var(--tabs-border-color); background-color: var(--tabs-border-color);
} }
} }
.tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before {
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
} }
.tabbrowser-tab:last-of-type .tab-stack::after { #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type .tab-stack::after {
right: 0; right: 0;
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
} }
} }
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type)
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
@media -moz-pref("userChrome.tabbar.one_liner") { @media -moz-pref("userChrome.tabbar.one_liner") {
@media not -moz-pref("userChrome.tabbar.one_liner.tabbar_first") { @media not -moz-pref("userChrome.tabbar.one_liner.tabbar_first") {
@media not -moz-pref("userChrome.tabbar.one_liner.responsive") { @media not -moz-pref("userChrome.tabbar.one_liner.responsive") {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
} }
@media -moz-pref("userChrome.tabbar.one_liner.responsive") { @media -moz-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) { @media screen and (min-width: 1100px) {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
@ -7825,25 +7835,27 @@
} }
} }
@media -moz-pref("userChrome.tab.newtab_button_like_tab") { @media -moz-pref("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button:not(:hover, [open])::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:not(:hover, [open])::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
@media not -moz-pref("userChrome.tab.newtab_button_like_tab") { @media not -moz-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
#tabbrowser-tabs[orient="horizontal"] #tabbrowser-tabs:not([orient="vertical"])
tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected]))
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .tab-stack::before,
#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) tab-group[collapsed] + .tabbrowser-tab .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is(
[visuallyselected], [visuallyselected],
[multiselected], [multiselected],
@ -7851,6 +7863,7 @@
) )
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox[overflowing] #tabbrowser-arrowscrollbox[overflowing]
tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden])))
.tab-stack::before { .tab-stack::before {
@ -7858,13 +7871,16 @@
} }
@media -moz-pref("userChrome.tab.newtab_button_like_tab") { @media -moz-pref("userChrome.tab.newtab_button_like_tab") {
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before, ~ #tabs-newtab-button::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery ~ #tabbrowser-arrowscrollbox-periphery
#tabs-newtab-button::before { #tabs-newtab-button::before {
@ -7872,30 +7888,35 @@
} }
} }
@media not -moz-pref("userChrome.tab.newtab_button_like_tab") { @media not -moz-pref("userChrome.tab.newtab_button_like_tab") {
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab:not([visuallyselected]) + .tabbrowser-tab:not([visuallyselected])
.tab-stack::before { .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { :root:not([uidensity="compact"])
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button
> .toolbarbutton-icon {
margin-left: 2px; margin-left: 2px;
} }
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { :root[uidensity="compact"] #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon {
margin-left: 1px; margin-left: 1px;
} }
} }
/* Animate */ /* Animate */
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
@media -moz-pref("userChrome.tab.newtab_button_like_tab") { @media -moz-pref("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
} }
@media not -moz-pref("userChrome.tab.newtab_button_like_tab") { @media not -moz-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
@ -7903,7 +7924,7 @@
} }
} }
/* Latest Tab & New tab margin */ /* Latest Tab & New tab margin */
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type {
margin-inline-end: 1px !important; margin-inline-end: 1px !important;
} }
} }
@ -8008,7 +8029,7 @@
/*= New tab button - Looks like tab ==========================================*/ /*= New tab button - Looks like tab ==========================================*/
@media -moz-pref("userChrome.tab.newtab_button_like_tab") { @media -moz-pref("userChrome.tab.newtab_button_like_tab") {
@media -moz-pref("userChrome.tab.connect_to_window") { @media -moz-pref("userChrome.tab.connect_to_window") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
/* Size */ /* Size */
align-items: stretch !important; align-items: stretch !important;
-moz-box-align: stretch !important; -moz-box-align: stretch !important;
@ -8016,7 +8037,7 @@
} }
} }
@media -moz-pref("userChrome.tab.bottom_rounded_corner") { @media -moz-pref("userChrome.tab.bottom_rounded_corner") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
/* Original: /* Original:
margin: 0 0 var(--tabs-navbar-shadow-size) !important margin: 0 0 var(--tabs-navbar-shadow-size) !important
=> Can't override style. Therefore, we should approach it by bypass. => Can't override style. Therefore, we should approach it by bypass.
@ -8037,7 +8058,7 @@
-moz-context-properties: fill !important; -moz-context-properties: fill !important;
} }
@media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") { @media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
--uc-newtab-position: 0px; --uc-newtab-position: 0px;
--uc-newtab-non-corner-bgwidth: 0px; --uc-newtab-non-corner-bgwidth: 0px;
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
@ -8057,7 +8078,7 @@
background-origin: padding-box; background-origin: padding-box;
} }
@media -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") { @media -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
--uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
} }
} }
@ -8072,22 +8093,28 @@
} }
@media (-moz-windows-accent-color-in-titlebar) { @media (-moz-windows-accent-color-in-titlebar) {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */ fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */
} }
@media -moz-pref("userChrome.tab.bottom_rounded_corner") { @media -moz-pref("userChrome.tab.bottom_rounded_corner") {
@media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") { @media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8098,8 +8125,10 @@
var(--uc-tab-corner-right-side-svg); var(--uc-tab-corner-right-side-svg);
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8113,8 +8142,10 @@
} }
@media -moz-pref("userChrome.compatibility.accent_color") { @media -moz-pref("userChrome.compatibility.accent_color") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
@ -8123,8 +8154,10 @@
) !important; /* Hardcoded for compatibility */ ) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
@ -8138,8 +8171,10 @@
:not([lwtheme]), :not([lwtheme]),
:not(:-moz-lwtheme) :not(:-moz-lwtheme)
) )
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8153,8 +8188,10 @@
:not([lwtheme]), :not([lwtheme]),
:not(:-moz-lwtheme) :not(:-moz-lwtheme)
) )
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8169,7 +8206,7 @@
} }
} }
/* '+'Icon */ /* '+'Icon */
#tabs-newtab-button .toolbarbutton-icon { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon {
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding)
calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important;
@ -8178,7 +8215,7 @@
fill-opacity: var(--toolbarbutton-icon-fill-opacity); fill-opacity: var(--toolbarbutton-icon-fill-opacity);
} }
@media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") { @media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button .toolbarbutton-icon { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon {
--tab-border-radius: 0px; --tab-border-radius: 0px;
width: unset !important; width: unset !important;
padding-inline: 0px !important; padding-inline: 0px !important;
@ -21586,27 +21623,27 @@
/** Tab UI ********************************************************************/ /** Tab UI ********************************************************************/
/*= Tab - Connect to window ==============================================*/ /*= Tab - Connect to window ==============================================*/
@media (-moz-bool-pref: "userChrome.tab.connect_to_window") { @media (-moz-bool-pref: "userChrome.tab.connect_to_window") {
#tabbrowser-tabs[orient="horizontal"] { #tabbrowser-tabs:not([orient="vertical"]) {
min-height: unset !important; /* Original: var(--tabstrip-min-height) */ min-height: unset !important; /* Original: var(--tabstrip-min-height) */
} }
#tabbrowser-tabs[orient="vertical"] { #tabbrowser-tabs:not([orient="vertical"]) .tab-background {
--uc-tab-border-bottom-radius: var(--tab-border-radius);
}
.tab-background {
border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px)
var(--uc-tab-border-bottom-radius, 0px) !important; var(--uc-tab-border-bottom-radius, 0px) !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
.tab-content { #tabbrowser-tabs:not([orient="vertical"]) .tab-content {
margin-top: 0px; margin-top: 0px;
} }
.tab-stack { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack {
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
#tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { #tabbrowser-tabs:not([orient="vertical"]) tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
transform: translateY(calc(var(--tab-group-line-thickness) * -1)); transform: translateY(calc(var(--tab-group-line-thickness) * -1));
} }
#tabbrowser-tabs[orient="vertical"] {
--uc-tab-border-bottom-radius: var(--tab-border-radius);
}
/* Remove line at Toolbar's top */ /* Remove line at Toolbar's top */
#tabbrowser-tabs { #tabbrowser-tabs {
z-index: 1 !important; z-index: 1 !important;
@ -21724,10 +21761,12 @@
} }
/*= Multi Selected Color - More Contrast =====================================*/ /*= Multi Selected Color - More Contrast =====================================*/
@media (-moz-bool-pref: "userChrome.tab.multi_selected") { @media (-moz-bool-pref: "userChrome.tab.multi_selected") {
#TabsToolbar { #TabsToolbar,
#vertical-tabs {
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent));
} }
#TabsToolbar[brighttext] { #TabsToolbar[brighttext],
#vertical-tabs[brighttext] {
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
} }
#tabbrowser-tabs:not([movingtab]) #tabbrowser-tabs:not([movingtab])
@ -22554,8 +22593,8 @@
/* Latest Tab & New tab margin */ /* Latest Tab & New tab margin */
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
/* Box Model */ /* Box Model */
content: ""; content: "";
display: block; display: block;
@ -22573,19 +22612,20 @@
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.compatibility.dynamic_separator") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.compatibility.dynamic_separator") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
background-color: var(--tabs-border-color); background-color: var(--tabs-border-color);
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); left: calc(50% - (8px + var(--toolbarbutton-inner-padding)));
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
/* Box Model */ /* Box Model */
@ -22603,64 +22643,73 @@
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) and (-moz-bool-pref: "userChrome.compatibility.dynamic_separator") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) and (-moz-bool-pref: "userChrome.compatibility.dynamic_separator") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
background-color: var(--tabs-border-color); background-color: var(--tabs-border-color);
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) {
.tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before {
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) {
.tabbrowser-tab:last-of-type .tab-stack::after { #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type .tab-stack::after {
right: 0; right: 0;
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type)
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first")) and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first")) and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
} }
@media screen and (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first")) and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) { @media screen and (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first")) and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button:not(:hover, [open])::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:not(:hover, [open])::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
#tabbrowser-tabs[orient="horizontal"] #tabbrowser-tabs:not([orient="vertical"])
tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected]))
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .tab-stack::before,
#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) tab-group[collapsed] + .tabbrowser-tab .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is(
[visuallyselected], [visuallyselected],
[multiselected], [multiselected],
@ -22668,6 +22717,7 @@
) )
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox[overflowing] #tabbrowser-arrowscrollbox[overflowing]
tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden])))
.tab-stack::before { .tab-stack::before {
@ -22676,13 +22726,16 @@
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") {
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before, ~ #tabs-newtab-button::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery ~ #tabbrowser-arrowscrollbox-periphery
#tabs-newtab-button::before { #tabs-newtab-button::before {
@ -22690,37 +22743,39 @@
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) {
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab:not([visuallyselected]) + .tabbrowser-tab:not([visuallyselected])
.tab-stack::before { .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { :root:not([uidensity="compact"]) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon {
margin-left: 2px; margin-left: 2px;
} }
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { :root[uidensity="compact"] #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon {
margin-left: 1px; margin-left: 1px;
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) {
.tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
} }
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type {
margin-inline-end: 1px !important; margin-inline-end: 1px !important;
} }
} }
@ -22831,7 +22886,7 @@
/* Fix tab overlap #678 */ /* Fix tab overlap #678 */
} }
@media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.connect_to_window") { @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.connect_to_window") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
/* Size */ /* Size */
align-items: stretch !important; align-items: stretch !important;
-moz-box-align: stretch !important; -moz-box-align: stretch !important;
@ -22839,7 +22894,7 @@
} }
} }
@media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") { @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
/* Original: /* Original:
margin: 0 0 var(--tabs-navbar-shadow-size) !important margin: 0 0 var(--tabs-navbar-shadow-size) !important
=> Can't override style. Therefore, we should approach it by bypass. => Can't override style. Therefore, we should approach it by bypass.
@ -22865,7 +22920,7 @@
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome_legacy"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome_legacy"),
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"),
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
--uc-newtab-position: 0px; --uc-newtab-position: 0px;
--uc-newtab-non-corner-bgwidth: 0px; --uc-newtab-non-corner-bgwidth: 0px;
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
@ -22894,7 +22949,7 @@
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge"),
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"),
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
--uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
} }
} }
@ -22910,14 +22965,18 @@
} }
@media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) { @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */ fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */
} }
@ -22928,8 +22987,10 @@
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"),
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -22940,8 +23001,10 @@
var(--uc-tab-corner-right-side-svg); var(--uc-tab-corner-right-side-svg);
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -22954,8 +23017,10 @@
} }
@media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") { @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
@ -22964,8 +23029,10 @@
) !important; /* Hardcoded for compatibility */ ) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
@ -22980,8 +23047,10 @@
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"),
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -22992,8 +23061,10 @@
var(--uc-tab-corner-right-side-svg); var(--uc-tab-corner-right-side-svg);
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -23005,7 +23076,7 @@
} }
} }
@media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button .toolbarbutton-icon { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon {
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding)
calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important;
@ -23019,7 +23090,7 @@
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome_legacy"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome_legacy"),
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"),
(-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button .toolbarbutton-icon { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon {
--tab-border-radius: 0px; --tab-border-radius: 0px;
width: unset !important; width: unset !important;
padding-inline: 0px !important; padding-inline: 0px !important;

119
css/leptonChromeESR.css generated
View file

@ -7350,27 +7350,27 @@
/** Tab UI ********************************************************************/ /** Tab UI ********************************************************************/
/*= Tab - Connect to window ==============================================*/ /*= Tab - Connect to window ==============================================*/
@supports -moz-bool-pref("userChrome.tab.connect_to_window") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
#tabbrowser-tabs[orient="horizontal"] { #tabbrowser-tabs:not([orient="vertical"]) {
min-height: unset !important; /* Original: var(--tabstrip-min-height) */ min-height: unset !important; /* Original: var(--tabstrip-min-height) */
} }
#tabbrowser-tabs[orient="vertical"] { #tabbrowser-tabs:not([orient="vertical"]) .tab-background {
--uc-tab-border-bottom-radius: var(--tab-border-radius);
}
.tab-background {
border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px)
var(--uc-tab-border-bottom-radius, 0px) !important; var(--uc-tab-border-bottom-radius, 0px) !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
.tab-content { #tabbrowser-tabs:not([orient="vertical"]) .tab-content {
margin-top: 0px; margin-top: 0px;
} }
.tab-stack { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack {
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
#tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { #tabbrowser-tabs:not([orient="vertical"]) tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
transform: translateY(calc(var(--tab-group-line-thickness) * -1)); transform: translateY(calc(var(--tab-group-line-thickness) * -1));
} }
#tabbrowser-tabs[orient="vertical"] {
--uc-tab-border-bottom-radius: var(--tab-border-radius);
}
/* Remove line at Toolbar's top */ /* Remove line at Toolbar's top */
#tabbrowser-tabs { #tabbrowser-tabs {
z-index: 1 !important; z-index: 1 !important;
@ -7484,10 +7484,12 @@
} }
/*= Multi Selected Color - More Contrast =====================================*/ /*= Multi Selected Color - More Contrast =====================================*/
@supports -moz-bool-pref("userChrome.tab.multi_selected") { @supports -moz-bool-pref("userChrome.tab.multi_selected") {
#TabsToolbar { #TabsToolbar,
#vertical-tabs {
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent));
} }
#TabsToolbar[brighttext] { #TabsToolbar[brighttext],
#vertical-tabs[brighttext] {
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
} }
#tabbrowser-tabs:not([movingtab]) #tabbrowser-tabs:not([movingtab])
@ -8184,8 +8186,8 @@
position: relative; position: relative;
} }
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
/* Box Model */ /* Box Model */
content: ""; content: "";
display: block; display: block;
@ -8202,18 +8204,19 @@
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
@supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
background-color: var(--tabs-border-color); background-color: var(--tabs-border-color);
} }
} }
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); left: calc(50% - (8px + var(--toolbarbutton-inner-padding)));
} }
} }
@supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
/* Box Model */ /* Box Model */
@ -8230,35 +8233,42 @@
background-color: var(--toolbarseparator-color); background-color: var(--toolbarseparator-color);
} }
@supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
background-color: var(--tabs-border-color); background-color: var(--tabs-border-color);
} }
} }
.tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before {
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
} }
.tabbrowser-tab:last-of-type .tab-stack::after { #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type .tab-stack::after {
right: 0; right: 0;
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
} }
} }
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type)
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
@supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner") {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
} }
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) { @media screen and (min-width: 1100px) {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
.tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
@ -8267,25 +8277,27 @@
} }
} }
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button:not(:hover, [open])::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:not(:hover, [open])::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
@supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
#tabbrowser-tabs[orient="horizontal"] #tabbrowser-tabs:not([orient="vertical"])
tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected]))
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .tab-stack::before,
#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) tab-group[collapsed] + .tabbrowser-tab .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is(
[visuallyselected], [visuallyselected],
[multiselected], [multiselected],
@ -8293,6 +8305,7 @@
) )
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox[overflowing] #tabbrowser-arrowscrollbox[overflowing]
tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden])))
.tab-stack::before { .tab-stack::before {
@ -8300,13 +8313,16 @@
} }
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before, ~ #tabs-newtab-button::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery ~ #tabbrowser-arrowscrollbox-periphery
#tabs-newtab-button::before { #tabs-newtab-button::before {
@ -8314,30 +8330,35 @@
} }
} }
@supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab:not([visuallyselected]) + .tabbrowser-tab:not([visuallyselected])
.tab-stack::before { .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { :root:not([uidensity="compact"])
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button
> .toolbarbutton-icon {
margin-left: 2px; margin-left: 2px;
} }
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { :root[uidensity="compact"] #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon {
margin-left: 1px; margin-left: 1px;
} }
} }
/* Animate */ /* Animate */
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
} }
@supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
@ -8345,7 +8366,7 @@
} }
} }
/* Latest Tab & New tab margin */ /* Latest Tab & New tab margin */
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type {
margin-inline-end: 1px !important; margin-inline-end: 1px !important;
} }
} }
@ -8450,7 +8471,7 @@
/*= New tab button - Looks like tab ==========================================*/ /*= New tab button - Looks like tab ==========================================*/
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
@supports -moz-bool-pref("userChrome.tab.connect_to_window") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
/* Size */ /* Size */
align-items: stretch !important; align-items: stretch !important;
-moz-box-align: stretch !important; -moz-box-align: stretch !important;
@ -8458,7 +8479,7 @@
} }
} }
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
/* Original: /* Original:
margin: 0 0 var(--tabs-navbar-shadow-size) !important margin: 0 0 var(--tabs-navbar-shadow-size) !important
=> Can't override style. Therefore, we should approach it by bypass. => Can't override style. Therefore, we should approach it by bypass.
@ -8483,7 +8504,7 @@
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
"userChrome.tab.bottom_rounded_corner.chrome" "userChrome.tab.bottom_rounded_corner.chrome"
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
--uc-newtab-position: 0px; --uc-newtab-position: 0px;
--uc-newtab-non-corner-bgwidth: 0px; --uc-newtab-non-corner-bgwidth: 0px;
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
@ -8503,7 +8524,7 @@
background-origin: padding-box; background-origin: padding-box;
} }
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
--uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
} }
} }
@ -8518,14 +8539,18 @@
} }
@media (-moz-windows-accent-color-in-titlebar) { @media (-moz-windows-accent-color-in-titlebar) {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */ fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */
} }
@ -8536,8 +8561,10 @@
"userChrome.tab.bottom_rounded_corner.chrome" "userChrome.tab.bottom_rounded_corner.chrome"
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8548,8 +8575,10 @@
var(--uc-tab-corner-right-side-svg); var(--uc-tab-corner-right-side-svg);
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8563,8 +8592,10 @@
} }
@supports -moz-bool-pref("userChrome.compatibility.accent_color") { @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
@ -8573,8 +8604,10 @@
) !important; /* Hardcoded for compatibility */ ) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
@ -8592,8 +8625,10 @@
:not([lwtheme]), :not([lwtheme]),
:not(:-moz-lwtheme) :not(:-moz-lwtheme)
) )
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8607,8 +8642,10 @@
:not([lwtheme]), :not([lwtheme]),
:not(:-moz-lwtheme) :not(:-moz-lwtheme)
) )
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8623,7 +8660,7 @@
} }
} }
/* '+'Icon */ /* '+'Icon */
#tabs-newtab-button .toolbarbutton-icon { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon {
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding)
calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important;
@ -8636,7 +8673,7 @@
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
"userChrome.tab.bottom_rounded_corner.chrome" "userChrome.tab.bottom_rounded_corner.chrome"
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
#tabs-newtab-button .toolbarbutton-icon { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon {
--tab-border-radius: 0px; --tab-border-radius: 0px;
width: unset !important; width: unset !important;
padding-inline: 0px !important; padding-inline: 0px !important;

37
src/tab/_connect_to_window.scss
View file

@ -1,26 +1,27 @@
#tabbrowser-tabs[orient="horizontal"] { #tabbrowser-tabs:not([orient="vertical"]) {
min-height: unset !important; /* Original: var(--tabstrip-min-height) */ min-height: unset !important; /* Original: var(--tabstrip-min-height) */
.tab-background {
border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) var(--uc-tab-border-bottom-radius, 0px) !important;
margin-bottom: 0px !important;
}
.tab-content {
margin-top: 0px; // #892 Consider var(--tab-block-margin)
}
.tab-stack {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
transform: translateY(calc(var(--tab-group-line-thickness) * -1));
}
} }
#tabbrowser-tabs[orient="vertical"] { #tabbrowser-tabs[orient="vertical"] {
--uc-tab-border-bottom-radius: var(--tab-border-radius); --uc-tab-border-bottom-radius: var(--tab-border-radius);
} }
.tab-background {
border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) var(--uc-tab-border-bottom-radius, 0px) !important;
margin-bottom: 0px !important;
}
.tab-content {
margin-top: 0px; // #892 Consider var(--tab-block-margin)
}
.tab-stack {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line {
transform: translateY(calc(var(--tab-group-line-thickness) * -1));
}
/* Remove line at Toolbar's top */ /* Remove line at Toolbar's top */
#tabbrowser-tabs { #tabbrowser-tabs {

20
src/tab/newtab_button/_looks_like_tab.scss
View file

@ -1,4 +1,4 @@
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
@include Option("userChrome.tab.connect_to_window") { @include Option("userChrome.tab.connect_to_window") {
/* Size */ /* Size */
@include BoxAlign("stretch", true); @include BoxAlign("stretch", true);
@ -73,16 +73,16 @@
} }
@media (-moz-windows-accent-color-in-titlebar) { @media (-moz-windows-accent-color-in-titlebar) {
@include AccentColor { @include AccentColor {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
$accentTextColor 10%, $accentTextColor 10%,
transparent transparent
) !important; /* Hardcoded for compatibility */ ) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
$accentTextColor 15%, $accentTextColor 15%,
@ -98,14 +98,14 @@
"userChrome.tab.bottom_rounded_corner.chrome", "userChrome.tab.bottom_rounded_corner.chrome",
"userChrome.tab.bottom_rounded_corner.edge" "userChrome.tab.bottom_rounded_corner.edge"
) { ) {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)), linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)),
var(--uc-tab-corner-right-side-svg); var(--uc-tab-corner-right-side-svg);
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)), linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)),
var(--uc-tab-corner-right-side-svg); var(--uc-tab-corner-right-side-svg);
@ -116,7 +116,7 @@
} }
/* '+'Icon */ /* '+'Icon */
#tabs-newtab-button .toolbarbutton-icon { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon {
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)

3
src/tab/selected_tab/_multi_selected.scss
View file

@ -1,4 +1,5 @@
#TabsToolbar { #TabsToolbar,
#vertical-tabs {
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent));
&[brighttext] { &[brighttext] {

48
src/tab/unselected_tab/_dynamic_separator.scss
View file

@ -40,42 +40,42 @@
} }
@include Option("userChrome.tab.newtab_button_like_tab") { @include Option("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
@include _dynamicSeparatorShape; @include _dynamicSeparatorShape;
/* More position */ /* More position */
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); left: calc(50% - (8px + var(--toolbarbutton-inner-padding)));
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @include NotOption("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
@include _dynamicSeparatorShape; @include _dynamicSeparatorShape;
} }
.tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before {
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
} }
.tabbrowser-tab:last-of-type .tab-stack::after { #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type .tab-stack::after {
right: 0; right: 0;
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
} }
} }
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
@include Option("userChrome.tabbar.one_liner") { @include Option("userChrome.tabbar.one_liner") {
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
@include OneLinerContent { @include OneLinerContent {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
@ -83,75 +83,75 @@
} }
} }
@include Option("userChrome.tab.newtab_button_like_tab") { @include Option("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button:not(:hover, [open])::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:not(:hover, [open])::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @include NotOption("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
#tabbrowser-tabs[orient="horizontal"] tab-group { #tabbrowser-tabs:not([orient="vertical"]) tab-group {
&:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before, &:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before,
&[collapsed] + .tabbrowser-tab .tab-stack::before { &[collapsed] + .tabbrowser-tab .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
} }
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is([visuallyselected], [multiselected], :hover)
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox[overflowing] #tabbrowser-arrowscrollbox[overflowing]
tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden])))
.tab-stack::before { .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
@include Option("userChrome.tab.newtab_button_like_tab") { @include Option("userChrome.tab.newtab_button_like_tab") {
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before, /* Legacy - v103 */ ~ #tabs-newtab-button::before, /* Legacy - v103 */
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before {
opacity: 0 !important; opacity: 0 !important;
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @include NotOption("userChrome.tab.newtab_button_like_tab") {
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab:not([visuallyselected]) + .tabbrowser-tab:not([visuallyselected])
.tab-stack::before { .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { :root:not([uidensity="compact"]) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon {
margin-left: 2px; margin-left: 2px;
} }
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { :root[uidensity="compact"] #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon {
margin-left: 1px; margin-left: 1px;
} }
} }
/* Animate */ /* Animate */
@include Animate { @include Animate {
.tab-stack::before { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
@include Option("userChrome.tab.newtab_button_like_tab") { @include Option("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @include NotOption("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
@ -160,6 +160,6 @@
} }
/* Latest Tab & New tab margin */ /* Latest Tab & New tab margin */
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type {
margin-inline-end: 1px !important; margin-inline-end: 1px !important;
} }