DeepL Minimal UI

Removes design elements to make the site run as fast as possible.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         DeepL Minimal UI
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Removes design elements to make the site run as fast as possible.
// @author       you
// @match        https://www.deepl.com/*
// @grant        none
// @run-at       document-start
// @license MIT
// ==/UserScript==

(function () {
  'use strict';

  const style = document.createElement('style');
  style.textContent = `

    *,
    *::before,
    *::after {
      animation-duration:        0.001ms !important;
      animation-delay:           0.001ms !important;
      transition-duration:       0.001ms !important;
      transition-delay:          0.001ms !important;
      backdrop-filter:           none !important;
      -webkit-backdrop-filter:   none !important;
      box-shadow:                none !important;
      text-shadow:               none !important;
      filter:                    none !important;
      -webkit-font-smoothing:    auto !important;
    }

    *,
    *::before,
    *::after {
      border-radius: 0 !important;
    }

    [class*="wave"],
    [class*="Wave"],
    [class*="blob"],
    [class*="Blob"],
    [class*="hero-bg"],
    [class*="HeroBg"],
    [class*="gradient"],
    [class*="Gradient"],
    [class*="glow"],
    [class*="Glow"],
    [class*="particle"],
    [class*="Particle"],
    [class*="bg-animation"],
    [class*="BgAnimation"] {
      display: none !important;
    }

    [style*="linear-gradient"],
    [style*="radial-gradient"] {
      background-image: none !important;
    }

    button,
    [role="button"],
    [class*="Button"],
    [class*="button"],
    [class*="Btn"],
    [class*="btn"] {
      border-radius:  0 !important;
      box-shadow:     none !important;
      transition:     none !important;
    }

    button:hover,
    [role="button"]:hover {
      transform: none !important;
      box-shadow: none !important;
    }

    input,
    textarea,
    select,
    [contenteditable] {
      border-radius: 0 !important;
      box-shadow:    none !important;
      outline:       1px solid currentColor !important;
      outline-offset: -1px !important;
    }

    input:focus,
    textarea:focus,
    [contenteditable]:focus {
      box-shadow: none !important;
      outline:    2px solid #0f4c8a !important;
    }

    [class*="Card"],
    [class*="card"],
    [class*="Panel"],
    [class*="panel"],
    [class*="Modal"],
    [class*="modal"],
    [class*="Dropdown"],
    [class*="dropdown"],
    [class*="Tooltip"],
    [class*="tooltip"],
    [class*="Popover"],
    [class*="popover"] {
      border-radius: 0 !important;
      box-shadow:    none !important;
      border:        1px solid rgba(0,0,0,0.15) !important;
    }

    * {
      will-change:        auto !important;
      transform-style:    flat !important;
      perspective:        none !important;
      backface-visibility: visible !important;
    }

    * {
      scrollbar-width: thin !important;
    }

    img[style*="filter"],
    img[class*="blur"],
    img[class*="placeholder"] {
      filter: none !important;
      opacity: 1 !important;
    }

  `;

  if (document.head) {
    document.head.appendChild(style);
  } else {
    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(style));
  }

  console.log('%c🔲 DeepL Minimal UI active', 'background:#0f4c8a;color:#fff;padding:2px 8px;font-family:monospace');

})();