Add top border to inacytive tabs
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.
Chosen solution
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%);
}
Read this answer in context
👍 0
All Replies (3)
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;
}
Seçilmiş Həll
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%);
}
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.