PM 27.5 Win10 Window Close svg
Posted: 2017-09-30, 00:02
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).
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:
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;
}Example of the "error" using the above userChrome.css: