Vuniper theme for Metacritic

// ==UserScript==
// @name         Inject CSS to Metacritic
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Add custom CSS to Metacritic, so it looks like Vuniper
// @author       Speckart
// @match        https://www.metacritic.com/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';


  const customCSS = `

  body {
    background-color: #161616;
    padding-bottom: 64px;
  }

  /* The top ad bar */
  .c-adSkyBox.rendered{
    display:none;
  }

  /* Nav bar elements except the search input */
  .c-siteLogo,
  .c-siteHeaderDesktopContainer nav,
    button.c-userRegisterButton {
    display:none !important;
  }

  /* Center the search input */
  .c-siteHeaderDesktopContainer {
    justify-content: center;
  }

  header.c-siteHeader {
    max-height: 56px;
  }

  /* Search input container */
  .c-siteHeaderDesktopContainer div.u-flexbox {
    max-width: 500px;
  }

  .c-searchBox {
    background-color: #161616;
    border: none;
    border-radius: 20px;
  }

  .c-searchBox input {
    color: white;
    padding-left: 8px;
  }

  .c-searchBox svg {
    display:none;
  }

  /* Logo overrides */
  .c-globalPageTitle {
    display: flex;
    justify-content: center;
  }

  .c-globalPageTitle_container {
  background-image: url(https://vuniper.com/icons/app-logo.png);
    width: 67px;
    height: 56px;
    transform: scale(0.65);
  }

  .c-globalPageTitle_container_colorOverlay,
  .c-globalPageTitle_seoTitle,
  .c-globalPageTitle_container .c-cmsImage,
  .c-globalPageTitle_description {
    display:none;
  }

  /* End logo overrides */

  .c-globalCarousel {
    width: 1000px;
  }

  h2.c-globalHeader_titleText {
    color: #dc6ef8;
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-shadow: 0 0 5px rgb(243 45 228 / 50%),
      0 0 10px rgb(239 62 234 / 30%), 0 0 15px rgb(255 0 212 / 20%),
      0 0 20px rgb(251 0 255 / 10%);
  }

  a.c-globalHeader_viewMore {
    text-decoration: none !important;
    position: relative;
    top: 6px;
  }

  /* Removes the underline from the section headings*/
  .c-globalHeader_heading {
    border: none;
  }

  .c-globalHeader.c-globalCarousel_header {
    margin-bottom: 12px;
  }

  h3.c-globalProductCard_title {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  }

  .c-globalCarousel_content {
    gap: 24px !important;
  }

  .c-globalCarousel_fade-left:after,
  .c-globalCarousel_fade-right:before {
    display:none;
  }

  .c-globalProductCard_imgContainer {
    width: 180px !important;
    height: 266px !important;
    border-radius: 15px !important;
    background: none;
  }

  .c-globalProductCard_score {
    display:none;
  }

  /* Unnecessary sections*/
  .c-adSkyBox,
  #floor_adhesion,
  .c-aboutSection_fx,
  .c-adDisplay_container,
  .c-aboutSection,
  .c-videoPlaylist,
  #leaderboard-middle-1,
  #leaderboard-middle-2,
  .c-pageFrontDoorTv_row.g-outer-spacing-top-xxlarge.g-outer-spacing-bottom-xxlarge.g-grid-container,
  .c-globalCarousel.g-grid-container.c-globalCarousel_content_inline,
    footer {
    display:none;
  }

  /* Section 'Latest News in Games' */
  .c-pageFrontDoorGame_row.g-outer-spacing-top-xxlarge.g-outer-spacing-bottom-xxlarge.g-grid-container {
    display:none;
  }

  /* Section 'Latest News in Movies' */
  .c-pageFrontDoorMovie_row.g-outer-spacing-top-xxlarge.g-outer-spacing-bottom-xxlarge.g-grid-container {
    display:none;
  }
  `;


  // the actual style that will be toggled
  const styleElement = document.createElement('style');
  styleElement.type = 'text/css';
  styleElement.textContent = customCSS;
  document.head.appendChild(styleElement);

  // flags that are toggled by the url and the 'v' key
  let styleAllowed = true;
  let styleDisabled = false;

  // listen to the 'v' key, unless it's a text input
  document.addEventListener('keyup', (e) => {

    const key = String(e.key).toLowerCase();

    if (key !== 'v' ||
      e.target.tagName === 'INPUT' ||
      e.target.tagName === 'TEXTAREA'
    ) return;

    styleAllowed = !styleAllowed;

    handleStyleInjection()
  })

  // toggles the style on and off
  function handleStyleInjection() {

    const supportedPaths = ['/movie/', '/tv/', '/game/'];

    const isMediaPath = supportedPaths.includes(window.location.pathname);

    if (isMediaPath && styleAllowed) {
      styleDisabled = false;
    }
    else {
      styleDisabled = true;
    }

    styleElement.disabled = styleDisabled;
  }

  // Monitor URL changes using MutationObserver (so that we disable the style if we navigate
  // away from /tv). Ideally this script would work on only /tv, but the site is an SPA, so
  // we need to add and remove the style as we navigate through the site.
  const observer = new MutationObserver(() => {
    handleStyleInjection();
  });

  observer.observe(document.body, { childList: true, subtree: true });

  handleStyleInjection();
})();