TheDragShot / Discord Classic Style

// ==UserScript==
// @name            Discord Classic Style
// @name:es         Estilo Clásico para Discord
// @namespace       ds.js.discord
// @author          DragShot
// @oujs:author     TheDragShot
// @icon            https://discord.com/assets/07dca80a102d4149e9736d4b162cff6f.ico
// @description     Restores the font and color usage of the discord app to its former glory.
// @description:es  Restaura la tipografía y uso de colores de la aplicación Discord a su gloria de antaño.
// @released        2021-06-26
// @updated         2023-05-03
// @lastchanges     Updated some classnames used in profile popups
// @copyright       2023, DragShot Software
// @homepageURL     https://dragshot.webcindario.com/software/discordcs.php
// @license         GPL-3.0-only
// @include         *discord.com/*
// @version         1.0.9
// @downloadURL     https://openuserjs.org/install/TheDragShot/Discord_Classic_Style.user.js
// @updateURL       https://openuserjs.org/meta/TheDragShot/Discord_Classic_Style.meta.js
// @grant           none
// ==/UserScript==

// Discord Classic Style
// Copyright (C) 2022 DragShot Software
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 3, as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.

//Helper functions
function addCSS(css){
  var head = document.head || document.getElementsByTagName('head')[0],
      style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);
}
//Styles
addCSS("\
.wrapper-3WhCwL.mention { /* div[id^=\"chat-messages\"] */ /*.wrapper-3WhCwL div[class*=\" wrapper-\"]*/\n\
  background: var(--brand-experiment-15a) !important;\n\
  color: var(--brand-experiment-530) !important; /* 430 */ \n\
}\n\
\n\
div[class^=\"reactions-\"] div[class*=\" reactionMe-\"] { /*reactions-12N0jA reactionMe-wv5HKu*/\n\
  /*background-color: var(--brand-experiment-15a);*/\n\
  border-color: var(--brand-experiment-50a);\n\
}\n\
[data-popout-root], html {\n\
    --brand-experiment-100: #f8f9fd;\n\
    --brand-experiment-130: #f2f4fc;\n\
    --brand-experiment-160: #ebeefa;\n\
    --brand-experiment-200: #e3e7f8;\n\
    --brand-experiment-230: #dae0f5;\n\
    --brand-experiment-260: #d1d9f3;\n\
    --brand-experiment-300: #c7d0f0;\n\
    --brand-experiment-330: #b5c1ec;\n\
    --brand-experiment-360: #a5b3e7;\n\
    --brand-experiment-400: #8ea1e1;\n\
    --brand-experiment-430: #869adf;\n\
    --brand-experiment-460: #7d92dd;\n\
    --brand-experiment: #7289da;\n\
    --brand-experiment-500: #7289da;\n\
    --brand-experiment-530: #687dc6;\n\
    --brand-experiment-560: #5c6fb1;\n\
    --brand-experiment-600: #4e5d94;\n\
    --brand-experiment-630: #435180;\n\
    --brand-experiment-660: #3b4770;\n\
    --brand-experiment-700: #2e3757;\n\
    --brand-experiment-730: #2b3352;\n\
    --brand-experiment-760: #272f4b;\n\
    --brand-experiment-800: #222941;\n\
    --brand-experiment-830: #1a2032;\n\
    --brand-experiment-860: #111521;\n\
    --brand-experiment-900: #06070b;\n\
    --brand-experiment-05a: rgba(114,137,218,0.05);\n\
    --brand-experiment-10a: rgba(114,137,218,0.1);\n\
    --brand-experiment-15a: rgba(114,137,218,0.15);\n\
    --brand-experiment-20a: rgba(114,137,218,0.2);\n\
    --brand-experiment-25a: rgba(114,137,218,0.25);\n\
    --brand-experiment-30a: rgba(114,137,218,0.3);\n\
    --brand-experiment-35a: rgba(114,137,218,0.35);\n\
    --brand-experiment-40a: rgba(114,137,218,0.4);\n\
    --brand-experiment-45a: rgba(114,137,218,0.45);\n\
    --brand-experiment-50a: rgba(114,137,218,0.5);\n\
    --brand-experiment-55a: rgba(114,137,218,0.55);\n\
    --brand-experiment-60a: rgba(114,137,218,0.6);\n\
    --brand-experiment-65a: rgba(114,137,218,0.65);\n\
    --brand-experiment-70a: rgba(114,137,218,0.7);\n\
    --brand-experiment-75a: rgba(114,137,218,0.75);\n\
    --brand-experiment-80a: rgba(114,137,218,0.8);\n\
    --brand-experiment-85a: rgba(114,137,218,0.85);\n\
    --brand-experiment-90a: rgba(114,137,218,0.9);\n\
    --brand-experiment-95a: rgba(114,137,218,0.95);\n\
    --font-display: Whitney,\"gg sans\",\"Noto Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif !important;\n\
    --font-primary: Whitney,\"gg sans\",\"Noto Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif !important;\n\
}");
//Other details
addCSS("\
div[class^=\"progress-\"] > div[class^=\"progressBar-\"] {\n\
  background-color: var(--brand-experiment-500);\n\
}\n\
div[class^=\"sidebar-\"] #channels .containerDefault-3TQ5YN div[class^=\"mainContent-\"] > h2[class^=\"name-\"],\n\
div[class^=\"chat-\"] > section[class^=\"title-\"] h3[class^=\"title-\"],\n\
div[class^=\"sidebar-\"] header h1[class^=\"name-\"] {\n\
  font-weight: bold;\n\
}");
//2022-08: Unread messages/mention bits at the bottom of the channels sidebar
addCSS("\
nav.container-1NXEtd > div.bottom-29W7pW > div {\
  width: 100%;\
}\
div.bottom-29W7pW div.bar-wDIGjg {\
  margin: 0;\
  justify-content: center;\
  border-radius: 0.5em 0.5em 0em 0em;\
}\
nav.container-1NXEtd > div.unreadBottom-3Ojk6R {\
  padding: 0;\
}\
div.unreadBottom-3Ojk6R > div.unreadBar-elBRZx {\
  border-radius: 0.5em 0.5em 0em 0em;\
}");
/*addCSS("\
span[class^=\"username-\"] {\n\
  text-shadow: gray 0px 1px, gray 0px -1px, gray 1px 0px, gray -1px 0px;\n\
}");*/
//2022-10: Oh my God, what have they done to the profiles!?
addCSS("\
.avatarUploaderPremium-2urJVq {\
  top: 56px;\
}\
.profileBadges-2pItdR.containerWithContent-2Yws8V.container-1gYwHN {\
  top: 9px;\
  right: 5px;\
}\
.userProfileInnerThemedWithBanner-25XGmz > .profileBadges-2pItdR.containerWithContent-2Yws8V.container-1gYwHN,\
.userProfileInnerThemedPremiumWithoutBanner-lZ9inp > .profileBadges-2pItdR.containerWithContent-2Yws8V.container-1gYwHN {\
  top: 4px;\
  right: 5px;\
}\
.userProfileOuterUnthemed-11rPfA > .userProfileInner-1ngKnf > .userPopoutOverlayBackground-3A0Pcz {\
  margin: 18px 0px 0px;\
	border-radius: 0px;\
}\
.userProfileInnerThemedWithBanner-25XGmz > svg.bannerSVGWrapper-2CLfzN > mask > circle {\
  cx: 70px; cy: 110px; r: 55px;\
}\
.userProfileOuterThemed-2BgJCM > .userProfileInner-1ngKnf > .userPopoutOverlayBackground-3A0Pcz.overlayBackground-2aa7wt {\
  margin: 7px 5px 5px;\
}\
.userPopoutOverlayBackground-3A0Pcz > .section-28YDOf {\
  padding-top: 8px;\
}\
.userPopoutOverlayBackground-3A0Pcz > .divider-2dDziJ {\
  margin-top: 8px;\
}\
.userPopoutOverlayBackground-3A0Pcz .section-28YDOf {\
  padding-top: 8px;\
}\
.userPopoutOuter-1OHwPL.userProfileOuter-2tQwNf {\
  width: auto;\
}\
.userPopoutInner-nv9Y92.userProfileInner-1ngKnf {\
  width: 280px;\
}\
.userProfileInnerThemedWithBanner-25XGmz > svg.bannerSVGWrapper-2CLfzN {\
  min-width: 280px !important; min-height: 99px !important;\
}\
.userProfileInnerThemedWithBanner-25XGmz > .avatarWrapperNormal-ahVUaC.avatarWrapper-eenWra {\
  top: 55px;\
}");
//Temporary rollback from GGsans to Whitney font - DEAD
/*addCSS("\
@font-face{font-family:Whitney;font-style:normal;font-weight:300;src:url(/assets/aa547e7d321c25791de2252ee2294220.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:italic;font-weight:300;src:url(/assets/6dab543d77316e020f4a6a951e69e4c3.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:normal;font-weight:400;src:url(/assets/ffc447aadf554fbb0b4a34cacee083a5.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:italic;font-weight:400;src:url(/assets/0ad909f272b0ece31d9ba2222d4c9e63.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:normal;font-weight:500;src:url(/assets/b63701648c7e5a9d6ad67a0866cf9ecd.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:italic;font-weight:500;src:url(/assets/161543c19f87e7bc8126044be2b5f50f.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:normal;font-weight:600;src:url(/assets/10bf925aa3b5eea72cffce5ab37d6c49.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:italic;font-weight:600;src:url(/assets/6a4f76f9849935bd57822e9428481f1c.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:normal;font-weight:700;src:url(/assets/3d0099ecfaf7718dad3fb6cb3c0ee650.woff2) format(\"woff2\")}\n\
@font-face{font-family:Whitney;font-style:italic;font-weight:700;src:url(/assets/4904116ba8b56f50018a30c364d52b87.woff2) format(\"woff2\")}\n\
:root {\n\
--font-primary: Whitney,\"gg sans\",\"Noto Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;\n\
}");*/
//Restore old brand wordmark
/*document.querySelector("div#app-mount > div > div[class^=\"wordmark\"]").innerHTML = "<svg aria-hidden=\"false\" width=\"55\" height=\"16\" viewBox=\"0 0 55 16\">\
<path fill=\"currentColor\" d=\"M3.57642276,0.141304348 L0,0.141304348 L0,4.22826087 L2.38069106,6.40217391 L2.38069106,2.43478261 L3.66260163,2.43478261 C4.47052846,2.43478261 4.86910569,2.83695652 4.86910569,3.4673913 L4.86910569,6.5 C4.86910569,7.13043478 4.49207317,7.55434783 3.66260163,7.55434783 L0,7.55434783 L0,9.85869565 L3.57642276,9.85869565 C5.49390244,9.86956522 7.29288618,8.90217391 7.29288618,6.66304348 L7.29288618,3.39130435 C7.29288618,1.13043478 5.49390244,0.141304348 3.57642276,0.141304348 Z M22.3310976,6.67391304 L22.3310976,3.32608696 C22.3310976,2.11956522 24.4640244,1.83695652 25.1103659,3.05434783 L27.0817073,2.23913043 C26.3168699,0.510869565 24.8949187,0 23.7207317,0 C21.803252,0 19.9073171,1.13043478 19.9073171,3.32608696 L19.9073171,6.67391304 C19.9073171,8.88043478 21.803252,10 23.6776423,10 C24.8841463,10 26.3276423,9.39130435 27.1247967,7.81521739 L25.0134146,6.82608696 C24.4963415,8.17391304 22.3310976,7.84782609 22.3310976,6.67391304 Z M15.8030488,3.7826087 C15.0597561,3.61956522 14.5642276,3.34782609 14.5319106,2.88043478 C14.575,1.75 16.2878049,1.7173913 17.2896341,2.79347826 L18.8731707,1.55434783 C17.8821138,0.326086957 16.7617886,0 15.598374,0 C13.8424797,0 12.1404472,1 12.1404472,2.91304348 C12.1404472,4.77173913 13.5408537,5.76086957 15.0813008,6 C15.8676829,6.10869565 16.7402439,6.42391304 16.7186992,6.97826087 C16.654065,8.02173913 14.5426829,7.9673913 13.5839431,6.7826087 L12.0650407,8.23913043 C12.9591463,9.40217391 14.1764228,10 15.3182927,10 C17.074187,10 19.0239837,8.9673913 19.0993902,7.08695652 C19.2071138,4.69565217 17.5050813,4.09782609 15.8030488,3.7826087 Z M8.59634146,9.85869565 L11.0093496,9.85869565 L11.0093496,0.141304348 L8.59634146,0.141304348 L8.59634146,9.85869565 Z M49.2835366,0.141304348 L45.7071138,0.141304348 L45.7071138,4.22826087 L48.0878049,6.40217391 L48.0878049,2.43478261 L49.3589431,2.43478261 C50.1668699,2.43478261 50.5654472,2.83695652 50.5654472,3.4673913 L50.5654472,6.5 C50.5654472,7.13043478 50.1884146,7.55434783 49.3589431,7.55434783 L45.6963415,7.55434783 L45.6963415,9.85869565 L49.2727642,9.85869565 C51.1902439,9.86956522 52.9892276,8.90217391 52.9892276,6.66304348 L52.9892276,3.39130435 C53,1.13043478 51.2010163,0.141304348 49.2835366,0.141304348 Z M31.7353659,0 C29.753252,0 27.7819106,1.09782609 27.7819106,3.33695652 L27.7819106,6.66304348 C27.7819106,8.89130435 29.7640244,10 31.7569106,10 C33.7390244,10 35.7103659,8.89130435 35.7103659,6.66304348 L35.7103659,3.33695652 C35.7103659,1.10869565 33.7174797,0 31.7353659,0 Z M33.2865854,6.66304348 C33.2865854,7.35869565 32.5109756,7.7173913 31.7461382,7.7173913 C30.9705285,7.7173913 30.1949187,7.36956522 30.1949187,6.66304348 L30.1949187,3.33695652 C30.1949187,2.61956522 30.9489837,2.23913043 31.7030488,2.23913043 C32.4894309,2.23913043 33.2865854,2.58695652 33.2865854,3.33695652 L33.2865854,6.66304348 Z M44.3605691,3.33695652 C44.3067073,1.05434783 42.7770325,0.141304348 40.8056911,0.141304348 L36.9815041,0.141304348 L36.9815041,9.86956522 L39.4268293,9.86956522 L39.4268293,6.77173913 L39.8577236,6.77173913 L42.0768293,9.85869565 L45.0930894,9.85869565 L42.4861789,6.52173913 C43.6495935,6.15217391 44.3605691,5.14130435 44.3605691,3.33695652 Z M40.8487805,4.65217391 L39.4268293,4.65217391 L39.4268293,2.43478261 L40.8487805,2.43478261 C42.3784553,2.43478261 42.3784553,4.65217391 40.8487805,4.65217391 Z\" transform=\"translate(1 3)\"><\/path>\
<\/svg>";*/