On Aug 14th 11 PM ET/Aug 15th 03:00 UTC, due to scheduled Firefox Account server maintenance, users may not be able to sign in or create a new subscription. This is expected to last approximately 30 minutes. Status updates can be found at https://status.vpn.mozilla.org or https://status.relay.firefox.com.

Vyhľadajte odpoveď

Vyhnite sa podvodom s podporou. Nikdy vás nebudeme žiadať, aby ste zavolali alebo poslali SMS na telefónne číslo alebo zdieľali osobné informácie. Nahláste prosím podozrivú aktivitu použitím voľby “Nahlásiť zneužitie”.

Learn More

Add top border to inacytive tabs

  • 3 odpovede
  • 1 má tento problém
  • 121 zobrazení
  • Posledná odpoveď od 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.
Priložené obrázky

Vybrané riešenie

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%);
}
Čítať túto odpoveď v kontexte 👍 0

Všetky odpovede (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

Vybrané riešenie

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.