Return YouTube material buttons by stashymane

/* ==UserStyle==
@name           Return YouTube material buttons
@namespace      github.com/stashymane
@version        1.0.0
@description    Attempts to add pseudo-material buttons to YouTube, which were removed in the recent UI refresh.
@author         stashymane
==/UserStyle== */
@-moz-document domain("youtube.com") {
	:root,
	[dark] .yt-spec-button-shape-next--filled {
		--mat-color: rgba(0, 0, 0, 0.1);
	}

	[dark], .yt-spec-button-shape-next--filled {
		--mat-color: rgba(255, 255, 255, 0.1);
	}
	
	yt-touch-feedback-shape {
		display: none;
	}

	yt-button-shape button,
	yt-icon-button,
	tp-yt-paper-item,
	.ytp-menuitem,
	yt-chip-cloud-chip-renderer {
		position: relative;
		overflow: hidden;
		--mat-transition: cubic-bezier(0, .2, .2, 1);
		transition: background-color .1s ease-out;
	}
	
	yt-button-shape button:hover,
	yt-icon-button:hover,
	tp-yt-paper-item:hover,
	.ytp-menuitem:hover {
		transition: none;
	}

	yt-button-shape button:before,
	yt-button-shape button:before,
	yt-icon-button button:before,
	tp-yt-paper-item:after,
	.ytp-menuitem:after,
	yt-chip-cloud-chip-renderer:after {
		content: "";
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: background-size .4s var(--mat-transition), opacity .1s linear;
		opacity: 0;
		background-image: radial-gradient(circle at center, var(--mat-color) 7.5%, transparent 10%);
		background-size: 0 0;
		background-position: center center;
		background-repeat: no-repeat;
	}

	yt-icon-button {
		border-radius: 100%;
	}

	yt-button-shape button:hover:focus:before,
	yt-button-shape button:hover:focus:before,
	yt-icon-button button:hover:focus:before,
	tp-yt-paper-item:hover:focus:after,
	.ytp-menuitem:hover:focus:after,
	yt-chip-cloud-chip-renderer:hover:focus:after {
		background-size: 1500% 1500%;
	}

	yt-button-shape button:hover:active:before,
	yt-button-shape button:hover:active:before,
	yt-icon-button button:hover:active:before,
	tp-yt-paper-item:hover:active:after,
	.ytp-menuitem:hover:active:after,
	yt-chip-cloud-chip-renderer:hover:active:after {
		opacity: 1;
	}
}