Brave's toolbar is relatively short compared to it's Firefox counterpart. Firefox's toolbar buttons (back, forward, reload, menu, etc.) also manage to take up larger space, as their padding inside of their button is much larger than that of Brave.
The toolbar's navigation buttons normally have a padding of 8px, this changes that to be 5px.
/* Padding Inside Toolbar Icons (Back, Forward, Refresh) (Inside Their Hitbox) */
:root{
--toolbarbutton-inner-padding:5px !important;
}
After making the padding on each toolbar button 5px with [Padding Between Toolbar Icons](<https://brave-fox.notion.site/Brave-Toolbar-1f568bb6c7c54274ad8b7f1c4cca08b3>), the reader mode button has been turned into a tiny little baby paper instead of the normal sized one. The padding might look good for the other buttons, but not on the paper. This snippet just sets the padding to 0px. Now this does make the reader Mode icon no longer a square, but that luckily makes it more resemble Brave's buttons which reside inside the URL bar.
/* Fix Tiny Reader Mode Button */
#reader-mode-button {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
Makes the URL bar have a minimum height, which for some reason doesn't make the bar grow with any resizing of the window . So all in all just reduces the size of the URL bar to fit the small toolbar that's coming.
/* Small URL Bar Height */
:root,
#urlbar-container,
#search-container,
#nav-bar-customization-target,
#nav-bar{
--urlbar-min-height: 28px !important;
}
After changing all the heights of the URL bar and the toolbar, we're left with incorrect padding on the both top and bottom of the URL bar. This fixes that and makes it even on both sides.
/* Remove Top And Bottom Padding Of URL Bar */
#urlbar-container {
padding-top: 8px !important;
padding-bottom: 0px !important;
}
Just makes the toolbar have a fixed hight to match that of Brave's.
/* Make Toolbar Small */
#urlbar-container,
#search-container,
#nav-bar-customization-target,
#nav-bar {
--urlbar-toolbar-height: 20px !important;
--urlbar-container-height: 37px !important;
}
After making the toolbar's buttons smaller by reducing their inner-padding, Firefox's default state leaves the buttons having more empty room on the left side of the toolbar. This is reduced to match the same left margins as Brave.
/* Make Back Button Closer To Left Side */
#back-button {
margin-left: 0px !important;
}
Brave's Privacy dropdown is very different to that of Firefox's. So much so that I dont think it would be possible to change without the use of JS. So I've added a small sliver of similarity by changing the Secure / Not Secure text to match the colours that Brave's has.
/* Make Site Information Dropdown Look Like Brave (Kinda) */
/* Connection Not Secure Text Color */
.identity-popup-connection-not-secure{
color: #F28B82 !important;
}
/* Connection Not Secure Text Color */
.identity-popup-connection-secure{
color: #81C995 !important;
}
Brave doesn't have a refresh animation. Now neither does Firefox.
/* Kill Refresh Animation */
#nav-bar-customization-target >
#stop-reload-button >
:is(#reload-button, #stop-button) >
.toolbarbutton-animatable-box {
display: none !important;
}
Since we killed the refresh animation, we also somehow killed the stop refreshing x icon. This brings it back
/* Make Stop Refresh Icon Visible */
#stop-reload-button[animate] >
#reload-button >
.toolbarbutton-icon, #stop-reload-button[animate] >
#reload-button[displaystop] + #stop-button >
.toolbarbutton-icon {
fill: #eeeeee !important;
}
Separator lines! Adding another one to the little warning symbol you get when a site isn't secure.
/* Make Not Secure Icon Have Separator Line */
#identity-box[pageproxystate="valid"].notSecure::after {
width: 1px;
content: "";
margin-left: 0px;
display: -moz-box;
background-image: linear-gradient(
transparent 20%,
color-mix(in srgb, currentColor 20%, transparent) 10%,
color-mix(in srgb, currentColor 20%, transparent) 85%,
transparent 20%
);
transition: opacity 300ms linear !important;
}
#identity-box:hover:after,
#identity-box:hover:after {
opacity: 0 !important;
}
Not Secure TextThis adds Chromium's "Not Secure" text next to the warning logo inside the URL bar when a site isn't secure.
/* Make Not Secure Box Have Text */
#identity-box[pageproxystate="valid"].notSecure ::after {
content: "Not secure";
font-size: 14px;
color: #9AA0A6;
/* Space Between Icon & Text */
text-indent: 5px;
/* Make Text Centred */
padding: 0 01px 2px 0;
display: block;
line-height: initial; /* New content takes up original line height */
}
The toolbar's buttons are normally 9px away from each other, this is too much for what we're going for. Down to 2px we go; now you match Brave's :)
/* Make All Toolbar Buttons Have Smaller Space Between Eachother */
toolbar .toolbarbutton-1 {
margin-left: 2px !important;
}
A unique aspect to Brave's design structure is that they moved the bookmark button all the way to the left of the URL bar rather than have it inside said bar, like every other browser. This moves the bookmark icon to look as if it's left of the URL bar.
/* Moves Bookmark Button To The Left Of URL Bar */
#star-button-box {
display: block;
position: absolute;
left: -35px;
-moz-window-dragging: no-drag;
}
#urlbar-input-container { overflow: visible !important }
/* Adds Space To URL Bar So Bookmark Doesnt Get Overlap */
#urlbar-container { margin-left: 37px !important }
Since the bookmark button moved, now the icon messed up. Fixing it here.
/* Make Bookmark Button Centred Again */
#star-button-box.urlbar-page-action {
height: 26px !important;
width: 26px !important;
padding: 5px !important;
}
Adds a little Chromium touch to the URL bar and makes it change colour slightly on hover. If you use a different theme... you'll need to change this colour value.
/* URL Bar Fade Animation On Hover */
#urlbar-input-container:hover {
background-color: #23252F !important;
}
#urlbar-input-container {
transition: background-color .3s ease-in;
Brave has really odd nav buttons... different sizes and no SVG files. This makes them kind of looks similar to Brave's but at this point I don’t know.
/* Make Reload Button Smaller */
#reload-button > .toolbarbutton-icon {
padding: 6.5px !important;
}
/* Make Bookmark Button Smaller */
#star-button.urlbar-icon {
padding: 1px
}
/* Make Back/Forawrd Button Smaller */
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon{
padding: 5.5px !important;
}
After changing the search icon, this broke. I fixed it.
/* Fix Search Bookmarks Item In Settings Dropdown */
#panelMenu_searchBookmarks > image:nth-child(1) {
margin-left: -10px !important;
}
#panelMenu_searchBookmarks {
height: 32px !important;
}
/* Padding Between Toolbar Icons (Back, Forward, Refresh) Inside Their Hitbox */
:root{
--toolbarbutton-inner-padding:5px !important;
}
/* Fix Tiny Reader Mode Button */
#reader-mode-button {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* Small URL Bar Height */
:root,
#urlbar-container,
#search-container,
#nav-bar-customization-target,
#nav-bar {
--urlbar-min-height: 28px !important;
}
/* Make Toolbar Small */
#urlbar-container,
#search-container,
#nav-bar-customization-target,
#nav-bar {
--urlbar-toolbar-height: 20px !important;
--urlbar-container-height: 37px !important;
}
/* Remove Top And Bottom Padding Of URL Bar */
#urlbar-container {
padding-top: 8px !important;
padding-bottom: 0px !important;
}
/* Make Back Button Closer To Left Side */
#back-button {
margin-left: 5px !important;
}
/* Make All Toolbar Buttons Have Smaller Space Between Eachother */
toolbar .toolbarbutton-1 {
margin-left: 2px !important;
}
/* Kill Refresh Animation */
#nav-bar-customization-target >
#stop-reload-button >
:is(#reload-button, #stop-button) >
.toolbarbutton-animatable-box {
display: none !important;
}
/* Make Stop Refresh Icon Visible */
#stop-reload-button[animate] >
#reload-button >
.toolbarbutton-icon, #stop-reload-button[animate] >
#reload-button[displaystop] + #stop-button >
.toolbarbutton-icon {
fill: #eeeeee !important;
}
/* Make Site Information Dropdown Look Like Brave (Kinda) */
/* Connection Not Secure Text Color */
.identity-popup-connection-not-secure{
color: #F28B82 !important;
}
/* Connection Not Secure Text Color */
.identity-popup-connection-secure{
color: #81C995 !important;
}
/* Make Not Secure Icon Have Separator Line */
#identity-box[pageproxystate="valid"].notSecure::after {
width: 1px;
content: "";
margin-left: 0px;
display: -moz-box;
background-image: linear-gradient(
transparent 20%,
color-mix(in srgb, currentColor 20%, transparent) 10%,
color-mix(in srgb, currentColor 20%, transparent) 85%,
transparent 20%
);
transition: opacity 300ms linear !important;
}
#identity-box:hover:after,
#identity-box:hover:after {
opacity: 0 !important;
}
/* Make Not Secure Box Have Text */
#identity-box[pageproxystate="valid"].notSecure ::after {
content: "Not secure";
font-size: 14px;
color: #9AA0A6;
/* Space Between Icon & Text */
text-indent: 5px;
/* Make Text Centred */
padding: 0 01px 2px 0;
display: block;
line-height: initial; /* New content takes up original line height */
}
/* Moves Bookmark Button To The Left Of URL Bar */
#star-button-box {
display: block;
position: absolute;
left: -35px;
-moz-window-dragging: no-drag;
}
#urlbar-input-container { overflow: visible !important }
/* Adds Space To URL Bar So Bookmark Doesnt Get Overlap */
#urlbar-container { margin-left: 37px !important }
/* Make Bookmark Button Centred Again */
#star-button-box.urlbar-page-action {
height: 26px !important;
width: 26px !important;
padding: 5px !important;
}
/* URL Bar Fade Animation On Hover */
#urlbar-input-container:hover {
background-color: #23252F !important;
}
#urlbar-input-container {
transition: background-color .3s ease-in;
}
/* Make Reload Button Smaller */
#reload-button > .toolbarbutton-icon {
padding: 6.5px !important;
}
/* Make Bookmark Button Smaller */
#star-button.urlbar-icon {
padding: 1px
}
/* Make Back / Forawrd Button Smaller */
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon{
padding: 5.5px !important;
}
/* Fix Search Bookmarks Item In Settings Dropdown */
#panelMenu_searchBookmarks > image:nth-child(1) {
margin-left: -10px !important;
}
#panelMenu_searchBookmarks {
height: 32px !important;
}