muckSponge / MaterialFox

A Material Design-inspired userChrome.css theme for Firefox
MIT License
1.94k stars 149 forks source link

Fix: tab bar height, new tab button alignment and multi-account containers colored bar #327

Open M0kh opened 2 years ago

M0kh commented 2 years ago

Edit: For all fixes in other issues and pull requests you can check out my fork of this repo here

The tab bar height is fixed by editing the margin:

In chrome\tabbar\tabbar.css

change the following:

Line 129:

from:
margin-top: 4px !important;

to:
margin-top: -4px !important;

2022-08-13 14_22_45-NVIDIA GeForce Overlay DT

The new tab button will be misaligned, to fix:

Line 492:

from:
margin-inline-start: 6px !important;

to:
margin-inline-start: 4px !important;
margin-bottom: 4px !important;
margin-top: 4px !important;

The tab before: 2022-08-13 13_45_52-NVIDIA GeForce Overlay DT

The tab after: 2022-08-13 13_46_37-NVIDIA GeForce Overlay DT

If you find any issue in your browser you can edit the margins to your liking.

If you use multi-account containers you will see that the colored bar at the bottom of the tab is either gone or it's gone when switching to another tab, to fix:

In chrome\userChrome.css

add the following:

/*move multi-account containers color to the bottom of the tab*/
.tab-context-line {
  margin: var(--tab-min-height) var(--inline-tab-padding) 0 !important;
}

In chrome\tabbar\tabbar.css

change the following:

Line 529:

from:
height: 2px !important;

to:
height: 6px !important;
Line 546:

from:
bottom: calc(100% - 9px) !important;

to:
bottom: calc(90% - 9px) !important;

Before: 2022-08-13 13_51_08-NVIDIA GeForce Overlay DT

After: 2022-08-13 13_53_24-NVIDIA GeForce Overlay DT