le-player/source/less/unti-origin/components/play-button.less

The best HTML5 video player made for Lectoriy.

.leplayer-play-button
{
	display: none;
	align-items: center;
	align-content: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	color: @color-primary;
	cursor: pointer;
	position: absolute;
	height: 100%;
	width: 100%;
	outline: 0;
	text-align: center;
	z-index: @z-index-base + 8;
	font-size: 50px;
	&:hover
	{
		background: rgba(0, 0, 0, 0.2);

		.leplayer-play-button__button
		{
			opacity: 0.5;
		}
	}

	&__button
	{
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
		padding: 0.5em;
		background-color: @color-active;
		border-radius: 50%;
		cursor: pointer;
	}

	.leplayer-icon
	{
		position: relative;
		left: 0.08em;

		svg {
			filter: invert(38%) sepia(97%) saturate(395%) hue-rotate(129deg) brightness(95%) contrast(88%);
		}
	}
}

.leplayer--inited.leplayer--virgin
{
	.leplayer-play-button
	{
		display: flex;
	}

	&.leplayer--waiting
	{
		.leplayer-play-button
		{
			display: none;
		}
	}
}

@media screen and (max-width: 420px) {
	.leplayer-play-button
	{
		font-size: 35px;
	}
}


.leplayer--fullscreen
{
	.leplayer-play-button {
		z-index: @z-index-fullscreen + 8;
	}

	.leplayer-play-button
	{
		font-size: 50px;
	}

	.leplayer-play-button__button
	{
		padding: 0.6em;
	}
}

.leplayer--mini
{
	.leplayer-play-button
	{
		font-size: 30px;
	}
}

.leplayer--playing,
.leplayer--error,
.leplayer--waiting
{
	.leplayer-play-button
	{
		display: none;
	}
}