Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Meer info

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

Add top border to inacytive tabs

  • 3 antwoorden
  • 1 heeft dit probleem
  • 18 weergaven
  • Laatste antwoord van PCZero

more options

What is the entry I need to add to usechrome.css to add a border to the inactive tabs in FireFox? With the default configuration, the inactive tabs blur into the menu bar. When hovered the inactive tabs changes to a darker grey and has the border added. I'd like to add the bored to all inactive tabs whether hovered or not.

What is the entry I need to add to usechrome.css to add a border to the inactive tabs in FireFox? With the default configuration, the inactive tabs blur into the menu bar. When hovered the inactive tabs changes to a darker grey and has the border added. I'd like to add the bored to all inactive tabs whether hovered or not.
Gekoppelde schermafbeeldingen

Gekozen oplossing

If you aren't looking for something that has the tab shape, just a solid line, you could add a background color on the tabs "behind" the tab line element. This uses a linear gradient (top to bottom) to start gray and switch to transparent after a few pixels:

.tabbrowser-tab {
  background-image: linear-gradient(rgba(0,0,0,.2) 3px, transparent 1px, transparent 99%);
}


Two notes:

(1) I tested with the Light theme; this color probably won't work well on other themes.

(2) I think it's a little more attractive if the top line is thinner. For example, 2 pixels on the gray band:

.tabbrowser-tab {
  background-image: linear-gradient(rgba(0,0,0,.2) 2px, transparent 1px, transparent 99%);
}
Dit antwoord in context lezen 👍 0

Alle antwoorden (3)

more options

Looks this is done via this CSS code:

.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]) {
  background-color: rgba(0,0,0,.2);
  opacity: 1;
  transform: none;
}

To apply this code for all tabs you can try:

.tabbrowser-tab > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]) {
  background-color: rgba(0,0,0,.2) !important;
  opacity: 1 !important;
  transform: none !important;
}
more options

Gekozen oplossing

If you aren't looking for something that has the tab shape, just a solid line, you could add a background color on the tabs "behind" the tab line element. This uses a linear gradient (top to bottom) to start gray and switch to transparent after a few pixels:

.tabbrowser-tab {
  background-image: linear-gradient(rgba(0,0,0,.2) 3px, transparent 1px, transparent 99%);
}


Two notes:

(1) I tested with the Light theme; this color probably won't work well on other themes.

(2) I think it's a little more attractive if the top line is thinner. For example, 2 pixels on the gray band:

.tabbrowser-tab {
  background-image: linear-gradient(rgba(0,0,0,.2) 2px, transparent 1px, transparent 99%);
}
more options

Thank you both for your responses. Very helpful. I opted for the following...

.tabbrowser-tab {

 background-image: linear-gradient(rgba(0,0,0,.2) 1px, transparent 1px, transparent 99%);

}

This gave me exactly what I want/need! Very much appreciate your assistance.