SPJ Discord

SPJ Discord.user.js

// ==UserScript==
// @name         SPJ Discord
// @namespace    https://example.net/
// @version      0.1
// @description  SPJ Discord
// @author       ion
// @match        *://discordapp.com/*
// @grant        none
// ==/UserScript==

// The CSS class names will probably change on every Discord release.
// This is good enough for a one-time joke.

(function() {
    'use strict';
    document.addEventListener('readystatechange', event => {
        if (event.target.readyState === "complete") {
            let style = document.createElement("style");
            style.textContent = `
.messagesWrapper-3lZDfY {
  font-family: "Comic Sans MS", sans !important;
  color: white !important;
  background: #002060 !important;
}
.markup-2BOw-j {
  font-size: 20px !important;
}
code {
  font-family: "Courier New", monospace !important;
  font-size: 20px !important;
  line-height: 1.3rem !important;
  font-weight: bold;
  color: black !important;
  background: #ff0 !important;
}
code span {
  color: black !important;
}
.large-3ChYtB {
  width: 60px !important;
  height: 60px !important;
}
.messagesWrapper-3lZDfY h2 span {
  font-weight: normal !important;
  font-size: 60px !important;
  color: #e0d090 !important;
  filter: url(#spj-discord-title);
  text-shadow: 6px 6px 6px rgba(0,0,0,0.15);
}
.headerCozy-2N9HOL {
  height: 70px !important;
}
.contentCozy-3XX413 {
  margin-left: 100px !important;
}
ul {
  /* http://www.patternify.com/ */
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVQoU2P8/5/hPwMewDgyFAAArLsX8U1lAgYAAAAASUVORK5CYII=");
}
            `;
            document.head.appendChild(style);
            let div = document.createElement("div");
            div.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="spj-discord-title">
      <feFlood flood-color="black" flood-opacity="1" result="black" />
      <feComposite in="black" in2="SourceGraphic" operator="atop" result="black-shape" />
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
      <feSpecularLighting result="spec" in="blur" specularConstant="1.2" specularExponent="10" lighting-color="white">
        <feDistantLight azimuth="225" elevation="20" />
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="4" k2="0.2" result="lighting" />
      <feMerge>
        <feMergeNode in="black-shape" />
        <feMergeNode in="lighting" />
      </feMerge>
    </filter>
  </defs>
</svg>
            `;
            document.body.appendChild(div.querySelector("svg"));
        }
    });
})();