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 diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 484118c..3e49b97 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] { @@ -6902,24 +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: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; @@ -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; @@ -7007,16 +7048,24 @@ } /*= 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]) > #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; @@ -7566,73 +7615,66 @@ 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 { - background-color: rgba(0, 0, 0, 0.2) !important; + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line::before { + background-color: rgba(0, 0, 0, 0.4) !important; opacity: 1 !important; } #TabsToolbar[brighttext] .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.4) !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 */ @@ -7675,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 =============================================*/ @@ -7695,8 +7754,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; @@ -7713,18 +7772,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 */ @@ -7741,35 +7801,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)); } @@ -7778,18 +7845,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:not([orient="vertical"]) + tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + + .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], @@ -7797,6 +7873,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 { @@ -7804,13 +7881,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 { @@ -7818,30 +7898,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) */ @@ -7849,7 +7934,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; } } @@ -7954,7 +8039,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; @@ -7962,7 +8047,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. @@ -7983,7 +8068,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); @@ -8003,7 +8088,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)); } } @@ -8018,22 +8103,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( @@ -8044,8 +8135,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( @@ -8059,8 +8152,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, @@ -8069,8 +8164,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, @@ -8084,8 +8181,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( @@ -8099,8 +8198,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( @@ -8115,7 +8216,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; @@ -8124,7 +8225,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; @@ -8425,13 +8526,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 +8542,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]) @@ -11353,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; } @@ -11934,6 +12069,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -11947,6 +12083,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12020,6 +12157,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12033,6 +12171,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12115,6 +12254,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12128,6 +12268,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12184,6 +12325,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12197,6 +12339,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12287,6 +12430,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12300,6 +12444,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -13449,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"); } @@ -13668,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"); @@ -18402,6 +18555,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, @@ -18411,6 +18573,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; @@ -21495,24 +21662,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: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; @@ -21574,6 +21744,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) */ @@ -21595,6 +21778,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; @@ -21604,16 +21800,24 @@ } /*= 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]) > #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; @@ -22288,60 +22492,57 @@ 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 { - background-color: rgba(0, 0, 0, 0.2) !important; + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line::before { + background-color: rgba(0, 0, 0, 0.4) !important; opacity: 1 !important; } #TabsToolbar[brighttext] .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.4) !important; } /* Animation */ /* Animation for hover effect */ @@ -22350,15 +22551,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") { @@ -22407,6 +22604,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") { @@ -22428,8 +22640,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; @@ -22447,19 +22659,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 */ @@ -22477,55 +22690,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:not([orient="vertical"]) + tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + + .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], @@ -22533,6 +22764,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 { @@ -22541,13 +22773,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 { @@ -22555,37 +22790,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; } } @@ -22696,7 +22933,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; @@ -22704,7 +22941,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. @@ -22730,7 +22967,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); @@ -22759,7 +22996,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)); } } @@ -22775,14 +23012,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 */ } @@ -22793,8 +23034,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( @@ -22805,8 +23048,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( @@ -22819,8 +23064,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, @@ -22829,8 +23076,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, @@ -22845,8 +23094,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( @@ -22857,8 +23108,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( @@ -22870,7 +23123,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; @@ -22884,7 +23137,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; @@ -23200,13 +23453,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 +23472,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 { @@ -26538,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; @@ -27306,6 +27603,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27319,6 +27617,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27411,6 +27710,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27424,6 +27724,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27505,6 +27806,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27518,6 +27820,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27570,6 +27873,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27583,6 +27887,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27667,6 +27972,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -27680,6 +27986,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -29280,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"); } @@ -29332,6 +29643,7 @@ /*= goPopup ==================================================================*/ /* sub menu */ /*= bookmarksMenuPopup =======================================================*/ + /*= menu_ProfilesPopup =======================================================*/ /*= menu_ToolsPopup ==========================================================*/ /* menuWebDeveloperPopup sub menu */ /*= windowPopup ==============================================================*/ @@ -29602,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 510cd38..9edecc2 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] { @@ -7338,24 +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: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; @@ -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; @@ -7443,16 +7484,24 @@ } /*= 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]) > #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; @@ -8008,73 +8057,66 @@ 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 { - background-color: rgba(0, 0, 0, 0.2) !important; + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line::before { + background-color: rgba(0, 0, 0, 0.4) !important; opacity: 1 !important; } #TabsToolbar[brighttext] .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.4) !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 */ @@ -8117,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 =============================================*/ @@ -8137,8 +8196,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; @@ -8155,18 +8214,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 */ @@ -8183,35 +8243,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)); } @@ -8220,18 +8287,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:not([orient="vertical"]) + tab-group:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + + .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], @@ -8239,6 +8315,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 { @@ -8246,13 +8323,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 { @@ -8260,30 +8340,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) */ @@ -8291,7 +8376,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; } } @@ -8396,7 +8481,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; @@ -8404,7 +8489,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. @@ -8429,7 +8514,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); @@ -8449,7 +8534,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)); } } @@ -8464,14 +8549,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 */ } @@ -8482,8 +8571,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( @@ -8494,8 +8585,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( @@ -8509,8 +8602,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, @@ -8519,8 +8614,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, @@ -8538,8 +8635,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( @@ -8553,8 +8652,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( @@ -8569,7 +8670,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; @@ -8582,7 +8683,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; @@ -8883,13 +8984,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 +9000,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]) @@ -11835,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; } @@ -12416,6 +12551,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12429,6 +12565,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12502,6 +12639,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12515,6 +12653,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12600,6 +12739,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12613,6 +12753,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12676,6 +12817,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12689,6 +12831,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12862,6 +13005,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12875,6 +13019,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12948,6 +13093,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -12961,6 +13107,7 @@ #goPopup, #historyMenuPopup, #bookmarksMenuPopup, + #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, @@ -14125,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"); } @@ -14344,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/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 @@ + + + + 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" 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, 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..7c593f1 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -1,22 +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; -} /* Remove line at Toolbar's top */ #tabbrowser-tabs { 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/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/_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..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] { @@ -10,6 +11,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/selected_tab/_supernova_like_contextline.scss b/src/tab/selected_tab/_supernova_like_contextline.scss index dbd0265..32e0830 100644 --- a/src/tab/selected_tab/_supernova_like_contextline.scss +++ b/src/tab/selected_tab/_supernova_like_contextline.scss @@ -1,51 +1,45 @@ -.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 { - background-color: rgba(0, 0, 0, 0.2) !important; +.tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line::before { + background-color: rgba(0, 0, 0, 0.4) !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.4) !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); } } 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]) { diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index 15292a9..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,68 +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); } } -#navigator-toolbox:not([movingtab]) +#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]) #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) */ @@ -153,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; }