A user style for fading the thmbnail of watched videos on YouTube.

watched-thumbnail-fade-for-youtube.user.css

/* ==UserStyle==
@name        Watched thumbnail fade for YouTube
@description Fading the thmbnail of watched videos on YouTube.
@author      Hazem AbuMostafa (http://hazemam.com)
@homepageURL https://gist.github.com/HazemAM/d948c3a0d44c09fd99789f53b48a819f
@updateURL   https://gist.github.com/HazemAM/d948c3a0d44c09fd99789f53b48a819f/raw/watched-thumbnail-fade-for-youtube.user.css
@namespace   github.com/hazemam
@version     2.0.4
@license     Apache-2.0

@preprocessor default
@var  number  thumbnail-transparency  "Thumbnail transparency"  [0.85, 0, 1, 0.1]
==/UserStyle== */

@-moz-document domain("youtube.com") {
  ytd-thumbnail-overlay-resume-playback-renderer {
    height: 100%;
    background-color: transparent;
    
    border-radius: 6px;
  	overflow: hidden;
  }

  #progress.ytd-thumbnail-overlay-resume-playback-renderer {
    background-color: rgba(250, 250, 250, var(--thumbnail-transparency));
    background-image: url("https://i.imgur.com/voV6gqF.png"); /* Generated from: http://noisepng.com/100-80-5-monochrome.png */
    box-shadow: 10px 0 50px 0 rgba(0, 0, 0, 1);
  }
  html[dark] #progress.ytd-thumbnail-overlay-resume-playback-renderer {
    background-color: rgba(19, 19, 19, var(--thumbnail-transparency));
  }

  #progress.ytd-thumbnail-overlay-resume-playback-renderer:before {
    content: '';
    position: absolute;
    bottom: 0;

    height: 5px;
    width: inherit;
    background-color: var(--yt-spec-static-brand-red);
    mix-blend-mode: color;
  }
}