CustomCSSforFx icon indicating copy to clipboard operation
CustomCSSforFx copied to clipboard
verified publisher icon Aris-t2

[Fx 141][default_tabs_photon_alt.css] Line under the active pinned tab

Open Hobbix opened this issue 5 months ago • 4 comments

Description of the Issue

I updated to FF 141.0, and the bottom border on the active pinned tab no longer disappears. I'm using a custom light theme and default_tabs_photon css.

Does the issue occur with the most recent version of CustomCSSforFx (release/test/dev build)?

Yes, with the latest release

Screenshots showing the issue

Now it looks like this:

Image

It should be like this:

Image

System information

  • Win10:
  • Firefox 141:
  • Firefox custom light theme (for example https://addons.mozilla.org/ru/firefox/addon/white-minimal/):

Hobbix avatar Jul 23 '25 12:07 Hobbix

Is the issue still present with 4.7.4 release? I've installed the mentioned theme and enabled default_tabs_photon.css on Fx 141. The mentioned line seen on your screenshot does not show up. (Only tested on Win 11)

Aris-t2 avatar Jul 24 '25 16:07 Aris-t2

Removed the old CustomCSSforFx, installed the new v4.7.4.

Enabled only these 3 mods:

@import "./css/tabs/default_tabs_no_tab_line.css";
@import "./css/tabs/tabs_container_indicator_for_classic_squared_tabs.css"; 
@import "./css/tabs/default_tabs_photon_alt.css";

As a result, all the borders around the active tabs disappeared completely.

Image

This may be normal for the current implementation of default_tabs_photon_alt.css, but I would like to return to a more classic look with a border around active tabs.

I modified it as best I could. Let's call it default_tabs_photon_alt_v2.css. (See the code under the spoiler below)

/* Firefox userChrome.css tweaks ****************************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ********************************************/
/************************************************************************************************/


:root {
  /* variable for tabs below navigation toolbar option */
  --tab_below_navigation_toolbar_bottom_padding: calc( var(--tab-min-height) + 0.5px ) !important;
  
  /* Set the border color and thickness for the selected tab. */
  --tab-min-height: 32px !important; 
  --classic_squared_tabs-border1: #aaaaaa; 
  --classic_squared_tabs-border_size: 1px;
  
  /* The border between the navigation URL bar and the tab bar */
  --tabs-navbar-separator-color: #aaaaaa !important; /* color of the separator between the URL bar and the tab bar FF126+  */
  
  /* border between the navigation URL bar and the body of the page */
  --chrome-content-separator-color: #aaaaaa !important; /* color of the separator below the URL bar and the body of the page FF140+  */
  
  /* variable for tabs below navigation toolbar option on macOS */
  --tab_below_navigation_toolbar_bottom_padding_macOS: calc( var(--tab-min-height) + 1px ) !important;
  --tab_below_navigation_toolbar_toolbox_top_padding_macOS: calc(-1px + var(--tab-min-height)) !important;
  
  /* variable for tabs below main content option */
  --tab_below_main_content_bottom_margin: calc(3px + var(--tab-min-height)) !important;
  --tab_below_main_content_toolbar_height: calc(2px + var(--tab-min-height)) !important;
  --tab_below_main_content_top_margin: 0px !important;

}

/* make tabs look like tabs again */
.tab-background {
  border-radius: 0px !important;
  margin-block: 0px !important;
}

:root:not([lwtheme]) .tab-background:is([selected],[multiselected]) {
  background-image: var(--classic_squared_tabs_active_tab) !important;
}

:root[lwtheme] .tab-background:is([selected],[multiselected]) {
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage) !important;
}

/* remove left and right tab spaces */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab],
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) #tabbrowser-arrowscrollbox .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0px !important;
}

.tabbrowser-tab {
  padding-inline: 0px !important;
  border-radius: 0px !important;
}

/* adjust 'new tab' tab */
#tabs-newtab-button {
  padding-inline: 1px !important;
  border-radius: 0px !important;
}

#tabs-newtab-button .toolbarbutton-icon {
  border-radius: 0px !important;
}

/* reduce scrollbuttons size */
#scrollbutton-up,
#scrollbutton-down {
  padding: 0 !important;
  border-radius: 0 !important;
}

/*tab line for active tab */
.tabbrowser-tab .tab-context-line {
  height: 2px !important;
  border-radius: 0px !important;
}

.tabbrowser-tab[selected]:not([usercontextid]) .tab-context-line {
  background-color: Highlight !important;
}

:root[lwtheme]:not([lwtheme-image="true"]):not([lwtheme-mozlightdark]) .tabbrowser-tab[selected]:not([usercontextid]) .tab-context-line {
  background-color: var(--tab-line-color,Highlight) !important;
}

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  margin: unset !important;
  background-color: var(--identity-icon-color) !important;
}

/* border between navigation toolbar and tabs toolbar */
:root:not([lwtheme]) #nav-bar {
  box-shadow: 0 calc(-1 * 1px) 0 color-mix(in srgb, currentColor 20%, transparent) !important;
}

:root[lwtheme] #nav-bar {
  box-shadow: unset !important;
}

/* Tab separators: modified Fx88s browser.css code */
.titlebar-spacer[type="pre-tabs"] {
  border-inline-end: 1px solid var(--lwt-background-tab-separator-color, currentColor);
  opacity: 0.2;
}

.tabbrowser-tab/*:not([pinned])*/::before,
.tabbrowser-tab/*:not([pinned])*/:not([selected],[multiselected]):last-of-type::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab/*:not([pinned])*/[selected] + .tabbrowser-tab::before {
  border-right: 1px solid transparent;
  margin-block: 5px 4px;
  opacity: 0.3;
  content: "";
  display: block;
}
.tabbrowser-tab/*:not([pinned])*/:not([selected],[multiselected])::before,
.tabbrowser-tab/*:not([pinned])*/:hover:not([selected]):nth-child(1 of :not(/*[pinned],*/ [hidden]))::before,
.tabbrowser-tab/*:not([pinned])*/:hover:not([selected])[first-visible-unpinned-tab]::before,
.tabbrowser-tab/*:not([pinned])*/:not([selected],[multiselected]):last-of-type::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab/*:not([pinned])*/[selected] + .tabbrowser-tab::before {
  border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor);
}

.tabbrowser-tab/*:not([pinned])*/:not([selected]):nth-child(1 of :not(/*[pinned],*/ [hidden]))::before,
.tabbrowser-tab/*:not([pinned])*/:not([selected])[first-visible-unpinned-tab]::before,
.tabbrowser-tab/*:not([pinned])*/[selected] + .tabbrowser-tab:not([selected])::before,
.tabbrowser-tab/*:not([pinned])*/[multiselected]:not([selected]) + .tabbrowser-tab:not([selected])::before {
  border-right: 1px solid transparent;
}

.tabbrowser-tab::before {
  margin-inline-start: -1px;
}

:root:is([tabsintitlebar],[customtitlebar]):not([extradragspace]) #toolbar-menubar[autohide=true] + :is(#TabsToolbar,#vertical-tabs) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox .tabbrowser-tab[beforehovered]::after,
.tabbrowser-tab[multiselected]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox .tabbrowser-tab[before-multiselected]::after {
  margin-top: var(--tabs-top-border-width);
  margin-bottom: 0;
}

#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox .tabbrowser-tab[beforeselected-visible]::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox .tabbrowser-tab[visuallyselected]::before,
.tabbrowser-tab[visuallyselected]::after {
  border-color: var(--tabs-border-color);
  margin-top: 0;
  margin-bottom: var(--tabs-navbar-shadow-size);
  opacity: 0.1;
}

.tabbrowser-tab::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
  content: "";
  display: block;
}

/* Add borders to active tab on the left/right/top when using lw-themes */
:root[lwtheme]:not([lwtheme-mozlightdark]) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background,
:root[lwtheme]:not([lwtheme-mozlightdark]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
  box-shadow: unset !important; /* removes the shadow cast by the selected tab on the left and right */
  border-top: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
  border-left: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
  border-right: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
}

:root[lwtheme] .tab-background:is([selected], [multiselected]){
  border: 0 !important;
}

/* tab height fix ESR 91.6, 96.0.2, 97+ */
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
  height: unset !important;
}

/* Fx 100+ outline fix */
:root[lwtheme] :is(#TabsToolbar,#vertical-tabs) #firefox-view-button[open] > .toolbarbutton-icon,
:root[lwtheme] .tab-background[selected] {
  outline: unset !important;
}

/* Fx 101+ */
@media (-moz-platform: windows) {
	
	#main-window[sizemode="maximized"]:is([tabsintitlebar],[customtitlebar]) #titlebar {
	  margin-top: -1px !important;
	}
}

/* Fx 106+ *//*
#private-browsing-indicator-with-label {
  display: none !important;
}

/* Fx 110+ - remove line below active tab */
#nav-bar:not([tabs-hidden="true"]) {
  position: unset !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])),
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  margin-inline-start: 0px !important;
}

.tabbrowser-tab:is([selected],[multiselected]) {
  z-index: 100 !important;
}

#main-window:-moz-window-inactive #titlebar {
  opacity: 1.0 !important;
}

/* Fx 126+ - remove line below active tab (custom theme) */
#TabsToolbar #tabbrowser-arrowscrollbox {
  margin-top: 1px !important;
  margin-bottom: -1px !important;
}

:root {
  --tab-selected-bgcolor: unset !important;
}

/* Fx 133+ */
#tabbrowser-tabs[orient="horizontal"] .tab-background,
#tabbrowser-tabs[orient="horizontal"] {
  min-height: unset !important;
}

/* Fx 141+ */
#pinned-tabs-container[orient="horizontal"] {
  margin-inline-end: 0 !important;
}

But in the end, I got the same look as before the update. The bottom border of the active pinned tab no longer disappears. This bug did not exist in FF 140 and appeared in FF141.

Image

Please help me fix it, as I don't have enough knowledge to do it myself. Maybe you could add my version v2 to the project, as it has a more classic look with outlines around active tabs and navigation bar outlines.

Hobbix avatar Jul 25 '25 10:07 Hobbix

It seems I managed to fix it.

I deleted this code:

/* Fx 126+ - remove line below active tab (custom theme) */
#TabsToolbar #tabbrowser-arrowscrollbox {
  margin-top: 1px !important;
  margin-bottom: -1px !important;
}

And added this code:

/* Fx 126+ - remove line below active tab (custom theme) */
#TabsToolbar #tabbrowser-arrowscrollbox {
  margin-top: 1px !important;
  margin-bottom: 0px !important; /* change -1px to 0px  */ 
}

/* Fx 126+ */
:root[lwtheme] #nav-bar {
  border-top: 0px !important;
  box-shadow: 0 calc(-1 * 1px) 0 color-mix(in srgb, currentColor 30%, transparent) !important; /* add this */ 
}

The result looks like this:

Image

However, there is one small problem that I cannot solve. The vertical separator line between the last inactive pinned tab and the next active tab does not disappear. (see screenshot below).

Image

Please help fix this.

Below is the complete CSS code:

/* Firefox userChrome.css tweaks ****************************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ********************************************/
/************************************************************************************************/


:root {
  /* variable for tabs below navigation toolbar option */
  --tab_below_navigation_toolbar_bottom_padding: calc( var(--tab-min-height) + 0.5px ) !important;
  
  /* Set the border color and thickness for the selected tab. */
  --tab-min-height: 32px !important; 
  --classic_squared_tabs-border1: #aaaaaa; 
  --classic_squared_tabs-border_size: 1px;
  
  /* The border between the navigation URL bar and the tab bar */
  --tabs-navbar-separator-color: #aaaaaa !important; /* color of the separator between the URL bar and the tab bar FF126+  */
  
  /* border between the navigation URL bar and the body of the page */
  --chrome-content-separator-color: #aaaaaa !important; /* color of the separator below the URL bar and the body of the page FF140+  */
  
  /* variable for tabs below navigation toolbar option on macOS */
  --tab_below_navigation_toolbar_bottom_padding_macOS: calc( var(--tab-min-height) + 1px ) !important;
  --tab_below_navigation_toolbar_toolbox_top_padding_macOS: calc(-1px + var(--tab-min-height)) !important;
  
  /* variable for tabs below main content option */
  --tab_below_main_content_bottom_margin: calc(3px + var(--tab-min-height)) !important;
  --tab_below_main_content_toolbar_height: calc(2px + var(--tab-min-height)) !important;
  --tab_below_main_content_top_margin: 0px !important;

}

/* make tabs look like tabs again */
.tab-background {
  border-radius: 0px !important;
  margin-block: 0px !important;
}

:root:not([lwtheme]) .tab-background:is([selected],[multiselected]) {
  background-image: var(--classic_squared_tabs_active_tab) !important;
}

:root[lwtheme] .tab-background:is([selected],[multiselected]) {
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage) !important;
}

/* remove left and right tab spaces */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab],
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) #tabbrowser-arrowscrollbox .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0px !important;
}

.tabbrowser-tab {
  padding-inline: 0px !important;
  border-radius: 0px !important;
}

/* adjust 'new tab' tab */
#tabs-newtab-button {
  padding-inline: 1px !important;
  border-radius: 0px !important;
}

#tabs-newtab-button .toolbarbutton-icon {
  border-radius: 0px !important;
}

/* reduce scrollbuttons size */
#scrollbutton-up,
#scrollbutton-down {
  padding: 0 !important;
  border-radius: 0 !important;
}

/*tab line for active tab */
.tabbrowser-tab .tab-context-line {
  height: 2px !important;
  border-radius: 0px !important;
}

.tabbrowser-tab[selected]:not([usercontextid]) .tab-context-line {
  background-color: Highlight !important;
}

:root[lwtheme]:not([lwtheme-image="true"]):not([lwtheme-mozlightdark]) .tabbrowser-tab[selected]:not([usercontextid]) .tab-context-line {
  background-color: var(--tab-line-color,Highlight) !important;
}

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  margin: unset !important;
  background-color: var(--identity-icon-color) !important;
}

/* border between navigation toolbar and tabs toolbar */
:root:not([lwtheme]) #nav-bar {
  box-shadow: 0 calc(-1 * 1px) 0 color-mix(in srgb, currentColor 20%, transparent) !important;
}

:root[lwtheme] #nav-bar {
  box-shadow: unset !important;
}

/* Tab separators: modified Fx88s browser.css code */
.titlebar-spacer[type="pre-tabs"] {
  border-inline-end: 1px solid var(--lwt-background-tab-separator-color, currentColor);
  opacity: 0.2;
}

.tabbrowser-tab/*:not([pinned])*/::before,
.tabbrowser-tab/*:not([pinned])*/:not([selected],[multiselected]):last-of-type::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab/*:not([pinned])*/[selected] + .tabbrowser-tab::before {
  border-right: 1px solid transparent;
  margin-block: 5px 4px;
  opacity: 0.3;
  content: "";
  display: block;
}
.tabbrowser-tab/*:not([pinned])*/:not([selected],[multiselected])::before,
.tabbrowser-tab/*:not([pinned])*/:hover:not([selected]):nth-child(1 of :not(/*[pinned],*/ [hidden]))::before,
.tabbrowser-tab/*:not([pinned])*/:hover:not([selected])[first-visible-unpinned-tab]::before,
.tabbrowser-tab/*:not([pinned])*/:not([selected],[multiselected]):last-of-type::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab/*:not([pinned])*/[selected] + .tabbrowser-tab::before {
  border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor);
}

.tabbrowser-tab/*:not([pinned])*/:not([selected]):nth-child(1 of :not(/*[pinned],*/ [hidden]))::before,
.tabbrowser-tab/*:not([pinned])*/:not([selected])[first-visible-unpinned-tab]::before,
.tabbrowser-tab/*:not([pinned])*/[selected] + .tabbrowser-tab:not([selected])::before,
.tabbrowser-tab/*:not([pinned])*/[multiselected]:not([selected]) + .tabbrowser-tab:not([selected])::before {
  border-right: 1px solid transparent;
}

.tabbrowser-tab::before {
  margin-inline-start: -1px;
}

:root:is([tabsintitlebar],[customtitlebar]):not([extradragspace]) #toolbar-menubar[autohide=true] + :is(#TabsToolbar,#vertical-tabs) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox .tabbrowser-tab[beforehovered]::after,
.tabbrowser-tab[multiselected]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox .tabbrowser-tab[before-multiselected]::after {
  margin-top: var(--tabs-top-border-width);
  margin-bottom: 0;
}

#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after,
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox .tabbrowser-tab[beforeselected-visible]::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox .tabbrowser-tab[visuallyselected]::before,
.tabbrowser-tab[visuallyselected]::after {
  border-color: var(--tabs-border-color);
  margin-top: 0;
  margin-bottom: var(--tabs-navbar-shadow-size);
  opacity: 0.1;
}

.tabbrowser-tab::after,
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
  content: "";
  display: block;
}

/* Add borders to active tab on the left/right/top when using lw-themes */
:root[lwtheme]:not([lwtheme-mozlightdark]) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background,
:root[lwtheme]:not([lwtheme-mozlightdark]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
  box-shadow: unset !important; /* removes the shadow cast by the selected tab on the left and right */
  border-top: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
  border-left: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
  border-right: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
}

:root[lwtheme] .tab-background:is([selected], [multiselected]){
  border: 0 !important;
}

/* tab height fix ESR 91.6, 96.0.2, 97+ */
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
  height: unset !important;
}

/* Fx 100+ outline fix */
:root[lwtheme] :is(#TabsToolbar,#vertical-tabs) #firefox-view-button[open] > .toolbarbutton-icon,
:root[lwtheme] .tab-background[selected] {
  outline: unset !important;
}

/* Fx 101+ */
@media (-moz-platform: windows) {
	
	#main-window[sizemode="maximized"]:is([tabsintitlebar],[customtitlebar]) #titlebar {
	  margin-top: -1px !important;
	}
}

/* Fx 106+ *//*
#private-browsing-indicator-with-label {
  display: none !important;
}

/* Fx 110+ - remove line below active tab */
#nav-bar:not([tabs-hidden="true"]) {
  position: unset !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])),
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  margin-inline-start: 0px !important;
}

.tabbrowser-tab:is([selected],[multiselected]) {
  z-index: 100 !important;
}

#main-window:-moz-window-inactive #titlebar {
  opacity: 1.0 !important;
}

/* Fx 126+ - remove line below active tab (custom theme) */
#TabsToolbar #tabbrowser-arrowscrollbox {
  margin-top: 1px !important;
  margin-bottom: 0px !important;
}

/* Fx 126+ */
:root[lwtheme] #nav-bar {
  border-top: 0px !important;
  box-shadow: 0 calc(-1 * 1px) 0 color-mix(in srgb, currentColor 30%, transparent) !important;
}

:root {
  --tab-selected-bgcolor: unset !important;
}

/* Fx 133+ */
#tabbrowser-tabs[orient="horizontal"] .tab-background,
#tabbrowser-tabs[orient="horizontal"] {
  min-height: unset !important;
}

/* Fx 141+ */
#pinned-tabs-container[orient="horizontal"] {
  margin-inline-end: 0 !important;
}

Hobbix avatar Jul 25 '25 11:07 Hobbix

I managed to fix everything. Here is the working version.

default_tabs_photon_alt_v2.css

/* Firefox userChrome.css tweaks ****************************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ********************************************/
/************************************************************************************************/


:root {
  /* variable for tabs below navigation toolbar option */
  --tab_below_navigation_toolbar_bottom_padding: calc( var(--tab-min-height) + 0.5px ) !important;
  
  /* Set the border color and thickness for the selected tab. */
  --tab-min-height: 32px !important; 
  --classic_squared_tabs-border1: #aaaaaa; 
  --classic_squared_tabs-border_size: 1px;
  
  /* The border between the navigation URL bar and the tab bar */
  --tabs-navbar-separator-color: #aaaaaa !important; /* color of the separator between the URL bar and the tab bar FF126+  */
  
  /* border between the navigation URL bar and the body of the page */
  --chrome-content-separator-color: #aaaaaa !important; /* color of the separator below the URL bar and the body of the page FF140+  */
  
  /* variable for tabs below navigation toolbar option on macOS */
  --tab_below_navigation_toolbar_bottom_padding_macOS: calc( var(--tab-min-height) + 1px ) !important;
  --tab_below_navigation_toolbar_toolbox_top_padding_macOS: calc(-1px + var(--tab-min-height)) !important;
  
  /* variable for tabs below main content option */
  --tab_below_main_content_bottom_margin: calc(3px + var(--tab-min-height)) !important;
  --tab_below_main_content_toolbar_height: calc(2px + var(--tab-min-height)) !important;
  --tab_below_main_content_top_margin: 0px !important;

  --tab-selected-bgcolor: unset !important;
}

/* make tabs look like tabs again */
.tab-background {
  border-radius: 0px !important;
  margin-block: 0px !important;
}

:root:not([lwtheme]) .tab-background:is([selected],[multiselected]) {
  background-image: var(--classic_squared_tabs_active_tab) !important;
}

:root[lwtheme] .tab-background:is([selected],[multiselected]) {
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage) !important;
}

.tabbrowser-tab {
  padding-inline: 0px !important;
  border-radius: 0px !important;
}

/* adjust 'new tab' tab */
#tabs-newtab-button {
  padding-inline: 1px !important;
  border-radius: 0px !important;
}

#tabs-newtab-button .toolbarbutton-icon {
  border-radius: 0px !important;
}

/* reduce scrollbuttons size */
#scrollbutton-up,
#scrollbutton-down {
  padding: 0 !important;
  border-radius: 0 !important;
}

/*tab line for active tab */
.tabbrowser-tab .tab-context-line {
  height: 2px !important;
  border-radius: 0px !important;
}

.tabbrowser-tab[selected]:not([usercontextid]) .tab-context-line {
  background-color: Highlight !important;
}

:root[lwtheme]:not([lwtheme-image="true"]):not([lwtheme-mozlightdark]) .tabbrowser-tab[selected]:not([usercontextid]) .tab-context-line {
  background-color: var(--tab-line-color,Highlight) !important;
}

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  margin: unset !important;
  background-color: var(--identity-icon-color) !important;
}

/* border between navigation toolbar and tabs toolbar */
:root:not([lwtheme]) #nav-bar {
  box-shadow: 0 calc(-1 * 1px) 0 color-mix(in srgb, currentColor 20%, transparent) !important;
}

:root[lwtheme] #nav-bar {
  box-shadow: unset !important;
}

/* Add borders to active tab on the left/right/top when using lw-themes */
:root[lwtheme]:not([lwtheme-mozlightdark]) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background,
:root[lwtheme]:not([lwtheme-mozlightdark]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
  box-shadow: unset !important; /* removes the shadow cast by the selected tab on the left and right */
  border-top: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
  border-left: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
  border-right: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border1) !important; /* adds a tab border */
}

:root[lwtheme] .tab-background:is([selected], [multiselected]){
  border: 0 !important;
}

/* tab height fix ESR 91.6, 96.0.2, 97+ */
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
  height: unset !important;
}

/* Fx 100+ outline fix */
:root[lwtheme] :is(#TabsToolbar,#vertical-tabs) #firefox-view-button[open] > .toolbarbutton-icon,
:root[lwtheme] .tab-background[selected] {
  outline: unset !important;
}

/* Fx 101+ */
@media (-moz-platform: windows) {
  #main-window[sizemode="maximized"]:is([tabsintitlebar],[customtitlebar]) #titlebar {
    margin-top: -1px !important;
  }
}

/* Fx 106+ *//*
#private-browsing-indicator-with-label {
  display: none !important;
}

/* Fx 110+ - remove line below active tab */
#nav-bar:not([tabs-hidden="true"]) {
  position: unset !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])),
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  margin-inline-start: 0px !important;
}

.tabbrowser-tab:is([selected],[multiselected]) {
  z-index: 100 !important;
}

#main-window:-moz-window-inactive #titlebar {
  opacity: 1.0 !important;
}

/* Fx 126+ - remove line below active tab (custom theme) */
#TabsToolbar #tabbrowser-arrowscrollbox {
  margin-top: 1px !important;
  margin-bottom: 0px !important;
}

/* Fx 126+ */
:root[lwtheme] #nav-bar {
  border-top: 0px !important;
  box-shadow: 0 calc(-1 * 1px) 0 color-mix(in srgb, currentColor 30%, transparent) !important;
}

/* Fx 133+ */
#tabbrowser-tabs[orient="horizontal"] .tab-background,
#tabbrowser-tabs[orient="horizontal"] {
  min-height: unset !important;
}

/* Fx 141+ */
#pinned-tabs-container[orient="horizontal"] {
  margin-inline-end: 0 !important;
}

/* === TAB SEPARATORS SECTION === */

/* Align the tab separator (::after) to avoid visual gaps */
/* Hides the separator after the last active pinned tab. */
.tabbrowser-tab::after {
  margin-inline-start: -1px;
}

/* General styles and dimensions for all separators */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
  margin-block: 5px 4px;
  content: "";
  display: block;
  border-right: 1px solid transparent;
  opacity: 0.3;
}

/* Add separators between pinned tabs */
.tabbrowser-tab[pinned] + .tabbrowser-tab[pinned]::before {
  border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor);
}

/* Hide the separator to the left of active and multi-selected tabs */
.tabbrowser-tab:is([selected], [multiselected])::before {
  border-right: 1px solid transparent !important;
}

/* Hide the left separator of the tab that comes after the active tab */
.tabbrowser-tab[selected] + .tabbrowser-tab::before,
.tabbrowser-tab[multiselected] + .tabbrowser-tab::before {
  border-right-color: transparent !important;
  opacity: 0 !important;
}

/* Add separators between regular tabs, except the first one */
.tabbrowser-tab:not([pinned]):not([selected],[multiselected]):not(:first-of-type)::before,
.tabbrowser-tab:not([pinned]):not([selected],[multiselected]):last-of-type::after {
  border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor);
}

/* Add a separator to the right of the last pinned tab */
.tabbrowser-tab[pinned]:last-of-type::after {
  border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor);
  margin-block: 5px 4px;
  opacity: 0.3;
  content: "";
  display: block;
}

/* Hide the left separator if the first regular tab is selected */
#tabbrowser-tabs:has(.tabbrowser-tab:not([pinned]):first-of-type[selected]) .tabbrowser-tab[pinned]:last-of-type::after {
  border-right-color: transparent !important;
}

/* Shift the first regular tab 1px to the left (align it with the separator) */
.tabbrowser-tab:not([pinned]):nth-child(1 of :not([pinned])) {
  margin-inline-start: -1px !important;
}

Hobbix avatar Jul 28 '25 21:07 Hobbix