From 30457b045747bca5da9de8de8be0dacc45dd78e1 Mon Sep 17 00:00:00 2001 From: COxDE <63153334+coxde@users.noreply.github.com> Date: Wed, 19 Mar 2025 10:01:20 +0000 Subject: [PATCH 1/9] feat: add librewolf flatpak profile path --- install.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/install.sh b/install.sh index 5ba9579..ab47194 100755 --- a/install.sh +++ b/install.sh @@ -344,6 +344,7 @@ firefoxProfileDirPaths=( "${HOME}/.cachy" "${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}/snap/firefox/common/.mozilla/firefox" "${HOME}/Library/Application Support/Firefox" "${HOME}/Library/Application Support/Waterfox" From f547441c6fe9cf12c68e32ca6a27475eb1bb70bb Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 4 Apr 2025 00:00:00 +0900 Subject: [PATCH 2/9] Fix: Tab - Audio icon position #1075 --- css/leptonChrome.css | 62 +++++++++++++++++++--- css/leptonChromeESR.css | 29 ++++++++-- src/tab/sound_tab/_show_with_favicons.scss | 32 +++++++++-- 3 files changed, 111 insertions(+), 12 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 484118c..4a4a736 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8425,13 +8425,13 @@ color: var(--tab-icon-overlay-fill, light-dark(black, white)); } .tab-icon-overlay:not([crashed])[soundplaying] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + list-style-image: url("./icons/tab-audio-playing-small.svg"); } .tab-icon-overlay:not([crashed])[muted] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + list-style-image: url("./icons/tab-audio-muted-small.svg"); } .tab-icon-overlay:not([crashed])[activemedia-blocked] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); + list-style-image: url("./icons/tab-audio-blocked-small.svg"); } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ @@ -8441,6 +8441,29 @@ fill-opacity: 0.8 !important; opacity: 1 !important; } + .tab-audio-button:not([crashed]), + .tab-audio-button[pinned][crashed][selected] { + /* Position */ + margin-inline-start: -8px !important; + margin-inline-end: -4px !important; + z-index: 1 !important; + transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(var(--uc-sound-tab-icon-position-y)); + /* Shape */ + --button-size-icon-small: 17px !important; + --button-min-height-small: 17px !important; + --button-border-radius: 100% !important; + width: 17px !important; + height: 17px !important; + border-radius: 100%; + overflow: clip; + --button-text-color-ghost-hover: light-dark(white, black); + --button-background-color-ghost-hover: light-dark(black, white); + } + .tab-audio-button:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + display: flex !important; + fill-opacity: 0.8 !important; + opacity: 1 !important; + } /* Label */ @media not -moz-pref("userChrome.hidden.tab_icon") { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) @@ -23200,13 +23223,13 @@ color: var(--tab-icon-overlay-fill, light-dark(black, white)); } .tab-icon-overlay:not([crashed])[soundplaying] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + list-style-image: url("./icons/tab-audio-playing-small.svg"); } .tab-icon-overlay:not([crashed])[muted] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + list-style-image: url("./icons/tab-audio-muted-small.svg"); } .tab-icon-overlay:not([crashed])[activemedia-blocked] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); + list-style-image: url("./icons/tab-audio-blocked-small.svg"); } } @media (-moz-bool-pref: "userChrome.tab.sound_with_favicons") { @@ -23219,6 +23242,33 @@ opacity: 1 !important; } } +@media (-moz-bool-pref: "userChrome.tab.sound_with_favicons") { + .tab-audio-button:not([crashed]), + .tab-audio-button[pinned][crashed][selected] { + /* Position */ + margin-inline-start: -8px !important; + margin-inline-end: -4px !important; + z-index: 1 !important; + transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(var(--uc-sound-tab-icon-position-y)); + /* Shape */ + --button-size-icon-small: 17px !important; + --button-min-height-small: 17px !important; + --button-border-radius: 100% !important; + width: 17px !important; + height: 17px !important; + border-radius: 100%; + overflow: clip; + --button-text-color-ghost-hover: light-dark(white, black); + --button-background-color-ghost-hover: light-dark(black, white); + } +} +@media (-moz-bool-pref: "userChrome.tab.sound_with_favicons") { + .tab-audio-button:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + display: flex !important; + fill-opacity: 0.8 !important; + opacity: 1 !important; + } +} @media (-moz-bool-pref: "userChrome.tab.sound_with_favicons") and (not (-moz-bool-pref: "userChrome.hidden.tab_icon")) { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 510cd38..97eee46 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -8883,13 +8883,13 @@ color: var(--tab-icon-overlay-fill, light-dark(black, white)); } .tab-icon-overlay:not([crashed])[soundplaying] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + list-style-image: url("./icons/tab-audio-playing-small.svg"); } .tab-icon-overlay:not([crashed])[muted] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + list-style-image: url("./icons/tab-audio-muted-small.svg"); } .tab-icon-overlay:not([crashed])[activemedia-blocked] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); + list-style-image: url("./icons/tab-audio-blocked-small.svg"); } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ @@ -8899,6 +8899,29 @@ fill-opacity: 0.8 !important; opacity: 1 !important; } + .tab-audio-button:not([crashed]), + .tab-audio-button[pinned][crashed][selected] { + /* Position */ + margin-inline-start: -8px !important; + margin-inline-end: -4px !important; + z-index: 1 !important; + transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(var(--uc-sound-tab-icon-position-y)); + /* Shape */ + --button-size-icon-small: 17px !important; + --button-min-height-small: 17px !important; + --button-border-radius: 100% !important; + width: 17px !important; + height: 17px !important; + border-radius: 100%; + overflow: clip; + --button-text-color-ghost-hover: light-dark(white, black); + --button-background-color-ghost-hover: light-dark(black, white); + } + .tab-audio-button:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + display: flex !important; + fill-opacity: 0.8 !important; + opacity: 1 !important; + } /* Label */ @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) diff --git a/src/tab/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss index e264200..662bd08 100644 --- a/src/tab/sound_tab/_show_with_favicons.scss +++ b/src/tab/sound_tab/_show_with_favicons.scss @@ -74,13 +74,13 @@ // There is a difference in size between background-image and list-style-image due to margins, etc. &[soundplaying] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + list-style-image: url("./icons/tab-audio-playing-small.svg"); } &[muted] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + list-style-image: url("./icons/tab-audio-muted-small.svg"); } &[activemedia-blocked] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); + list-style-image: url("./icons/tab-audio-blocked-small.svg"); } } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { @@ -92,6 +92,32 @@ opacity: 1 !important; } +.tab-audio-button:not([crashed]), +.tab-audio-button[pinned][crashed][selected] { + /* Position */ + margin-inline-start: -8px !important; + margin-inline-end: -4px !important; + z-index: 1 !important; + transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(var(--uc-sound-tab-icon-position-y)); + + /* Shape */ + --button-size-icon-small: 17px !important; + --button-min-height-small: 17px !important; + --button-border-radius: 100% !important; + width: 17px !important; + height: 17px !important; + border-radius: 100%; + overflow: clip; + + --button-text-color-ghost-hover: light-dark(white, black); + --button-background-color-ghost-hover: light-dark(black, white); +} +.tab-audio-button:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + display: flex !important; + fill-opacity: 0.8 !important; + opacity: 1 !important; +} + /* Label */ @include _hidden_tabIcon_soundTabLabel { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { From f53624ab6e7ffe8c6597679555ee96680a039451 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 6 Apr 2025 00:00:00 +0900 Subject: [PATCH 3/9] Fix: Tab Group supports #1086 --- css/leptonChrome.css | 112 ++++++++++++++++++ css/leptonChromeESR.css | 54 +++++++++ src/padding/_tabbar_width.scss | 11 ++ src/tab/_connect_to_window.scss | 4 + src/tab/selected_tab/_color_like_toolbar.scss | 11 ++ src/tab/selected_tab/_multi_selected.scss | 6 + .../unselected_tab/_dynamic_separator.scss | 7 ++ 7 files changed, 205 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4a4a736..7212cd0 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4239,6 +4239,15 @@ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ } + #tabbrowser-tabs[orient="horizontal"] + tab-group[collapsed] + > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { + min-width: 0 !important; + max-width: 0 !important; + padding: 0 !important; + margin: 0 !important; + overflow-clip-margin: 0; + } /* neighbouring tabs should "pinch" together */ :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) @@ -4246,6 +4255,9 @@ > #tabbrowser-arrowscrollbox-periphery { min-width: 3px; } + #tabbrowser-tabs[orient="horizontal"] .tab-group-label-container { + margin-inline-start: 4px !important; + } @media not -moz-pref("userChrome.tab.photon_like_padding") { @media -moz-pref("userChrome.tab.lepton_like_padding") { #TabsToolbar:not([multibar]) .tabbrowser-tab[pinned] { @@ -6920,6 +6932,9 @@ margin-top: 0px !important; margin-bottom: 0px !important; } + #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { + transform: translateY(calc(var(--tab-group-line-thickness) * -1)); + } /* Remove line at Toolbar's top */ #tabbrowser-tabs { z-index: 1 !important; @@ -6977,6 +6992,19 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[selected] { /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) */ @@ -6997,6 +7025,19 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[selected] { background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important; @@ -7017,6 +7058,12 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[multiselected]:not([selected]) { /* Original: background-attachment: scroll, scroll, fixed; @@ -7789,6 +7836,13 @@ opacity: var(--tab-separator-opacity); } } + #tabbrowser-tabs[orient="horizontal"] + tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + + .tabbrowser-tab + .tab-stack::before, + #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { + opacity: 0 !important; + } #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( [visuallyselected], @@ -18425,6 +18479,15 @@ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ } + #tabbrowser-tabs[orient="horizontal"] + tab-group[collapsed] + > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { + min-width: 0 !important; + max-width: 0 !important; + padding: 0 !important; + margin: 0 !important; + overflow-clip-margin: 0; + } } @media (-moz-bool-pref: "userChrome.padding.tabbar_width") { :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, @@ -18434,6 +18497,11 @@ min-width: 3px; } } +@media (-moz-bool-pref: "userChrome.padding.tabbar_width") { + #tabbrowser-tabs[orient="horizontal"] .tab-group-label-container { + margin-inline-start: 4px !important; + } +} @media (-moz-bool-pref: "userChrome.padding.tabbar_width") and (not (-moz-bool-pref: "userChrome.tab.photon_like_padding")) and (-moz-bool-pref: "userChrome.tab.lepton_like_padding") { #TabsToolbar:not([multibar]) .tabbrowser-tab[pinned] { padding-inline: 1px !important; @@ -21536,6 +21604,9 @@ margin-top: 0px !important; margin-bottom: 0px !important; } + #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { + transform: translateY(calc(var(--tab-group-line-thickness) * -1)); + } /* Remove line at Toolbar's top */ #tabbrowser-tabs { z-index: 1 !important; @@ -21597,6 +21668,19 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[selected] { /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) */ @@ -21618,6 +21702,19 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[selected] { background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important; @@ -21637,6 +21734,12 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[multiselected]:not([selected]) { /* Original: background-attachment: scroll, scroll, fixed; @@ -22547,6 +22650,15 @@ opacity: var(--tab-separator-opacity); } } +@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { + #tabbrowser-tabs[orient="horizontal"] + tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + + .tabbrowser-tab + .tab-stack::before, + #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { + opacity: 0 !important; + } +} @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 97eee46..4a945a8 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -4562,6 +4562,15 @@ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ } + #tabbrowser-tabs[orient="horizontal"] + tab-group[collapsed] + > .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { + min-width: 0 !important; + max-width: 0 !important; + padding: 0 !important; + margin: 0 !important; + overflow-clip-margin: 0; + } /* neighbouring tabs should "pinch" together */ :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) @@ -4569,6 +4578,9 @@ > #tabbrowser-arrowscrollbox-periphery { min-width: 3px; } + #tabbrowser-tabs[orient="horizontal"] .tab-group-label-container { + margin-inline-start: 4px !important; + } @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { #TabsToolbar:not([multibar]) .tabbrowser-tab[pinned] { @@ -7356,6 +7368,9 @@ margin-top: 0px !important; margin-bottom: 0px !important; } + #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { + transform: translateY(calc(var(--tab-group-line-thickness) * -1)); + } /* Remove line at Toolbar's top */ #tabbrowser-tabs { z-index: 1 !important; @@ -7413,6 +7428,19 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[selected] { /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) */ @@ -7433,6 +7461,19 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], + :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme]) + #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[selected] { background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important; @@ -7453,6 +7494,12 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[multiselected]:not([selected]), + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[multiselected]:not([selected]) { /* Original: background-attachment: scroll, scroll, fixed; @@ -8231,6 +8278,13 @@ opacity: var(--tab-separator-opacity); } } + #tabbrowser-tabs[orient="horizontal"] + tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + + .tabbrowser-tab + .tab-stack::before, + #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { + opacity: 0 !important; + } #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( [visuallyselected], diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index fdc5ee1..3895f75 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -92,6 +92,14 @@ } .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ + + #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > & { + min-width: 0 !important; + max-width: 0 !important; + padding: 0 !important;; + margin: 0 !important; + overflow-clip-margin: 0; + } } /* neighbouring tabs should "pinch" together */ @@ -100,6 +108,9 @@ > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { min-width: 3px; // With Panorama Tab Groups #643 #846 } +#tabbrowser-tabs[orient="horizontal"] .tab-group-label-container { + margin-inline-start: 4px !important; +} @include NotOption("userChrome.tab.photon_like_padding") { @include Option("userChrome.tab.lepton_like_padding") { #TabsToolbar:not([multibar]) .tabbrowser-tab { diff --git a/src/tab/_connect_to_window.scss b/src/tab/_connect_to_window.scss index 4d31d70..be74222 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -18,6 +18,10 @@ margin-bottom: 0px !important; } +#tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { + transform: translateY(calc(var(--tab-group-line-thickness) * -1)); +} + /* Remove line at Toolbar's top */ #tabbrowser-tabs { z-index: 1 !important; diff --git a/src/tab/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss index d6695dd..6e9f10d 100644 --- a/src/tab/selected_tab/_color_like_toolbar.scss +++ b/src/tab/selected_tab/_color_like_toolbar.scss @@ -15,6 +15,17 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[selected], +#tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected], +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[selected] { @include lwtheme(false) { /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) diff --git a/src/tab/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss index a5605d7..0e68081 100644 --- a/src/tab/selected_tab/_multi_selected.scss +++ b/src/tab/selected_tab/_multi_selected.scss @@ -10,6 +10,12 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack + > .tab-background[multiselected]:not([selected]), +#tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > tab-group + > .tabbrowser-tab + > .tab-stack > .tab-background[multiselected]:not([selected]) { /* Original: background-attachment: scroll, scroll, fixed; diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index 15292a9..77402d6 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -95,6 +95,13 @@ } } +#tabbrowser-tabs[orient="horizontal"] tab-group { + &:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before, + &[collapsed] + .tabbrowser-tab .tab-stack::before { + opacity: 0 !important; + } +} + #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is([visuallyselected], [multiselected], :hover) .tab-stack::before, From 9f52697dd2d82aa7ee36eec440bcdb98c5e1cf76 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 7 Apr 2025 00:00:00 +0900 Subject: [PATCH 4/9] Fix: missing tab audio icons --- icons/tab-audio-blocked-circle-12.svg | 14 ++++++++++++++ icons/tab-audio-muted-small.svg | 6 ++++++ icons/tab-audio-playing-small.svg | 6 ++++++ 3 files changed, 26 insertions(+) create mode 100644 icons/tab-audio-blocked-circle-12.svg create mode 100644 icons/tab-audio-muted-small.svg create mode 100644 icons/tab-audio-playing-small.svg diff --git a/icons/tab-audio-blocked-circle-12.svg b/icons/tab-audio-blocked-circle-12.svg new file mode 100644 index 0000000..572ebf2 --- /dev/null +++ b/icons/tab-audio-blocked-circle-12.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/icons/tab-audio-muted-small.svg b/icons/tab-audio-muted-small.svg new file mode 100644 index 0000000..b36c244 --- /dev/null +++ b/icons/tab-audio-muted-small.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/icons/tab-audio-playing-small.svg b/icons/tab-audio-playing-small.svg new file mode 100644 index 0000000..7f95de3 --- /dev/null +++ b/icons/tab-audio-playing-small.svg @@ -0,0 +1,6 @@ + + + + From db615f1753e6975b47ebb9e16fed7d67b2473c0d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 28 Apr 2025 09:36:57 +0900 Subject: [PATCH 5/9] Fix: support vertical tabs --- css/leptonChrome.css | 235 ++++++++++++------ css/leptonChromeESR.css | 119 ++++++--- src/tab/_connect_to_window.scss | 37 +-- src/tab/newtab_button/_looks_like_tab.scss | 20 +- src/tab/selected_tab/_multi_selected.scss | 3 +- .../unselected_tab/_dynamic_separator.scss | 48 ++-- 6 files changed, 286 insertions(+), 176 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7212cd0..341c952 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6914,27 +6914,27 @@ /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @media -moz-pref("userChrome.tab.connect_to_window") { - #tabbrowser-tabs[orient="horizontal"] { + #tabbrowser-tabs:not([orient="vertical"]) { min-height: unset !important; /* Original: var(--tabstrip-min-height) */ } - #tabbrowser-tabs[orient="vertical"] { - --uc-tab-border-bottom-radius: var(--tab-border-radius); - } - .tab-background { + #tabbrowser-tabs:not([orient="vertical"]) .tab-background { border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) var(--uc-tab-border-bottom-radius, 0px) !important; margin-bottom: 0px !important; } - .tab-content { + #tabbrowser-tabs:not([orient="vertical"]) .tab-content { margin-top: 0px; } - .tab-stack { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack { margin-top: 0px !important; margin-bottom: 0px !important; } - #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { + #tabbrowser-tabs:not([orient="vertical"]) tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { transform: translateY(calc(var(--tab-group-line-thickness) * -1)); } + #tabbrowser-tabs[orient="vertical"] { + --uc-tab-border-bottom-radius: var(--tab-border-radius); + } /* Remove line at Toolbar's top */ #tabbrowser-tabs { z-index: 1 !important; @@ -7048,10 +7048,12 @@ } /*= Multi Selected Color - More Contrast =====================================*/ @media -moz-pref("userChrome.tab.multi_selected") { - #TabsToolbar { + #TabsToolbar, + #vertical-tabs { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); } - #TabsToolbar[brighttext] { + #TabsToolbar[brighttext], + #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } #tabbrowser-tabs:not([movingtab]) @@ -7742,8 +7744,8 @@ position: relative; } @media -moz-pref("userChrome.tab.newtab_button_like_tab") { - .tab-stack::before, - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { /* Box Model */ content: ""; display: block; @@ -7760,18 +7762,19 @@ transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @media -moz-pref("userChrome.compatibility.dynamic_separator") { - .tab-stack::before, - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { background-color: var(--tabs-border-color); } } - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); } } @media not -moz-pref("userChrome.tab.newtab_button_like_tab") { - .tab-stack::before, - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { /* Box Model */ @@ -7788,35 +7791,42 @@ background-color: var(--toolbarseparator-color); } @media -moz-pref("userChrome.compatibility.dynamic_separator") { - .tab-stack::before, - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { background-color: var(--tabs-border-color); } } - .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab:last-of-type .tab-stack::after { + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) + .tab-stack::before { opacity: var(--tab-separator-opacity); } @media -moz-pref("userChrome.tabbar.one_liner") { @media not -moz-pref("userChrome.tabbar.one_liner.tabbar_first") { @media not -moz-pref("userChrome.tabbar.one_liner.responsive") { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type + .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } } @media -moz-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type + .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @@ -7825,25 +7835,27 @@ } } @media -moz-pref("userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button:not(:hover, [open])::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); } } @media not -moz-pref("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { opacity: var(--tab-separator-opacity); } } - #tabbrowser-tabs[orient="horizontal"] + #tabbrowser-tabs:not([orient="vertical"]) tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before, - #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { opacity: 0 !important; } #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( [visuallyselected], [multiselected], @@ -7851,6 +7863,7 @@ ) .tab-stack::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) .tab-stack::before { @@ -7858,13 +7871,16 @@ } @media -moz-pref("userChrome.tab.newtab_button_like_tab") { #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab .tab-stack::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { @@ -7872,30 +7888,35 @@ } } @media not -moz-pref("userChrome.tab.newtab_button_like_tab") { - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-stack::before { opacity: 0 !important; } - :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + :root:not([uidensity="compact"]) + #tabbrowser-tabs:not([orient="vertical"]) + #tabs-newtab-button + > .toolbarbutton-icon { margin-left: 2px; } - :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + :root[uidensity="compact"] #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon { margin-left: 1px; } } /* Animate */ @media (prefers-reduced-motion: no-preference) { - .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @media -moz-pref("userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } @media not -moz-pref("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ @@ -7903,7 +7924,7 @@ } } /* Latest Tab & New tab margin */ - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { margin-inline-end: 1px !important; } } @@ -8008,7 +8029,7 @@ /*= New tab button - Looks like tab ==========================================*/ @media -moz-pref("userChrome.tab.newtab_button_like_tab") { @media -moz-pref("userChrome.tab.connect_to_window") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { /* Size */ align-items: stretch !important; -moz-box-align: stretch !important; @@ -8016,7 +8037,7 @@ } } @media -moz-pref("userChrome.tab.bottom_rounded_corner") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { /* Original: margin: 0 0 var(--tabs-navbar-shadow-size) !important => Can't override style. Therefore, we should approach it by bypass. @@ -8037,7 +8058,7 @@ -moz-context-properties: fill !important; } @media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { --uc-newtab-position: 0px; --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); @@ -8057,7 +8078,7 @@ background-origin: padding-box; } @media -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); } } @@ -8072,22 +8093,28 @@ } @media (-moz-windows-accent-color-in-titlebar) { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */ } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ } @media -moz-pref("userChrome.tab.bottom_rounded_corner") { @media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -8098,8 +8125,10 @@ var(--uc-tab-corner-right-side-svg); } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -8113,8 +8142,10 @@ } @media -moz-pref("userChrome.compatibility.accent_color") { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { fill: color-mix( in srgb, @@ -8123,8 +8154,10 @@ ) !important; /* Hardcoded for compatibility */ } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { fill: color-mix( in srgb, @@ -8138,8 +8171,10 @@ :not([lwtheme]), :not(:-moz-lwtheme) ) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -8153,8 +8188,10 @@ :not([lwtheme]), :not(:-moz-lwtheme) ) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -8169,7 +8206,7 @@ } } /* '+'Icon */ - #tabs-newtab-button .toolbarbutton-icon { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; @@ -8178,7 +8215,7 @@ fill-opacity: var(--toolbarbutton-icon-fill-opacity); } @media -moz-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-pref("userChrome.tab.bottom_rounded_corner.australis") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button .toolbarbutton-icon { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon { --tab-border-radius: 0px; width: unset !important; padding-inline: 0px !important; @@ -21586,27 +21623,27 @@ /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @media (-moz-bool-pref: "userChrome.tab.connect_to_window") { - #tabbrowser-tabs[orient="horizontal"] { + #tabbrowser-tabs:not([orient="vertical"]) { min-height: unset !important; /* Original: var(--tabstrip-min-height) */ } - #tabbrowser-tabs[orient="vertical"] { - --uc-tab-border-bottom-radius: var(--tab-border-radius); - } - .tab-background { + #tabbrowser-tabs:not([orient="vertical"]) .tab-background { border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) var(--uc-tab-border-bottom-radius, 0px) !important; margin-bottom: 0px !important; } - .tab-content { + #tabbrowser-tabs:not([orient="vertical"]) .tab-content { margin-top: 0px; } - .tab-stack { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack { margin-top: 0px !important; margin-bottom: 0px !important; } - #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { + #tabbrowser-tabs:not([orient="vertical"]) tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { transform: translateY(calc(var(--tab-group-line-thickness) * -1)); } + #tabbrowser-tabs[orient="vertical"] { + --uc-tab-border-bottom-radius: var(--tab-border-radius); + } /* Remove line at Toolbar's top */ #tabbrowser-tabs { z-index: 1 !important; @@ -21724,10 +21761,12 @@ } /*= Multi Selected Color - More Contrast =====================================*/ @media (-moz-bool-pref: "userChrome.tab.multi_selected") { - #TabsToolbar { + #TabsToolbar, + #vertical-tabs { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); } - #TabsToolbar[brighttext] { + #TabsToolbar[brighttext], + #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } #tabbrowser-tabs:not([movingtab]) @@ -22554,8 +22593,8 @@ /* Latest Tab & New tab margin */ } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { - .tab-stack::before, - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { /* Box Model */ content: ""; display: block; @@ -22573,19 +22612,20 @@ } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.compatibility.dynamic_separator") { - .tab-stack::before, - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { background-color: var(--tabs-border-color); } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { - .tab-stack::before, - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { /* Box Model */ @@ -22603,64 +22643,73 @@ } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) and (-moz-bool-pref: "userChrome.compatibility.dynamic_separator") { - .tab-stack::before, - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { background-color: var(--tabs-border-color); } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { - .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { - .tabbrowser-tab:last-of-type .tab-stack::after { + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) + .tab-stack::before { opacity: var(--tab-separator-opacity); } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first")) and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type + .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } } @media screen and (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first")) and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) { - .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); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button:not(:hover, [open])::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { opacity: var(--tab-separator-opacity); } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { - #tabbrowser-tabs[orient="horizontal"] + #tabbrowser-tabs:not([orient="vertical"]) tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before, - #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { opacity: 0 !important; } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( [visuallyselected], [multiselected], @@ -22668,6 +22717,7 @@ ) .tab-stack::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) .tab-stack::before { @@ -22676,13 +22726,16 @@ } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab .tab-stack::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { @@ -22690,37 +22743,39 @@ } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-stack::before { opacity: 0 !important; } - :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + :root:not([uidensity="compact"]) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon { margin-left: 2px; } - :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + :root[uidensity="compact"] #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon { margin-left: 1px; } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) { - .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab")) { - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { margin-inline-end: 1px !important; } } @@ -22831,7 +22886,7 @@ /* Fix tab overlap #678 */ } @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.connect_to_window") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { /* Size */ align-items: stretch !important; -moz-box-align: stretch !important; @@ -22839,7 +22894,7 @@ } } @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { /* Original: margin: 0 0 var(--tabs-navbar-shadow-size) !important => Can't override style. Therefore, we should approach it by bypass. @@ -22865,7 +22920,7 @@ (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome_legacy"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { --uc-newtab-position: 0px; --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); @@ -22894,7 +22949,7 @@ (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); } } @@ -22910,14 +22965,18 @@ } @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */ } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ } @@ -22928,8 +22987,10 @@ (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -22940,8 +23001,10 @@ var(--uc-tab-corner-right-side-svg); } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -22954,8 +23017,10 @@ } @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { fill: color-mix( in srgb, @@ -22964,8 +23029,10 @@ ) !important; /* Hardcoded for compatibility */ } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { fill: color-mix( in srgb, @@ -22980,8 +23047,10 @@ (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "userChrome.compatibility.accent_color") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -22992,8 +23061,10 @@ var(--uc-tab-corner-right-side-svg); } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -23005,7 +23076,7 @@ } } @media (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button .toolbarbutton-icon { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; @@ -23019,7 +23090,7 @@ (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome_legacy"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome"), (-moz-bool-pref: "userChrome.tab.newtab_button_like_tab") and (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button .toolbarbutton-icon { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon { --tab-border-radius: 0px; width: unset !important; padding-inline: 0px !important; diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 4a945a8..831e4b5 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -7350,27 +7350,27 @@ /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { - #tabbrowser-tabs[orient="horizontal"] { + #tabbrowser-tabs:not([orient="vertical"]) { min-height: unset !important; /* Original: var(--tabstrip-min-height) */ } - #tabbrowser-tabs[orient="vertical"] { - --uc-tab-border-bottom-radius: var(--tab-border-radius); - } - .tab-background { + #tabbrowser-tabs:not([orient="vertical"]) .tab-background { border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) var(--uc-tab-border-bottom-radius, 0px) !important; margin-bottom: 0px !important; } - .tab-content { + #tabbrowser-tabs:not([orient="vertical"]) .tab-content { margin-top: 0px; } - .tab-stack { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack { margin-top: 0px !important; margin-bottom: 0px !important; } - #tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { + #tabbrowser-tabs:not([orient="vertical"]) tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { transform: translateY(calc(var(--tab-group-line-thickness) * -1)); } + #tabbrowser-tabs[orient="vertical"] { + --uc-tab-border-bottom-radius: var(--tab-border-radius); + } /* Remove line at Toolbar's top */ #tabbrowser-tabs { z-index: 1 !important; @@ -7484,10 +7484,12 @@ } /*= Multi Selected Color - More Contrast =====================================*/ @supports -moz-bool-pref("userChrome.tab.multi_selected") { - #TabsToolbar { + #TabsToolbar, + #vertical-tabs { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); } - #TabsToolbar[brighttext] { + #TabsToolbar[brighttext], + #vertical-tabs[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } #tabbrowser-tabs:not([movingtab]) @@ -8184,8 +8186,8 @@ position: relative; } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - .tab-stack::before, - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { /* Box Model */ content: ""; display: block; @@ -8202,18 +8204,19 @@ transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { - .tab-stack::before, - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { background-color: var(--tabs-border-color); } } - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - .tab-stack::before, - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { /* Box Model */ @@ -8230,35 +8233,42 @@ background-color: var(--toolbarseparator-color); } @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { - .tab-stack::before, - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { background-color: var(--tabs-border-color); } } - .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab:last-of-type .tab-stack::after { + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) + .tab-stack::before { opacity: var(--tab-separator-opacity); } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type + .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type + .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @@ -8267,25 +8277,27 @@ } } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button:not(:hover, [open])::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { opacity: var(--tab-separator-opacity); } } - #tabbrowser-tabs[orient="horizontal"] + #tabbrowser-tabs:not([orient="vertical"]) tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before, - #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) tab-group[collapsed] + .tabbrowser-tab .tab-stack::before { opacity: 0 !important; } #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( [visuallyselected], [multiselected], @@ -8293,6 +8305,7 @@ ) .tab-stack::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) .tab-stack::before { @@ -8300,13 +8313,16 @@ } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab .tab-stack::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, #navigator-toolbox:not([movingtab]) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { @@ -8314,30 +8330,35 @@ } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + #tabbrowser-tabs:not([orient="vertical"]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-stack::before { opacity: 0 !important; } - :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + :root:not([uidensity="compact"]) + #tabbrowser-tabs:not([orient="vertical"]) + #tabs-newtab-button + > .toolbarbutton-icon { margin-left: 2px; } - :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + :root[uidensity="compact"] #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon { margin-left: 1px; } } /* Animate */ @media (prefers-reduced-motion: no-preference) { - .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ @@ -8345,7 +8366,7 @@ } } /* Latest Tab & New tab margin */ - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { margin-inline-end: 1px !important; } } @@ -8450,7 +8471,7 @@ /*= New tab button - Looks like tab ==========================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { /* Size */ align-items: stretch !important; -moz-box-align: stretch !important; @@ -8458,7 +8479,7 @@ } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { /* Original: margin: 0 0 var(--tabs-navbar-shadow-size) !important => Can't override style. Therefore, we should approach it by bypass. @@ -8483,7 +8504,7 @@ ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { --uc-newtab-position: 0px; --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); @@ -8503,7 +8524,7 @@ background-origin: padding-box; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); } } @@ -8518,14 +8539,18 @@ } @media (-moz-windows-accent-color-in-titlebar) { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */ } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ } @@ -8536,8 +8561,10 @@ "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -8548,8 +8575,10 @@ var(--uc-tab-corner-right-side-svg); } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -8563,8 +8592,10 @@ } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { fill: color-mix( in srgb, @@ -8573,8 +8604,10 @@ ) !important; /* Hardcoded for compatibility */ } :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { fill: color-mix( in srgb, @@ -8592,8 +8625,10 @@ :not([lwtheme]), :not(:-moz-lwtheme) ) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -8607,8 +8642,10 @@ :not([lwtheme]), :not(:-moz-lwtheme) ) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( @@ -8623,7 +8660,7 @@ } } /* '+'Icon */ - #tabs-newtab-button .toolbarbutton-icon { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; @@ -8636,7 +8673,7 @@ ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabs-newtab-button .toolbarbutton-icon { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon { --tab-border-radius: 0px; width: unset !important; padding-inline: 0px !important; diff --git a/src/tab/_connect_to_window.scss b/src/tab/_connect_to_window.scss index be74222..7c593f1 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -1,26 +1,27 @@ -#tabbrowser-tabs[orient="horizontal"] { +#tabbrowser-tabs:not([orient="vertical"]) { min-height: unset !important; /* Original: var(--tabstrip-min-height) */ + + .tab-background { + border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) var(--uc-tab-border-bottom-radius, 0px) !important; + margin-bottom: 0px !important; + } + + .tab-content { + margin-top: 0px; // #892 Consider var(--tab-block-margin) + } + + .tab-stack { + margin-top: 0px !important; + margin-bottom: 0px !important; + } + + tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { + transform: translateY(calc(var(--tab-group-line-thickness) * -1)); + } } #tabbrowser-tabs[orient="vertical"] { --uc-tab-border-bottom-radius: var(--tab-border-radius); } -.tab-background { - border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) var(--uc-tab-border-bottom-radius, 0px) !important; - margin-bottom: 0px !important; -} - -.tab-content { - margin-top: 0px; // #892 Consider var(--tab-block-margin) -} - -.tab-stack { - margin-top: 0px !important; - margin-bottom: 0px !important; -} - -#tabbrowser-tabs[orient="horizontal"] tab-group .tabbrowser-tab:is([selected], [multiselected]) .tab-group-line { - transform: translateY(calc(var(--tab-group-line-thickness) * -1)); -} /* Remove line at Toolbar's top */ #tabbrowser-tabs { diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index 5450971..bd9303b 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -1,4 +1,4 @@ -#tabs-newtab-button { +#tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button { @include Option("userChrome.tab.connect_to_window") { /* Size */ @include BoxAlign("stretch", true); @@ -73,16 +73,16 @@ } @media (-moz-windows-accent-color-in-titlebar) { @include AccentColor { - :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover, - :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, + :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { fill: color-mix( in srgb, $accentTextColor 10%, transparent ) !important; /* Hardcoded for compatibility */ } - :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover:active, - :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { + :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, + :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { fill: color-mix( in srgb, $accentTextColor 15%, @@ -98,14 +98,14 @@ "userChrome.tab.bottom_rounded_corner.chrome", "userChrome.tab.bottom_rounded_corner.edge" ) { - :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover, - :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover, + :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)), var(--uc-tab-corner-right-side-svg); } - :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabs-newtab-button:hover:active, - :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { + :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active, + :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)), var(--uc-tab-corner-right-side-svg); @@ -116,7 +116,7 @@ } /* '+'Icon */ -#tabs-newtab-button .toolbarbutton-icon { +#tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button .toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) diff --git a/src/tab/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss index 0e68081..43402b8 100644 --- a/src/tab/selected_tab/_multi_selected.scss +++ b/src/tab/selected_tab/_multi_selected.scss @@ -1,4 +1,5 @@ -#TabsToolbar { +#TabsToolbar, +#vertical-tabs { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); &[brighttext] { diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index 77402d6..c3acfc7 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -40,42 +40,42 @@ } @include Option("userChrome.tab.newtab_button_like_tab") { - .tab-stack::before, - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { @include _dynamicSeparatorShape; /* More position */ transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); } } @include NotOption("userChrome.tab.newtab_button_like_tab") { - .tab-stack::before, - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before, + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { @include _dynamicSeparatorShape; } - .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab:last-of-type .tab-stack::after { + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } -.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { +#tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { opacity: var(--tab-separator-opacity); } @include Option("userChrome.tabbar.one_liner") { @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @include OneLinerContent { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @@ -83,75 +83,75 @@ } } @include Option("userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button:not(:hover, [open])::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); } } @include NotOption("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { opacity: var(--tab-separator-opacity); } } -#tabbrowser-tabs[orient="horizontal"] tab-group { +#tabbrowser-tabs:not([orient="vertical"]) tab-group { &:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before, &[collapsed] + .tabbrowser-tab .tab-stack::before { opacity: 0 !important; } } -#navigator-toolbox:not([movingtab]) +#navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is([visuallyselected], [multiselected], :hover) .tab-stack::before, -#navigator-toolbox:not([movingtab]) +#navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) .tab-stack::before { opacity: 0 !important; } @include Option("userChrome.tab.newtab_button_like_tab") { - #navigator-toolbox:not([movingtab]) + #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab .tab-stack::before, - #navigator-toolbox:not([movingtab]) + #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, /* Legacy - v103 */ - #navigator-toolbox:not([movingtab]) + #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { opacity: 0 !important; } } @include NotOption("userChrome.tab.newtab_button_like_tab") { - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-stack::before { opacity: 0 !important; } - :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + :root:not([uidensity="compact"]) #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon { margin-left: 2px; } - :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + :root[uidensity="compact"] #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button > .toolbarbutton-icon { margin-left: 1px; } } /* Animate */ @include Animate { - .tab-stack::before { + #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @include Option("userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button::before { + #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } @include NotOption("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox:not([overflowing]) + #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ @@ -160,6 +160,6 @@ } /* Latest Tab & New tab margin */ -#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { +#tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { margin-inline-end: 1px !important; } From 303b758dd72a2e496f039b7e31f631b4edc8753c Mon Sep 17 00:00:00 2001 From: irhdevel <121326808+irhdevel@users.noreply.github.com> Date: Sat, 10 May 2025 23:45:51 +0900 Subject: [PATCH 6/9] Fix: Tab - Supernova Contextline Position/Animation in container-tabs - fixed contextline's position is lower in container-tabs. - The background-color of contextline is now synced with Firefox theme or OS accent color. - Contextline is currently represented using pseudo-elements for animation and code integration in container-tabs. - Added new option `userChrome.tab.contextline_blue_accent` to avoid the contextline color becoming the same as the background in some themes. --- css/leptonChrome.css | 138 ++++++++++-------- css/leptonChromeESR.css | 70 +++++---- src/tab/_selected_tab.scss | 18 +++ .../_supernova_like_contextline.scss | 68 ++++----- 4 files changed, 165 insertions(+), 129 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 341c952..22aa1ed 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7615,52 +7615,49 @@ margin: unset !important; } } +/*= Selected Tab - Supernova like contextline ===================================*/ @media not -moz-pref("userChrome.tab.photon_like_contextline") { @media -moz-pref("userChrome.tab.supernova_like_contextline") { - .tab-context-line { + /* context line styles */ + tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line { display: inline-flex !important; display: -moz-inline-box !important; + } + tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before { + content: ""; height: 1px !important; border-radius: 9999px !important; transform: translateY(5px); margin-top: -1px !important; margin-left: 5px; margin-right: 5px; + width: 100%; } - /* Override container tab style */ + /* Override container-tab style */ tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - margin-top: 3px !important; - margin-left: 5px !important; - margin-right: 5px !important; - } - tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected]) - > .tab-stack - > .tab-background - > .tab-context-line { - opacity: 0; - transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important; + margin: unset !important; } + /* 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[lwtheme-mozlightdark][lwthemetextcolor="bright"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { --tab-line-color: #45a1ff; } - .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { - background-color: var(--tab-line-color, #45a1ff) !important; + .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { + background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important; } /* Set the active effect */ - tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line { - margin-left: 6px !important; - margin-right: 6px !important; - } - .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line { - background: #217ddb !important; + .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before { + filter: brightness(70%); margin-left: 6px; margin-right: 6px; } /* Set the hover effect */ - .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line::before { background-color: rgba(0, 0, 0, 0.2) !important; opacity: 1 !important; } @@ -7668,20 +7665,16 @@ .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background - > .tab-context-line { - background-color: rgba(255, 255, 255, 0.3137254902) !important; + > .tab-context-line::before { + background-color: rgba(255, 255, 255, 0.2) !important; } /* Animation */ @media (prefers-reduced-motion: no-preference) { - .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { - animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1); - } - /* Animation for container tab can't have width change... */ - tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected]) + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background - > .tab-context-line { - opacity: 1; + > .tab-context-line::before { + animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1); } } /* Animation for hover effect */ @@ -7724,6 +7717,23 @@ > .tab-background { box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ } + @media -moz-pref("userChrome.tab.contextline_blue_accent") { + #tabbrowser-tabs .tab-context-line { + --tab-line-color: #45a1ff !important; + } + } + @media not -moz-pref("userChrome.tab.contextline_blue_accent") { + @media (-moz-gtk-csd-available) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line { + --tab-line-color: AccentColor !important; /* -moz-accent-color */ + } + @media -moz-pref("userChrome.compatibility.accent_color") { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line { + --tab-line-color: Highlight !important; /* -moz-accent-color */ + } + } + } + } } } /*= Unselected Tab - Divide line =============================================*/ @@ -22453,51 +22463,48 @@ margin: unset !important; } } +/*= Selected Tab - Supernova like contextline ===================================*/ @media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") { - .tab-context-line { + /* context line styles */ + tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line { display: inline-flex !important; display: -moz-inline-box !important; + } + tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before { + content: ""; height: 1px !important; border-radius: 9999px !important; transform: translateY(5px); margin-top: -1px !important; margin-left: 5px; margin-right: 5px; + width: 100%; } - /* Override container tab style */ + /* Override container-tab style */ tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - margin-top: 3px !important; - margin-left: 5px !important; - margin-right: 5px !important; - } - tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected]) - > .tab-stack - > .tab-background - > .tab-context-line { - opacity: 0; - transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important; + margin: unset !important; } + /* 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[lwtheme-mozlightdark][lwthemetextcolor="bright"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { --tab-line-color: #45a1ff; } - .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { - background-color: var(--tab-line-color, #45a1ff) !important; + .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { + background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important; } /* Set the active effect */ - tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line { - margin-left: 6px !important; - margin-right: 6px !important; - } - .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line { - background: #217ddb !important; + .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before { + filter: brightness(70%); margin-left: 6px; margin-right: 6px; } /* Set the hover effect */ - .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line::before { background-color: rgba(0, 0, 0, 0.2) !important; opacity: 1 !important; } @@ -22505,8 +22512,8 @@ .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background - > .tab-context-line { - background-color: rgba(255, 255, 255, 0.3137254902) !important; + > .tab-context-line::before { + background-color: rgba(255, 255, 255, 0.2) !important; } /* Animation */ /* Animation for hover effect */ @@ -22515,15 +22522,11 @@ /* Remove side's background color border */ } @media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (prefers-reduced-motion: no-preference) { - .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { - animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1); - } - /* Animation for container tab can't have width change... */ - tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected]) + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background - > .tab-context-line { - opacity: 1; + > .tab-context-line::before { + animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1); } } @media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") { @@ -22572,6 +22575,21 @@ box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ } } +@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (-moz-bool-pref: "userChrome.tab.contextline_blue_accent") { + #tabbrowser-tabs .tab-context-line { + --tab-line-color: #45a1ff !important; + } +} +@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (not (-moz-bool-pref: "userChrome.tab.contextline_blue_accent")) and (-moz-gtk-csd-available) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line { + --tab-line-color: AccentColor !important; /* -moz-accent-color */ + } +} +@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (not (-moz-bool-pref: "userChrome.tab.contextline_blue_accent")) and (-moz-gtk-csd-available) and (-moz-bool-pref: "userChrome.compatibility.accent_color") { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line { + --tab-line-color: Highlight !important; /* -moz-accent-color */ + } +} /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 831e4b5..18012a2 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -8057,52 +8057,49 @@ margin: unset !important; } } +/*= Selected Tab - Supernova like contextline ===================================*/ @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") { @supports -moz-bool-pref("userChrome.tab.supernova_like_contextline") { - .tab-context-line { + /* context line styles */ + tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line { display: inline-flex !important; display: -moz-inline-box !important; + } + tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before { + content: ""; height: 1px !important; border-radius: 9999px !important; transform: translateY(5px); margin-top: -1px !important; margin-left: 5px; margin-right: 5px; + width: 100%; } - /* Override container tab style */ + /* Override container-tab style */ tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - margin-top: 3px !important; - margin-left: 5px !important; - margin-right: 5px !important; - } - tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected]) - > .tab-stack - > .tab-background - > .tab-context-line { - opacity: 0; - transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important; + margin: unset !important; } + /* 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[lwtheme-mozlightdark][lwthemetextcolor="bright"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { --tab-line-color: #45a1ff; } - .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { - background-color: var(--tab-line-color, #45a1ff) !important; + .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { + background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important; } /* Set the active effect */ - tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line { - margin-left: 6px !important; - margin-right: 6px !important; - } - .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line { - background: #217ddb !important; + .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before { + filter: brightness(70%); margin-left: 6px; margin-right: 6px; } /* Set the hover effect */ - .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line::before { background-color: rgba(0, 0, 0, 0.2) !important; opacity: 1 !important; } @@ -8110,20 +8107,16 @@ .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background - > .tab-context-line { - background-color: rgba(255, 255, 255, 0.3137254902) !important; + > .tab-context-line::before { + background-color: rgba(255, 255, 255, 0.2) !important; } /* Animation */ @media (prefers-reduced-motion: no-preference) { - .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { - animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1); - } - /* Animation for container tab can't have width change... */ - tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected]) + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background - > .tab-context-line { - opacity: 1; + > .tab-context-line::before { + animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1); } } /* Animation for hover effect */ @@ -8166,6 +8159,23 @@ > .tab-background { box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ } + @supports -moz-bool-pref("userChrome.tab.contextline_blue_accent") { + #tabbrowser-tabs .tab-context-line { + --tab-line-color: #45a1ff !important; + } + } + @supports not -moz-bool-pref("userChrome.tab.contextline_blue_accent") { + @media (-moz-gtk-csd-available) { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line { + --tab-line-color: AccentColor !important; /* -moz-accent-color */ + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line { + --tab-line-color: Highlight !important; /* -moz-accent-color */ + } + } + } + } } } /*= Unselected Tab - Divide line =============================================*/ diff --git a/src/tab/_selected_tab.scss b/src/tab/_selected_tab.scss index 774b474..961d035 100644 --- a/src/tab/_selected_tab.scss +++ b/src/tab/_selected_tab.scss @@ -68,8 +68,26 @@ @import "selected_tab/photon_like_contextline"; } +/*= Selected Tab - Supernova like contextline ===================================*/ @include NotOption("userChrome.tab.photon_like_contextline") { @include Option("userChrome.tab.supernova_like_contextline") { @import "selected_tab/supernova_like_contextline"; + + @include Option("userChrome.tab.contextline_blue_accent") { + #tabbrowser-tabs .tab-context-line { + --tab-line-color: #45a1ff !important; + } + } + @include NotOption("userChrome.tab.contextline_blue_accent") { + @include OS("linux") { + @include not_lwtheme { + #tabbrowser-tabs .tab-context-line { + @include AccentColor("Highlight") { + --tab-line-color: #{$accentColor} !important; /* -moz-accent-color */ + } + } + } + } + } } } diff --git a/src/tab/selected_tab/_supernova_like_contextline.scss b/src/tab/selected_tab/_supernova_like_contextline.scss index dbd0265..b704843 100644 --- a/src/tab/selected_tab/_supernova_like_contextline.scss +++ b/src/tab/selected_tab/_supernova_like_contextline.scss @@ -1,50 +1,44 @@ -.tab-context-line { +/* context line styles */ +tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line { @include InlineBox(true); - height: 1px !important; - border-radius: 9999px !important; - transform: translateY(5px); - margin-top: -1px !important; - margin-left: 5px; - margin-right: 5px; + &::before { + content: ""; + height: 1px !important; + border-radius: 9999px !important; + transform: translateY(5px); + margin-top: -1px !important; + margin-left: 5px; + margin-right: 5px; + width: 100%; + } } -/* Override container tab style */ +/* Override container-tab style */ tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - margin-top: 3px !important; - margin-left: 5px !important; - margin-right: 5px !important; -} - -tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected]) - > .tab-stack - > .tab-background - > .tab-context-line { - opacity: 0; - transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important; + margin: unset !important; } +/* selected tab style */ #{built-in-light-theme()} .tab-context-line, #{built-in-dark-theme()} .tab-context-line { --tab-line-color: #45a1ff; } -.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { - background-color: var(--tab-line-color, #45a1ff) !important; +.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { + background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important; } /* Set the active effect */ -tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line { - margin-left: 6px !important; - margin-right: 6px !important; -} - -.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line { - background: #217ddb !important; +.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before { + filter: brightness(70%); margin-left: 6px; margin-right: 6px; } /* Set the hover effect */ -.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { +.tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line::before { background-color: rgba(0, 0, 0, 0.2) !important; opacity: 1 !important; } @@ -53,22 +47,18 @@ tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > . .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background - > .tab-context-line { - background-color: #ffffff50 !important; + > .tab-context-line::before { + background-color: rgba(255, 255, 255, 0.2) !important; } + /* Animation */ @media (prefers-reduced-motion: no-preference) { - .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { - animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1); - } - - /* Animation for container tab can't have width change... */ - tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected]) + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background - > .tab-context-line { - opacity: 1; + > .tab-context-line::before { + animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1); } } From b8b036c0dd30c15304e9de7f9793119280c72730 Mon Sep 17 00:00:00 2001 From: irhdevel <121326808+irhdevel@users.noreply.github.com> Date: Sun, 11 May 2025 01:02:03 +0900 Subject: [PATCH 7/9] Fix: background of supernova contextline on hover is too light --- css/leptonChrome.css | 8 ++++---- css/leptonChromeESR.css | 4 ++-- src/tab/selected_tab/_supernova_like_contextline.scss | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 22aa1ed..25f149e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7658,7 +7658,7 @@ > .tab-stack > .tab-background > .tab-context-line::before { - background-color: rgba(0, 0, 0, 0.2) !important; + background-color: rgba(0, 0, 0, 0.4) !important; opacity: 1 !important; } #TabsToolbar[brighttext] @@ -7666,7 +7666,7 @@ > .tab-stack > .tab-background > .tab-context-line::before { - background-color: rgba(255, 255, 255, 0.2) !important; + background-color: rgba(255, 255, 255, 0.4) !important; } /* Animation */ @media (prefers-reduced-motion: no-preference) { @@ -22505,7 +22505,7 @@ > .tab-stack > .tab-background > .tab-context-line::before { - background-color: rgba(0, 0, 0, 0.2) !important; + background-color: rgba(0, 0, 0, 0.4) !important; opacity: 1 !important; } #TabsToolbar[brighttext] @@ -22513,7 +22513,7 @@ > .tab-stack > .tab-background > .tab-context-line::before { - background-color: rgba(255, 255, 255, 0.2) !important; + background-color: rgba(255, 255, 255, 0.4) !important; } /* Animation */ /* Animation for hover effect */ diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 18012a2..ef9e5e4 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -8100,7 +8100,7 @@ > .tab-stack > .tab-background > .tab-context-line::before { - background-color: rgba(0, 0, 0, 0.2) !important; + background-color: rgba(0, 0, 0, 0.4) !important; opacity: 1 !important; } #TabsToolbar[brighttext] @@ -8108,7 +8108,7 @@ > .tab-stack > .tab-background > .tab-context-line::before { - background-color: rgba(255, 255, 255, 0.2) !important; + background-color: rgba(255, 255, 255, 0.4) !important; } /* Animation */ @media (prefers-reduced-motion: no-preference) { diff --git a/src/tab/selected_tab/_supernova_like_contextline.scss b/src/tab/selected_tab/_supernova_like_contextline.scss index b704843..32e0830 100644 --- a/src/tab/selected_tab/_supernova_like_contextline.scss +++ b/src/tab/selected_tab/_supernova_like_contextline.scss @@ -39,7 +39,7 @@ tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-con > .tab-stack > .tab-background > .tab-context-line::before { - background-color: rgba(0, 0, 0, 0.2) !important; + background-color: rgba(0, 0, 0, 0.4) !important; opacity: 1 !important; } @@ -48,7 +48,7 @@ tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-con > .tab-stack > .tab-background > .tab-context-line::before { - background-color: rgba(255, 255, 255, 0.2) !important; + background-color: rgba(255, 255, 255, 0.4) !important; } From 87603c3873682e6fecb1035fd3019311037c52a8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 May 2025 05:10:03 +0900 Subject: [PATCH 8/9] Fix: Icons - Profile icons --- css/leptonChrome.css | 66 ++++++++++++++++++++++++++++++ css/leptonChromeESR.css | 31 ++++++++++++++ src/icons/_global_menu.scss | 5 +++ src/icons/_global_menubar.scss | 5 +++ src/icons/_panel.scss | 14 +++++++ src/icons/layout/_menu_common.scss | 2 +- 6 files changed, 122 insertions(+), 1 deletion(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 25f149e..3e49b97 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -11477,6 +11477,17 @@ background-size: 16px !important; background-image: var(--avatar-image-url) !important; } + #appMenu-profiles-button > image, + #appMenu-empty-profiles-button > image { + fill: transparent !important; + } + #appMenu-empty-profiles-button, + #PanelUI-fxa-menu-empty-profiles-button { + list-style-image: url("chrome://browser/content/profiles/assets/16_heart.svg"); + } + #profiles-manage-profiles-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + } #new-tab-button { list-style-image: var(--uc-new-tab-icon) !important; } @@ -12058,6 +12069,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12071,6 +12083,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12144,6 +12157,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12157,6 +12171,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12239,6 +12254,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12252,6 +12268,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12308,6 +12325,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12321,6 +12339,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12411,6 +12430,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12424,6 +12444,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -13573,6 +13594,10 @@ #bookmarksMenu { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } + #profiles-menu:is(menu) { + fill: transparent !important; + --menuitem-image: url("chrome://browser/content/profiles/assets/16_heart.svg"); + } #tools-menu { --menuitem-image: url("../icons/toolbox.svg"); } @@ -13792,6 +13817,10 @@ #menu_searchBookmarks { --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); } + /*= menu_ProfilesPopup =======================================================*/ + #menu_manageProfiles { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } /*= menu_ToolsPopup ==========================================================*/ #menu_openDownloads { --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg"); @@ -26789,6 +26818,23 @@ background-image: var(--avatar-image-url) !important; } } +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #appMenu-profiles-button > image, + #appMenu-empty-profiles-button > image { + fill: transparent !important; + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #appMenu-empty-profiles-button, + #PanelUI-fxa-menu-empty-profiles-button { + list-style-image: url("chrome://browser/content/profiles/assets/16_heart.svg"); + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #profiles-manage-profiles-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + } +} @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { #new-tab-button { list-style-image: var(--uc-new-tab-icon) !important; @@ -27557,6 +27603,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27570,6 +27617,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27662,6 +27710,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27675,6 +27724,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27756,6 +27806,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27769,6 +27820,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27821,6 +27873,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27834,6 +27887,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27918,6 +27972,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27931,6 +27986,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -29531,6 +29587,10 @@ #bookmarksMenu { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } + #profiles-menu:is(menu) { + fill: transparent !important; + --menuitem-image: url("chrome://browser/content/profiles/assets/16_heart.svg"); + } #tools-menu { --menuitem-image: url("../icons/toolbox.svg"); } @@ -29583,6 +29643,7 @@ /*= goPopup ==================================================================*/ /* sub menu */ /*= bookmarksMenuPopup =======================================================*/ + /*= menu_ProfilesPopup =======================================================*/ /*= menu_ToolsPopup ==========================================================*/ /* menuWebDeveloperPopup sub menu */ /*= windowPopup ==============================================================*/ @@ -29853,6 +29914,11 @@ --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); } } +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #menu_manageProfiles { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } +} @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { #menu_openDownloads { --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg"); diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index ef9e5e4..9edecc2 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -11959,6 +11959,17 @@ background-size: 16px !important; background-image: var(--avatar-image-url) !important; } + #appMenu-profiles-button > image, + #appMenu-empty-profiles-button > image { + fill: transparent !important; + } + #appMenu-empty-profiles-button, + #PanelUI-fxa-menu-empty-profiles-button { + list-style-image: url("chrome://browser/content/profiles/assets/16_heart.svg"); + } + #profiles-manage-profiles-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + } #new-tab-button { list-style-image: var(--uc-new-tab-icon) !important; } @@ -12540,6 +12551,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12553,6 +12565,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12626,6 +12639,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12639,6 +12653,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12724,6 +12739,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12737,6 +12753,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12800,6 +12817,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12813,6 +12831,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12986,6 +13005,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12999,6 +13019,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -13072,6 +13093,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -13085,6 +13107,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -14249,6 +14272,10 @@ #bookmarksMenu { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } + #profiles-menu:is(menu) { + fill: transparent !important; + --menuitem-image: url("chrome://browser/content/profiles/assets/16_heart.svg"); + } #tools-menu { --menuitem-image: url("../icons/toolbox.svg"); } @@ -14468,6 +14495,10 @@ #menu_searchBookmarks { --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); } + /*= menu_ProfilesPopup =======================================================*/ + #menu_manageProfiles { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } /*= menu_ToolsPopup ==========================================================*/ #menu_openDownloads { --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg"); diff --git a/src/icons/_global_menu.scss b/src/icons/_global_menu.scss index fa0de58..12eaab4 100644 --- a/src/icons/_global_menu.scss +++ b/src/icons/_global_menu.scss @@ -238,6 +238,11 @@ menu.share-tab-url-item { #menu_mobileBookmarks { } +/*= menu_ProfilesPopup =======================================================*/ +#menu_manageProfiles { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} + /*= menu_ToolsPopup ==========================================================*/ #menu_openDownloads { --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg"); diff --git a/src/icons/_global_menubar.scss b/src/icons/_global_menubar.scss index 4e21a5c..ed59975 100644 --- a/src/icons/_global_menubar.scss +++ b/src/icons/_global_menubar.scss @@ -14,6 +14,11 @@ #bookmarksMenu { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } +#profiles-menu:is(menu) { + // Using stroke + fill: transparent !important; + --menuitem-image: url("chrome://browser/content/profiles/assets/16_heart.svg"); +} #tools-menu { --menuitem-image: url("../icons/toolbox.svg"); } diff --git a/src/icons/_panel.scss b/src/icons/_panel.scss index 638d1cf..8c77c78 100644 --- a/src/icons/_panel.scss +++ b/src/icons/_panel.scss @@ -29,6 +29,20 @@ background-image: var(--avatar-image-url) !important; } +#appMenu-profiles-button > image, +#appMenu-empty-profiles-button > image { + // Using stroke + fill: transparent !important; +} +#appMenu-empty-profiles-button, +#PanelUI-fxa-menu-empty-profiles-button { + list-style-image: url("chrome://browser/content/profiles/assets/16_heart.svg"); +} + +#profiles-manage-profiles-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + #new-tab-button { list-style-image: var(--uc-new-tab-icon) !important; } diff --git a/src/icons/layout/_menu_common.scss b/src/icons/layout/_menu_common.scss index ffa5d98..63ff621 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_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)"; $_nestedPopupIconMenus: selector.nest( $_nestedPopupIcon, From 392556235f1ec732effd4808cf5fd29478f3ec00 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 May 2025 05:25:00 +0900 Subject: [PATCH 9/9] CREDIT - Update sponsors --- CREDITS | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CREDITS b/CREDITS index ef9df64..fd2bc4a 100644 --- a/CREDITS +++ b/CREDITS @@ -92,6 +92,9 @@ W: https://github.com/Ygg01 N: ZachKnife1 W: https://github.com/ZachKnife1 +N: Zachary Schuessler +W: https://github.com/zschuessler + ---------- Contributors