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