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.
Zgjidhje e zgjedhur
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%);
}
Lexojeni këtë përgjigje brenda kontekstit
👍 0
Krejt Përgjigjet (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;
}
Zgjidhja e Zgjedhur
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.