Request for user script to change the comment delete button from the word "Delete" to the old gray X

Question

A few hours ago, the system was changed to show the comment delete button as the word "Delete" rather than the gray X that it's been using for years. However, I find this a little intrusive and distracting, and it'd be great if I could change it back to the old gray X.

Can someone please write me a script that will change it back?

Answer 1

Here is a GreaseMonkey script I threw together:

// ==UserScript==
// @name     Old Comment Delete Button
// @version  1.1.0
// @grant    none
// @author   a stone arachnid
// @include  https://*stackoverflow.com/*
// @include  https://*superuser.com/*
// @include  https://*serverfault.com/*
// @include  https://*stackapps.com/*
// @include  https://*askubuntu.com/*
// @include  https://*mathoverflow.net/*
// @include  https://*stackexchange.com/*
// @exclude  http*://*chat.*/
// @require  https://gist.githubusercontent.com/BrockA/2625891/raw/9c97aa67ff9c5d56be34a55ad6c18a314e5eb548/waitForKeyElements.js
// ==/UserScript==

(function(){
    var styles = `
.js-comment-delete,.js-comment-delete:hover,.js-comment-delete:focus{
  margin:0;
  line-height:1;
  width:14px;
  height:14px;
  background:rgba(36,39,41,0.25);
  border-radius:7px;
  box-sizing:border-box;
  padding:2px;
  color:white!important;
  display:none;
}
.comment:hover .js-comment-delete,.js-comment-delete:focus{
  display:inline;
}
.js-comment-delete:hover{
  background:rgba(36,39,41,0.6);
}
.js-comment-delete:active{
  background:rgba(127,0,0,1)!important;
}
.js-comment-delete:focus{
  box-shadow:none;
}
`,svg='<svg class="svg-icon va-text-bottom iconClearSm" width="14" height="14" viewBox="0 0 20 20"><path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z"></path></svg>';
    StackExchange.ready(function(){
        $("<style></style>").text(styles).appendTo("head");
        $(".js-comment-delete").removeClass("fc-red-600").html(svg);
    });
    waitForKeyElements(".comment",function(jNode){
        $(jNode).find(".js-comment-delete").removeClass("fc-red-600").html(svg);
    })
})();