css - 用户脚本，用于替换 Stack Exchange 页面上的图标，垃圾邮件背景图像应该是图标

Question

我正在尝试编写一个用户脚本来解决在新的 Stack Exchange 设计中突出显示的编辑器图标颜色错误的问题(至少在使用不同原色的网站上，例如 tex.stackexchange，描述于https://meta.stackexchange.com/a/317581/237989 中有更多详细信息)

我试过下面的代码

// ==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;
    }

` );

但这会导致

Answer 1

注意:

1. 该脚本设置了错误节点的样式。页面源代码 ^{( Link to typical example )} 如下:

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

   因此，名义上，您可以设置 .wmd-button > span 样式，但是...

2. 您想与其他出色的脚本/扩展 ( Example ) 一起玩得开心，所以使用 .wmd-button[id] > span 来减少副作用。

3. 由于 svgshare.com 的停机时间很长，您可能希望将该图像转换为 PNG 格式并将其托管在 i.stack.imgur.com 上。

所以你的脚本会变成:

// ==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;
    }

` );