Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Firefox Tree Style Tab Customization
/* tab height */
:root {
--tab-height: 22px !important;
background-color: #000000;
}
.tab {
height: var(--tab-height) !important;
background: #4d4e51;
color: #bbc2cf;
}
.tab.active {
height: var(--tab-height) !important;
background: #98be65;
color: #1B2229;
}
.tab:hover {
background: #193B99 !important;
color: #bbc2cf;
opacity: 1;
}
/* scroll bar on right */
:root.left #tabbar {
direction: ltr;
}
/* Tab fonts*/
* {
font-family: "Hack";
font-size: 12px;
}
/* Show title of unread tabs with red and italic font */
.tab.unread .label {
color: #51afef !important;
font-style: italic !important;
}
/* Add private browsing indicator per tab */
.tab.private-browsing .label:before {
content: "🕶 ";
}
.closebox::after {
content: "";
color: #1B2229;
line-height: 1.3;
mask: none;
text-align: center;
width: 1.25em;
}
#tabbar { background-color: #282c34; }
.tab.pinned
{ margin-top: 1px; margin-bottom: 1px; background-color: #282c34;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.