diff --git a/CREDITS b/CREDITS index fd2bc4a..d7b8fbf 100644 --- a/CREDITS +++ b/CREDITS @@ -38,6 +38,9 @@ N: Alex Besogonov E: Alex.Besogonov@gmail.com W: https://github.com/Cyberax +N: aslam karachiwala +W: https://github.com/akwala + N: AuRiMaS666 W: https://github.com/AuRiMaS666 @@ -171,6 +174,9 @@ N: menndouyukkuri E: menndoukusagari@gmail.com W: https://github.com/menndouyukkuri +N: mid-kid +W: https://github.com/mid-kid + N: Mizuki W: https://github.com/MagicalDrizzle diff --git a/README.org b/README.org index b254a17..6a6b91c 100644 --- a/README.org +++ b/README.org @@ -206,6 +206,7 @@ Thanks to all sponsors & contributors to this project for providing help and dev [[https://github.com/Ygg01][@@html:@@]] [[https://github.com/engelju][@@html:@@]] [[https://github.com/xrstf][@@html:@@]] +[[https://github.com/akwala][@@html:@@]] - A donation was received on [[https://ko-fi.com/black7375][Ko-Fi]] - [[https://ko-fi.com/home/coffeeshop?txid=97e5fa0d-c73e-4308-a2fd-6b44b08cd828][Safira]] diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b8e776b..b41fdc3 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; @@ -4223,6 +4257,9 @@ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ } + #tabbrowser-tabs[orient="vertical"][expanded] .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { + max-width: none !important; + } #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { @@ -4234,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 { @@ -4371,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]) @@ -4383,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; @@ -4483,11 +4535,13 @@ } @media -moz-pref("userChrome.padding.urlView_expanding") or -moz-pref("userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { - top: calc((var(--urlbar-toolbar-height, var(--urlbar-container-height)) - var(--urlbar-height)) / 2) !important; - left: 0 !important; - width: 100% !important; + top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; + width: var(--urlbar-width) !important; + position: relative !important; + margin: 0 !important; } - #urlbar[breakout][breakout-extend] > #urlbar-input-container { + #urlbar[breakout][breakout-extend] > #urlbar-input-container, + #urlbar[breakout][breakout-extend] > .urlbar-input-container { height: var(--urlbar-height) !important; padding-block: 0 !important; padding-inline: var(--urlbar-container-padding, 0px) !important; @@ -6729,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; } @@ -6748,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; } @@ -6804,6 +6863,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -6881,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 @@ -6898,6 +6959,16 @@ /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @media -moz-pref("userChrome.tab.connect_to_window") { + #TabsToolbar #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height); + } + #TabsToolbar #tabbrowser-tabs:not([orient="vertical"])[movingtab] { + padding-bottom: unset !important; + margin-bottom: unset !important; + } + #TabsToolbar[multibar] #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height_mlt); + } #tabbrowser-tabs:not([orient="vertical"]) { min-height: unset !important; /* Original: var(--tabstrip-min-height) */ } @@ -6929,9 +7000,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; @@ -6966,6 +7039,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 @@ -6999,6 +7092,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 @@ -7040,6 +7157,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 @@ -7723,12 +7851,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; @@ -7801,6 +7931,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 { @@ -8273,6 +8409,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 @@ -8282,6 +8422,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]) @@ -11997,6 +12143,28 @@ #sidebarMenu-popup > *:is(menuitem)[data-l10n-id="sidebar-menu-close"] { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } + /*= sidebar-context-menu =====================================================*/ + #sidebar-context-menu-manage-extension { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } + #sidebar-context-menu-remove-extension { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + #sidebar-context-menu-report-extension { + --menuitem-image: url("../icons/send.svg"); + } + #sidebar-context-menu-unpin-extension { + --menuitem-image: url("../icons/unpin-tab.svg"); + } + #sidebar-context-menu-hide-sidebar { + --menuitem-image: url("../icons/eye-hide.svg"); + } + #sidebar-context-menu-customize-sidebar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); + } + #sidebar-context-menu-enable-vertical-tabs { + --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg"); + } /*= chrome://browser/content/syncedtabs/sidebar.xhtml ========================*/ .item.client[clientType="phone"] > .item-title-container > .item-icon-container { background-image: url("../icons/device-phone.svg") !important; @@ -12059,7 +12227,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -12073,7 +12242,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -12147,7 +12317,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -12161,7 +12332,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -12255,7 +12427,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -12269,7 +12442,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -12326,7 +12500,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -12340,7 +12515,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -12434,7 +12610,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item), menupopup:is( @@ -12448,7 +12625,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; @@ -12763,6 +12941,12 @@ #toolbar-context-undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } + #toolbar-context-customize-sidebar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); + } + #toolbar-context-toggle-vertical-tabs { + --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg"); + } #toggle_toolbar-menubar { /* checkbox */ --menuitem-image: url("../icons/calendar-agenda.svg"); @@ -14910,6 +15094,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 @@ -15241,6 +15446,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 @@ -18492,6 +18709,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; @@ -18539,6 +18757,9 @@ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ } + #tabbrowser-tabs[orient="vertical"][expanded] .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { + max-width: none !important; + } #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { @@ -18551,6 +18772,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 { @@ -18695,6 +18919,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]) @@ -18707,11 +18935,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; @@ -18808,11 +19038,13 @@ } @media (-moz-bool-pref: "userChrome.padding.urlView_expanding"), (-moz-bool-pref: "userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { - top: calc((var(--urlbar-toolbar-height, var(--urlbar-container-height)) - var(--urlbar-height)) / 2) !important; - left: 0 !important; - width: 100% !important; + top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; + width: var(--urlbar-width) !important; + position: relative !important; + margin: 0 !important; } - #urlbar[breakout][breakout-extend] > #urlbar-input-container { + #urlbar[breakout][breakout-extend] > #urlbar-input-container, + #urlbar[breakout][breakout-extend] > .urlbar-input-container { height: var(--urlbar-height) !important; padding-block: 0 !important; padding-inline: var(--urlbar-container-padding, 0px) !important; @@ -21479,6 +21711,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; } @@ -21499,17 +21732,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; } @@ -21552,6 +21789,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -21629,6 +21867,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 @@ -21646,6 +21885,16 @@ /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @media (-moz-bool-pref: "userChrome.tab.connect_to_window") { + #TabsToolbar #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height); + } + #TabsToolbar #tabbrowser-tabs:not([orient="vertical"])[movingtab] { + padding-bottom: unset !important; + margin-bottom: unset !important; + } + #TabsToolbar[multibar] #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height_mlt); + } #tabbrowser-tabs:not([orient="vertical"]) { min-height: unset !important; /* Original: var(--tabstrip-min-height) */ } @@ -21680,9 +21929,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; @@ -21718,6 +21969,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 @@ -21752,6 +22023,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 @@ -21792,6 +22087,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 @@ -22606,12 +22912,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; @@ -22694,6 +23002,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 { @@ -23183,6 +23497,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 @@ -23192,6 +23510,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]) @@ -26637,6 +26961,7 @@ /*= protections-popup ========================================================*/ /*= identity-popup ===========================================================*/ /*= sidebarMenu-popup ========================================================*/ + /*= sidebar-context-menu =====================================================*/ /*= chrome://browser/content/syncedtabs/sidebar.xhtml ========================*/ /*= unified-extensions-view ===================================================*/ /*= Compatibility ============================================================*/ @@ -27521,6 +27846,41 @@ --menuitem-image: url("chrome://global/skin/icons/close.svg"); } } +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #sidebar-context-menu-manage-extension { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #sidebar-context-menu-remove-extension { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #sidebar-context-menu-report-extension { + --menuitem-image: url("../icons/send.svg"); + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #sidebar-context-menu-unpin-extension { + --menuitem-image: url("../icons/unpin-tab.svg"); + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #sidebar-context-menu-hide-sidebar { + --menuitem-image: url("../icons/eye-hide.svg"); + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #sidebar-context-menu-customize-sidebar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #sidebar-context-menu-enable-vertical-tabs { + --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg"); + } +} @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { .item.client[clientType="phone"] > .item-title-container > .item-icon-container { background-image: url("../icons/device-phone.svg") !important; @@ -27593,7 +27953,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -27607,7 +27968,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -27700,7 +28062,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -27714,7 +28077,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -27807,7 +28171,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -27821,7 +28186,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -27874,7 +28240,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -27888,7 +28255,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -27976,7 +28344,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item), menupopup:is( @@ -27990,7 +28359,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; @@ -28362,6 +28732,16 @@ --menuitem-image: url("../icons/undo.svg"); } } +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.context_menu") { + #toolbar-context-customize-sidebar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.context_menu") { + #toolbar-context-toggle-vertical-tabs { + --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg"); + } +} @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.context_menu") { #toggle_toolbar-menubar { /* checkbox */ diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index c8e0940..db45d93 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; @@ -4546,6 +4581,9 @@ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ } + #tabbrowser-tabs[orient="vertical"][expanded] .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { + max-width: none !important; + } #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { @@ -4557,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 { @@ -4716,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]) @@ -4728,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; @@ -4828,11 +4881,13 @@ } @supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { - top: calc((var(--urlbar-toolbar-height, var(--urlbar-container-height)) - var(--urlbar-height)) / 2) !important; - left: 0 !important; - width: 100% !important; + top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; + width: var(--urlbar-width) !important; + position: relative !important; + margin: 0 !important; } - #urlbar[breakout][breakout-extend] > #urlbar-input-container { + #urlbar[breakout][breakout-extend] > #urlbar-input-container, + #urlbar[breakout][breakout-extend] > .urlbar-input-container { height: var(--urlbar-height) !important; padding-block: 0 !important; padding-inline: var(--urlbar-container-padding, 0px) !important; @@ -7165,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; } @@ -7184,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; } @@ -7240,6 +7300,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -7317,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 @@ -7334,6 +7396,16 @@ /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + #TabsToolbar #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height); + } + #TabsToolbar #tabbrowser-tabs:not([orient="vertical"])[movingtab] { + padding-bottom: unset !important; + margin-bottom: unset !important; + } + #TabsToolbar[multibar] #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height_mlt); + } #tabbrowser-tabs:not([orient="vertical"]) { min-height: unset !important; /* Original: var(--tabstrip-min-height) */ } @@ -7365,9 +7437,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; @@ -7402,6 +7476,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 @@ -7435,6 +7529,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 @@ -7476,6 +7594,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 @@ -8165,12 +8294,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; @@ -8243,6 +8374,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 { @@ -8731,6 +8868,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 @@ -8740,6 +8881,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]) @@ -12479,6 +12626,28 @@ #sidebarMenu-popup > *:is(menuitem)[data-l10n-id="sidebar-menu-close"] { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } + /*= sidebar-context-menu =====================================================*/ + #sidebar-context-menu-manage-extension { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } + #sidebar-context-menu-remove-extension { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + #sidebar-context-menu-report-extension { + --menuitem-image: url("../icons/send.svg"); + } + #sidebar-context-menu-unpin-extension { + --menuitem-image: url("../icons/unpin-tab.svg"); + } + #sidebar-context-menu-hide-sidebar { + --menuitem-image: url("../icons/eye-hide.svg"); + } + #sidebar-context-menu-customize-sidebar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); + } + #sidebar-context-menu-enable-vertical-tabs { + --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg"); + } /*= chrome://browser/content/syncedtabs/sidebar.xhtml ========================*/ .item.client[clientType="phone"] > .item-title-container > .item-icon-container { background-image: url("../icons/device-phone.svg") !important; @@ -12541,7 +12710,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -12555,7 +12725,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -12629,7 +12800,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -12643,7 +12815,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -12743,7 +12916,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -12757,7 +12931,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -12821,7 +12996,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -12835,7 +13011,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -13009,7 +13186,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is( @@ -13023,7 +13201,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) @@ -13100,7 +13279,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item), menupopup:is( @@ -13114,7 +13294,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menu:not(.menu-iconic) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; @@ -13441,6 +13622,12 @@ #toolbar-context-undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } + #toolbar-context-customize-sidebar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); + } + #toolbar-context-toggle-vertical-tabs { + --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg"); + } #toggle_toolbar-menubar { /* checkbox */ --menuitem-image: url("../icons/calendar-agenda.svg"); 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/icons/_panel.scss b/src/icons/_panel.scss index 8c77c78..37056e6 100644 --- a/src/icons/_panel.scss +++ b/src/icons/_panel.scss @@ -609,6 +609,30 @@ panelMenuBookmarkThisPage[starred] { ); } +/*= sidebar-context-menu =====================================================*/ +#sidebar-context-menu-manage-extension { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} +#sidebar-context-menu-remove-extension { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +#sidebar-context-menu-report-extension { + --menuitem-image: url("../icons/send.svg"); +} + +#sidebar-context-menu-unpin-extension { + --menuitem-image: url("../icons/unpin-tab.svg"); +} +#sidebar-context-menu-hide-sidebar { + --menuitem-image: url("../icons/eye-hide.svg"); +} +#sidebar-context-menu-customize-sidebar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); +} +#sidebar-context-menu-enable-vertical-tabs { + --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg"); +} + /*= chrome://browser/content/syncedtabs/sidebar.xhtml ========================*/ .item.client[clientType=phone] > .item-title-container > .item-icon-container { background-image: url("../icons/device-phone.svg") !important; diff --git a/src/icons/context_menu/_tab_toolbar.scss b/src/icons/context_menu/_tab_toolbar.scss index c8204ea..276bb83 100644 --- a/src/icons/context_menu/_tab_toolbar.scss +++ b/src/icons/context_menu/_tab_toolbar.scss @@ -218,6 +218,13 @@ --menuitem-image: url("../icons/undo.svg"); } +#toolbar-context-customize-sidebar { + --menuitem-image: url("chrome://browser/skin/customize.svg"); +} +#toolbar-context-toggle-vertical-tabs { + --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg"); +} + #toggle_toolbar-menubar { /* checkbox */ --menuitem-image: url("../icons/calendar-agenda.svg"); diff --git a/src/icons/layout/_menu_common.scss b/src/icons/layout/_menu_common.scss index 71c2036..68e298e 100644 --- a/src/icons/layout/_menu_common.scss +++ b/src/icons/layout/_menu_common.scss @@ -12,7 +12,7 @@ $_checkMenu: ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])"; $_nestedPopup: "> menupopup:not(.in-menulist) >"; $_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) #{$_nestedPopup}"; $_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) #{$_nestedPopup}"; -$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, #usercssloader-menupopup)"; +$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, #usercssloader-menupopup, #sidebar-context-menu)"; $_nestedPopupIconMenus: selector.nest( $_nestedPopupIcon, diff --git a/src/padding/_index.scss b/src/padding/_index.scss index 5f13bfa..32328f1 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -51,12 +51,14 @@ } @include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { - top: calc((var(--urlbar-toolbar-height, var(--urlbar-container-height)) - var(--urlbar-height)) / 2) !important; - left: 0 !important; - width: 100% !important; + top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; + width: var(--urlbar-width) !important; + position: relative !important; + margin: 0 !important; } - #urlbar[breakout][breakout-extend] > #urlbar-input-container { + #urlbar[breakout][breakout-extend] > #urlbar-input-container, + #urlbar[breakout][breakout-extend] > .urlbar-input-container { height: var(--urlbar-height) !important; padding-block: 0 !important; padding-inline: var(--urlbar-container-padding, 0px) !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 3895f75..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; @@ -93,6 +94,9 @@ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ + #tabbrowser-tabs[orient="vertical"][expanded] & { + max-width: none !important; + } #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > & { min-width: 0 !important; max-width: 0 !important; @@ -104,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 7c593f1..671912f 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -1,3 +1,17 @@ +#TabsToolbar { + #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height); + } + #tabbrowser-tabs:not([orient="vertical"])[movingtab] { + padding-bottom: unset !important; + margin-bottom: unset !important; + } + + &[multibar] #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height_mlt); + } +} + #tabbrowser-tabs:not([orient="vertical"]) { min-height: unset !important; /* Original: var(--tabstrip-min-height) */ @@ -34,6 +48,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