WATCHED Thumbnail by xbotrex

/* ==UserStyle==
@name         WATCHED Thumbnail
@version      20211023.23.51
@namespace    userstyles.world/user/xbotrex
@description  This is only for me.
@author       xbotrex
@license      No License
==/UserStyle== */

@-moz-document domain("www.youtube.com") {

/* "WATCHED" overlay */
yt-img-shadow.ytd-thumbnail[loaded] + #overlays.ytd-thumbnail {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end
}

ytd-thumbnail-overlay-resume-playback-renderer {
	position: static;
	width: 100%
}

#progress.ytd-thumbnail-overlay-resume-playback-renderer[style="width: 100%;"]::before {
	content: 'WATCHED';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
	font-weight: 500;
	letter-spacing: 0.025em;
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	z-index: -1;
	transition: opacity 250ms var(--standard-ease)
}

#overlays:hover #progress.ytd-thumbnail-overlay-resume-playback-renderer[style="width: 100%;"]::before {
	opacity: 0
}

ytd-thumbnail-overlay-playback-status-renderer {
	display: none;
}

#info ytd-toggle-button-renderer:nth-of-type(1) .style-default-active yt-icon,
#like-button .style-default-active yt-icon {
	transform-origin: bottom left;
	animation: Like 750ms var(--standard-ease) forwards
}

#info ytd-toggle-button-renderer:nth-of-type(2) .style-default-active yt-icon,
#dislike-button .style-default-active yt-icon {
	transform-origin: center right;
	animation: Dislike 750ms var(--standard-ease) forwards
}
}