PM 27.5 Win10 Window Close svg

[sonicspike41]

I already know of the changes (and subsequent fixes) for the Windows 10 active color. I've already updated my userChrome.css to fix most of the issues this caused. The only issue I'm having now is I cannot change the color of #titlebar-close:hover without it removing the X entirely on hover. Ideally I'd like the :hover to change color and still show the X in either white (active) or black/gray (inactive). I found a helpful bit of CSS that does most of the work but the last section seems to apply to the latest versions of Firefox only (and not Pale Moon).

Code: Select all

/* Move text after menu */
#main-window::after {
text-align: left !important;
padding-left: 425px !important;
}
/* Remove extra spacing before/after tabs */
.tabbrowser-tab {
margin-left: -1px !important;
margin-right: -1px !important;
}
/* Fix Windows 10 active colors on titlebar */
#main-window[windowtype="navigator:browser"] {
background-color: transparent !important;
}
.titlebar-button {
background-color: transparent !important;
transition: background-color 0.2s ease;
}
.titlebar-button > .toolbarbutton-icon {
list-style-image: none;
}
.titlebar-button:hover {
background-color: rgba(0, 0, 0, 0.15) !important;
}
#titlebar-close:hover {
background-color: #A81123 !important;
}
#titlebar-close:hover > .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important;
}

As Lootyhoof pointed out here that relies on "caption-buttons.svg", which seems to be Firefox-only. Is there 1) any easy way to add the .svg into the browser without modifying any .js or .manifest files 2) any existing .svg or image I could instead reference to achieve the desired results?

Example of the "error" using the above userChrome.css: