/* Edge-Frfox - tabbar.css
* https://github.com/bmFtZQ/edge-frfox */
/*
MARK: Variables
*/
:root {
/* Extra space at the top of the window. */
--uc-tab-top-margin: 8px !important;
/* Remove extra space at the top of the window when in fullscreen or when
* title bars are enabled. */
&[inFullscreen],
&:not([tabsintitlebar]) {
--uc-tab-top-margin: 0px !important;
}
/* Remove extra space at the top when the window is maximised or the menu bar
* is active, only on platforms other than macOS. */
@media not (-moz-platform: macos) {
&[sizemode="maximized"],
& #toolbar-menubar:not([inactive]) + #TabsToolbar,
&:has(#toolbar-menubar:not([inactive])) {
--uc-tab-top-margin: 0px !important;
}
}
& #TabsToolbar {
--tab-min-height: 32px !important;
--inline-tab-padding: 11px !important;
--uc-inline-pinned-tab-padding: 12px !important;
--tab-border-radius: 4px !important;
--toolbarbutton-inner-padding: 6px !important;
--uc-toolbarbutton-inner-inline-padding: 8px !important;
--toolbarbutton-border-radius: 4px !important;
--tabs-navbar-shadow-size: 0px !important;
--tab-shadow-max-size: 0 !important;
--uc-tab-separator-height: 20px;
--uc-toolbarbutton-block-margin: 2px;
/* Gap between tab and adjacent buttons (+2px button margin). */
--uc-toolbarbutton-tab-gap: 2px;
@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
--tab-border-radius: 8px !important;
--uc-toolbarbutton-tab-gap: 6px;
}
}
}
/* Tab grow/shrink transition. */
.tabbrowser-tab:not([pinned]) {
transition-property: min-width, max-width !important;
transition-duration: 150ms !important;
transition-timing-function: cubic-bezier(0, .75, .25, 1) !important;
}
/* Tab moving transition. */
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([selected]):not([multiselected]),
.tabbrowser-tab[tab-grouping],
.tabbrowser-tab[tabdrop-samewindow] {
transition: transform 200ms cubic-bezier(0, .75, .25, 1) !important;
}
/* Remove tab toolbar background transition on inactive windows. */
#navigator-toolbox {
transition: none !important;
}
/*
MARK: Toolbar & buttons
*/
/* #region */
#TabsToolbar {
/* Padding between the edge of the toolbar and its content. */
padding-inline-start: 8px !important;
/* Remove any existing margins from toolbar buttons. */
& .toolbarbutton-1 {
margin: 0 !important;
}
/* Tab toolbar button sizing. */
& .toolbarbutton-1 > .toolbarbutton-icon,
& .toolbarbutton-1 > .toolbarbutton-badge-stack {
border-radius: var(--toolbarbutton-border-radius) !important;
padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important;
/* Add margin-block to buttons so they are positioned correctly. */
margin: var(--uc-toolbarbutton-block-margin) 0 !important;
}
& .toolbarbutton-1 > .toolbarbutton-icon {
width: calc(2 * var(--uc-toolbarbutton-inner-inline-padding) + 16px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
}
/* Keep certain buttons (such as new tab) square shaped. */
& #tabs-newtab-button > .toolbarbutton-icon,
& #alltabs-button > .toolbarbutton-badge-stack,
& #tabbrowser-tabs[hasadjacentnewtabbutton][overflow] ~ #new-tab-button > .toolbarbutton-icon {
padding: var(--toolbarbutton-inner-padding) !important;
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
}
/* Toolbar buttons should use the same colour as unselected tabs. */
& .toolbarbutton-animatable-box,
& .toolbarbutton-1 {
fill: currentColor !important;
}
& #TabsToolbar-customization-target {
/* Vertically align toolbar buttons to the bottom of the tab bar. */
align-items: end !important;
/* Reduce space between start of the window and first toolbar button. */
& > .toolbarbutton-1:nth-child(1 of .toolbarbutton-1:not(#tabbrowser-tabs ~ *)) {
margin-inline-start: -2px !important;
}
/* Add space after the last toolbar button before the tabs. */
& > .toolbarbutton-1:nth-last-child(1 of .toolbarbutton-1:not(#tabbrowser-tabs ~ *)),
:root[privatebrowsingmode] & > .toolbarbutton-1:nth-last-child(1 of .toolbarbutton-1:not(#tabbrowser-tabs ~ *):not(#firefox-view-button)) {
margin-inline-end: calc(var(--uc-toolbarbutton-tab-gap) + 2px) !important;
/* Reduces space between this button and the tab scroll button when
* overflowed for consistency. */
&:has(~ #tabbrowser-tabs[overflow]) {
margin-inline-end: 2px !important;
}
}
}
}
#tabbrowser-tabs {
/* Remove the border from the left of the tab bar. */
border-inline: none !important;
padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
/* Add space above the tabs. */
margin-top: var(--uc-tab-top-margin) !important;
/* Pull tabs closer to toolbar buttons when overflowed. */
&[overflow]:not([haspinnedtabs]) {
margin-inline-start: -2px !important;
}
/* Remove gap between pinned and unpinned tabs. */
&[haspinnedtabs]:not([positionpinnedtabs]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-inline-start: 0 !important;
}
}
/* Add space between last tab and new tab button. */
#tabbrowser-tabs #tabs-newtab-button {
margin-inline-start: var(--uc-toolbarbutton-tab-gap) !important;
}
/* Tab scrolling buttons. */
#scrollbutton-up:not(.menupopup-scrollbutton),
#scrollbutton-down:not(.menupopup-scrollbutton) {
border-width: 2px !important;
border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important;
padding-inline: calc(var(--toolbarbutton-inner-padding) - 4px) !important;
padding-block: var(--toolbarbutton-inner-padding) !important;
}
/* Add margin to the side of the button facing the tabs so the buttons line up
* on the opposite side with others in the toolbar. */
#scrollbutton-up:not(.menupopup-scrollbutton) {
margin-inline: 0 2px !important;
}
#scrollbutton-down:not(.menupopup-scrollbutton) {
margin-inline: 2px 0 !important;
}
/* Hide pre-tabs spacer as it isn't needed. */
.titlebar-spacer[type="pre-tabs"] {
display: none !important;
}
/* Make sure that the post-tabs spacer appears. */
.titlebar-spacer[type="post-tabs"] {
display: flex !important;
}
/* macOS titlebar buttons positioning. */
@media (-moz-platform: macos) {
/* Compensate for padding added to the Tabs Toolbar. */
.titlebar-buttonbox-container {
margin-inline-start: -8px !important;
/* Make sure that titlebar buttons have equal spacing on all sides. */
& .titlebar-buttonbox {
margin-inline: calc((var(--tab-min-height) + var(--uc-tab-top-margin) - 14px) / 2) !important;
}
}
}
/* Linux titlebar button positioning. */
@media (-moz-platform: linux) {
.titlebar-buttonbox-container {
/* Add space between buttons and other toolbar buttons. */
margin-inline: 8px 0 !important;
@media (-moz-gtk-csd-reversed-placement) {
/* Compensate for padding added to the Tabs Toolbar. */
margin-inline: -8px 8px !important;
}
}
}
/* #endregion */
/*
MARK: Tab inner content
*/
/* #region */
.tabbrowser-tab {
font-size: 12px !important;
padding-inline: 0 !important;
/* Allow shadows to appear outside the tabs. */
overflow-clip-margin: 8px !important;
/* Set width of tabs. */
&:not([pinned], [style*="max-width"])[fadein] {
max-width: 240px !important;
}
/* Enforce tab foreground colour. */
&:is([visuallyselected], [multiselected]) {
color: var(--tab-selected-textcolor) !important;
&:-moz-window-inactive {
color: var(--tab-selected-textcolor-inactive, var(--tab-selected-textcolor)) !important;
}
}
}
/* Tab inner content padding. */
.tab-content {
padding-inline: var(--inline-tab-padding) 0 !important;
/* Pinned tab padding. */
&[pinned] {
padding: 0 var(--uc-inline-pinned-tab-padding) !important;
}
/* Indicator for when the title of a pinned tab changes. */
&[pinned][titlechanged]:not([selected]),
.tabbrowser-tab:is([image], [pinned]) &[attention]:not([selected]) {
background-position: center bottom 2px !important;
}
}
/* Space between tab icons and the tab titles. */
.tab-throbber:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]) {
margin-inline-end: calc(var(--inline-tab-padding) - 1px) !important;
}
/* Make sure that the tabs are the correct height. */
#tabbrowser-tabs .tab-label-container {
height: var(--tab-min-height) !important;
/* Hide tab audio indicator label. */
& .tab-secondary-label {
display: none !important;
}
}
/* Tab close button styling. */
.tab-close-button {
margin-inline-end: 8px !important;
width: 17px !important;
height: 17px !important;
padding: 4px !important;
border-radius: var(--toolbarbutton-border-radius) !important;
}
/* Ensure that unselected tabs use full opacity and correct colours.
* Also ensures that the tab's icon is always visible.
*/
.tab-label-container:not([selected="true"], [multiselected]),
.tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) {
opacity: 1 !important;
}
/* Change width of the gradient mask located on the right of the tab labels. */
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container {
--tab-label-mask-size: 1em !important;
}
/* Tab container indicator. */
.tabbrowser-tab[usercontextid] {
& .tab-context-line {
height: 2px !important;
border-radius: 2px !important;
margin: 2px 7px 0 !important;
}
&[selected] .tab-context-line {
margin-inline: 9px !important;
}
}
/*
MARK: Sound playing indicator
*/
/* Move the audio indicator to the right of the tab's icon. */
#tabbrowser-tabs:not([closebuttons="activetab"]) .tab-icon-overlay:not([pinned]) {
margin-inline: 22px 6px !important;
}
/* When there is no tab icon, move indicator to the left. */
#tabbrowser-tabs .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned]) {
margin-inline: 0px 6px !important;
}
/* Overlay the audio indicator onto the tab icon when there isn't enough space. */
.tab-icon-overlay:not([crashed]):is([pinned], [sharing]),
#tabbrowser-tabs[closebuttons="activetab"] .tab-icon-overlay:not([crashed]) {
top: -5.5px !important;
inset-inline-end: -6px !important;
}
/* Set colour for the overlay tab audio indicator. */
#tabbrowser-tabs[closebuttons="activetab"] {
& .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not([crashed]) {
stroke: var(--tab-icon-overlay-stroke, light-dark(white, black)) !important;
color: var(--tab-icon-overlay-fill, light-dark(black, white)) !important;
fill-opacity: 1 !important;
&:hover {
background-color: var(--tab-icon-overlay-stroke, light-dark(white, black)) !important;
}
}
}
/* Add border radius to the tab audio indicator. */
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not([crashed]) {
border-radius: var(--toolbarbutton-border-radius) !important;
padding: 0 !important;
}
/* Ensure the audio indicator is visible when needed. */
.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) > .tab-icon-overlay {
opacity: 1 !important;
}
/* #endregion */
/*
MARK: Background and corners
*/
/* #region */
.tab-background {
border-radius: var(--tab-border-radius);
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-block: 0 !important;
border: 0 !important;
position: relative !important;
--uc-tab-corner-bg: transparent;
--uc-tab-corner-outline: transparent;
/* Both rounded bottom corners. */
&::before,
&::after {
content: "" !important;
position: absolute !important;
width: var(--tab-border-radius) !important;
aspect-ratio: 1 / 1;
bottom: 0 !important;
pointer-events: none !important;
clip-path: inset(0);
}
/* Bottom left corner. */
&::before {
border-bottom-right-radius: var(--tab-border-radius) !important;
left: 0 !important;
translate: calc(-1 * var(--tab-border-radius)) 0 !important;
box-shadow:
/* First shadow is a 1px outline for better theming support. */
-1px -1px var(--uc-tab-corner-outline) inset,
/* Second shadow is to add the background colour to the corner. */
0 0 0 var(--tab-border-radius) var(--uc-tab-corner-bg) !important;
}
/* Bottom right corner. */
&::after {
border-bottom-left-radius: var(--tab-border-radius) !important;
right: 0 !important;
translate: var(--tab-border-radius) 0 !important;
box-shadow:
/* First shadow is a 1px outline for better theming support. */
1px -1px var(--uc-tab-corner-outline) inset,
/* Second shadow is to add the background colour to the corner. */
0 0 0 var(--tab-border-radius) var(--uc-tab-corner-bg) !important;
}
/* Make sure that the bottom corners have the same background colour. */
&:is([selected], [multiselected]) {
--uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor)));
--uc-tab-corner-outline: var(--lwt-tab-line-color, transparent);
/* Disable tab outlines when selected. */
outline: none !important;
}
/* Tab hover background colour. */
.tabbrowser-tab:hover &:not([selected], [multiselected]) {
background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
--uc-tab-corner-bg: color-mix(in srgb, currentColor 8%, transparent) !important;
/* When in light mode, the hover colour should be white. */
#TabsToolbar:not([brighttext]) & {
background-color: rgb(255 255 255 / .3) !important;
--uc-tab-corner-bg: rgb(255 255 255 / .3) !important;
@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
background-color: var(--toolbar-bgcolor) !important;
--uc-tab-corner-bg: var(--toolbar-bgcolor) !important;
}
}
}
/* When tabs are selected but not active, they should have a partially
* transparent background. */
#tabbrowser-tabs &[multiselected]:not([selected]) {
box-shadow: none !important;
opacity: 0.7 !important;
}
}
/* Disable bottom left rounded corner to prevent overlapping transparent tabs.
*
* If a tab is selected, then the next tab's bottom-left corner should be
* inverted to prevent overlap with the transparent backgrounds.
*
* If the next tab is hidden, then find the next visible tab which would be
* positioned next to the active tab.
*/
.tabbrowser-tab:is([selected], [multiselected]):not([hidden]) {
& + .tabbrowser-tab .tab-background:not([selected]),
& + .tabbrowser-tab[hidden] ~ .tabbrowser-tab:not([hidden]):is([hidden] + *) .tab-background:not([selected]) {
border-bottom-left-radius: var(--tab-border-radius) !important;
&::before {
--uc-tab-corner-bg: transparent !important;
}
}
}
/* #endregion */
/*
MARK: Tab separators
*/
/* #region */
.tabbrowser-tab .tab-stack {
/* Both side separators. */
&::before,
&::after {
content: "";
position: absolute;
height: var(--uc-tab-separator-height);
inset-block: 0;
margin-block: auto;
border-left: 1px solid transparent;
}
/* Fractional scaling adjustments (150%, 175%, etc.) */
@media (1dppx < resolution < 2dppx) {
&::before,
&::after {
border-left-width: 1.5px !important;
}
}
/* Left side separators. */
&::before {
left: 0;
}
/* Right side separators. */
&::after {
right: 0;
}
}
/* Set separator color and add separator for last visible tab. */
.tabbrowser-tab:not([selected], [multiselected], :hover) {
/* All tabs. */
& .tab-stack::before,
/* Last visible tab. */
&:nth-last-child(1 of .tabbrowser-tab:not([hidden])) .tab-stack::after,
/* Last visible pinned tab when overflowed. */
#tabbrowser-tabs[overflow] &:nth-last-child(1 of .tabbrowser-tab[pinned]:not([hidden])) .tab-stack::after {
border-color: color-mix(in srgb, currentColor 34%, transparent);
}
}
/* Hide tab separator when previous tab is hovered or selected.
*
* If a tab is selected, then the next tab's left separator should be hidden.
*
* If the next tab is hidden, then find the next visible tab.
*/
.tabbrowser-tab:is([selected], [multiselected], :hover):not([hidden]) {
& + .tabbrowser-tab .tab-stack::before,
& + .tabbrowser-tab[hidden] ~ .tabbrowser-tab:not([hidden]):is([hidden] + *) .tab-stack::before {
border-color: transparent !important;
}
}
/* Hide the first tab's separator for specific buttons before the tabs.
*
* If in private browsing mode, the Firefox View button is hidden, so the
* separator should also be hidden as long as there are no other buttons before
* it. If the Firefox account button is just before the tabs, then the separator
* should stay hidden.
*
* If the button directly before the tabs is the Firefox account button, the
* separator should be hidden.
*
* If there are no buttons before the tabs, hide the separator.
*/
:root[privatebrowsingmode] #firefox-view-button + #tabbrowser-tabs:not(.toolbarbutton-1:not(#fxa-toolbar-menu-button) + #firefox-view-button + #tabbrowser-tabs),
#fxa-toolbar-menu-button + #tabbrowser-tabs,
#tabbrowser-tabs:first-child {
& .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])) .tab-stack::before {
border-color: transparent !important;
}
}
/* #endregion */
/*
MARK: Tab shadows
*/
/* #region */
/* Tab and toolbar shadows. */
@media not (-moz-bool-pref: "uc.tweak.rounded-corners") {
/* Edge now removes the shadow when rounded corners are enabled. */
:root,
:root .tabbrowser-tab {
/* Light mode shadows. */
--uc-titlebar-shadow:
0 -1px var(--tabs-navbar-shadow-color, transparent) inset,
0 -3px 2px -3px rgb(0 0 0 / .2) inset;
--uc-tab-shadow:
0 0 0 1px var(--lwt-tab-line-color, transparent),
0 4px 5px rgb(0 0 0 / .21),
0 0px 2px rgb(0 0 0 / .18);
& [brighttext],
& [brighttext] .tabbrowser-tab {
/* Dark mode shadows. */
--uc-titlebar-shadow:
0 -1px var(--tabs-navbar-shadow-color, transparent) inset,
0 -3px 2px -3px rgb(0 0 0 / .7) inset;
--uc-tab-shadow:
0 0 0 1px var(--lwt-tab-line-color, transparent),
0 5px 7px rgb(0 0 0 / .44),
0 0px 2px rgb(0 0 0 / .7);
}
}
}
/* Apply tab shadows. */
#tabbrowser-tabs .tab-background:is([selected], [multiselected]),
#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon {
box-shadow: var(--uc-tab-shadow) !important;
}
/* Apply toolbar shadows. */
#TabsToolbar {
box-shadow: var(--uc-titlebar-shadow) !important;
}
/* Prevent interference with context menu arrowscrollbox. */
#tabbrowser-arrowscrollbox {
--uc-padding-top: 4px;
--uc-margin-top: -4px;
--uc-padding-inline-end: var(--tab-border-radius)
}
/* Make room for the tab shadows so they aren't clipped at the top. */
.scrollbox-clip > scrollbox {
padding-top: var(--uc-padding-top, 0) !important;
margin-top: var(--uc-margin-top, 0) !important;
/* Used to fix tab overflow issue with rounded corners. */
padding-inline-end: var(--uc-padding-inline-end, 0) !important;
}
/* Add some room horizontally for the tab shadows and rounded corners. */
#tabbrowser-tabs {
&:not([overflow]) {
margin-inline-start: -8px !important;
margin-inline-end: calc(-1 * var(--tab-border-radius)) !important;
:where(#tabbrowser-arrowscrollbox .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden]))) {
margin-inline-start: 8px !important;
}
}
}
/* Clip the bottom of the tabs so the shadows don't bleed into other areas. */
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
clip-path: inset(-8px -8px 0) !important;
}
/* #endregion */
/*
MARK: Private browsing icon
*/
/* #region */
:root[privatebrowsingmode="temporary"] {
/* Move the other content in the Tabs Toolbar in-front of the indicator. */
& #TabsToolbar .toolbar-items,
& #TabsToolbar .titlebar-buttonbox-container {
position: relative;
z-index: 1;
}
/* Hide the post tab spacer as it is not needed. */
.titlebar-spacer[type="post-tabs"] {
display: none !important;
}
}
/* String for the custom label. */
:root,
:root[lang^="en"] {
--uc-string-private: "Private";
}
/* Appearance & sizing for the private browsing indicator. */
#private-browsing-indicator-with-label {
position: relative !important;
isolation: isolate;
font-size: 12px;
/* Allow space for the gradient to underlay other toolbar items. */
margin-inline: -16px -16px !important;
padding-inline: 32px 24px !important;
color: var(--button-primary-color, var(--toolbar-bgcolor)) !important;
text-shadow: none !important;
background: var(--uc-gradient);
--uc-bg-color: var(--button-primary-bgcolor, var(--toolbarbutton-icon-fill-attention));
/* Primay gradient, fades to transparent on the left. */
--uc-gradient: linear-gradient(to right, transparent, var(--uc-bg-color) 35%);
/* Alternate gradient, fades to transparent on both sides. */
--uc-gradient-alt: linear-gradient(to right, transparent, var(--uc-bg-color) 25%, var(--uc-bg-color) 75%, transparent);
/* If the titlebar buttons are on the right, then use the alternate gradient
* if the menu bar is not permanently enabled. */
@media (-moz-platform: windows),
(-moz-gtk-csd-available) and (not (-moz-gtk-csd-reversed-placement)) {
:root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #TabsToolbar & {
background: var(--uc-gradient-alt);
}
}
/* Private browsing icon size. */
& .private-browsing-indicator-icon {
height: 24px !important;
width: 24px !important;
}
/* Change "Private Browsing" text to "Private" (English locale only). */
:root:is([lang^="en"]) & {
/* Hide original label. */
& > label {
display: none !important;
}
/* Add custom "Private" label. */
&::after {
content: var(--uc-string-private);
margin-block: 1px 2px;
margin-inline: 6px 5px;
}
}
}
/* #endregion */