This is a long one. Making tabs look exactly like brave is easy, the hard part is making them function like Brave's, which I still haven't 100% gotten down. Here we go.
<aside> ❤️ Notable Help: u/It_Was_The_Other_Guy & u/qaz69wsx
</aside>
Similar to that of the toolbar icons, the new tab button also has too much padding inside it's box, so it is has been reduced to 2px so that it isn't directly touching the hitbox, but sitting comfortably in the centre.
/* Makes New Tab Button Hitbox Not Take Up The Size Of Tab Bar */
/* Thanks u/qaz69wsx */
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
--toolbarbutton-inner-padding: 2px;
}
This sets a value of 5px as the corner radius of the top two corners of every tab, then applies it to each tab.
/* Set Value For Radius For Both Top Corners */
#tabbrowser-tabs {
--user-tab-rounding: 5px;
}
/* Adjust Tab Corner Shape */
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
Before
After
Pinned tabs somehow got text in them with the use of some bit of code (I don't know witch one), this fixes that by removing them.
/* Slaughter Text From Pinned Tabs */
.tab-text[pinned] {
display: none !important;
}
Pined tabs need to have a fixed size due to me turning off tab overflow and them deciding to go all sicko mode on the tab bar when you open many tabs. Though this does somehow make the favicons not cantered when having multiple pinned tabs and that is fixed here.
/* Make Pinned Tabs Have Fixed Size */
.tabbrowser-tab[pinned] {
max-width: 35px !important;
min-width: 35px !important;
}
Firefox's default tab size is alright, but not long enough for what we're going for. This sets the largest allowed size to be 245px, which almost matches Brave's.
/* Makes Tabs Have A Bigger Max Size To Match Brave's */
.tabbrowser-tab[fadein]:not([pinned]) {
max-width: 245px !important;
}
The glaringly big difference between Brave and Firefox is the height of their tabs, one is short and reaches to the top of the page, while the other is floating and centred. This makes tabs have a smaller height to match Brave's.
/* Changes Minimum Hight For Tabs [Do Not Touch] */
#TabsToolbar,
#tabbrowser-tabs {
--tab-min-height: 30px !important;
}
Brave is confusing with their margin decisions, this adds a few pixels to the left side of the new tab icon so that it's similar to Brave's.
/* Add Space Between New Tab Button & Last Tab */
#tabs-newtab-button {
margin-left: 9px !important;
}
Warning: This snippet contains things I don't know the use for, but it helps with making the tab-bar smaller.
/*
Override Normal Density To Compact Density For Tabs.
I Have No Idea What What This Does, I Got It From
<https://www.userchrome.org/>
*/
/* W h a t d o e s t h i s d o */
#scrollbutton-up,
#scrollbutton-down {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
}
/*Idk What This Does But This Was The Note Given:
"Set A Max Height Based On Min-height Plus Margin-block: 1px 0"
Don't Touch The "9px" Tho, That's What's "Perfect" From What I Tested */
#TabsToolbar,
#TabsToolbar > hbox,
#TabsToolbar-customization-target,
#tabbrowser-arrowscrollbox {
max-height: calc(var(--tab-min-height) + 9px) !important;
}
/*══════════════════════════════════════════════════════════*/
Names of selected tabs in Brave become bolder when they are selected. Specifically in the font weight 600. This puts that into Firefox.
/* Make Tab Name Semi-Bold When Selected */
.tab-text[selected] {
font-weight: 600 !important;
}
Brave has more padding whenever you make your window not maximized, this adds 8px of padding to the top of the tab menu when in "normal"/not maximized mode which I guess is there for you to be able to drag your window around when not in maximized.
/* Adds Padding To The Top Of The Browser When Not Maximized */
/* Thanks u/qaz69wsx */
:root[sizemode="normal"] #tabbrowser-tabs {
padding-top: 8px;
}
Ok Mozilla. Why. Why did you make a separator between the toolbar and page content? Who is this helping? Anyway, into the void it goes.
/* Remove Stupid Black Line Under Toolbar */
:root {
--chrome-content-separator-color: none !important;
}
Brave doesn't like personal space. If Brave's tabs were people they would be very uncomfortable, always being 0px away from each other. This reduces the size between each tab to be touching each other. It isn't perfect, due to having to add separators, so there is a 1px gab between each other, bit it's only visible when hovering over a tab near the selected one.
/* Annihilate Padding Between Tabs */
.tabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
}
Since Brave's tabs are connected to the tool bar, it would only make sense if they were the same colour. This snippet makes that the case. Though if you really want to make Firefox look like brave, you can install the Brave-Fox Theme I've created to match the same colours as brave. It's fine if you don't, but it just makes all the colours match.
/* Make Tab Colour Same As Toolbar (If You Aren't Using The [Brave-Fox Theme](<https://addons.mozilla.org/en-GB/firefox/addon/brave-fox/>)) */
:root {
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
}
Basically all chromium based browsers seems to have some sort of tab separators. Firefox said no and would rather just have long strings of tab names and icons near each other on non-selected tabs. This snippet adds those tab separators to Firefox, though they do look like Brave's version of them, where each separator goes all the way down to the bottom of the tab bar, unlike Chrome and Microsoft Edge.
Also a small... inconvenience. Since we're using background image as the divider, hiding / reviling the separators at certain times is very hard to do, so you might have to live with having a permanent separator stuck to the left of every selected tab until the tab left of it is hovered on. I made this call so as to make the gap between tabs be 0px, but also have separators. Slightly annoying, but able to get used to.
/* Adds's Brave "Like" Tab Dividers */
/* Thanks u/It_Was_The_Other_Guy */
/* Thanks Again For Animation Version */
.tabbrowser-tab::after {
width: 1px;
content: "";
margin-left: 0px;
display: -moz-box;
background-image: linear-gradient(
transparent 25%,
color-mix(in srgb, currentColor 20%, transparent) 10%,
color-mix(in srgb, currentColor 20%, transparent) 100%,
transparent 80%
);
transition: opacity 300ms linear !important;
}
.tabbrowser-tab[beforehovered]::after,
.tabbrowser-tab[beforeselected-visible]::after {
opacity: 0;
}
/* Make Tab Colour Same As ToolBar (If You Aren't Using The Brave-Fox Theme) */
:root {
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
}
/* Add Space Between New Tab Button & Last Tab */
#tabs-newtab-button {
margin-left: 9px !important;
}
/* Remove Stupid Black Line Under ToolBar */
:root {
--chrome-content-separator-color: none !important;
}
/* Set Value For Radius For Both Top Corners */
#tabbrowser-tabs {
--user-tab-rounding: 5px;
}
/* Adjust Tab Corner Shape */
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
/* Makes New Tab Button Hitbox Not Take Up The Size Of Tab Bar */
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
--toolbarbutton-inner-padding: 2px;
}
/* Slaughter Text From Pinnend Tabs */
.tab-text[pinned] {
display: none !important;
}
/* Make Tab Name Semi-Bold When Selected */
.tab-text[selected] {
font-weight: 600 !important;
}
/* Adds Padding To The Top Of The Browser When Not Maximized */
:root[sizemode="normal"] #tabbrowser-tabs {
padding-top: 8px;
}
/* Annihilate Padding Between Tabs */
.tabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Changes Minimum Hight For Tabs [Do Not Touch] */
#TabsToolbar,
#tabbrowser-tabs {
--tab-min-height: 30px !important;
}
/* Adds's Brave "Like" Tab Dividers */
/* Thanks u/It_Was_The_Other_Guy */
/* Thanks Again For Animation Version */
.tabbrowser-tab::after {
width: 1px;
content: "";
margin-left: 0px;
display: -moz-box;
background-image: linear-gradient(
transparent 25%,
color-mix(in srgb, currentColor 20%, transparent) 10%,
color-mix(in srgb, currentColor 20%, transparent) 100%,
transparent 80%
);
transition: opacity 300ms linear !important;
}
.tabbrowser-tab[beforehovered]::after,
.tabbrowser-tab[beforeselected-visible]::after {
opacity: 0;
}
/* Remove 1px Gap */
.tabbrowser-tab:hover::after {
width: 0px;
transition: width 350ms linear !important;
}
/* Hides Separator On Selected Tabs */
.tabbrowser-tab[selected]::after {
width: 0px;
}
/* Make Pinned Tabs Have One Size No Matter How Many Tabs Are Open */
.tabbrowser-tab[pinned] {
max-width: 35px !important;
min-width: 35px !important;
}
/* Makes Tabs Have A Bigger Max Size To Match Brave's */
.tabbrowser-tab[fadein]:not([pinned]) {
max-width: 245px !important;
}
/*
Override Normal Density To Compact Density For Tabs.
I Have No Idea What What This Does, I Got It From
<https://www.userchrome.org/>
*/
/* W h a t d o e s t h i s d o */
#scrollbutton-up,
#scrollbutton-down {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
}
/*Idk What This Does But This Was The Note Given:
"Set A Max Height Based On Min-height Plus Margin-block: 1px 0"
Don't Touch The "9px" Tho, That's What's "Perfect" From What I Tested*/
#TabsToolbar,
#TabsToolbar > hbox,
#TabsToolbar-customization-target,
#tabbrowser-arrowscrollbox {
max-height: calc(var(--tab-min-height) + 9px) !important;
}
/*══════════════════════════════════════════════════════════*/