diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css index 07574cdd974f63b90355f069f0fbc3fa6cd61b50..c650da2adf0d1a53b05a09d1b43fa5f52d78a307 100644 --- a/browser/themes/shared/tabbrowser/tabs.css +++ b/browser/themes/shared/tabbrowser/tabs.css @@ -21,7 +21,7 @@ --tab-group-line-thickness: 2px; --tab-group-line-toolbar-border-distance: 1px; /* Collapsed tabs should be square, so set width to match the min height */ - --tab-collapsed-background-width: var(--tab-min-height); + --tab-collapsed-background-width: 48px; --tab-collapsed-width: calc(var(--tab-collapsed-background-width) + 2 * var(--tab-inner-inline-margin)); --tab-inner-inline-margin: var(--space-medium); --tab-inline-padding: 8px; @@ -35,9 +35,9 @@ --tab-block-margin: 4px; --tab-icon-end-margin: 5.5px; --tab-label-line-height: 1.7; - --tab-loading-fill: #0a84ff; + --tab-loading-fill: var(--zen-primary-color); --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent); - --tab-selected-textcolor: var(--toolbar-color); + --tab-selected-textcolor: currentColor; --tab-selected-bgcolor: var(--toolbar-bgcolor); --tab-selected-color-scheme: var(--toolbar-color-scheme); &[lwt-tab-selected="light"] { @@ -259,7 +259,6 @@ } :root:not([uidensity="compact"], [sidebar-expand-on-hover]) &[pinned] { - padding: 0 10px; } &:is([selected], [multiselected]) { @@ -273,6 +272,7 @@ border-radius: inherit; position: relative; overflow: hidden; + display: none; &::before { position: absolute; @@ -472,14 +472,11 @@ .tab-icon-image { -moz-context-properties: fill, stroke; fill: currentColor; + border-radius: 4px; /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("browser.tabs.fadeOutUnloadedTabs") { &[pending] { - filter: grayscale(100%); - @media (prefers-color-scheme: dark) { - filter: grayscale(100%) invert(); - } opacity: 0.5; /* Fade the favicon out */ transition-property: filter, opacity; @@ -496,10 +493,6 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("browser.tabs.fadeOutExplicitlyUnloadedTabs") { &[pending][discarded] { - filter: grayscale(100%); - @media (prefers-color-scheme: dark) { - filter: grayscale(100%) invert(); - } opacity: 0.5; /* Fade the favicon out */ transition-property: filter, opacity; @@ -572,7 +565,7 @@ z-index: 1; /* Overlay tab title */ #tabbrowser-tabs[orient="vertical"] & { - top: 7px; + top: -7px; } &[crashed] { @@ -580,7 +573,7 @@ } #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]), - &[pinned]:not([crashed]) { + &:not([crashed]) { &[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } @@ -637,7 +630,7 @@ } } - &[pinned]:is([soundplaying], [muted], [activemedia-blocked]), + &[zen-essential]:is([soundplaying], [muted], [activemedia-blocked]), &[crashed] { display: revert; } @@ -738,7 +731,7 @@ has not been added to root. There are certain scenarios when that attribute is temporarily removed from root such as when toggling the sidebar to expand with the toolbar button. */ #tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]), - :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) { + :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([zen-essential]):not([crashed]) { &:is([soundplaying], [muted], [activemedia-blocked]) { display: flex; } @@ -1137,7 +1130,7 @@ tab-group { } #tabbrowser-tabs[orient="vertical"][expanded] { - tab-group > :is(.tab-group-label-container, .tabbrowser-tab), + tab-group > :is(.tab-group-label-container, .tab-group-container, .tabbrowser-tab), &[movingtab][movingtab-addToGroup]:not([movingtab-group], [movingtab-ungroup]) .tabbrowser-tab:is(:active, [multiselected]) { margin-inline-start: var(--space-medium); } @@ -1567,7 +1560,7 @@ tab-group { } } -#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, +#tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, #vertical-tabs-newtab-button { appearance: none; min-height: var(--tab-min-height); @@ -1578,7 +1571,7 @@ tab-group { margin-inline: var(--tab-inner-inline-margin); #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text { - display: none; + display: flex; } &:hover { @@ -1602,7 +1595,7 @@ tab-group { * flex container. #tabs-newtab-button is a child of the arrowscrollbox where * we don't want a gap (between tabs), so we have to add some margin. */ -#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button { +#tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button { margin-block: var(--tab-block-margin); } @@ -1793,7 +1786,6 @@ tab-group { &:not([expanded]) { .tabbrowser-tab[pinned] { - width: var(--tab-collapsed-width); } .tab-background { @@ -1833,8 +1825,8 @@ tab-group { display: block; position: absolute; inset: auto; - top: -3px; - inset-inline-start: 2px; + top: -2px; + inset-inline-start: -2px; &:-moz-window-inactive { background-image: @@ -1953,7 +1945,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button { list-style-image: url(chrome://global/skin/icons/plus.svg); } -#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) ~ #new-tab-button, #tabbrowser-tabs[orient="horizontal"] > #vertical-tabs-newtab-button, #tabbrowser-tabs[orient="vertical"]:not([overflow]) > #vertical-tabs-newtab-button, #tabbrowser-arrowscrollbox[overflowing] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,