From 5e49ab0a9a8cb18504c5ec7305ec64f1430a3b4b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 12 Jul 2025 00:00:00 +0900 Subject: [PATCH 01/26] Fix: Global Menubar - padding #1099 --- css/leptonChrome.css | 6 ++++++ css/leptonChromeESR.css | 3 +++ css/leptonContent.css | 6 ++++++ css/leptonContentESR.css | 3 +++ src/icons/layout/_menu_common.scss | 3 +++ 5 files changed, 21 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e2c5ca8..b8e776b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -12390,6 +12390,9 @@ .menu-icon { display: unset !important; } + #main-menubar > menu > .menu-icon { + display: none !important; + } } /* Padding - Mac */ @media -moz-pref("layout.css.osx-font-smoothing.enabled") { @@ -27930,6 +27933,9 @@ .menu-icon { display: unset !important; } + #main-menubar > menu > .menu-icon { + display: none !important; + } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") { :root { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 8f2647f..c8e0940 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -13056,6 +13056,9 @@ .menu-icon { display: unset !important; } + #main-menubar > menu > .menu-icon { + display: none !important; + } } /* Padding - Mac */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { diff --git a/css/leptonContent.css b/css/leptonContent.css index ccd0567..d8e968d 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -3439,6 +3439,9 @@ .menu-icon { display: unset !important; } + #main-menubar > menu > .menu-icon { + display: none !important; + } /* Contextmenu Checkbox Unset */ menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] { margin-inline: 0 !important; @@ -7293,6 +7296,9 @@ .menu-icon { display: unset !important; } + #main-menubar > menu > .menu-icon { + display: none !important; + } /* Contextmenu Checkbox Unset */ menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] { margin-inline: 0 !important; diff --git a/css/leptonContentESR.css b/css/leptonContentESR.css index 74fdcaf..fd77d24 100644 --- a/css/leptonContentESR.css +++ b/css/leptonContentESR.css @@ -3578,6 +3578,9 @@ .menu-icon { display: unset !important; } + #main-menubar > menu > .menu-icon { + display: none !important; + } /* Contextmenu Checkbox Unset */ menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] { margin-inline: 0 !important; diff --git a/src/icons/layout/_menu_common.scss b/src/icons/layout/_menu_common.scss index 70a9f5d..71c2036 100644 --- a/src/icons/layout/_menu_common.scss +++ b/src/icons/layout/_menu_common.scss @@ -195,6 +195,9 @@ $_initialMenus: $_initialMenus + "," + .menu-icon { display: unset !important; } + #main-menubar > menu > .menu-icon { + display: none !important; + } } @mixin _layout_init_linux() { padding-inline-start: 3px; From 2360479dc14b930c66a9bf5ee459194b72d1aa1b Mon Sep 17 00:00:00 2001 From: Esteve Varela Colominas Date: Mon, 30 Jun 2025 09:02:55 +0200 Subject: [PATCH 02/26] Fix Megabar CSS (#1038) --- css/leptonChrome.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b8e776b..ebd629c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4483,9 +4483,7 @@ } @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; + width: var(--urlbar-width) !important; } #urlbar[breakout][breakout-extend] > #urlbar-input-container { height: var(--urlbar-height) !important; @@ -18808,9 +18806,7 @@ } @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; + width: var(--urlbar-width) !important; } #urlbar[breakout][breakout-extend] > #urlbar-input-container { height: var(--urlbar-height) !important; From 5a5dedef16ff147316044a2b3052b3ab29a1c251 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 30 Jul 2025 09:33:33 +0900 Subject: [PATCH 03/26] Fix: URLBar - Remove Megabar CSS #1038 --- css/leptonChrome.css | 12 ++++++++++-- css/leptonChromeESR.css | 10 ++++++---- src/padding/_index.scss | 10 ++++++---- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ebd629c..56c2db4 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4483,9 +4483,13 @@ } @media -moz-pref("userChrome.padding.urlView_expanding") or -moz-pref("userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { + 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; @@ -18806,9 +18810,13 @@ } @media (-moz-bool-pref: "userChrome.padding.urlView_expanding"), (-moz-bool-pref: "userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { + 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/css/leptonChromeESR.css b/css/leptonChromeESR.css index c8e0940..8bd726e 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -4828,11 +4828,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; 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; From 2576f0b031c0e7b9e5ca9a78303e1aeeff5c78b8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 2 Aug 2025 00:00:00 +0900 Subject: [PATCH 04/26] Fix: Tabar - max-height #1111 --- css/leptonChrome.css | 12 ++++++++++++ css/leptonChromeESR.css | 6 ++++++ src/tab/_connect_to_window.scss | 10 ++++++++++ 3 files changed, 28 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 56c2db4..15b745c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6900,6 +6900,12 @@ /** 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[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) */ } @@ -21650,6 +21656,12 @@ /** 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[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) */ } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 8bd726e..3ae87ee 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -7336,6 +7336,12 @@ /** 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[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) */ } diff --git a/src/tab/_connect_to_window.scss b/src/tab/_connect_to_window.scss index 7c593f1..8704bec 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -1,3 +1,13 @@ +#TabsToolbar { + #tabbrowser-tabs:not([orient="vertical"]) { + max-height: var(--tab-min-height); + } + + &[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) */ From 83431e9e7623d778f44ed303427342653204916a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 3 Aug 2025 21:29:20 +0900 Subject: [PATCH 05/26] Fix: Tabbar - Vertical tab max-width adjustment #1107 --- css/leptonChrome.css | 6 ++++++ css/leptonChromeESR.css | 3 +++ src/padding/_tabbar_width.scss | 3 +++ 3 files changed, 12 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 15b745c..f7da317 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4223,6 +4223,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"]) { @@ -18547,6 +18550,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"]) { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 3ae87ee..e194361 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -4546,6 +4546,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"]) { diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 3895f75..725fb4b 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -93,6 +93,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; From 37ba412b4cfe6705fffc36f745f741077a20cdc6 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 5 Aug 2025 09:10:56 +0900 Subject: [PATCH 06/26] Fix: Icons - Tab toolbar --- css/leptonChrome.css | 16 ++++++++++++++++ css/leptonChromeESR.css | 6 ++++++ src/icons/context_menu/_tab_toolbar.scss | 7 +++++++ 3 files changed, 29 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f7da317..35e3b49 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -12774,6 +12774,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"); @@ -28384,6 +28390,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 e194361..e733ff3 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -13452,6 +13452,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/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"); From 7e215312695a0983228e25c00d605ac76686f7d2 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 6 Aug 2025 09:06:44 +0900 Subject: [PATCH 07/26] Fix: Sidebar - Menu icons --- css/leptonChrome.css | 118 ++++++++++++++++++++++++----- css/leptonChromeESR.css | 58 +++++++++++--- src/icons/_panel.scss | 24 ++++++ src/icons/layout/_menu_common.scss | 2 +- 4 files changed, 169 insertions(+), 33 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 35e3b49..b41d6b0 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -12008,6 +12008,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; @@ -12070,7 +12092,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( @@ -12084,7 +12107,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) @@ -12158,7 +12182,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( @@ -12172,7 +12197,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) @@ -12266,7 +12292,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( @@ -12280,7 +12307,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) @@ -12337,7 +12365,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( @@ -12351,7 +12380,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) @@ -12445,7 +12475,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item), menupopup:is( @@ -12459,7 +12490,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; @@ -26665,6 +26697,7 @@ /*= protections-popup ========================================================*/ /*= identity-popup ===========================================================*/ /*= sidebarMenu-popup ========================================================*/ + /*= sidebar-context-menu =====================================================*/ /*= chrome://browser/content/syncedtabs/sidebar.xhtml ========================*/ /*= unified-extensions-view ===================================================*/ /*= Compatibility ============================================================*/ @@ -27549,6 +27582,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; @@ -27621,7 +27689,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( @@ -27635,7 +27704,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) @@ -27728,7 +27798,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( @@ -27742,7 +27813,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) @@ -27835,7 +27907,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( @@ -27849,7 +27922,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) @@ -27902,7 +27976,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( @@ -27916,7 +27991,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) @@ -28004,7 +28080,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item), menupopup:is( @@ -28018,7 +28095,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; diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index e733ff3..88096a0 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -12490,6 +12490,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; @@ -12552,7 +12574,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( @@ -12566,7 +12589,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) @@ -12640,7 +12664,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( @@ -12654,7 +12679,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) @@ -12754,7 +12780,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( @@ -12768,7 +12795,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) @@ -12832,7 +12860,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( @@ -12846,7 +12875,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) @@ -13020,7 +13050,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( @@ -13034,7 +13065,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) @@ -13111,7 +13143,8 @@ #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, - #usercssloader-menupopup + #usercssloader-menupopup, + #sidebar-context-menu ) menuitem:not(.menuitem-iconic, .bookmark-item), menupopup:is( @@ -13125,7 +13158,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; 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/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, From 3b2e609eabfed9e4ba99140a9062580ca1a9e6f1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 9 Aug 2025 23:41:33 +0900 Subject: [PATCH 08/26] Fix: Pinned Tab - Color & separator #1111 --- css/leptonChrome.css | 256 ++++++++++++++++++ css/leptonChromeESR.css | 132 +++++++++ src/compatibility/_os.scss | 1 + src/padding/_tabbar_height.scss | 6 + src/padding/_tabbar_width.scss | 3 + src/tab/_connect_to_window.scss | 1 + src/tab/clipped_tab/_letters_cleary.scss | 1 + .../_show_close_button_at_hover.scss | 5 + src/tab/selected_tab/_color_like_toolbar.scss | 20 ++ src/tab/selected_tab/_multi_selected.scss | 11 + .../unselected_tab/_dynamic_separator.scss | 2 + src/tabbar/_as_titlebar.scss | 8 +- src/tabbar/_multi_row.scss | 1 + src/tabbar/_unscroll.scss | 1 + src/theme/system_default_theme/_mac.scss | 12 + src/theme/system_default_theme/_win10.scss | 18 ++ 16 files changed, 475 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b41d6b0..e52270d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -753,6 +753,27 @@ } } @media (-moz-platform: windows) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] + ) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -1072,6 +1093,18 @@ } /* Hard Coded */ @media -moz-pref("userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -4179,6 +4212,7 @@ margin-inline-start: 0 !important; } } + :root:not([uidensity="touch"]) #pinned-tabs-container, :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; @@ -4237,6 +4271,9 @@ } /* neighbouring tabs should "pinch" together */ :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, + #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) + > #pinned-tabs-container + > #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { @@ -4374,6 +4411,16 @@ ) !important; /* Prevent overflow pinned tab bottom margin */ } @media not -moz-pref("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) + #pinned-tabs-container[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-stack, + #TabsToolbar:not([multibar]) + #pinned-tabs-container[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-content, :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) @@ -4386,12 +4433,14 @@ .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container, :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } } } /* Scroll Button - Size Fix */ + :root #pinned-tabs-container, :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; @@ -6734,6 +6783,7 @@ width: 100%; } /* Pinned */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } @@ -6753,18 +6803,22 @@ } /* Padding */ @media not -moz-pref("userChrome.centered.tab") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } } @media -moz-pref("userChrome.centered.tab") { @media -moz-pref("userChrome.centered.tab.label") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } @@ -6809,6 +6863,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -6886,6 +6941,7 @@ > #tabs-newtab-button { z-index: 2 !important; } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container, #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { padding-inline-end: calc( 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 @@ -6940,9 +6996,11 @@ } } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; } + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack, #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack { /* Temporary solution for compatibility #513 */ overflow-y: clip; @@ -6977,6 +7035,26 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7010,6 +7088,30 @@ background-repeat: repeat-x, repeat-x, no-repeat !important; } @media -moz-pref("userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7051,6 +7153,17 @@ #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7734,12 +7847,14 @@ /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @media -moz-pref("userChrome.tab.dynamic_separator") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; --tab-separator-position-x: -2.5px; --tab-separator-position-y: calc(-50% + 1px); } + #pinned-tabs-container:-moz-locale-dir(rtl), #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) { --start-tab-separator-position-x: 1.5px; --end-tab-separator-position-x: -1.5px; @@ -7812,6 +7927,12 @@ transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } + #pinned-tabs-container:not([orient="vertical"]):not(:empty):not( + :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type) + ) + ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type + .tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { @@ -8284,6 +8405,10 @@ --tab-label-mask-size: 25%; } .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container, + #tabbrowser-tabs:not([closebuttons="activetab"]) + > #pinned-tabs-container + > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover + .tab-label-container, #tabbrowser-tabs:not([closebuttons="activetab"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover @@ -8293,6 +8418,12 @@ } /** Clipped tabs - Show close button at hover *********************************/ @media -moz-pref("userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + > #pinned-tabs-container + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected]), #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) @@ -14959,6 +15090,27 @@ } } @media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-platform: windows) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] + ) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -15290,6 +15442,18 @@ } } @media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-bool-pref: "userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -18541,6 +18705,7 @@ } } @media (-moz-bool-pref: "userChrome.padding.tabbar_width") { + :root:not([uidensity="touch"]) #pinned-tabs-container, :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; @@ -18603,6 +18768,9 @@ } @media (-moz-bool-pref: "userChrome.padding.tabbar_width") { :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, + #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) + > #pinned-tabs-container + > #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { @@ -18747,6 +18915,10 @@ } } @media (-moz-bool-pref: "userChrome.padding.tabbar_height") and (-moz-bool-pref: "userChrome.tab.connect_to_window") and (not (-moz-bool-pref: "userChrome.tabbar.multi_row")) { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content, :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) @@ -18759,11 +18931,13 @@ .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container, :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } } @media (-moz-bool-pref: "userChrome.padding.tabbar_height") { + :root #pinned-tabs-container, :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; @@ -21533,6 +21707,7 @@ width: 100%; } /* Pinned */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } @@ -21553,17 +21728,21 @@ /* Padding */ } @media (-moz-bool-pref: "userChrome.tabbar.as_titlebar") and (not (-moz-bool-pref: "userChrome.centered.tab")) { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } } @media (-moz-bool-pref: "userChrome.tabbar.as_titlebar") and (-moz-bool-pref: "userChrome.centered.tab") and (-moz-bool-pref: "userChrome.centered.tab.label") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } @@ -21606,6 +21785,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -21683,6 +21863,7 @@ > #tabs-newtab-button { z-index: 2 !important; } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container, #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { padding-inline-end: calc( 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 @@ -21740,9 +21921,11 @@ } } @media (-moz-bool-pref: "userChrome.tab.connect_to_window") { + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; } + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack, #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack { /* Temporary solution for compatibility #513 */ overflow-y: clip; @@ -21778,6 +21961,26 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -21812,6 +22015,30 @@ } } @media (-moz-bool-pref: "userChrome.tab.color_like_toolbar") and (-moz-bool-pref: "userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -21852,6 +22079,17 @@ #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -22666,12 +22904,14 @@ /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; --tab-separator-position-x: -2.5px; --tab-separator-position-y: calc(-50% + 1px); } + #pinned-tabs-container:-moz-locale-dir(rtl), #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) { --start-tab-separator-position-x: 1.5px; --end-tab-separator-position-x: -1.5px; @@ -22754,6 +22994,12 @@ } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { + #pinned-tabs-container:not([orient="vertical"]):not(:empty):not( + :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type) + ) + ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type + .tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { @@ -23243,6 +23489,10 @@ --tab-label-mask-size: 25%; } .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container, + #tabbrowser-tabs:not([closebuttons="activetab"]) + > #pinned-tabs-container + > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover + .tab-label-container, #tabbrowser-tabs:not([closebuttons="activetab"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover @@ -23252,6 +23502,12 @@ } /** Clipped tabs - Show close button at hover *********************************/ @media (-moz-bool-pref: "userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + > #pinned-tabs-container + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected]), #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 88096a0..45e9b2e 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -456,6 +456,7 @@ appearance: auto !important; -moz-default-appearance: -moz-window-titlebar !important; } + :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #pinned-tabs-container, :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #tabbrowser-arrowscrollbox { color: -moz-dialogtext !important; } @@ -975,6 +976,27 @@ } } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] + ) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -1294,6 +1316,18 @@ } /* Hard Coded */ @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -4502,6 +4536,7 @@ margin-inline-start: 0 !important; } } + :root:not([uidensity="touch"]) #pinned-tabs-container, :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; @@ -4560,6 +4595,9 @@ } /* neighbouring tabs should "pinch" together */ :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, + #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) + > #pinned-tabs-container + > #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { @@ -4719,6 +4757,16 @@ ) !important; /* Prevent overflow pinned tab bottom margin */ } @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) + #pinned-tabs-container[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-stack, + #TabsToolbar:not([multibar]) + #pinned-tabs-container[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-content, :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) @@ -4731,12 +4779,14 @@ .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container, :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } } } /* Scroll Button - Size Fix */ + :root #pinned-tabs-container, :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; @@ -7170,6 +7220,7 @@ width: 100%; } /* Pinned */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } @@ -7189,18 +7240,22 @@ } /* Padding */ @supports not -moz-bool-pref("userChrome.centered.tab") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } } @supports -moz-bool-pref("userChrome.centered.tab") { @supports -moz-bool-pref("userChrome.centered.tab.label") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } + :root[sizemode="normal"] #pinned-tabs-container, :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } @@ -7245,6 +7300,7 @@ } } .scrollbox-clip[orient="horizontal"], + #pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; @@ -7322,6 +7378,7 @@ > #tabs-newtab-button { z-index: 2 !important; } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container, #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { padding-inline-end: calc( 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 @@ -7376,9 +7433,11 @@ } } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; } + #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack, #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack { /* Temporary solution for compatibility #513 */ overflow-y: clip; @@ -7413,6 +7472,26 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7446,6 +7525,30 @@ background-repeat: repeat-x, repeat-x, no-repeat !important; } @supports -moz-bool-pref("userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7487,6 +7590,17 @@ #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -8176,12 +8290,14 @@ /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @supports -moz-bool-pref("userChrome.tab.dynamic_separator") { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; --tab-separator-position-x: -2.5px; --tab-separator-position-y: calc(-50% + 1px); } + #pinned-tabs-container:-moz-locale-dir(rtl), #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) { --start-tab-separator-position-x: 1.5px; --end-tab-separator-position-x: -1.5px; @@ -8254,6 +8370,12 @@ transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } + #pinned-tabs-container:not([orient="vertical"]):not(:empty):not( + :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type) + ) + ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type + .tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { @@ -8742,6 +8864,10 @@ --tab-label-mask-size: 25%; } .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container, + #tabbrowser-tabs:not([closebuttons="activetab"]) + > #pinned-tabs-container + > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover + .tab-label-container, #tabbrowser-tabs:not([closebuttons="activetab"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover @@ -8751,6 +8877,12 @@ } /** Clipped tabs - Show close button at hover *********************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + > #pinned-tabs-container + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected]), #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index 1f1fd62..089d82a 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -248,6 +248,7 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5); -moz-default-appearance:-moz-window-titlebar !important;; } + :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #pinned-tabs-container, :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #tabbrowser-arrowscrollbox { color: -moz-dialogtext !important; } diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss index 1ebf47b..adafc8b 100644 --- a/src/padding/_tabbar_height.scss +++ b/src/padding/_tabbar_height.scss @@ -62,12 +62,17 @@ } @include NotOption("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, + #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content, :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container, :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } @@ -75,6 +80,7 @@ } /* Scroll Button - Size Fix */ +:root #pinned-tabs-container, :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 725fb4b..af24fad 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -60,6 +60,7 @@ } } +:root:not([uidensity="touch"]) #pinned-tabs-container, :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; @@ -107,6 +108,8 @@ /* neighbouring tabs should "pinch" together */ :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, +#tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) + > #pinned-tabs-container > #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { min-width: 3px; // With Panorama Tab Groups #643 #846 diff --git a/src/tab/_connect_to_window.scss b/src/tab/_connect_to_window.scss index 8704bec..e7bddcd 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -44,6 +44,7 @@ } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ +#tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; diff --git a/src/tab/clipped_tab/_letters_cleary.scss b/src/tab/clipped_tab/_letters_cleary.scss index 2151ded..d5c5bd9 100644 --- a/src/tab/clipped_tab/_letters_cleary.scss +++ b/src/tab/clipped_tab/_letters_cleary.scss @@ -30,6 +30,7 @@ } .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container, +#tabbrowser-tabs:not([closebuttons=activetab]) > #pinned-tabs-container > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container, #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container { --tab-label-mask-size: 0.9em; /* Original: 1em */ } diff --git a/src/tab/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss index 8629f5e..34bda20 100644 --- a/src/tab/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tab/clipped_tab/_show_close_button_at_hover.scss @@ -19,6 +19,11 @@ } #tabbrowser-tabs[closebuttons="activetab"] { + > #pinned-tabs-container + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected]), > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack diff --git a/src/tab/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss index 6e9f10d..75ede0c 100644 --- a/src/tab/selected_tab/_color_like_toolbar.scss +++ b/src/tab/selected_tab/_color_like_toolbar.scss @@ -7,6 +7,26 @@ background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } +#pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], +#tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], +#pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack diff --git a/src/tab/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss index 43402b8..8375d4d 100644 --- a/src/tab/selected_tab/_multi_selected.scss +++ b/src/tab/selected_tab/_multi_selected.scss @@ -7,6 +7,17 @@ } } +#tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), +#tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index c3acfc7..1b9b392 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -23,6 +23,7 @@ //------------------------------------------------------------------------------ +#pinned-tabs-container, #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; @@ -69,6 +70,7 @@ } } +#pinned-tabs-container:not([orient="vertical"]):not(:empty):not(:has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type)) ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { opacity: var(--tab-separator-opacity); } diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss index 01aa0fc..813a38a 100644 --- a/src/tabbar/_as_titlebar.scss +++ b/src/tabbar/_as_titlebar.scss @@ -48,6 +48,7 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), } /* Pinned */ +#tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"], #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } @@ -70,11 +71,12 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), /* Padding */ @include _asTitlebar_preSpacer { + #pinned-tabs-container, #tabbrowser-arrowscrollbox { margin-inline: 2px !important; - } - :root[sizemode="normal"] #tabbrowser-arrowscrollbox { - margin-inline: 6px !important; + :root[sizemode="normal"] & { + margin-inline: 6px !important; + } } } diff --git a/src/tabbar/_multi_row.scss b/src/tabbar/_multi_row.scss index d136f51..d7864a3 100644 --- a/src/tabbar/_multi_row.scss +++ b/src/tabbar/_multi_row.scss @@ -40,6 +40,7 @@ See the above repository for updates as well as full license text. */ } .scrollbox-clip[orient="horizontal"], +#pinned-tabs-container, #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; diff --git a/src/tabbar/_unscroll.scss b/src/tabbar/_unscroll.scss index f343b0f..24018e1 100644 --- a/src/tabbar/_unscroll.scss +++ b/src/tabbar/_unscroll.scss @@ -46,6 +46,7 @@ spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { } } + #pinned-tabs-container, #tabbrowser-arrowscrollbox { padding-inline-end: calc(16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2) !important; } diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss index de5030c..8f34b91 100644 --- a/src/theme/system_default_theme/_mac.scss +++ b/src/theme/system_default_theme/_mac.scss @@ -241,6 +241,18 @@ /* Hard Coded */ @include Option("userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss index f63138a..0b5f1b4 100644 --- a/src/theme/system_default_theme/_win10.scss +++ b/src/theme/system_default_theme/_win10.scss @@ -342,6 +342,24 @@ } } + :root#{$not_lwtheme} + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark] /* Legacy */ + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), + :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #tabbrowser-tabs:not([movingtab]) + > #pinned-tabs-container + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]), :root#{$not_lwtheme} #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox From 44d4124a576dec2ba4d94397e0053da5493e1412 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 10 Aug 2025 00:36:36 +0900 Subject: [PATCH 09/26] Fix: Tabbar - Clipping at movingtab #1126 --- css/leptonChrome.css | 8 ++++++++ css/leptonChromeESR.css | 4 ++++ src/tab/_connect_to_window.scss | 4 ++++ 3 files changed, 16 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e52270d..b41fdc3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6962,6 +6962,10 @@ #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); } @@ -21884,6 +21888,10 @@ #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); } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 45e9b2e..db45d93 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -7399,6 +7399,10 @@ #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); } diff --git a/src/tab/_connect_to_window.scss b/src/tab/_connect_to_window.scss index e7bddcd..671912f 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -2,6 +2,10 @@ #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); From b0b977e658c3fbb24d14f44f720fb6272f7760ce Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 10 Aug 2025 23:08:56 +0900 Subject: [PATCH 10/26] Docs: CREDIT --- CREDITS | 6 ++++++ README.org | 1 + 2 files changed, 7 insertions(+) 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 b54a3d4..5c6029a 100644 --- a/README.org +++ b/README.org @@ -214,6 +214,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]] From 4645a41e7edd5c5ad895549dc9a1342b492d8323 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 13 Sep 2025 00:00:00 +0900 Subject: [PATCH 11/26] Fix: Context menu spacing in toggle-able menus #1128 --- css/leptonChrome.css | 12 ++++++++++++ css/leptonChromeESR.css | 6 ++++++ src/icons/layout/_menu.scss | 5 +++++ 3 files changed, 23 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b41fdc3..555ff0d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -12469,6 +12469,9 @@ .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } + menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { + display: none !important; + } } @media (-moz-platform: windows), (-moz-gtk-csd-available) { @media -moz-pref("userChrome.theme.non_native_menu") { @@ -12543,6 +12546,9 @@ .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } + menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { + display: none !important; + } } } } @@ -28213,6 +28219,9 @@ .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } + menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { + display: none !important; + } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available), (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available) { @@ -28282,6 +28291,9 @@ .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } + menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { + display: none !important; + } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) { :root { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index db45d93..4cb28bf 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -12958,6 +12958,9 @@ .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } + menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { + display: none !important; + } } @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), @@ -13039,6 +13042,9 @@ .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } + menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { + display: none !important; + } } } } diff --git a/src/icons/layout/_menu.scss b/src/icons/layout/_menu.scss index 64e5867..1807962 100644 --- a/src/icons/layout/_menu.scss +++ b/src/icons/layout/_menu.scss @@ -108,6 +108,11 @@ $_layoutCommonMenus: ( .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } + + // FF v141 #1128 + menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { + display: none !important; + } } } From 2bcd91f8b866e88b72ded6eef1ccc3f70449237e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 12 Oct 2025 00:00:00 +0900 Subject: [PATCH 12/26] Chore: Release name change for legacy Firefox 117 #1131 --- .github/workflows/release.yml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c5bd37e..4545552 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -42,14 +42,14 @@ jobs: - mode: "STANDARD" name: "Lepton-Proton-Style" branch: "proton-style" - - mode: "ESR" - name: "ESR-Lepton" + - mode: "LegacyV117" + name: "LegacyV117-Lepton" branch: "master" - - mode: "ESR" - name: "ESR-Lepton-Photon-Style" + - mode: "LegacyV117" + name: "LegacyV117-Lepton-Photon-Style" branch: "photon-style" - - mode: "ESR" - name: "ESR-Lepton-Proton-Style" + - mode: "LegacyV117" + name: "LegacyV117-Lepton-Proton-Style" branch: "proton-style" steps: - uses: actions/checkout@v4 @@ -75,8 +75,8 @@ jobs: rm css/leptonChromeESR.css rm css/leptonContentESR.css - - name: Processing for ESR - if: matrix.mode == 'ESR' + - name: Processing for LegacyV117 + if: matrix.mode == 'LegacyV117' run: | sed -i "s/\.css/ESR\.css/g" userChrome.css sed -i "s/\.css/ESR\.css/g" userContent.css From 38507b733bb9cf77d4312b26b640eb75b6285e99 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 16 Nov 2025 22:35:03 +0900 Subject: [PATCH 13/26] Fix: Tab - Rounding #1139 --- css/leptonChrome.css | 10 ++++++++++ css/leptonChromeESR.css | 5 +++++ src/rounding/_square.scss | 5 +++++ 3 files changed, 20 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 555ff0d..b8dc386 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3965,6 +3965,11 @@ --tab-border-radius: 0 !important; /* Original: 4px */ } } +@media not -moz-pref("userChrome.rounding.square_tab") { + :root { + --tab-border-radius: 4px !important; /* Original: 4px */ + } +} @media -moz-pref("userChrome.rounding.square_button") { :root { --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ @@ -18458,6 +18463,11 @@ --tab-border-radius: 0 !important; /* Original: 4px */ } } +@media not (-moz-bool-pref: "userChrome.rounding.square_tab") { + :root { + --tab-border-radius: 4px !important; /* Original: 4px */ + } +} @media (-moz-bool-pref: "userChrome.rounding.square_button") { :root { --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 4cb28bf..e33e7e3 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -4286,6 +4286,11 @@ --tab-border-radius: 0 !important; /* Original: 4px */ } } +@supports not -moz-bool-pref("userChrome.rounding.square_tab") { + :root { + --tab-border-radius: 4px !important; /* Original: 4px */ + } +} @supports -moz-bool-pref("userChrome.rounding.square_button") { :root { --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ diff --git a/src/rounding/_square.scss b/src/rounding/_square.scss index 5722402..3140184 100644 --- a/src/rounding/_square.scss +++ b/src/rounding/_square.scss @@ -3,6 +3,11 @@ --tab-border-radius: 0 !important; /* Original: 4px */ } } +@include NotOption("userChrome.rounding.square_tab") { + :root { + --tab-border-radius: 4px !important; /* Original: 4px */ + } +} @include Option("userChrome.rounding.square_button") { :root { --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ From aa9fc543b391f8982141446da15c98221438e227 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 29 Nov 2025 00:00:00 +0900 Subject: [PATCH 14/26] Fix: Bookmark Menu padding --- css/leptonChrome.css | 166 +++++++++++++++++++-------- css/leptonChromeESR.css | 82 +++++++++---- src/icons/layout/_bookmark_menu.scss | 4 +- 3 files changed, 178 insertions(+), 74 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b8dc386..2fbb895 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -12687,10 +12687,14 @@ /* Windows */ @media (-moz-platform: windows) { /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; padding-inline-start: var(--bookmark-menu-icon-text-padding) !important; background-position: var(--uc-menu-background-position) var(--bookmark-menu-icon-background-padding) center !important; @@ -12709,26 +12713,44 @@ margin-inline-start: -1px !important; } /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--context-menu-background-padding) + 2px) !important; } @media -moz-pref("userChrome.theme.non_native_menu") { - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; } } menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] - menuitem:not(.menuitem-iconic, [disabled="true"]) + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) .menu-text, - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) .menu-text { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text { margin-inline-start: var(--context-menu-text-padding) !important; } } @@ -12739,20 +12761,32 @@ padding-inline: var(--arrowpanel-menuitem-padding-inline) !important; } /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important; } - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important; } menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] - menuitem:not(.menuitem-iconic, [disabled="true"]) + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) > .menu-text, - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) > .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) > .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) > .menu-text { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text { padding-inline-start: var(--context-menu-mac-padding) !important; } } @@ -28431,10 +28465,14 @@ } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) { /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; padding-inline-start: var(--bookmark-menu-icon-text-padding) !important; background-position: var(--uc-menu-background-position) var(--bookmark-menu-icon-background-padding) center !important; @@ -28451,26 +28489,44 @@ margin-inline-start: -1px !important; } /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--context-menu-background-padding) + 2px) !important; } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userChrome.theme.non_native_menu") { - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-gtk-csd-available) { - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) .menu-text, - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) .menu-text { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text, + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text { margin-inline-start: var(--context-menu-text-padding) !important; } } @@ -28481,18 +28537,32 @@ padding-inline: var(--arrowpanel-menuitem-padding-inline) !important; } /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important; } - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important; } - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) > .menu-text, - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) > .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) > .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) > .menu-text { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text, + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text { padding-inline-start: var(--context-menu-mac-padding) !important; } } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index e33e7e3..bba6411 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -13359,10 +13359,14 @@ (-moz-os-version: windows-win10), (-moz-platform: windows) { /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; padding-inline-start: var(--bookmark-menu-icon-text-padding) !important; background-position: var(--uc-menu-background-position) var(--bookmark-menu-icon-background-padding) center !important; @@ -13390,26 +13394,44 @@ margin-inline-start: -1px !important; } /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--context-menu-background-padding) + 2px) !important; } @supports -moz-bool-pref("userChrome.theme.non_native_menu") { - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar + menupopup[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; } } menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] - menuitem:not(.menuitem-iconic, [disabled="true"]) + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) .menu-text, - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) .menu-text { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + .menu-text { margin-inline-start: var(--context-menu-text-padding) !important; } } @@ -13420,20 +13442,32 @@ padding-inline: var(--arrowpanel-menuitem-padding-inline) !important; } /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important; } - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important; } menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] - menuitem:not(.menuitem-iconic, [disabled="true"]) + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) > .menu-text, - menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) > .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) > .menu-text, - #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) > .menu-text { + menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menuitem:not(.menuitem-iconic, [disabled="true"]):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text, + #PersonalToolbar + menupopup[placespopup="true"] + menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden="true"])) + > .menu-text { padding-inline-start: var(--context-menu-mac-padding) !important; } } diff --git a/src/icons/layout/_bookmark_menu.scss b/src/icons/layout/_bookmark_menu.scss index 2c4cfbb..3f2e2c7 100644 --- a/src/icons/layout/_bookmark_menu.scss +++ b/src/icons/layout/_bookmark_menu.scss @@ -17,8 +17,8 @@ menupopup menupopup[emptyplacesresult] .menu-text, //-- Mixin --------------------------------------------------------------------- // Items -$_bookmarkMenuitem: "menuitem:not(.menuitem-iconic, [disabled=\"true\"])"; -$_bookmarkMenu: "menu:not(.menu-iconic)"; +$_bookmarkMenuitem: "menuitem:not(.menuitem-iconic, [disabled=\"true\"]):not(:has(.menu-icon[aria-hidden=\"true\"]))"; +$_bookmarkMenu: "menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden=\"true\"]))"; // Components $_bookmarkPopup: "menupopup:is(#BMB_bookmarksPopup)[placespopup=\"true\"]"; From db5589e70364fc5216553dfcebb31ffd5890ff9d Mon Sep 17 00:00:00 2001 From: hdk5 Date: Sat, 13 Dec 2025 13:00:32 +0200 Subject: [PATCH 15/26] Fix context menu icon padding (#1147) --- css/leptonChrome.css | 264 ++++++++++++++++++++++++++++++++++-- css/leptonChromeESR.css | 132 +++++++++++++++++- src/icons/layout/_menu.scss | 10 +- 3 files changed, 383 insertions(+), 23 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2fbb895..9f43e8f 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -12471,12 +12471,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } @media (-moz-platform: windows), (-moz-gtk-csd-available) { @media -moz-pref("userChrome.theme.non_native_menu") { @@ -12548,12 +12608,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } } } @@ -28260,12 +28380,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available), (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available) { @@ -28332,12 +28512,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) { :root { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index bba6411..1b477d1 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -12960,12 +12960,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), @@ -13044,12 +13104,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } } } diff --git a/src/icons/layout/_menu.scss b/src/icons/layout/_menu.scss index 1807962..8dd626c 100644 --- a/src/icons/layout/_menu.scss +++ b/src/icons/layout/_menu.scss @@ -102,17 +102,17 @@ $_layoutCommonMenus: ( @include _layout_root_non_native; @include _layoutIconMenus { @include _layout_init_non_native(); + + // FF v141 #1128 + > .menu-icon { + display: none !important; + } } // FF v121 .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - - // FF v141 #1128 - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } } From aaac164e9068caba9c5d281e81a519b04a23df19 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 14 Dec 2025 02:51:30 +0900 Subject: [PATCH 16/26] fix: built-in theme selector #1148 --- css/leptonChrome.css | 490 +++++++++++++----- css/leptonChromeESR.css | 245 ++++++--- .../selected_tab/_bottom_rounded_corner.scss | 3 +- src/tab/selected_tab/_box_shadow.scss | 6 +- src/theme/_fully_color.scss | 6 +- src/theme/system_default_theme/_mac.scss | 4 +- src/theme/system_default_theme/_win10.scss | 4 +- src/utils/_theme.scss | 10 +- 8 files changed, 537 insertions(+), 231 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 9f43e8f..1db0abb 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5,24 +5,38 @@ @media -moz-pref("userChrome.theme.built_in_contrast") { /*= Lightmode - Color darker =================================================*/ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } @media (-moz-platform: windows) { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @media -moz-pref("layout.css.osx-font-smoothing.enabled") { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } /*= Darkmode - Color lighter =================================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } } @@ -765,9 +779,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container @@ -786,9 +807,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -1099,7 +1127,10 @@ > .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] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -1111,7 +1142,10 @@ > .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] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -1747,7 +1781,10 @@ --in-content-link-color-visited: var(--blue-40) !important; } :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --button-primary-color: var(--in-content-page-color) !important; --button-primary-bgcolor: var(--blue-60) !important; --button-primary-hover-bgcolor: var(--blue-50) !important; @@ -1760,7 +1797,11 @@ } @media -moz-pref("userChrome.decoration.download_panel") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + #downloadsListBox { --button-primary-bgcolor: var(--blue-30); --button-primary-hover-bgcolor: var(--blue-20); } @@ -1771,9 +1812,15 @@ @media -moz-pref("userChrome.theme.private") { :root[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"], + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] { --lwt-additional-images: none !important; --lwt-header-image: none !important; --lwt-tab-text: rgba(232, 224, 255) !important; @@ -1807,17 +1854,17 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { --lwt-tabs-border-color: var(--focus-outline-color) !important; } @@ -1829,12 +1876,15 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"][lwtheme-image]:is( @@ -1842,42 +1892,63 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } :root[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #TabsToolbar { --lwt-tab-line-color: var(--focus-outline-color) !important; } :root[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"] { --message-bar-text-color: var(--lwt-tab-text) !important; --in-content-page-color: var(--lwt-tab-text) !important; } :root[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] menupopup { --menuitem-hover-background-color: #413d54 !important; --menu-background-color: #1d1935 !important; @@ -2025,16 +2096,28 @@ */ } /* Default theme color preservation */ - :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), - :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; @@ -7233,9 +7316,9 @@ filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([selected], [multiselected]) @@ -7244,16 +7327,16 @@ filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected]:not(:focus), :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) { @@ -7262,9 +7345,11 @@ /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + ) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -7275,9 +7360,11 @@ drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -7384,18 +7471,18 @@ opacity: 0.3; } } - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] @@ -7666,9 +7753,17 @@ border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; } :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: rgb(10, 132, 255); } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { @@ -7756,9 +7851,17 @@ } /* selected tab style */ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: #45a1ff; } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { @@ -14482,26 +14585,40 @@ @media (-moz-bool-pref: "userChrome.theme.built_in_contrast") { /*= Lightmode - Color darker =================================================*/ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } /*= Darkmode - Color lighter =================================================*/ } @media (-moz-bool-pref: "userChrome.theme.built_in_contrast") and (-moz-platform: windows) { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @media (-moz-bool-pref: "userChrome.theme.built_in_contrast") and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @media (-moz-bool-pref: "userChrome.theme.built_in_contrast") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } } @@ -15271,9 +15388,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container @@ -15292,9 +15416,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -15617,7 +15748,10 @@ > .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] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -15629,7 +15763,10 @@ > .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] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -16261,7 +16398,10 @@ --in-content-link-color-visited: var(--blue-40) !important; } :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --button-primary-color: var(--in-content-page-color) !important; --button-primary-bgcolor: var(--blue-60) !important; --button-primary-hover-bgcolor: var(--blue-50) !important; @@ -16275,7 +16415,11 @@ } @media (-moz-bool-pref: "userChrome.theme.proton_color") and (-moz-bool-pref: "userChrome.theme.proton_color.dark_blue_accent") and (prefers-color-scheme: dark) and (-moz-bool-pref: "userChrome.decoration.download_panel") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + #downloadsListBox { --button-primary-bgcolor: var(--blue-30); --button-primary-hover-bgcolor: var(--blue-20); } @@ -16283,9 +16427,15 @@ @media (-moz-bool-pref: "userChrome.theme.private") { :root[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"], + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] { --lwt-additional-images: none !important; --lwt-header-image: none !important; --lwt-tab-text: rgba(232, 224, 255) !important; @@ -16319,17 +16469,17 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { --lwt-tabs-border-color: var(--focus-outline-color) !important; } @@ -16341,12 +16491,15 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"][lwtheme-image]:is( @@ -16354,42 +16507,63 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } :root[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #TabsToolbar { --lwt-tab-line-color: var(--focus-outline-color) !important; } :root[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"] { --message-bar-text-color: var(--lwt-tab-text) !important; --in-content-page-color: var(--lwt-tab-text) !important; } :root[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] menupopup { --menuitem-hover-background-color: #413d54 !important; --menu-background-color: #1d1935 !important; @@ -16544,16 +16718,28 @@ } } @media (-moz-bool-pref: "userChrome.theme.fully_color") { - :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), - :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; @@ -22328,9 +22514,9 @@ filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([selected], [multiselected]) @@ -22339,16 +22525,16 @@ filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected]:not(:focus), :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) { @@ -22357,9 +22543,11 @@ /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + ) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -22370,9 +22558,11 @@ drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -22479,18 +22669,18 @@ } } @media (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.wave")) and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.australis")) and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome")) and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome_legacy")) and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge")) { - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] @@ -22880,9 +23070,17 @@ border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; } :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: rgb(10, 132, 255); } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { @@ -22975,9 +23173,17 @@ } /* selected tab style */ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: #45a1ff; } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 1b477d1..b29fc44 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -5,24 +5,38 @@ @supports -moz-bool-pref("userChrome.theme.built_in_contrast") { /*= Lightmode - Color darker =================================================*/ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } /*= Darkmode - Color lighter =================================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } } @@ -988,9 +1002,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container @@ -1009,9 +1030,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -1322,7 +1350,10 @@ > .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] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -1334,7 +1365,10 @@ > .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] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -1973,7 +2007,10 @@ --in-content-link-color-visited: var(--blue-40) !important; } :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --button-primary-color: var(--in-content-page-color) !important; --button-primary-bgcolor: var(--blue-60) !important; --button-primary-hover-bgcolor: var(--blue-50) !important; @@ -1986,7 +2023,11 @@ } @supports -moz-bool-pref("userChrome.decoration.download_panel") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + #downloadsListBox { --button-primary-bgcolor: var(--blue-30); --button-primary-hover-bgcolor: var(--blue-20); } @@ -1997,9 +2038,15 @@ @supports -moz-bool-pref("userChrome.theme.private") { :root[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"], + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] { --lwt-additional-images: none !important; --lwt-header-image: none !important; --lwt-tab-text: rgba(232, 224, 255) !important; @@ -2033,17 +2080,17 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { --lwt-tabs-border-color: var(--focus-outline-color) !important; } @@ -2055,12 +2102,15 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"][lwtheme-image]:is( @@ -2068,42 +2118,63 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } :root[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #TabsToolbar { --lwt-tab-line-color: var(--focus-outline-color) !important; } :root[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"] { --message-bar-text-color: var(--lwt-tab-text) !important; --in-content-page-color: var(--lwt-tab-text) !important; } :root[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] menupopup { --menuitem-hover-background-color: #413d54 !important; --menu-background-color: #1d1935 !important; @@ -2253,16 +2324,28 @@ */ } /* Default theme color preservation */ - :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), - :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; @@ -7670,9 +7753,9 @@ filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([selected], [multiselected]) @@ -7681,16 +7764,16 @@ filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected]:not(:focus), :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) { @@ -7699,9 +7782,11 @@ /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + ) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -7712,9 +7797,11 @@ drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -7821,18 +7908,18 @@ opacity: 0.3; } } - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] @@ -8109,9 +8196,17 @@ border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; } :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: rgb(10, 132, 255); } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { @@ -8199,9 +8294,17 @@ } /* selected tab style */ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: #45a1ff; } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index 533f73a..de1333f 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -94,8 +94,7 @@ } } - &::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme} - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background { + &#{$builtInDarkStyle} #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background { &::before, &::after { /* As Selected Tab - Box Shadow */ diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 86a07ed..499d3ef 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -17,7 +17,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, filter: $ucTabBasicShadow; } -:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme} +:root#{$builtInDarkStyle} #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab { &:is([selected], [multiselected]) { > .tab-stack @@ -37,7 +37,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ -:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"])#{$lwtheme} +:root:not(#{$builtInLightStyle}) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -48,7 +48,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, $ucTabAdditionalShadow; } -:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme} +:root:not(#{$builtInDarkStyle}) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) diff --git a/src/theme/_fully_color.scss b/src/theme/_fully_color.scss index 2808b0a..03ee6a1 100644 --- a/src/theme/_fully_color.scss +++ b/src/theme/_fully_color.scss @@ -100,10 +100,8 @@ html#main-window menupopup:not(.in-menulist) { } /* Default theme color preservation */ -:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy */ -:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy */ -: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);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), -: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);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { +#{built-in-default-theme()} menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), +#{built-in-default-theme()} menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; --arrowpanel-background: var( --toolbar-bgcolor, diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss index 8f34b91..b32aa10 100644 --- a/src/theme/system_default_theme/_mac.scss +++ b/src/theme/system_default_theme/_mac.scss @@ -247,7 +247,7 @@ > .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] + :root#{$builtInDarkStyle} #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -259,7 +259,7 @@ > .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] + :root#{$builtInDarkStyle} #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss index 0b5f1b4..42167db 100644 --- a/src/theme/system_default_theme/_win10.scss +++ b/src/theme/system_default_theme/_win10.scss @@ -354,7 +354,7 @@ > .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);"]) + #{built-in-default-theme()} #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -372,7 +372,7 @@ > .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);"]) + #{built-in-default-theme()} #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab diff --git a/src/utils/_theme.scss b/src/utils/_theme.scss index 509baf9..2df04b2 100644 --- a/src/utils/_theme.scss +++ b/src/utils/_theme.scss @@ -9,13 +9,13 @@ $_lightText: '[lwthemetextcolor="bright"]'; $_darkText: ":not(#{$_lightText})"; $_sysDark: "[lwt-default-theme-in-dark-mode]"; -$_lightStyle: '[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]'; -$_darkStyle: '[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]'; +$builtInLightStyle: ':is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme="light"])'; +$builtInDarkStyle: ':is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme="dark"])'; //== Mixin ===================================================================== @function built-in-default-theme() { $oldDefault: selector.append(":root", $_lightdark); - $newDefault: selector.append(":root", ":is(#{$_lightStyle}, #{$_darkStyle})"); + $newDefault: selector.append(":root", ":is(#{$builtInLightStyle}, #{$builtInDarkStyle})"); @return "#{$oldDefault}, #{$newDefault}"; } @@ -29,14 +29,14 @@ $_darkStyle: '[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rg @function built-in-light-theme() { $oldLight: selector.append(":root", $_lightdark, $_darkText); - $newLight: selector.append(":root", $_lightStyle); + $newLight: selector.append(":root", $builtInLightStyle); @return "#{$oldLight}, #{$newLight}"; } @function built-in-dark-theme() { $oldDark: selector.append(":root", $_lightdark, $_lightText); - $newDark: selector.append(":root", $_darkStyle); + $newDark: selector.append(":root", $builtInDarkStyle); @return "#{$oldDark}, #{$newDark}"; } From 9477ffc951566dca9ba75ec0c7f05e6c50f8d976 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 18 Dec 2025 00:00:00 +0900 Subject: [PATCH 17/26] Fix: Tab Groups - calc bug #1140 --- css/leptonChrome.css | 52 +++++++++++++++++++-------------------- css/leptonChromeESR.css | 26 ++++++++++---------- src/rounding/_square.scss | 26 ++++++++++---------- 3 files changed, 52 insertions(+), 52 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 1db0abb..59b313a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4045,7 +4045,7 @@ @media -moz-pref("userChrome.rounding.square_tab") { :root { - --tab-border-radius: 0 !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ } } @media not -moz-pref("userChrome.rounding.square_tab") { @@ -4055,7 +4055,7 @@ } @media -moz-pref("userChrome.rounding.square_button") { :root { - --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, .toolbarbutton-icon, @@ -4066,7 +4066,7 @@ .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { - --toolbarbutton-border-radius: 0; /* Original: 4px */ + --toolbarbutton-border-radius: 0px; /* Original: 4px */ } button, .close-icon, @@ -4075,7 +4075,7 @@ findbar toolbarbutton, .notification-button, #main-menubar > menu { - border-radius: 0 !important; + border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_tab") or -moz-pref("userChrome.rounding.square_button") { @@ -4087,13 +4087,13 @@ } @media -moz-pref("userChrome.rounding.square_panel") { :root { - --arrowpanel-border-radius: 0 !important; + --arrowpanel-border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_panelitem") { :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --subviewbutton-border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_menupopup") { @@ -4107,17 +4107,17 @@ xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { - border-radius: 0 !important; + border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_infobox") { #sanitizeEverythingWarningBox { - border-radius: 0 !important; + border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_toolbar") { :root { - --uc-rounding-toolbar: 0; + --uc-rounding-toolbar: 0px; } .container.infobar, .container.infobar::before, @@ -4141,19 +4141,19 @@ #urlbar-input-container, #urlbar-background, #searchbar { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @media -moz-pref("userChrome.rounding.square_urlView_item") { .urlbarView-row, .urlbarView-row-inner { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @media -moz-pref("userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { - border-radius: 0 !important; + border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_dialog") { @@ -18800,7 +18800,7 @@ @media (-moz-bool-pref: "userChrome.rounding.square_tab") { :root { - --tab-border-radius: 0 !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ } } @media not (-moz-bool-pref: "userChrome.rounding.square_tab") { @@ -18810,7 +18810,7 @@ } @media (-moz-bool-pref: "userChrome.rounding.square_button") { :root { - --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, .toolbarbutton-icon, @@ -18821,7 +18821,7 @@ .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { - --toolbarbutton-border-radius: 0; /* Original: 4px */ + --toolbarbutton-border-radius: 0px; /* Original: 4px */ } button, .close-icon, @@ -18830,7 +18830,7 @@ findbar toolbarbutton, .notification-button, #main-menubar > menu { - border-radius: 0 !important; + border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_tab"), (-moz-bool-pref: "userChrome.rounding.square_button") { @@ -18842,13 +18842,13 @@ } @media (-moz-bool-pref: "userChrome.rounding.square_panel") { :root { - --arrowpanel-border-radius: 0 !important; + --arrowpanel-border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_panelitem") { :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --subviewbutton-border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_menupopup") { @@ -18862,17 +18862,17 @@ xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { - border-radius: 0 !important; + border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_infobox") { #sanitizeEverythingWarningBox { - border-radius: 0 !important; + border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_toolbar") { :root { - --uc-rounding-toolbar: 0; + --uc-rounding-toolbar: 0px; } .container.infobar, .container.infobar::before, @@ -18896,19 +18896,19 @@ #urlbar-input-container, #urlbar-background, #searchbar { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @media (-moz-bool-pref: "userChrome.rounding.square_urlView_item") { .urlbarView-row, .urlbarView-row-inner { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @media (-moz-bool-pref: "userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { - border-radius: 0 !important; + border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_dialog") { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index b29fc44..cdcae4c 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -4366,7 +4366,7 @@ @supports -moz-bool-pref("userChrome.rounding.square_tab") { :root { - --tab-border-radius: 0 !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ } } @supports not -moz-bool-pref("userChrome.rounding.square_tab") { @@ -4376,7 +4376,7 @@ } @supports -moz-bool-pref("userChrome.rounding.square_button") { :root { - --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, .toolbarbutton-icon, @@ -4387,7 +4387,7 @@ .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { - --toolbarbutton-border-radius: 0; /* Original: 4px */ + --toolbarbutton-border-radius: 0px; /* Original: 4px */ } button, .close-icon, @@ -4396,7 +4396,7 @@ findbar toolbarbutton, .notification-button, #main-menubar > menu { - border-radius: 0 !important; + border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.rounding.square_button") { @@ -4408,13 +4408,13 @@ } @supports -moz-bool-pref("userChrome.rounding.square_panel") { :root { - --arrowpanel-border-radius: 0 !important; + --arrowpanel-border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_panelitem") { :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --subviewbutton-border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_menupopup") { @@ -4428,17 +4428,17 @@ xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { - border-radius: 0 !important; + border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_infobox") { #sanitizeEverythingWarningBox { - border-radius: 0 !important; + border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_toolbar") { :root { - --uc-rounding-toolbar: 0; + --uc-rounding-toolbar: 0px; } .container.infobar, .container.infobar::before, @@ -4462,19 +4462,19 @@ #urlbar-input-container, #urlbar-background, #searchbar { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @supports -moz-bool-pref("userChrome.rounding.square_urlView_item") { .urlbarView-row, .urlbarView-row-inner { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @supports -moz-bool-pref("userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { - border-radius: 0 !important; + border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_dialog") { diff --git a/src/rounding/_square.scss b/src/rounding/_square.scss index 3140184..a2a0341 100644 --- a/src/rounding/_square.scss +++ b/src/rounding/_square.scss @@ -1,6 +1,6 @@ @include Option("userChrome.rounding.square_tab") { :root { - --tab-border-radius: 0 !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ } } @include NotOption("userChrome.rounding.square_tab") { @@ -10,7 +10,7 @@ } @include Option("userChrome.rounding.square_button") { :root { - --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, @@ -22,7 +22,7 @@ .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { - --toolbarbutton-border-radius: 0; /* Original: 4px */ + --toolbarbutton-border-radius: 0px; /* Original: 4px */ } button, @@ -32,7 +32,7 @@ findbar toolbarbutton, .notification-button, #main-menubar > menu { - border-radius: 0 !important; + border-radius: 0px !important; } } @include Option("userChrome.rounding.square_tab", "userChrome.rounding.square_button") { @@ -45,13 +45,13 @@ @include Option("userChrome.rounding.square_panel") { :root { - --arrowpanel-border-radius: 0 !important; + --arrowpanel-border-radius: 0px !important; } } @include Option("userChrome.rounding.square_panelitem") { :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --subviewbutton-border-radius: 0px !important; } } @@ -66,19 +66,19 @@ xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { - border-radius: 0 !important; + border-radius: 0px !important; } } @include Option("userChrome.rounding.square_infobox") { #sanitizeEverythingWarningBox { - border-radius: 0 !important; + border-radius: 0px !important; } } @include Option("userChrome.rounding.square_toolbar") { :root { - --uc-rounding-toolbar: 0; + --uc-rounding-toolbar: 0px; } .container.infobar, @@ -105,20 +105,20 @@ #urlbar-input-container, #urlbar-background, #searchbar { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @include Option("userChrome.rounding.square_urlView_item") { .urlbarView-row, // At FF v111 #668 .urlbarView-row-inner { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @include Option("userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { - border-radius: 0 !important; + border-radius: 0px !important; } } From 3087a6cadbbade9ca1fc84df48bfd09d475dee86 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 19 Dec 2025 00:00:00 +0900 Subject: [PATCH 18/26] Fix: Tab - Container size adjust for vertical tab #1095 --- css/leptonChrome.css | 10 ++++++---- css/leptonChromeESR.css | 5 +++-- src/tab/_container_tab.scss | 5 +++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 59b313a..966ea8c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -9038,10 +9038,11 @@ display: block; position: absolute; top: 50%; + left: var(--tab-inline-padding); transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); opacity: 0.75; } .tabbrowser-tab[visuallyselected] .tab-content::before { @@ -9052,7 +9053,7 @@ width: 25%; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); @@ -24436,10 +24437,11 @@ display: block; position: absolute; top: 50%; + left: var(--tab-inline-padding); transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); opacity: 0.75; } } @@ -24453,7 +24455,7 @@ width: 25%; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index cdcae4c..e09a800 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -9497,10 +9497,11 @@ display: block; position: absolute; top: 50%; + left: var(--tab-inline-padding); transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); opacity: 0.75; } .tabbrowser-tab[visuallyselected] .tab-content::before { @@ -9511,7 +9512,7 @@ width: 25%; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss index 311680b..3043e3e 100644 --- a/src/tab/_container_tab.scss +++ b/src/tab/_container_tab.scss @@ -35,11 +35,12 @@ display: block; position: absolute; top: 50%; + left: var(--tab-inline-padding); transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); opacity: 0.75; } .tabbrowser-tab[visuallyselected] .tab-content::before { @@ -51,7 +52,7 @@ width: 25%; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); From c0dca2b348f3e10fda2e89254ddd95fa28097ae0 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 20 Dec 2025 00:00:00 +0900 Subject: [PATCH 19/26] Fix: Tab - Vertical tab with tab group #1095 --- css/leptonChrome.css | 28 +++++++++++++++++++++++++++ css/leptonChromeESR.css | 14 ++++++++++++++ src/tab/selected_tab/_box_shadow.scss | 13 +++++++++++++ 3 files changed, 55 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 966ea8c..ac04439 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7311,6 +7311,20 @@ ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } + #tabbrowser-tabs:not([noshadowfortests]) { + /* filter create new stacking context */ + } + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); + } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + height: calc(100% + 5px + var(--tab-block-margin)); + left: calc(-1 * var(--tab-inner-inline-margin)); + transform: translateY(-2px); + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); @@ -22510,6 +22524,20 @@ ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } + #tabbrowser-tabs:not([noshadowfortests]) { + /* filter create new stacking context */ + } + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); + } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + height: calc(100% + 5px + var(--tab-block-margin)); + left: calc(-1 * var(--tab-inner-inline-margin)); + transform: translateY(-2px); + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index e09a800..6e38098 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -7748,6 +7748,20 @@ ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } + #tabbrowser-tabs:not([noshadowfortests]) { + /* filter create new stacking context */ + } + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); + } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + height: calc(100% + 5px + var(--tab-block-margin)); + left: calc(-1 * var(--tab-inner-inline-margin)); + transform: translateY(-2px); + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 499d3ef..c9be03b 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -12,6 +12,19 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } +#tabbrowser-tabs:not([noshadowfortests]) { + .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: $ucTabBasicShadow; + } + + /* filter create new stacking context */ + &[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { + height: calc(100% + 6px + var(--tab-block-margin)); // 6px: .tab-group-line's inset-block size + left: calc(-1 * var(--tab-inner-inline-margin)); + transform: translateY(-2px); // .tab-group-line 's inset-inline-start size + } +} #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: $ucTabBasicShadow; From c58e2464d807c521bdf75e6cf8a88998b13b9d7c Mon Sep 17 00:00:00 2001 From: Seth Kinast Date: Fri, 19 Dec 2025 21:56:47 -0500 Subject: [PATCH 20/26] add Waterfox Flatpak profile path to install script --- install.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/install.sh b/install.sh index ab47194..c051d24 100755 --- a/install.sh +++ b/install.sh @@ -345,6 +345,7 @@ firefoxProfileDirPaths=( "${HOME}/.local/opt/tor-browser/app/Browser/TorBrowser/Data/Browser" "${HOME}/.var/app/org.mozilla.firefox/.mozilla/firefox" "${HOME}/.var/app/io.gitlab.librewolf-community/.librewolf" + "${HOME}/.var/app/net.waterfox.waterfox/.waterfox" "${HOME}/snap/firefox/common/.mozilla/firefox" "${HOME}/Library/Application Support/Firefox" "${HOME}/Library/Application Support/Waterfox" From a6546e69555aff1d82760a3a4e3f9fa3d77cf2c7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 21 Dec 2025 00:00:00 +0900 Subject: [PATCH 21/26] Fix: Tab - Vertical Tab with close button #1095 --- css/leptonChrome.css | 26 +++++++++++++++++++ css/leptonChromeESR.css | 12 +++++++++ .../_show_close_button_at_hover.scss | 11 ++++++++ 3 files changed, 49 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ac04439..7bd0d8c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8629,6 +8629,18 @@ padding-inline-start: 3px !important; /* Original: 0px */ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button { + padding: 2px !important; + width: 16px !important; + height: 16px !important; + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important; + } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive { + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), + linear-gradient(var(--toolbox-bgcolor-inactive)) !important; + } } /** Clipped tabs - Show close button at pinned tab ****************************/ @media -moz-pref("userChrome.tab.close_button_at_pinned") { @@ -24011,6 +24023,20 @@ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } } +@media (-moz-bool-pref: "userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button { + padding: 2px !important; + width: 16px !important; + height: 16px !important; + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important; + } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive { + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), + linear-gradient(var(--toolbox-bgcolor-inactive)) !important; + } +} /** Clipped tabs - Show close button at pinned tab ****************************/ @media (-moz-bool-pref: "userChrome.tab.close_button_at_pinned") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) { #tabbrowser-tabs { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 6e38098..fce8c4d 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -9088,6 +9088,18 @@ padding-inline-start: 3px !important; /* Original: 0px */ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button { + padding: 2px !important; + width: 16px !important; + height: 16px !important; + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important; + } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive { + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), + linear-gradient(var(--toolbox-bgcolor-inactive)) !important; + } } /** Clipped tabs - Show close button at pinned tab ****************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { 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 34bda20..a1a44f4 100644 --- a/src/tab/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tab/clipped_tab/_show_close_button_at_hover.scss @@ -79,3 +79,14 @@ padding-inline-start: 3px !important; /* Original: 0px */ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } + +#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button { + padding: 2px !important; + width: 16px !important; + height: 16px !important; + background-image: linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important; + + &:-moz-window-inactive { + background-image: linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor-inactive)) !important; + } +} \ No newline at end of file From 8c63b02d3fdd24ecff856101b5cd57f347f108a7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 22 Dec 2025 00:00:00 +0900 Subject: [PATCH 22/26] Fix: Tab - Vertical layout #1095 --- css/leptonChrome.css | 174 ++++++++++++++++++++++---- css/leptonChromeESR.css | 87 +++++++++++-- src/tab/_container_tab.scss | 43 +++++-- src/tab/selected_tab/_box_shadow.scss | 9 +- 4 files changed, 266 insertions(+), 47 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7bd0d8c..70fd890 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7318,13 +7318,22 @@ box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } - #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"] + #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { - height: calc(100% + 5px + var(--tab-block-margin)); - left: calc(-1 * var(--tab-inner-inline-margin)); + height: calc(100% + 6px + var(--tab-block-margin)); transform: translateY(-2px); } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important; + } + #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important; + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); @@ -9093,12 +9102,16 @@ } } /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-content::before { + .tabbrowser-tab[pinned] .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { transform: translateY(var(--uc-container-position-y)); - width: 16px; + width: 16px !important; } @media -moz-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[visuallyselected]:not([busy]):hover + .tab-content::before { opacity: 0; } } @@ -9106,12 +9119,28 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected])::before, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected])::before { opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -9123,7 +9152,15 @@ background-position-x: var(--uc-titlechanged-container-position-x) !important; } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -9131,25 +9168,51 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @media -moz-pref("userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } @@ -22543,13 +22606,22 @@ box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } - #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"] + #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { - height: calc(100% + 5px + var(--tab-block-margin)); - left: calc(-1 * var(--tab-inner-inline-margin)); + height: calc(100% + 6px + var(--tab-block-margin)); transform: translateY(-2px); } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important; + } + #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important; + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); @@ -24522,24 +24594,44 @@ } } @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) { - .tabbrowser-tab[pinned] .tab-content::before { + .tabbrowser-tab[pinned] .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { transform: translateY(var(--uc-container-position-y)); - width: 16px; + width: 16px !important; } } @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (-moz-bool-pref: "userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[visuallyselected]:not([busy]):hover + .tab-content::before { opacity: 0; } } @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (not (-moz-bool-pref: "userChrome.tab.container.on_top")) { .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected])::before, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected])::before { opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -24551,7 +24643,15 @@ background-position-x: var(--uc-titlechanged-container-position-x) !important; } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -24559,25 +24659,51 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (-moz-bool-pref: "userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index fce8c4d..8821e9c 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -7755,13 +7755,22 @@ box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } - #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"] + #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { - height: calc(100% + 5px + var(--tab-block-margin)); - left: calc(-1 * var(--tab-inner-inline-margin)); + height: calc(100% + 6px + var(--tab-block-margin)); transform: translateY(-2px); } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important; + } + #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important; + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); @@ -9552,12 +9561,16 @@ } } /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-content::before { + .tabbrowser-tab[pinned] .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { transform: translateY(var(--uc-container-position-y)); - width: 16px; + width: 16px !important; } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[visuallyselected]:not([busy]):hover + .tab-content::before { opacity: 0; } } @@ -9565,12 +9578,28 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected])::before, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected])::before { opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -9582,7 +9611,15 @@ background-position-x: var(--uc-titlechanged-container-position-x) !important; } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -9590,25 +9627,51 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @supports -moz-bool-pref("userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss index 3043e3e..4f132eb 100644 --- a/src/tab/_container_tab.scss +++ b/src/tab/_container_tab.scss @@ -68,12 +68,15 @@ } /* Pinned Tab */ -.tabbrowser-tab[pinned] .tab-content::before { +.tabbrowser-tab[pinned] .tab-content::before, +#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { + left: unset; transform: translateY(var(--uc-container-position-y)); - width: 16px; + width: 16px !important; } @include Option("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[visuallyselected]:not([busy]):hover .tab-content::before { opacity: 0; } // Don't hide at userChrome.tab.close_button_at_pinned.background @@ -81,13 +84,17 @@ @include NotOption("userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected])::before { opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -100,7 +107,9 @@ } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -109,26 +118,42 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @include Option("userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index c9be03b..fb9b3b0 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -19,11 +19,16 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, } /* filter create new stacking context */ - &[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { + &[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { height: calc(100% + 6px + var(--tab-block-margin)); // 6px: .tab-group-line's inset-block size - left: calc(-1 * var(--tab-inner-inline-margin)); transform: translateY(-2px); // .tab-group-line 's inset-inline-start size } + &[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important; + } + &:not([expanded])[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important; + } } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; From a14d22599ae6dab6559e40ff2e41495defe4686c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 23 Dec 2025 00:00:00 +0900 Subject: [PATCH 23/26] Fix: URL Bar - When vertical tabbar #1095 --- css/leptonChrome.css | 11 +++++++---- css/leptonChromeESR.css | 4 +++- src/padding/_index.scss | 3 ++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 70fd890..4cbc056 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4622,7 +4622,8 @@ } } @media -moz-pref("userChrome.padding.urlView_expanding") or -moz-pref("userChrome.urlView.as_commandbar") { - #urlbar[breakout][breakout-extend] { + /* .browser-titlebar is Vertical Tabbar */ + #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] { top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; width: var(--urlbar-width) !important; position: relative !important; @@ -4891,8 +4892,7 @@ padding: unset !important; padding-top: 4px !important; } -} -/*= Popup Panel - Reduce padding =============================================*/ +} /*= Popup Panel - Reduce padding =============================================*/ @media -moz-pref("userChrome.padding.popup_panel") { #protections-popup-main-header-label { height: unset !important; /* Original: 37.6px */ @@ -9104,6 +9104,7 @@ /* Pinned Tab */ .tabbrowser-tab[pinned] .tab-content::before, #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { + left: unset; transform: translateY(var(--uc-container-position-y)); width: 16px !important; } @@ -19483,7 +19484,8 @@ } } @media (-moz-bool-pref: "userChrome.padding.urlView_expanding"), (-moz-bool-pref: "userChrome.urlView.as_commandbar") { - #urlbar[breakout][breakout-extend] { + /* .browser-titlebar is Vertical Tabbar */ + #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] { top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; width: var(--urlbar-width) !important; position: relative !important; @@ -24596,6 +24598,7 @@ @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) { .tabbrowser-tab[pinned] .tab-content::before, #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { + left: unset; transform: translateY(var(--uc-container-position-y)); width: 16px !important; } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 8821e9c..4d03477 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -4968,7 +4968,8 @@ } } @supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_commandbar") { - #urlbar[breakout][breakout-extend] { + /* .browser-titlebar is Vertical Tabbar */ + #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] { top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; width: var(--urlbar-width) !important; position: relative !important; @@ -9563,6 +9564,7 @@ /* Pinned Tab */ .tabbrowser-tab[pinned] .tab-content::before, #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { + left: unset; transform: translateY(var(--uc-container-position-y)); width: 16px !important; } diff --git a/src/padding/_index.scss b/src/padding/_index.scss index 32328f1..4b73926 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -50,7 +50,8 @@ } } @include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_commandbar") { - #urlbar[breakout][breakout-extend] { + /* .browser-titlebar is Vertical Tabbar */ + #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] { top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; width: var(--urlbar-width) !important; position: relative !important; From 86b8fc319fea8895a6119a829a261825760875c1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 24 Dec 2025 00:00:00 +0900 Subject: [PATCH 24/26] Docs: Update CREDIT --- CREDITS | 3 +++ README.org | 1 + 2 files changed, 4 insertions(+) diff --git a/CREDITS b/CREDITS index d7b8fbf..eef7fb7 100644 --- a/CREDITS +++ b/CREDITS @@ -71,6 +71,9 @@ W: https://github.com/engelju N: kanlukasz W: https://github.com/kanlukasz +N: Kevin Ernst +W: https://github.com/ernstki + N: Mike-Kennelly W: https://github.com/Mike-Kennelly diff --git a/README.org b/README.org index 5c6029a..ded4ef0 100644 --- a/README.org +++ b/README.org @@ -220,6 +220,7 @@ Thanks to all sponsors & contributors to this project for providing help and dev - [[https://ko-fi.com/home/coffeeshop?txid=97e5fa0d-c73e-4308-a2fd-6b44b08cd828][Safira]] - [[https://ko-fi.com/duncanyoyo1][duncanyoyo1]] - [[https://ko-fi.com/home/coffeeshop?txid=a84c4838-f0e8-45b4-8b61-46684697e9b2][Minithra]] + - [[https://github.com/black7375/Firefox-UI-Fix/issues/1095#issuecomment-3682151859][Kevin Ernst]] - Private sponsors: 5 *Contributors* From 6f962561f71645253607d7f723915d8906924f26 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 25 Dec 2025 00:00:00 +0900 Subject: [PATCH 25/26] Test: update testcode --- __tests__/theme.test.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/__tests__/theme.test.scss b/__tests__/theme.test.scss index 329a6d2..81ed02f 100644 --- a/__tests__/theme.test.scss +++ b/__tests__/theme.test.scss @@ -59,7 +59,7 @@ } } @include expect { - :root[lwtheme-mozlightdark], :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);"]) { + :root[lwtheme-mozlightdark], :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])) { @include example_property; } } @@ -74,7 +74,7 @@ } } @include expect { - :root[lwtheme-mozlightdark][inFullscreen=true], :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);"])[inFullscreen=true] { + :root[lwtheme-mozlightdark][inFullscreen=true], :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]))[inFullscreen=true] { @include example_property; } } @@ -89,7 +89,7 @@ } } @include expect { - :root[lwtheme-mozlightdark] #navigator-toolbox, :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);"]) #navigator-toolbox { + :root[lwtheme-mozlightdark] #navigator-toolbox, :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])) #navigator-toolbox { @include example_property; } } @@ -106,7 +106,7 @@ } } @include expect { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]) { @include example_property; } } @@ -121,7 +121,7 @@ } } @include expect { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright])[inFullscreen=true], :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][inFullscreen=true] { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright])[inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light])[inFullscreen=true] { @include example_property; } } @@ -136,7 +136,7 @@ } } @include expect { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]) #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]) #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]) #navigator-toolbox { @include example_property; } } @@ -153,7 +153,7 @@ } } @include expect { - :root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]) { @include example_property; } } @@ -168,7 +168,7 @@ } } @include expect { - :root[lwtheme-mozlightdark][lwthemetextcolor=bright][inFullscreen=true], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][inFullscreen=true] { + :root[lwtheme-mozlightdark][lwthemetextcolor=bright][inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])[inFullscreen=true] { @include example_property; } } @@ -183,7 +183,7 @@ } } @include expect { - :root[lwtheme-mozlightdark][lwthemetextcolor=bright] #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #navigator-toolbox { + :root[lwtheme-mozlightdark][lwthemetextcolor=bright] #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]) #navigator-toolbox { @include example_property; } } From 1f30fe71dd5afd80cb803753eedef50f71dee9a5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 2 Jan 2026 01:20:44 +0900 Subject: [PATCH 26/26] docs: CREDITS update --- CREDITS | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CREDITS b/CREDITS index eef7fb7..2d7b29d 100644 --- a/CREDITS +++ b/CREDITS @@ -152,6 +152,9 @@ N: Filip Š E: filip.stamcar@hotmail.com W: https://www.filips.si/ +N: hdk5 +W: https://github.com/hdk5 + N: hellojaccc E: kim@taekyeong.me W: https://github.com/hellojaccc @@ -228,6 +231,9 @@ N: sean z E: ean@vsxd.com W: https://vsxd.com/ +N: Seth Kinast +W: https://github.com/sethkinast + N: Sylvain E: B00ze64@hotmail.com W: https://github.com/B00ze64