Remove circle around Back Arrow without changing density to 'Compact'
I wish to change the Back Arrow to Compact Density's Back Arrow without actually using Compact Density, as shown in the images attached. How can this be done?
Thanks
Chosen solution
The changes when compact mode isn't enabled are made via this CSS file.
- :root:not([uidensity=compact]) #back-button {}
- https://dxr.mozilla.org/mozilla-release/source/browser/themes/shared/toolbarbuttons.inc.css#201
You would have to override (unset) some rules via userChrome.css to remove the circle. You need to use the !important flag to override existing rules.
Read this answer in context 👍 1All Replies (3)
That would require using CSS changes to make those mods that you want. The default FF settings is what you get anything changes beyond that requires CSS codes to do so. I change some of my FF layout using CSS codes but that one should do homework into what they want changed before using CSS codes.
Chosen Solution
The changes when compact mode isn't enabled are made via this CSS file.
- :root:not([uidensity=compact]) #back-button {}
- https://dxr.mozilla.org/mozilla-release/source/browser/themes/shared/toolbarbuttons.inc.css#201
You would have to override (unset) some rules via userChrome.css to remove the circle. You need to use the !important flag to override existing rules.
This worked perfectly. I hadn't heard about userChrome.css, but userchrome.org showed it was quite simple. Adding the following sorted it for me, but it's not a perfect fix (the button is still actually circle, along with the shadows on hover). It looks fine to me, though. Sorry for the late response and thanks for the help!
- root:not([uidensity=compact]) #back-button > .toolbarbutton-icon { background: inherit !important; border: none !important; }