mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 02:30:54 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge master into proton-style
Some checks failed
CI / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
github-actions[bot] 2025-05-11 20:29:17 +00:00 • committed by GitHub
commit 6f50e027c3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 909 additions and 308 deletions
Download patch file Download diff file Expand all files Collapse all files

3
CREDITS
View file

@ -92,6 +92,9 @@ W: https://github.com/Ygg01
N: ZachKnife1 N: ZachKnife1
W: https://github.com/ZachKnife1 W: https://github.com/ZachKnife1
N: Zachary Schuessler
W: https://github.com/zschuessler
---------- ----------
Contributors Contributors

585
css/leptonChrome.css generated
View file

File diff suppressed because it is too large Load diff

289
css/leptonChromeESR.css generated
View file

@ -4562,6 +4562,15 @@
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
max-width: var(--tab-max-width) !important; /* Original: 225px */ 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 */ /* neighbouring tabs should "pinch" together */
:root[customizing="true"] #tabbrowser-arrowscrollbox-periphery, :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
#tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"]) #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
@ -4569,6 +4578,9 @@
> #tabbrowser-arrowscrollbox-periphery { > #tabbrowser-arrowscrollbox-periphery {
min-width: 3px; 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 not -moz-bool-pref("userChrome.tab.photon_like_padding") {
@supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") {
#TabsToolbar:not([multibar]) .tabbrowser-tab[pinned] { #TabsToolbar:not([multibar]) .tabbrowser-tab[pinned] {
@ -7338,24 +7350,27 @@
/** Tab UI ********************************************************************/ /** Tab UI ********************************************************************/
/*= Tab - Connect to window ==============================================*/ /*= Tab - Connect to window ==============================================*/
@supports -moz-bool-pref("userChrome.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) */ min-height: unset !important; /* Original: var(--tabstrip-min-height) */
} }
#tabbrowser-tabs[orient="vertical"] { #tabbrowser-tabs:not([orient="vertical"]) .tab-background {
--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) 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; var(--uc-tab-border-bottom-radius, 0px) !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
.tab-content { #tabbrowser-tabs:not([orient="vertical"]) .tab-content {
margin-top: 0px; margin-top: 0px;
} }
.tab-stack { #tabbrowser-tabs:not([orient="vertical"]) .tab-stack {
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 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 */ /* Remove line at Toolbar's top */
#tabbrowser-tabs { #tabbrowser-tabs {
z-index: 1 !important; z-index: 1 !important;
@ -7413,6 +7428,19 @@
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
> .tabbrowser-tab > .tabbrowser-tab
> .tab-stack > .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] { > .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) /* 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-arrowscrollbox
> .tabbrowser-tab > .tabbrowser-tab
> .tab-stack > .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] { > .tab-background[selected] {
background-image: linear-gradient(transparent, transparent), background-image: linear-gradient(transparent, transparent),
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important; linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important;
@ -7443,16 +7484,24 @@
} }
/*= Multi Selected Color - More Contrast =====================================*/ /*= Multi Selected Color - More Contrast =====================================*/
@supports -moz-bool-pref("userChrome.tab.multi_selected") { @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)); --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)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
} }
#tabbrowser-tabs:not([movingtab]) #tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
> .tabbrowser-tab > .tabbrowser-tab
> .tab-stack > .tab-stack
> .tab-background[multiselected]:not([selected]),
#tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox
> tab-group
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]) { > .tab-background[multiselected]:not([selected]) {
/* Original: /* Original:
background-attachment: scroll, scroll, fixed; background-attachment: scroll, scroll, fixed;
@ -8008,73 +8057,66 @@
margin: unset !important; margin: unset !important;
} }
} }
/*= Selected Tab - Supernova like contextline ===================================*/
@supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") { @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") {
@supports -moz-bool-pref("userChrome.tab.supernova_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: inline-flex !important;
display: -moz-inline-box !important; display: -moz-inline-box !important;
}
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before {
content: "";
height: 1px !important; height: 1px !important;
border-radius: 9999px !important; border-radius: 9999px !important;
transform: translateY(5px); transform: translateY(5px);
margin-top: -1px !important; margin-top: -1px !important;
margin-left: 5px; margin-left: 5px;
margin-right: 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 { tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
margin-top: 3px !important; margin: unset !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;
} }
/* selected tab style */
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), :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[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line,
:root[lwtheme-mozlightdark][lwthemetextcolor="bright"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
--tab-line-color: #45a1ff; --tab-line-color: #45a1ff;
} }
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
background-color: var(--tab-line-color, #45a1ff) !important; background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
} }
/* Set the active effect */ /* Set the active effect */
tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line { .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
margin-left: 6px !important; filter: brightness(70%);
margin-right: 6px !important;
}
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
background: #217ddb !important;
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
} }
/* Set the hover effect */ /* Set the hover effect */
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { .tabbrowser-tab:hover:not([selected="true"], [multiselected])
background-color: rgba(0, 0, 0, 0.2) !important; > .tab-stack
> .tab-background
> .tab-context-line::before {
background-color: rgba(0, 0, 0, 0.4) !important;
opacity: 1 !important; opacity: 1 !important;
} }
#TabsToolbar[brighttext] #TabsToolbar[brighttext]
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) .tabbrowser-tab:hover:not([selected="true"], [multiselected])
> .tab-stack > .tab-stack
> .tab-background > .tab-background
> .tab-context-line { > .tab-context-line::before {
background-color: rgba(255, 255, 255, 0.3137254902) !important; background-color: rgba(255, 255, 255, 0.4) !important;
} }
/* Animation */ /* Animation */
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { .tabbrowser-tab:hover:not([selected="true"], [multiselected])
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])
> .tab-stack > .tab-stack
> .tab-background > .tab-background
> .tab-context-line { > .tab-context-line::before {
opacity: 1; animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
} }
} }
/* Animation for hover effect */ /* Animation for hover effect */
@ -8117,6 +8159,23 @@
> .tab-background { > .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) */ 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 =============================================*/ /*= Unselected Tab - Divide line =============================================*/
@ -8137,8 +8196,8 @@
position: relative; position: relative;
} }
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
/* Box Model */ /* Box Model */
content: ""; content: "";
display: block; display: block;
@ -8155,17 +8214,18 @@
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
@supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
background-color: var(--tabs-border-color); 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))); left: calc(50% - (8px + var(--toolbarbutton-inner-padding)));
} }
} }
@supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
@ -8183,35 +8243,42 @@
background-color: var(--toolbarseparator-color); background-color: var(--toolbarseparator-color);
} }
@supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
background-color: var(--tabs-border-color); 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; 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; right: 0;
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; 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); opacity: var(--tab-separator-opacity);
} }
@supports -moz-bool-pref("userChrome.tabbar.one_liner") { @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.tabbar_first") {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @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); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
} }
} }
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) { @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); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); 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") { @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); opacity: var(--tab-separator-opacity);
} }
} }
@supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
opacity: var(--tab-separator-opacity); 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]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is( .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is(
[visuallyselected], [visuallyselected],
[multiselected], [multiselected],
@ -8239,6 +8315,7 @@
) )
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox[overflowing] #tabbrowser-arrowscrollbox[overflowing]
tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden])))
.tab-stack::before { .tab-stack::before {
@ -8246,13 +8323,16 @@
} }
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("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:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .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) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before, ~ #tabs-newtab-button::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery ~ #tabbrowser-arrowscrollbox-periphery
#tabs-newtab-button::before { #tabs-newtab-button::before {
@ -8260,29 +8340,34 @@
} }
} }
@supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-tabs:not([orient="vertical"])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab:not([visuallyselected]) + .tabbrowser-tab:not([visuallyselected])
.tab-stack::before { .tab-stack::before {
opacity: 0 !important; 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; 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; margin-left: 1px;
} }
} }
/* Animate */ /* Animate */
@media (prefers-reduced-motion: no-preference) { @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) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @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) */ 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") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
@ -8291,7 +8376,7 @@
} }
} }
/* Latest Tab & New tab margin */ /* 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; margin-inline-end: 1px !important;
} }
} }
@ -8396,7 +8481,7 @@
/*= New tab button - Looks like tab ==========================================*/ /*= New tab button - Looks like tab ==========================================*/
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
@supports -moz-bool-pref("userChrome.tab.connect_to_window") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
/* Size */ /* Size */
align-items: stretch !important; align-items: stretch !important;
-moz-box-align: stretch !important; -moz-box-align: stretch !important;
@ -8404,7 +8489,7 @@
} }
} }
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
/* Original: /* Original:
margin: 0 0 var(--tabs-navbar-shadow-size) !important margin: 0 0 var(--tabs-navbar-shadow-size) !important
=> Can't override style. Therefore, we should approach it by bypass. => 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( ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
"userChrome.tab.bottom_rounded_corner.chrome" "userChrome.tab.bottom_rounded_corner.chrome"
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { ) 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-position: 0px;
--uc-newtab-non-corner-bgwidth: 0px; --uc-newtab-non-corner-bgwidth: 0px;
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
@ -8449,7 +8534,7 @@
background-origin: padding-box; background-origin: padding-box;
} }
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { @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)); --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
} }
} }
@ -8464,14 +8549,18 @@
} }
@media (-moz-windows-accent-color-in-titlebar) { @media (-moz-windows-accent-color-in-titlebar) {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */ 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)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */
} }
@ -8482,8 +8571,10 @@
"userChrome.tab.bottom_rounded_corner.chrome" "userChrome.tab.bottom_rounded_corner.chrome"
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8494,8 +8585,10 @@
var(--uc-tab-corner-right-side-svg); var(--uc-tab-corner-right-side-svg);
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8509,8 +8602,10 @@
} }
@supports -moz-bool-pref("userChrome.compatibility.accent_color") { @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
@ -8519,8 +8614,10 @@
) !important; /* Hardcoded for compatibility */ ) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme)) :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive):is(:not([lwtheme]), :not(:-moz-lwtheme))
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
fill: color-mix( fill: color-mix(
in srgb, in srgb,
@ -8538,8 +8635,10 @@
:not([lwtheme]), :not([lwtheme]),
:not(:-moz-lwtheme) :not(:-moz-lwtheme)
) )
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover, #tabs-newtab-button:hover,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover { #tabs-newtab-button:hover {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8553,8 +8652,10 @@
:not([lwtheme]), :not([lwtheme]),
:not(:-moz-lwtheme) :not(:-moz-lwtheme)
) )
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active, #tabs-newtab-button:hover:active,
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#tabbrowser-tabs:not([orient="vertical"])
#tabs-newtab-button:hover:active { #tabs-newtab-button:hover:active {
background-image: var(--uc-tab-corner-left-side-svg), background-image: var(--uc-tab-corner-left-side-svg),
linear-gradient( linear-gradient(
@ -8569,7 +8670,7 @@
} }
} }
/* '+'Icon */ /* '+'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) */ 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) 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; 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( ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
"userChrome.tab.bottom_rounded_corner.chrome" "userChrome.tab.bottom_rounded_corner.chrome"
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { ) 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; --tab-border-radius: 0px;
width: unset !important; width: unset !important;
padding-inline: 0px !important; padding-inline: 0px !important;
@ -8883,13 +8984,13 @@
color: var(--tab-icon-overlay-fill, light-dark(black, white)); color: var(--tab-icon-overlay-fill, light-dark(black, white));
} }
.tab-icon-overlay:not([crashed])[soundplaying] { .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] { .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] { .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]) { .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
/* Color */ /* Color */
@ -8899,6 +9000,29 @@
fill-opacity: 0.8 !important; fill-opacity: 0.8 !important;
opacity: 1 !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 */ /* Label */
@supports not -moz-bool-pref("userChrome.hidden.tab_icon") { @supports not -moz-bool-pref("userChrome.hidden.tab_icon") {
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
@ -11835,6 +11959,17 @@
background-size: 16px !important; background-size: 16px !important;
background-image: var(--avatar-image-url) !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 { #new-tab-button {
list-style-image: var(--uc-new-tab-icon) !important; list-style-image: var(--uc-new-tab-icon) !important;
} }
@ -12416,6 +12551,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12429,6 +12565,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12502,6 +12639,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12515,6 +12653,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12600,6 +12739,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12613,6 +12753,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12676,6 +12817,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12689,6 +12831,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12862,6 +13005,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12875,6 +13019,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12948,6 +13093,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -12961,6 +13107,7 @@
#goPopup, #goPopup,
#historyMenuPopup, #historyMenuPopup,
#bookmarksMenuPopup, #bookmarksMenuPopup,
#menu_ProfilesPopup,
#menu_ToolsPopup, #menu_ToolsPopup,
#windowPopup, #windowPopup,
#menu_HelpPopup, #menu_HelpPopup,
@ -14125,6 +14272,10 @@
#bookmarksMenu { #bookmarksMenu {
--menuitem-image: url("chrome://browser/skin/bookmark.svg"); --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 { #tools-menu {
--menuitem-image: url("../icons/toolbox.svg"); --menuitem-image: url("../icons/toolbox.svg");
} }
@ -14344,6 +14495,10 @@
#menu_searchBookmarks { #menu_searchBookmarks {
--menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); --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_ToolsPopup ==========================================================*/
#menu_openDownloads { #menu_openDownloads {
--menuitem-image: url("chrome://browser/skin/downloads/downloads.svg"); --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg");

14
icons/tab-audio-blocked-circle-12.svg Normal file
View file

@ -0,0 +1,14 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M4.998 3.567a.5.5 0 0 0-.748.434v3.998a.5.5 0 0 0 .748.434l3.5-1.999a.5.5 0 0 0 0-.868l-3.5-1.999z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6zm10.75 0A4.756 4.756 0 0 0 6 1.25 4.756 4.756 0 0 0 1.25 6 4.756 4.756 0 0 0 6 10.75 4.756 4.756 0 0 0 10.75 6z"/>
</g>
<defs>
<clipPath id="a">
<path d="M0 0h12v12H0z"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 778 B

6
icons/tab-audio-muted-small.svg Normal file
View file

@ -0,0 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
<path fill="context-fill" d="M6.8 5.5 4.5 3.3l.9-1.1c.4-.5 1.3-.2 1.3.5v2.8zm2 .5c0-1-.5-1.9-1.3-2.4v2.7l1 1c.2-.4.3-.9.3-1.3zM7.7 2.6c1.3.7 2 2 2 3.4 0 .7-.2 1.4-.5 2l.5.5c.5-.8.8-1.6.8-2.5 0-1.7-.9-3.3-2.4-4.1-.2-.1-.4 0-.5.2-.1.2-.1.4.1.5zm-5.1-.1c-.1-.1-.4-.1-.5 0-.1.1-.1.4 0 .5l1.1 1.1h-1c-.4 0-.8.3-.8.8v2.2c0 .4.3.8.8.8h1.5l1.7 2c.4.5 1.3.2 1.3-.5V7.7l1.4 1.4c-.1.1-.2.2-.4.3-.2.1-.2.3-.1.5.1.2.3.2.5.2.2-.1.4-.3.6-.5l.4.4c.1.1.4.1.5 0 .1-.1.1-.4 0-.5l-7-7z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 809 B

6
icons/tab-audio-playing-small.svg Normal file
View file

@ -0,0 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
<path fill="context-fill" d="M6.7 2.6v6.8c0 .7-.9 1-1.3.5l-1.7-2H2.2c-.4 0-.7-.3-.7-.8V4.9c0-.4.3-.8.7-.8h1.5l1.7-2c.5-.5 1.3-.2 1.3.5zM8.8 6c0-1-.5-1.9-1.3-2.4v4.7C8.3 7.9 8.8 7 8.8 6zm-.7-4.1c-.2-.1-.4 0-.5.2-.1.2 0 .4.2.5 1.3.7 2 2 2 3.4 0 1.4-.8 2.8-2 3.4-.2.1-.3.2-.3.4 0 .2.2.4.4.4.1 0 .1 0 .2 0 1.5-.8 2.5-2.4 2.5-4.1-.1-1.8-1-3.4-2.5-4.2z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 711 B

1
install.sh
View file

@ -344,6 +344,7 @@ firefoxProfileDirPaths=(
"${HOME}/.cachy" "${HOME}/.cachy"
"${HOME}/.local/opt/tor-browser/app/Browser/TorBrowser/Data/Browser" "${HOME}/.local/opt/tor-browser/app/Browser/TorBrowser/Data/Browser"
"${HOME}/.var/app/org.mozilla.firefox/.mozilla/firefox" "${HOME}/.var/app/org.mozilla.firefox/.mozilla/firefox"
"${HOME}/.var/app/io.gitlab.librewolf-community/.librewolf"
"${HOME}/snap/firefox/common/.mozilla/firefox" "${HOME}/snap/firefox/common/.mozilla/firefox"
"${HOME}/Library/Application Support/Firefox" "${HOME}/Library/Application Support/Firefox"
"${HOME}/Library/Application Support/Waterfox" "${HOME}/Library/Application Support/Waterfox"

5
src/icons/_global_menu.scss
View file

@ -238,6 +238,11 @@ menu.share-tab-url-item {
#menu_mobileBookmarks { #menu_mobileBookmarks {
} }
/*= menu_ProfilesPopup =======================================================*/
#menu_manageProfiles {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
/*= menu_ToolsPopup ==========================================================*/ /*= menu_ToolsPopup ==========================================================*/
#menu_openDownloads { #menu_openDownloads {
--menuitem-image: url("chrome://browser/skin/downloads/downloads.svg"); --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg");

5
src/icons/_global_menubar.scss
View file

@ -14,6 +14,11 @@
#bookmarksMenu { #bookmarksMenu {
--menuitem-image: url("chrome://browser/skin/bookmark.svg"); --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 { #tools-menu {
--menuitem-image: url("../icons/toolbox.svg"); --menuitem-image: url("../icons/toolbox.svg");
} }

14
src/icons/_panel.scss
View file

@ -29,6 +29,20 @@
background-image: var(--avatar-image-url) !important; 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 { #new-tab-button {
list-style-image: var(--uc-new-tab-icon) !important; list-style-image: var(--uc-new-tab-icon) !important;
} }

2
src/icons/layout/_menu_common.scss
View file

@ -12,7 +12,7 @@ $_checkMenu: ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])";
$_nestedPopup: "> menupopup:not(.in-menulist) >"; $_nestedPopup: "> menupopup:not(.in-menulist) >";
$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) #{$_nestedPopup}"; $_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) #{$_nestedPopup}";
$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) #{$_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( $_nestedPopupIconMenus: selector.nest(
$_nestedPopupIcon, $_nestedPopupIcon,

11
src/padding/_tabbar_width.scss
View file

@ -92,6 +92,14 @@
} }
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
max-width: var(--tab-max-width) !important; /* Original: 225px */ 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 */ /* neighbouring tabs should "pinch" together */
@ -100,6 +108,9 @@
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery { > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery {
min-width: 3px; // With Panorama Tab Groups #643 #846 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 NotOption("userChrome.tab.photon_like_padding") {
@include Option("userChrome.tab.lepton_like_padding") { @include Option("userChrome.tab.lepton_like_padding") {
#TabsToolbar:not([multibar]) .tabbrowser-tab { #TabsToolbar:not([multibar]) .tabbrowser-tab {

33
src/tab/_connect_to_window.scss
View file

@ -1,22 +1,27 @@
#tabbrowser-tabs[orient="horizontal"] { #tabbrowser-tabs:not([orient="vertical"]) {
min-height: unset !important; /* Original: var(--tabstrip-min-height) */ 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"] { #tabbrowser-tabs[orient="vertical"] {
--uc-tab-border-bottom-radius: var(--tab-border-radius); --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 */ /* Remove line at Toolbar's top */
#tabbrowser-tabs { #tabbrowser-tabs {

18
src/tab/_selected_tab.scss
View file

@ -68,8 +68,26 @@
@import "selected_tab/photon_like_contextline"; @import "selected_tab/photon_like_contextline";
} }
/*= Selected Tab - Supernova like contextline ===================================*/
@include NotOption("userChrome.tab.photon_like_contextline") { @include NotOption("userChrome.tab.photon_like_contextline") {
@include Option("userChrome.tab.supernova_like_contextline") { @include Option("userChrome.tab.supernova_like_contextline") {
@import "selected_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 */
}
}
}
}
}
} }
} }

20
src/tab/newtab_button/_looks_like_tab.scss
View file

@ -1,4 +1,4 @@
#tabs-newtab-button { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button {
@include Option("userChrome.tab.connect_to_window") { @include Option("userChrome.tab.connect_to_window") {
/* Size */ /* Size */
@include BoxAlign("stretch", true); @include BoxAlign("stretch", true);
@ -73,16 +73,16 @@
} }
@media (-moz-windows-accent-color-in-titlebar) { @media (-moz-windows-accent-color-in-titlebar) {
@include AccentColor { @include AccentColor {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #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) #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( fill: color-mix(
in srgb, in srgb,
$accentTextColor 10%, $accentTextColor 10%,
transparent transparent
) !important; /* Hardcoded for compatibility */ ) !important; /* Hardcoded for compatibility */
} }
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #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) #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( fill: color-mix(
in srgb, in srgb,
$accentTextColor 15%, $accentTextColor 15%,
@ -98,14 +98,14 @@
"userChrome.tab.bottom_rounded_corner.chrome", "userChrome.tab.bottom_rounded_corner.chrome",
"userChrome.tab.bottom_rounded_corner.edge" "userChrome.tab.bottom_rounded_corner.edge"
) { ) {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme} #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) #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), 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)), 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); 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]):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) #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), 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)), 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); var(--uc-tab-corner-right-side-svg);
@ -116,7 +116,7 @@
} }
/* '+'Icon */ /* '+'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) */ 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) padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)

11
src/tab/selected_tab/_color_like_toolbar.scss
View file

@ -15,6 +15,17 @@
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
> .tabbrowser-tab > .tabbrowser-tab
> .tab-stack > .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] { > .tab-background[selected] {
@include lwtheme(false) { @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) /* 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)

9
src/tab/selected_tab/_multi_selected.scss
View file

@ -1,4 +1,5 @@
#TabsToolbar { #TabsToolbar,
#vertical-tabs {
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent));
&[brighttext] { &[brighttext] {
@ -10,6 +11,12 @@
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
> .tabbrowser-tab > .tabbrowser-tab
> .tab-stack > .tab-stack
> .tab-background[multiselected]:not([selected]),
#tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox
> tab-group
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]) { > .tab-background[multiselected]:not([selected]) {
/* Original: /* Original:
background-attachment: scroll, scroll, fixed; background-attachment: scroll, scroll, fixed;

58
src/tab/selected_tab/_supernova_like_contextline.scss
View file

@ -1,51 +1,45 @@
.tab-context-line { /* context line styles */
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
@include InlineBox(true); @include InlineBox(true);
&::before {
content: "";
height: 1px !important; height: 1px !important;
border-radius: 9999px !important; border-radius: 9999px !important;
transform: translateY(5px); transform: translateY(5px);
margin-top: -1px !important; margin-top: -1px !important;
margin-left: 5px; margin-left: 5px;
margin-right: 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 { tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
margin-top: 3px !important; margin: unset !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;
} }
/* selected tab style */
#{built-in-light-theme()} .tab-context-line, #{built-in-light-theme()} .tab-context-line,
#{built-in-dark-theme()} .tab-context-line { #{built-in-dark-theme()} .tab-context-line {
--tab-line-color: #45a1ff; --tab-line-color: #45a1ff;
} }
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
background-color: var(--tab-line-color, #45a1ff) !important; background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
} }
/* Set the active effect */ /* Set the active effect */
tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line { .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
margin-left: 6px !important; filter: brightness(70%);
margin-right: 6px !important;
}
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
background: #217ddb !important;
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
} }
/* Set the hover effect */ /* Set the hover effect */
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { .tabbrowser-tab:hover:not([selected="true"], [multiselected])
background-color: rgba(0, 0, 0, 0.2) !important; > .tab-stack
> .tab-background
> .tab-context-line::before {
background-color: rgba(0, 0, 0, 0.4) !important;
opacity: 1 !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]) .tabbrowser-tab:hover:not([selected="true"], [multiselected])
> .tab-stack > .tab-stack
> .tab-background > .tab-background
> .tab-context-line { > .tab-context-line::before {
background-color: #ffffff50 !important; background-color: rgba(255, 255, 255, 0.4) !important;
} }
/* Animation */ /* Animation */
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { .tabbrowser-tab:hover:not([selected="true"], [multiselected])
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])
> .tab-stack > .tab-stack
> .tab-background > .tab-background
> .tab-context-line { > .tab-context-line::before {
opacity: 1; animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
} }
} }

32
src/tab/sound_tab/_show_with_favicons.scss
View file

@ -74,13 +74,13 @@
// There is a difference in size between background-image and list-style-image due to margins, etc. // There is a difference in size between background-image and list-style-image due to margins, etc.
&[soundplaying] { &[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] { &[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] { &[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]) { .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
@ -92,6 +92,32 @@
opacity: 1 !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 */ /* Label */
@include _hidden_tabIcon_soundTabLabel { @include _hidden_tabIcon_soundTabLabel {
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {

53
src/tab/unselected_tab/_dynamic_separator.scss
View file

@ -40,42 +40,42 @@
} }
@include Option("userChrome.tab.newtab_button_like_tab") { @include Option("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabs-newtab-button::before { #tabbrowser-tabs:not([orient="vertical"]) #tabs-newtab-button::before {
@include _dynamicSeparatorShape; @include _dynamicSeparatorShape;
/* More position */ /* More position */
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); 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))); left: calc(50% - (8px + var(--toolbarbutton-inner-padding)));
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @include NotOption("userChrome.tab.newtab_button_like_tab") {
.tab-stack::before, #tabbrowser-tabs:not([orient="vertical"]) .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-tabs:not([orient="vertical"]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
@include _dynamicSeparatorShape; @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; 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; right: 0;
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; 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); opacity: var(--tab-separator-opacity);
} }
@include Option("userChrome.tabbar.one_liner") { @include Option("userChrome.tabbar.one_liner") {
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
@include OneLinerContent { @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); opacity: var(--tab-separator-opacity);
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); 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") { @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); opacity: var(--tab-separator-opacity);
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @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 .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
opacity: var(--tab-separator-opacity); 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) .tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is([visuallyselected], [multiselected], :hover)
.tab-stack::before, .tab-stack::before,
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab]) #tabbrowser-tabs:not([orient="vertical"])
#tabbrowser-arrowscrollbox[overflowing] #tabbrowser-arrowscrollbox[overflowing]
tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))) tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden])))
.tab-stack::before { .tab-stack::before {
opacity: 0 !important; opacity: 0 !important;
} }
@include Option("userChrome.tab.newtab_button_like_tab") { @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:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab + .tabbrowser-tab
.tab-stack::before, .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) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before, /* Legacy - v103 */ ~ #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-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before {
opacity: 0 !important; opacity: 0 !important;
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @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]) + .tabbrowser-tab:not([visuallyselected])
.tab-stack::before { .tab-stack::before {
opacity: 0 !important; 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; 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; margin-left: 1px;
} }
} }
/* Animate */ /* Animate */
@include 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) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
@include Option("userChrome.tab.newtab_button_like_tab") { @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) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @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 .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
.tab-stack::after { .tab-stack::after {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
@ -153,6 +160,6 @@
} }
/* Latest Tab & New tab margin */ /* 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; margin-inline-end: 1px !important;
} }