Vrftjkry

I'm trying to write a user script to fix the problem that highlighted editor icons have the wrong colour in the new Stack Exchange design (at least on sites which use a different primary colour, such as tex.stackexchange, described in more detail in https://meta.stackexchange.com/a/317581/237989)

I tried the following code

// ==UserScript==

// @name        StackExchange TEX, adjust css

// @match       *://tex.stackexchange.com/*

// @grant       GM_addStyle

// @run-at      document-start

// ==/UserScript==



GM_addStyle ( `



    .wmd-button{

        background-image: url("https://svgshare.com/i/9T3.svg") !important;

    }



` );

but this results in

Note:

1. 
   

   That script is styling the wrong node. The page source ^{(Link to typical example)} is like:

   
   
   

   <li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K">
   
       <span style="background-position: -80px 0px;"></span>
   
   </li>
   
   

   
   
   

   So, nominally, you would style .wmd-button > span, But...

   
   



2. You want to play nice with other brilliant scripts/extensions (Example), so use .wmd-button[id] > span to reduce side-effects.




3. Since svgshare.com has proven large downtimes, you may want to convert that image to PNG format and host it on i.stack.imgur.com.

So your script would become:

// ==UserScript==

// @name        Stack Exchange TEX, fix edit-icon hover colors

// @description Adulterates that beautiful, beautiful orange.

// @match       *://tex.stackexchange.com/*

// @grant       GM_addStyle

// @run-at      document-start

// ==/UserScript==



GM_addStyle ( `



    .wmd-button[id] > span {

        background-image: url("https://svgshare.com/i/9T3.svg") !important;

    }



` );