le-player/source/less/default/le-player.less

The best HTML5 video player made for Lectoriy.

@import "variables.less";


.leplayer
{
	display: block;
	outline: 0;
	position: relative;
	background-color: transparent;

	&.leplayer--fullscreen
	{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100% !important;
		max-width: none !important;

	}

}

// .leplayer--iphone {
// 	.control:hover,
// 	.control:focus {
// 		background: #dee5ed;
// 		color: #1b4b7e;
// 	}
// }


// CONTROLS

.leplayer-controls
{
	border-collapse: separate;
	display: flex;
	height: @control-height;
	position: relative;
	width: 100%;
	outline: none;


	&--left
	{
		margin-right: auto;
	}

	&--right
	{
		margin-left: auto;
	}

	&--justify
	{
		width: auto;
		&::after {
			content: '';
			width: 1px;
			display: block;
		}
	}

	&:not(:last-child)
	{
		margin-bottom: 10px;
	}

	&.controls-common
	{
		margin-top: 10px;
	}

	&.controls-fullscreen
	{
		position: relative;
		width: auto;
		z-index: @z-index-fullscreen + 7;
		.control
		{
			background: @color-fs-control;
			color: @color-fs-text;
			&--tap,
			&.control--no-iphone:hover
			{
				background: @color-fs-control-hovered;
				color: @color-fs-text-hovered;
			}
			&.disabled
			{
				color: @color-fs-disabled;
				&.control--tap,
				&.control--no-iphone:hover
				{
					background: @color-fs-background;
					color: @color-fs-disabled;
				}
			}
			&.play
			{
				background: @color-fs-background-play;
				color:  @color-fs-active;

				&.control--tap,
				&.control--no-iphone:hover
				{
					background: @color-fs-background-play-hovered;
				}
			}
			&.timeline-container
			{
				&.control--tap,
				&.control--no-iphone:hover
				{
					background: @color-fs-background;
				}
			}
		}
		.control-dropdown__content
		{
			background: @color-fs-dropdown;
			z-index: @z-index-fullscreen + 8;
		}

		.control-checkbox--checked
		{
			background: @color-fs-control-checked;
			color: @color-fs-text-hovered;
			&.control--tap,
			&.control--no-iphone:hover {
				background: darken(@color-fs-control-checked, 5%);
			}
		}

		.info-control
		{
			&__content
			{
				background: @color-fs-background;
				color: white;
			}
		}
		.control-text
		{
			background: @color-fs-background;
			color: @color-fs-text;
		}
		.control-container__item
		{
			color: @color-fs-text;
			&:hover
			{
				background: @color-fs-inner-item-hover !important;
				color: @color-fs-text-hovered;
			}
			&--active
			{
				background: @color-fs-inner-item-active;
				color: @color-fs-text-active;
			}
		}
		.timeline
		{
			background: @color-fs-background-line;
			margin: 0;
		}
		.timeline-container
		{
			background: @color-fs-background;
			.control-text
			{
				height: auto;
				position: relative;
			}
		}

		.time-marker
		{
			background: @color-fs-marker;
			border-right: 1px solid @color-fs-marker-border;
			z-index: @z-index-fullscreen + 7;
			&.shadow
			{
				background: @color-fs-marker-shadow;
				border-right: 1px solid @color-fs-marker-shadow-border;
				z-index: @z-index-fullscreen + 6;
			}
			.time
			{
				background: @color-fs-marker-shadow-time;
				z-index: @z-index-fullscreen + 3;
			}
		}
		.time-played
		{
			background: @color-fs-background-line-active;
			z-index: @z-index-fullscreen + 5;
		}
		.time-buffered
		{
			background-color: @color-fs-background-line-buffered;
			z-index: @z-index-fullscreen + 4;
		}
		.volume-active
		{
			background: @color-fs-background-line-active;
		}
		.volume-slider
		{
			height: 144px;
		}
		.volume-line
		{
			background: @color-fs-background-line;
		}
		.volume-marker
		{
			background: @color-fs-marker;
			border-top: 1px solid @color-fs-marker-border;
		}
	}

	.control
	{
		background: @color-background;
		border: none;
		border-radius: 0;
		color: @color-text;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: @control-font-size;
		height: @control-height;
		width: auto;
		line-height: 100%;
		padding: 0 (@control-width - @control-font-size) / 2;
		text-align: center;
		vertical-align: middle;
		&.control--tap,
		&.control--no-iphone:hover
		{
			background: @color-control-hovered;
			color: @color-text-hovered;
		}


		&.play
		{
			background: @color-background-play;
			color: @color-active;
			padding: 0 (@control-play-width - @control-font-size) / 2;
			&.disabled:hover
			{
				background: @color-background-play;
			}
			&.control--tap,
			&.control--no-iphone:hover
			{
				background: @color-background-play-hovered;
				color: @color-background;
			}
		}

		&.disabled
		{
			cursor: not-allowed;
			color: @color-disabled;
			pointer-events: none;
		}

		@media screen and (max-width: 420px) {
			padding: 0 5px;
		}
	}

	.control-checkbox--checked
	{
		background: @color-control-checked;
		color: @color-text-checked;
		&.control--tap,
		&.control--no-iphone:hover {
			background: darken(@color-control-checked, 5%);
		}
	}

	.control-dropdown
	{
		position: relative;

		.leplayer-icon svg {
			pointer-events: none;
		}

		&__content
		{
			display: none;
			position: absolute;
			background: @color-background;
			bottom: @control-height;
			cursor: default;
			display: none;
			left: 0;
			min-width: 100%;
			position: absolute;
			z-index: @z-index-base + 8;
			left: 50%;
			transform: translateX(-50%);
			&:before
			{
				content: '';
				position: absolute;
				width: @control-height;
				height: 1px;
				bottom: -1px;
				left: 0;
			}
		}

	}

	.info-control
	{
		&__content
		{
			white-space: nowrap;
			text-align: left;
			background: @color-background;
			padding: 10px;
			color: @color-info-text;
			font-size: @control-text-font-size;
			/*left: 50%;*/
			min-width: 300px;
			/*transform: translateX(-50%);*/
		}

		&__item
		{
		}
	}

	.control-container
	{
		display: flex;
		height: @control-height;
		position: relative;

		&__item
		{
			display: block;
			color: @color-text;
			white-space: nowrap;
			cursor: pointer;
			font-size: @control-text-font-size;
			line-height: @control-height;
			padding: 0 7px;
			&:hover
			{
				// TODO: Rename this variable and remove important
				background: @color-inner-item-hover !important;
				color: @color-text-hovered;
			}
			&--active
			{
				background: @color-inner-item-active;
				color: @color-text-active;
			}
		}
	}

	.control-icon
	{
		line-height: @control-height;
		padding: 0 (@control-width - @control-font-size) / 2;
	}

	.control-text
	{
		background: @color-background;
		color: @color-text;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: @control-text-font-size;
		box-sizing: content-box;
		line-height: 100%;
		padding: 0 5px;
		text-align: center;
	}

	.divider
	{
		background: none;
		display: block;
		padding: 0 @divider-width / 2;
		width: 0.01%;
	}

	.fa
	{
		text-align: center;
		width: @control-font-size;
	}

	.inner-item
	{
	}


	.timeline
	{
		background: @color-background-line;
		cursor: pointer;
		display: block;
		height: 12px;
		margin: (@control-height - 12px) / 2 0;
		position: relative;
		width: 100%;
	}

	.time-current
	{
		width: 40px;
	}

	.timeline-container
	{
		background: @color-background;
		position: relative;
		white-space: nowrap;
		width: 100%;

		&.control--tap,
		&.control--no-iphone:hover
		{
			background: @color-background;
		}
	}

	.timeline-subcontainer
	{
		display: flex;
		width: 100%;
	}

	.time-marker
	{
		background: @color-marker;
		border-right: 1px solid @color-marker-border;
		cursor: pointer;
		height: 16px;
		left: 0;
		margin-left: -2px;
		position: absolute;
		top: -2px;
		//transition: left @timeline-transition;
		width: 2px;
		z-index: @z-index-base + 7;
		&:before
		{
			content: '';
			width: 4px;
			height: 100%;
			position: absolute;
			left: -1px;
			background: transparent;
		}
		&--drag:before
		{
			background: @color-marker;
		}
		&.shadow
		{
			background: @color-marker-shadow;
			border-right: 1px solid @color-marker-shadow-border;
			transition: none;
			z-index: @z-index-base + 6;
			&:before
			{
				content: none;
			}
		}
		.time
		{
			background: @color-marker-shadow-time;
			border-radius: 1px;
			bottom: 20px;
			color: @color-active;
			font-size: @control-text-font-size;
			line-height: @control-text-font-size + 6px;
			margin-left: -18px;
			padding: 0 5px;
			position: absolute;
			z-index: @z-index-base + 3;
		}
	}

	.timline-container.control--no-iphone
	{
		.time-marker {

			&:hover:before
			{
				background: @color-marker;
			}
		}
	}

	.timline-container.control--tap
	{
		.time-marker {

			&:before
			{
				background: @color-marker;
			}
		}
	}

	.time-played
	{
		background: @color-background-line-active;
		bottom: 0;
		left: 0;
		position: absolute;
		top: 0;
		//transition: width @timeline-transition;
		width: 0;
		z-index: @z-index-base + 5;
	}

	.leplayer-timeline-sections
	{
		overflow-x: hidden;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.leplayer-timeline-section
	{
		background: @color-timeline-section-odd;
		bottom: 0;
		left: 0;
		position: absolute;
		top: 0;
		//transition: width @timeline-transition;
		width: 0;
		z-index: @z-index-base + 4;
	}

	.leplayer-timeline-section:nth-child(2n)
	{
		background: @color-timeline-section-even;
	}

	.time-buffered
	{
		background-color: @color-background-line-buffered;
		bottom: 0;
		left: 0;
		position: absolute;
		top: 0;
		width: 0;
		z-index: @z-index-base + 4;
	}

	.volume-active
	{
		background: @color-background-line-active;
		bottom: 0;
		height: 50%;
		position: absolute;
		width: 100%;
	}

	.volume-slider
	{
		height: 144px;
	}

	.volume-line
	{
		background: @color-background-line;
		bottom: 10px;
		position: absolute;
		left: 12px;
		right: 12px;
		top: 10px;
	}

	.volume-marker
	{
		background: @color-marker;
		bottom: 50%;
		border-top: 1px solid @color-marker-border;
		cursor: pointer;
		height: 2px;
		left: -4px;
		margin-bottom: -1px;
		right: -4px;
		position: absolute;
	}

}


.leplayer-control-collection
{
	margin-top: 10px;
	margin-bottom: 10px;
	outline: none;

	&--one-row
	{
		display: flex;
	}
}

.leplayer-control-collection--fullscreen
{
	display: none;
	bottom: 0;
	left: 20px;
	position: fixed;
	right: 20px;
	width: auto;
	z-index: @z-index-fullscreen + 7;
}

.leplayer--fullscreen
{
	.leplayer-control-collection--common
	{
		display: none;
	}

}

.leplayer--fullscreen.leplayer--user-active
{

	.leplayer-control-collection--fullscreen
	{
		display: block;
	}
}


.leplayer-error-display
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: red;
	color: white;
	font-weight: 500;
	width: 100%;
	height: auto;
	display: none;
	text-align: center;
	font-size: 15px;
	padding: 15px;
	z-index: @z-index-base + 8;
}


.leplayer--fullscreen
{
	.leplayer-error-display
	{
		z-index: @z-index-fullscreen + 8;
	}
}


.leplayer--error
{
	.leplayer-error-display
	{
		display: block;
	}
}
.leplayer-icon
{
	display: block;
	min-width: 1em;
	min-height: 1em;
	svg
	{
		display: block;
		width: 1em;
		height: 1em;
	}
}



.leplayer__inner
{
	position: relative;
	overflow: hidden;
}

.leplayer--fullscreen
{
	.leplayer__inner
	{
		height: 100%;
		margin: 0 auto;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: @z-index-fullscreen + 6;
	}
}

.leplayer--mini
{
	.leplayer__inner
	{
		top: 0;
		left: 0;
		right: 0;
		height: auto;
		display: flex;
		position: fixed;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		align-items: stretch;
		box-sizing: border-box;
		z-index: @z-index-miniplayer;
		max-height: @miniplayer-height;
		background: @color-miniplayer-bg;
		box-shadow: 0 10px 15px -10px rgba(0,0,0,.75);
	}
}

.leplayer__info
{
	display: none;
}

.leplayer__last
{
	display: none;
	position: absolute;

	.leplayer-time
	{
		display: inline;
	}
}


.leplayer--mini
{
	.leplayer__info
	{
		display: flex;
		padding: 10px;
		height: 50px;
		margin: 0;
		flex-direction: column;
		color: black;
		height: 100%;
		// Width of controls in miniplayer
		min-width: 300px;
	}

	.leplayer__last
	{
		display: block;
		right: 20px;

		@media screen and (max-width: 750px) {
			display: none;
		}

	}

	.leplayer__title {
		color: black;
		font-size: 14px;
		margin-bottom: 5px;
		font-weight: 500;
		line-height: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.leplayer__video-info {
		margin-bottom: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.leplayer__title
{
	color: black;
	font-size: 14px;
	margin-bottom: 5px;
	font-weight: 500;
	line-height: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.leplayer--mini
{
	.leplayer__title
	{
		display: block;
	}
}


.leplayer-key
{
	font-family: inherit;
	font-size: inherit;
	box-shadow: 1px 1px 0 1px rgba(120,120,120,0.5);
	background: #eee;
	border-radius: 2px;
	color: #000;
	display: inline-block;
	margin: 4.25px 2px 4.25px 0;
	padding: 4px;
}


.leplayer-control-collection--mini {
	margin-top: auto;
	margin-bottom: auto;
	display: none;

	.control-time {
		display: block;
		padding: 6px 10px;
		font-weight: 500;
		width: 150px;
		white-space: nowrap;
		box-sizing: border-box;

		@media (max-width: 440px) {
			display: none;
		}

		&__current {
			background: none;
			cursor: default;
			font-size: 15px;
			text-align: right;
			color: black;
			display: inline;
		}

		&__total {
			background: none;
			cursor: default;
			color: black;
			display: inline;

			&:before {
				content : '/';
				margin-right: 9px;
			}
		}

	}

	.volume-control:hover .volume-slider {
		display: none
	}

	.rate-current
	{
		min-width: 34px;
	}
}

.leplayer--mini
{
	.leplayer-control-collection--mini
	{
		display: block;
	}
}


@keyframes leplayer-splashicon-fadeout {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: scale(2);
    }
}
.leplayer-splashicon
{
	display: none;
	position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    z-index: 17;
    margin-left: -26px;
    margin-top: -26px;
    background: rgba(0,0,0,.5);
    border-radius: 26px;
	color: white;
	justify-content: center;
	align-items: center;
    animation: leplayer-splashicon-fadeout .5s linear 1 normal forwards;

	&--active
	{
		display: flex;
	}
}

.leplayer--virgin
{
	.leplayer-splashicon
	{
		display: none
	}
}


// Mobile styles

.leplayer--iphone {
	.leplayer-controls {
		.timeline-container {
			width: auto;
		}
		.timeline {
			display: none;
		}
	}
}

.leplayer--mobile.leplayer--fullscreen {
	.leplayer-control-collection--fullscreen {
		position: static;
	}

	.controls-fullscreen {
		position: absolute;
		z-index: 1007;
		&:nth-child(1) {
			bottom: 0;
			margin-bottom: 0;
			width: 100%;
		}
		&:nth-child(2) {
			top: 0px;
			left: 0px;

			.control-dropdown__content {
				bottom : auto;
				top: @control-height;
			}
		}
	}

}


@import "components/video.less";
@import "components/play-button.less";
@import "components/loader-container.less";
@import "components/sections.less";
@import "components/timeline-buffered.less";
@import "components/poster.less";