search

Aris-t2 / CustomCSSforFx

Custom CSS tweaks for Firefox
GNU General Public License v3.0
1.8k stars 181 forks source link

Icon "Borders" #579

Closed enthusiast01 closed 1 year ago

enthusiast01 commented 1 year ago

I just did a major Firefox update. I made some changes 5 yrs ago or so to what I am calling the icon "frames" to make them look flat and a part of the toolbars, etc (no border). I think it was something simple maybe with userContent.css or the "image" folder? But for the life of me, I cannot remember or figure out what I did. Does anyone know how to get the original "borderless" look back?

This is what the icons used to look like: No Border

This is what they now look like: Border

enthusiast01 commented 1 year ago

Solved it. For anyone wanting to also make this modification:

In the userChrome.css I kept the default option"buttons_on_navbar_classic_appearance.css" in the Navigation toolbar buttons appearance section.

a) Go to the /css/buttons folder. Find the file "buttons_on_navbar_classic_appearance.css". Open it, and unselect the sections that refer to "box-shadow" and add the line "box-shadow:none !important;". It occurs 3 times in this particular file. For example:

/ box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 1.5px rgba(255,255,255,.1) inset, 0 0 3.5px hsl(190,90%,80%), 0 0 0 1px rgba(0,0,0,.4) inset !important; / box-shadow: none !important;

b) This still leaves an area in the shape of the icon that is 1 shade lighter in color than the toolbar background color. To remove this, in the same file unselect the first occurance of "background" and add the line "background-color: transparent !important;". The exact line is:

/ background: rgba(151,152,153,.05) linear-gradient(rgba(251,252,253,.95), rgba(246,247,248,.47) 49%, rgba(231,232,233,.45) 51%, rgba(225,226,229,.3)) !important; border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38) !important; / background-color: transparent !important;

This removes any icon borders and makes the area around the icon match the toolbar color. It also keeps the functionality of the hover over the icon effect. If you want to remove that you have to repeat part b) for all instances of "background". If you have a different option in the Navigation toolbar buttons appearance section, I assume this same procedure will work, just applies to your unique file.