diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b41d6b0..e52270d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -753,6 +753,27 @@ } } @media (-moz-platform: windows) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] + ) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -1072,6 +1093,18 @@ } /* Hard Coded */ @media -moz-pref("userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -4179,6 +4212,7 @@ margin-inline-start: 0 !important; } } + :root:not([uidensity="touch"]) #pinned-tabs-container, :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; @@ -4237,6 +4271,9 @@ } /* neighbouring tabs should "pinch" together */ :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, + #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) + > #pinned-tabs-container + > #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { @@ -4374,6 +4411,16 @@ ) !important; /* Prevent overflow pinned tab bottom margin */ } @media not -moz-pref("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) + #pinned-tabs-container[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-stack, + #TabsToolbar:not([multibar]) + #pinned-tabs-container[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-content, :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) @@ -4386,12 +4433,14 @@ .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container, :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } } } /* Scroll Button - Size Fix */ + :root #pinned-tabs-container, :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; @@ -6734,6 +6783,7 @@ width: 100%; } /* Pinned */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } @@ -6753,18 +6803,22 @@ } /* Padding */ @media not -moz-pref("userChrome.centered.tab") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } } @media -moz-pref("userChrome.centered.tab") { @media -moz-pref("userChrome.centered.tab.label") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } @@ -6809,6 +6863,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -6886,6 +6941,7 @@ > #tabs-newtab-button { z-index: 2 !important; } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container, #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { padding-inline-end: calc( 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 @@ -6940,9 +6996,11 @@ } } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; } + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack, #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack { /* Temporary solution for compatibility #513 */ overflow-y: clip; @@ -6977,6 +7035,26 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7010,6 +7088,30 @@ background-repeat: repeat-x, repeat-x, no-repeat !important; } @media -moz-pref("userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7051,6 +7153,17 @@ #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7734,12 +7847,14 @@ /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @media -moz-pref("userChrome.tab.dynamic_separator") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; --tab-separator-position-x: -2.5px; --tab-separator-position-y: calc(-50% + 1px); } + #pinned-tabs-container:-moz-locale-dir(rtl), #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) { --start-tab-separator-position-x: 1.5px; --end-tab-separator-position-x: -1.5px; @@ -7812,6 +7927,12 @@ transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } + #pinned-tabs-container:not([orient="vertical"]):not(:empty):not( + :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type) + ) + ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) + .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 { @@ -8284,6 +8405,10 @@ --tab-label-mask-size: 25%; } .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container, + #tabbrowser-tabs:not([closebuttons="activetab"]) + > #pinned-tabs-container + > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover + .tab-label-container, #tabbrowser-tabs:not([closebuttons="activetab"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover @@ -8293,6 +8418,12 @@ } /** Clipped tabs - Show close button at hover *********************************/ @media -moz-pref("userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + > #pinned-tabs-container + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected]), #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) @@ -14959,6 +15090,27 @@ } } @media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-platform: windows) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] + ) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -15290,6 +15442,18 @@ } } @media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-bool-pref: "userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -18541,6 +18705,7 @@ } } @media (-moz-bool-pref: "userChrome.padding.tabbar_width") { + :root:not([uidensity="touch"]) #pinned-tabs-container, :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; @@ -18603,6 +18768,9 @@ } @media (-moz-bool-pref: "userChrome.padding.tabbar_width") { :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, + #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) + > #pinned-tabs-container + > #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { @@ -18747,6 +18915,10 @@ } } @media (-moz-bool-pref: "userChrome.padding.tabbar_height") and (-moz-bool-pref: "userChrome.tab.connect_to_window") and (not (-moz-bool-pref: "userChrome.tabbar.multi_row")) { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content, :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) @@ -18759,11 +18931,13 @@ .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container, :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } } @media (-moz-bool-pref: "userChrome.padding.tabbar_height") { + :root #pinned-tabs-container, :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; @@ -21533,6 +21707,7 @@ width: 100%; } /* Pinned */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } @@ -21553,17 +21728,21 @@ /* Padding */ } @media (-moz-bool-pref: "userChrome.tabbar.as_titlebar") and (not (-moz-bool-pref: "userChrome.centered.tab")) { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } } @media (-moz-bool-pref: "userChrome.tabbar.as_titlebar") and (-moz-bool-pref: "userChrome.centered.tab") and (-moz-bool-pref: "userChrome.centered.tab.label") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } @@ -21606,6 +21785,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -21683,6 +21863,7 @@ > #tabs-newtab-button { z-index: 2 !important; } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container, #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { padding-inline-end: calc( 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 @@ -21740,9 +21921,11 @@ } } @media (-moz-bool-pref: "userChrome.tab.connect_to_window") { + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; } + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack, #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack { /* Temporary solution for compatibility #513 */ overflow-y: clip; @@ -21778,6 +21961,26 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -21812,6 +22015,30 @@ } } @media (-moz-bool-pref: "userChrome.tab.color_like_toolbar") and (-moz-bool-pref: "userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -21852,6 +22079,17 @@ #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -22666,12 +22904,14 @@ /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; --tab-separator-position-x: -2.5px; --tab-separator-position-y: calc(-50% + 1px); } + #pinned-tabs-container:-moz-locale-dir(rtl), #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) { --start-tab-separator-position-x: 1.5px; --end-tab-separator-position-x: -1.5px; @@ -22754,6 +22994,12 @@ } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { + #pinned-tabs-container:not([orient="vertical"]):not(:empty):not( + :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type) + ) + ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) + .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 { @@ -23243,6 +23489,10 @@ --tab-label-mask-size: 25%; } .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container, + #tabbrowser-tabs:not([closebuttons="activetab"]) + > #pinned-tabs-container + > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover + .tab-label-container, #tabbrowser-tabs:not([closebuttons="activetab"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover @@ -23252,6 +23502,12 @@ } /** Clipped tabs - Show close button at hover *********************************/ @media (-moz-bool-pref: "userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + > #pinned-tabs-container + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected]), #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 88096a0..45e9b2e 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -456,6 +456,7 @@ appearance: auto !important; -moz-default-appearance: -moz-window-titlebar !important; } + :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #pinned-tabs-container, :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #tabbrowser-arrowscrollbox { color: -moz-dialogtext !important; } @@ -975,6 +976,27 @@ } } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] + ) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -1294,6 +1316,18 @@ } /* Hard Coded */ @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -4502,6 +4536,7 @@ margin-inline-start: 0 !important; } } + :root:not([uidensity="touch"]) #pinned-tabs-container, :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; @@ -4560,6 +4595,9 @@ } /* neighbouring tabs should "pinch" together */ :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, + #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) + > #pinned-tabs-container + > #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { @@ -4719,6 +4757,16 @@ ) !important; /* Prevent overflow pinned tab bottom margin */ } @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) + #pinned-tabs-container[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-stack, + #TabsToolbar:not([multibar]) + #pinned-tabs-container[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-content, :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) @@ -4731,12 +4779,14 @@ .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container, :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } } } /* Scroll Button - Size Fix */ + :root #pinned-tabs-container, :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; @@ -7170,6 +7220,7 @@ width: 100%; } /* Pinned */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } @@ -7189,18 +7240,22 @@ } /* Padding */ @supports not -moz-bool-pref("userChrome.centered.tab") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } } @supports -moz-bool-pref("userChrome.centered.tab") { @supports -moz-bool-pref("userChrome.centered.tab.label") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } @@ -7245,6 +7300,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -7322,6 +7378,7 @@ > #tabs-newtab-button { z-index: 2 !important; } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container, #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { padding-inline-end: calc( 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 @@ -7376,9 +7433,11 @@ } } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; } + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack, #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack { /* Temporary solution for compatibility #513 */ overflow-y: clip; @@ -7413,6 +7472,26 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7446,6 +7525,30 @@ background-repeat: repeat-x, repeat-x, no-repeat !important; } @supports -moz-bool-pref("userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7487,6 +7590,17 @@ #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -8176,12 +8290,14 @@ /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @supports -moz-bool-pref("userChrome.tab.dynamic_separator") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; --tab-separator-position-x: -2.5px; --tab-separator-position-y: calc(-50% + 1px); } + #pinned-tabs-container:-moz-locale-dir(rtl), #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) { --start-tab-separator-position-x: 1.5px; --end-tab-separator-position-x: -1.5px; @@ -8254,6 +8370,12 @@ transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } + #pinned-tabs-container:not([orient="vertical"]):not(:empty):not( + :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type) + ) + ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) + .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 { @@ -8742,6 +8864,10 @@ --tab-label-mask-size: 25%; } .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container, + #tabbrowser-tabs:not([closebuttons="activetab"]) + > #pinned-tabs-container + > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover + .tab-label-container, #tabbrowser-tabs:not([closebuttons="activetab"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover @@ -8751,6 +8877,12 @@ } /** Clipped tabs - Show close button at hover *********************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + > #pinned-tabs-container + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected]), #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index 1f1fd62..089d82a 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -248,6 +248,7 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5); -moz-default-appearance:-moz-window-titlebar !important;; } + :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #pinned-tabs-container, :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #tabbrowser-arrowscrollbox { color: -moz-dialogtext !important; } diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss index 1ebf47b..adafc8b 100644 --- a/src/padding/_tabbar_height.scss +++ b/src/padding/_tabbar_height.scss @@ -62,12 +62,17 @@ } @include NotOption("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content, :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container, :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } @@ -75,6 +80,7 @@ } /* Scroll Button - Size Fix */ +:root #pinned-tabs-container, :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 725fb4b..af24fad 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -60,6 +60,7 @@ } } +:root:not([uidensity="touch"]) #pinned-tabs-container, :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; @@ -107,6 +108,8 @@ /* neighbouring tabs should "pinch" together */ :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, +#tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) + > #pinned-tabs-container > #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { min-width: 3px; // With Panorama Tab Groups #643 #846 diff --git a/src/tab/_connect_to_window.scss b/src/tab/_connect_to_window.scss index 8704bec..e7bddcd 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -44,6 +44,7 @@ } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ +#tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; diff --git a/src/tab/clipped_tab/_letters_cleary.scss b/src/tab/clipped_tab/_letters_cleary.scss index 2151ded..d5c5bd9 100644 --- a/src/tab/clipped_tab/_letters_cleary.scss +++ b/src/tab/clipped_tab/_letters_cleary.scss @@ -30,6 +30,7 @@ } .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container, +#tabbrowser-tabs:not([closebuttons=activetab]) > #pinned-tabs-container > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container, #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container { --tab-label-mask-size: 0.9em; /* Original: 1em */ } diff --git a/src/tab/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss index 8629f5e..34bda20 100644 --- a/src/tab/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tab/clipped_tab/_show_close_button_at_hover.scss @@ -19,6 +19,11 @@ } #tabbrowser-tabs[closebuttons="activetab"] { + > #pinned-tabs-container + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected]), > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack diff --git a/src/tab/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss index 6e9f10d..75ede0c 100644 --- a/src/tab/selected_tab/_color_like_toolbar.scss +++ b/src/tab/selected_tab/_color_like_toolbar.scss @@ -7,6 +7,26 @@ background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } +#pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], +#tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], +#pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack diff --git a/src/tab/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss index 43402b8..8375d4d 100644 --- a/src/tab/selected_tab/_multi_selected.scss +++ b/src/tab/selected_tab/_multi_selected.scss @@ -7,6 +7,17 @@ } } +#tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), +#tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index c3acfc7..1b9b392 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -23,6 +23,7 @@ //------------------------------------------------------------------------------ +#pinned-tabs-container, #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; @@ -69,6 +70,7 @@ } } +#pinned-tabs-container:not([orient="vertical"]):not(:empty):not(:has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type)) ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) .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); } diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss index 01aa0fc..813a38a 100644 --- a/src/tabbar/_as_titlebar.scss +++ b/src/tabbar/_as_titlebar.scss @@ -48,6 +48,7 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), } /* Pinned */ +#tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } @@ -70,11 +71,12 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), /* Padding */ @include _asTitlebar_preSpacer { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; - } - :root[sizemode="normal"] #tabbrowser-arrowscrollbox { - margin-inline: 6px !important; + :root[sizemode="normal"] & { + margin-inline: 6px !important; + } } } diff --git a/src/tabbar/_multi_row.scss b/src/tabbar/_multi_row.scss index d136f51..d7864a3 100644 --- a/src/tabbar/_multi_row.scss +++ b/src/tabbar/_multi_row.scss @@ -40,6 +40,7 @@ See the above repository for updates as well as full license text. */ } .scrollbox-clip[orient="horizontal"], +#pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; diff --git a/src/tabbar/_unscroll.scss b/src/tabbar/_unscroll.scss index f343b0f..24018e1 100644 --- a/src/tabbar/_unscroll.scss +++ b/src/tabbar/_unscroll.scss @@ -46,6 +46,7 @@ spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { } } + #pinned-tabs-container, #tabbrowser-arrowscrollbox { padding-inline-end: calc(16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2) !important; } diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss index de5030c..8f34b91 100644 --- a/src/theme/system_default_theme/_mac.scss +++ b/src/theme/system_default_theme/_mac.scss @@ -241,6 +241,18 @@ /* Hard Coded */ @include Option("userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss index f63138a..0b5f1b4 100644 --- a/src/theme/system_default_theme/_win10.scss +++ b/src/theme/system_default_theme/_win10.scss @@ -342,6 +342,24 @@ } } + :root#{$not_lwtheme} + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark] /* Legacy */ + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), :root#{$not_lwtheme} #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox