Template:Youtube/styles.css

.template-youtube {
	background: black; 
	color: #ccc; 
	border-radius: 0.4rem;
}

.template-youtube a {
	color: white;
}

.template-youtube .sliderbg {
	position: relative;
	background: white;
	display: flex; 
	margin-bottom: 0.25rem; 
	margin-top: 0.5rem; 
	height: 0.75rem; 
	border-radius: 0.2rem;
}

.template-youtube .slider {
	left: 0%;
	animation: slide 4s linear forwards;
	position: absolute; 
	align-self: center; 
	transform: translateX(-50%);
}

.template-youtube .sliderbg::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0;
	background: red;
	animation: fill 4s linear forwards;
	border-radius: inherit;
}

@keyframes fill {
	from { 
		width: 0; 
	}
	to { 
		width: 100%; 
	}
}

@keyframes slide {
	0% {
		left: 0%;
		opacity: 1;
	}
  
	100% {
		left: 100%;
	}
}