Remove/edit 1px line under navigation bar

[quietrobot]

Is there a way to eliminate or change the color of this dividing line? thanks!

[bmFtZQ]

You can do this by changing the --chrome-content-separator-color colour variable in the colors.css file.

:root:not(:-moz-lwtheme),
:root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"] {
  --chrome-content-separator-color: light-dark([LIGHT COLOUR], [DARK COLOUR]) !important;
}

or make it transparent:

--chrome-content-separator-color: transparent !important;

[quietrobot]

thanks @bmFtZQ for taking the time to respond. For some reason FF completely ignores the change, I tried the same thing in Nightly and it worked. (w10)

[bmFtZQ]

Alternatively, you could try changing the colour of the border directly:

#navigator-toolbox {
  border-bottom-color: transparent !important;
}

Or remove the border:

#navigator-toolbox {
  border-bottom-width: 0 !important;
}

[quietrobot]

perfect I added that in userChrome.css, thanks @bmFtZQ !! I see some bugs with the search bar or the pinned icons, would you prefer that I post them separately?

[bmFtZQ]

What are the bugs that you see?

[quietrobot]

Search box The search box suggestions look slightly overlapping and "background color box" shifted.

Does Firefox allow you to modify the design of the suggestions to match those of the address bar? something like this?

Downloads The box of each download appear cut to the right.

Tabs When there are many tabs open, the first pinned one appears displaced over the other tabs.

Home page (suggestion) Maybe the design of this menu could be matched to that of the rest of the menus.

[bmFtZQ]

The issue with the pinned tabs should be fixed in the latest commit.

[bmFtZQ]

I will take a look at the other issues (search, downloads pop-ups) when I can.

[quietrobot]

I will take a look at the other issues (search, downloads pop-ups) when I can.

Thank you for your dedication! 👏🏻 I have one last question and suggestion for you.

1. How can I remove these lines between the tabs? I thought that was uc.tweak.remove-tab-separators but it had no effect.

2. Now that Firefox added automatic translation, it could be updated with the corresponding Edge icon.

[bmFtZQ]

I must've broke that tweak when I changed how the separators worked in the code, this should be fixed now in the latest commit.

[quietrobot]

I must've broke that tweak when I changed how the separators worked in the code, this should be fixed now in the latest commit.

Thank you!!! now it works perfectly. One more detail, maybe it only happens to me, but the tab scroll arrow seems to be a few pixels higher.

frfox vs. normal

[bmFtZQ]

I've added the translate icon in the latest commit.

Thank you!!! now it works perfectly. One more detail, maybe it only happens to me, but the tab scroll arrow seems to be a few pixels higher.

frfox vs. normal

I haven't seen this, could you show me the whole setup? Do you have any tweaks or customisations enabled?

[quietrobot]

@bmFtZQ I installed the theme again and it seems that the problem is when enabling floating tabs. It even seems that the texts in the tabs move a couple of pixels lower than the icons.

floating tabs on / off

[bmFtZQ]

The issue with the scrolling buttons not being aligned vertically should now be fixed.

[bmFtZQ]

Search box The search box suggestions look slightly overlapping and "background color box" shifted.

Does Firefox allow you to modify the design of the suggestions to match those of the address bar? something like this?

Now I've fixed the issue with the double backgrounds on the search suggestions and applied some styling:

[bmFtZQ]

As for the context menus on the new tab page, I don't think I will modify them as they wouldn't be used very often and they already look good enough.

[quietrobot]

As for the context menus on the new tab page, I don't think I will modify them as they wouldn't be used very often and they already look good enough.

Completely agree!

Thanks for taking the time to fix the search suggestions popup 💪🏻 Would it be more appropriate to use the colors from the rest of the menus? (I know, different from my previous concept 🙈). Can the text size also be the same?

Two details I noticed recently:

1. "Paste and Go" has a new? icon in Edge, also maybe the same icon can be used for the "Paste and Search" in the search bar (currently empty).

2. I think because of one of the last commit Change spacing and border radius of tabs now on the top edges of the screen the mouse does not select the tab.

[bmFtZQ]

I've added the new paste and go icon. As for the search bar suggestions, the background colour is supposed to match that of the URL bar suggestions background. Though I can increase the font size to match the search bar/URL bar.

I haven't found any issues with the tabs not being selectable at the top edge of the screen. Does this only happen with the floating-tabs tweak enabled? I think that may have been an issue for awhile.

[quietrobot]

You're right, using the same font size/distance buttons as the rest of the menus would be great. Firefox doesn't allow to achieve something like this, right? I mean, emulate the appearance of the URL bar.

Does this only happen with the floating-tabs tweak enabled? I think that may have been an issue for awhile.

Exactly, this happens only with floating tabs. I tried a backup from the end of November to make sure it didn't happen before, here the comparison:

latest build / old build

[bmFtZQ]

It turns out in an effort to remove the issue with the alignment of the tab scroll buttons, I removed some styles that didn't appear to do anything, but were responsible for making sure the tabs can be selected from the top edge of the screen.

I've added those styles back into the file so it should work properly now. (This is why you should comment your code!!!)

As for the search suggestions, I don't think that effect would be possible with CSS.

[quietrobot]

😄 the important thing is that you managed to solve both problems! thanks!

As for the search suggestions, I don't think that effect would be possible with CSS.

No problem, everything has its limitation, so just unify the size of text and spacing of buttons would be perfect. Maybe also fill in the contour line at the top?

One more thing (a stupid thing) The bookmarks popup menu is slightly lower than the rest of the menus.

[bmFtZQ]

I've adjusted the font size and padding of the search suggestions. The border on the top probably cannot be added using userChrome.css without potentially affecting other elements.

For the bookmarks menu, it cannot be positioned exactly using CSS.

[quietrobot]

Thanks @bmFtZQ !

Maybe more padding above and below "Google Search" so it doesn't look cut off? (if possible)

[bmFtZQ]

This should be fixed now.

[quietrobot]

Don't kill me @bmFtZQ 🙏🏻, but could the results be aligned with the top search/Google icons-texts?

[quietrobot]

Hi @bmFtZQ , one more thing:

View Page Source has its corresponding icon, but View Selection Source doesnt. (I assume it will use the same icon)

Thanks 👍🏻

[bmFtZQ]

I've now assigned the same icon to the selection source menu item:

Also the search suggestions are now aligned with the search engine icon:

[quietrobot]

Thanks @bmFtZQ ! would it be possible to also align the lower elements? (This time...)

Happy Holidays! 😉

[bmFtZQ]

Now the search engines and the section heading are aligned vertically with the suggestions.

[quietrobot]

Hi @bmFtZQ ! I wanted to leave you two suggestions (but I don't know if they are possible in ff).

1. The download line uses the Windows accent color, but the progress circle does not.

   2. Add a small fade in to the menus (like edge)

[bmFtZQ]

I've replaced the accent colour on the downloads pop-up progress bars. I believe the second suggestion would not be possible to implement with CSS.

[quietrobot]

That's what I assumed 😔, even so, Firefox has more animations than Edge/Chromium which basically only have fades in. It would be great FF enable the option to use acrylic/mica.

[quietrobot]

@bmFtZQ I think I explained myself wrong, I would like the download bar and the toolbar icon to use the Windows accent color. In that case, what tweak should I use or what code should I add in UserChrome?

By the way, through UserChrome I added the SegoeVariable font (Windows 11), perhaps it would be good if it was by default or that users could activate it through a tweak.