FF 93 Active Tab

[makaiguy]

I haven't been around here much lately so I'm not up on the latest ...

Has anyone come up with a way to better differentiate the appearance of the active tab - via background or text color, making the thin outline more prominent, or other means?

[dickvl]

You can use userChrome.css, see:
https://www.userchrome.org/firefox-89-s ... #tabstyler

[makaiguy]

Nothing Ive tried adding to /chrome/userChrome.css has made any difference to active tab appearance.

This is on FF 93.0, 64-bit, on Win10 prof.

Latest attempt, added after my FF 89 tweaks for tabs on bottom:

/* Set color for active tab */
.tabbrowser-tab[selected] .tab-background::before {
background-color: #ffff00; !important;
}

[dickvl]

Code: Select all

.tab-background[multiselected="true"], .tab-background[selected="true"] {
  background-color: #ffff00; !important;
}

[makaiguy]

Code: Select all

.tab-background[multiselected="true"], .tab-background[selected="true"] {
  background-color: #ffff00; !important;
}

Thanks, dickvl, but still a no-go.

I'm the first to admit I know zip about CSS coding so rely on cutting/pasting code bits from others.

Tried removing the comma after .tab-background[multiselected="true"] but didn't help.

Here's my full current userChrome.css file:

Code: Select all

/*** userChrome.css file for Firefox 89 ***/

/*** Tighten up drop-down/context/popup menu spacing ***/
/*** Source: https://www.userchrome.org/firefox-89-styling-proton-ui.html#menuspacing  ***/
menupopup > menuitem, menupopup > menu {
  padding-block: 4px !important;
}
:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}

/* ####### Hide individual Tab Close buttons ####### */
  #tabbrowser-tabs .tabbrowser-tab .tab-close-button {
    display: none !important;
  }
  #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    display: none !important;
  }

/*** 4. TABS: on bottom ***/
*|*:root {
--menubar-height: 36px;
--bookmarkbar-height: 18.3px;
--tabbar-top: calc(var(--menubar-height) + var(--bookmarkbar-height) + var(--tab-min-height) + 8px); /*89+*/
}

#TabsToolbar {
display: block !important;
position: absolute !important;
top: var(--tabbar-top) !important;
width: 100vw !important;
}

#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}

/* **** Addition for Firefox 93  2021/11/02 **** */

/* Set color for active tab - doesn't work */
.tab-background[multiselected="true"] .tab-background[selected="true"] {
  background-color: #ffff00; !important;
}

[dickvl]

You have a semi-colon before !important: background-color: #ffff00; !important;
Should be: background-color: #ffff00 !important;
You also need a comma between the two selectors:

Code: Select all

 .tab-background[multiselected="true"], .tab-background[selected="true"] {
  background-color: #ffff00 !important;
 }

Try this code:

Code: Select all

/*** userChrome.css file for Firefox 89 ***/

/*** Tighten up drop-down/context/popup menu spacing ***/
/*** Source: https://www.userchrome.org/firefox-89-styling-proton-ui.html#menuspacing  ***/
menupopup > menuitem, menupopup > menu {
  padding-block: 2px !important;
  min-height: unset !important;
}
:root {
  --arrowpanel-menuitem-padding: 2px 8px !important;
}

/* ####### Hide individual Tab Close buttons ####### */
  #tabbrowser-tabs .tabbrowser-tab .tab-close-button {
    display: none !important;
  }
  #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    display: none !important;
  }

/*** 4. TABS: on bottom ***/
/* see also http://forums.mozillazine.org/viewtopic.php?f=38&t=3075330&p=14894237#p14894237 */

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
 width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
 padding-bottom: var(--tab-min-height) !important;
 position: relative !important;
 background-color: var(--toolbar-bgcolor) !important;
}

/* TABS: APPEARANCE */
#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* TABS: HEIGHT */
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox,
#tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* **** Addition for Firefox 93  2021/11/02 **** */

/* Set color for active tab - should work */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
  background-color: #ffff00 !important;
}

[makaiguy]

Code: Select all

/* Set color for active tab - should work */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
  background-color: #ffff00 !important;
}

That got it. Thanks, muchly!

[DSperber]

Carrying on from the superb suggestion by @dickvl, I have settled on the following highlighting for the active tab, defining both background color (SlateGrey) as well as the foreground text color (white). Code snippet goes into userChrome.css

Also implemented is the newly discovered option to RESTORE WINDOW TITLE BAR (which I thought had simply been removed):

Open Application Menu (i.e. hamburger menu) -> More Tools -> Customize Toolbar -> lower-left corner "Title bar" box -> CHECK IT

Code: Select all

/* Set color for active tab */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
  background-color: SlateGrey !important;
}

/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}