plyr/assets/less/simple-media.less

// ==========================================================================
// HTML5 Media Player
// ==========================================================================

// Variables
// -------------------------------
// Colors
@base-color: 		#2E3C44;
@green: 			#1ABC9C;
@red:           	#D44334;
@blue:          	#3498DB;

// Grays
@gray-dark: 		#343f4a;
@gray: 				#565d64;
@gray-light: 		#6f7e86;
@gray-lighter: 		#859093;
@gray-lightest: 	#cbd0d3;
@gray-light-mega: 	#dadfe2;
@off-white:         #f9fafb;

// Controls
@control-color: 		@gray-lightest;
@control-color-active: 	@blue;
@control-color-inactive: @gray;
@control-spacing: 		10px;


// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
// -------------------------------
.player,
.player *,
.player *::after,
.player *::before { 
	box-sizing: border-box; 
}

// Utility classes & mixins
// -------------------------------
.sr-only {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}
.hide {
    display: none;
}
.show-inline {
	display: inline-block;
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	zoom: 1;
	&:before, 
	&:after { content: ""; display: table; }
	&:after { clear: both; }
}
// Font smoothing
// ---------------------------------------
.font-smoothing(@mode: on) when (@mode = on) {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
.font-smoothing(@mode: on) when (@mode = off) {
	-moz-osx-font-smoothing: auto;
	-webkit-font-smoothing: subpixel-antialiased;
}

// Styles
// -------------------------------
// Base 
.player {
	position: relative;
	max-width: 100%;
	overflow: hidden; // For the controls
	background: #000;

	// For video
	&-video {
		position: relative;
	}

	&:fullscreen {
		height: 100%;
		width: 100%;

		&-video {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			transform: translateY(-50%);
		}
		&-controls {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			.icon-exit-fullscreen {
				display: block;

				& + svg {
					display: none;
				}
			}
		}
	}
	video {
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
	svg {
		width: 18px;
		height: 18px;
	}
	.px-video-captions {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20px;
		min-height: 2.5em;
		color: #fff;
		font-size: 24px;
		text-shadow: 0 1px 1px rgba(0,0,0, .75);
		text-align: center;
		.font-smoothing();
	}

	&-controls {
		.clearfix();
		position: relative;
		padding: (@control-spacing * 2) @control-spacing @control-spacing;
		background: @gray-dark;
		line-height: 1;
		
		input + label, 
		button {
			display: inline-block;
			vertical-align: middle;
			margin: 0 2px;
			padding: (@control-spacing / 2) @control-spacing;
			
			transition: background .3s ease;
			border-radius: 3px;
			cursor: pointer;

			svg {
				display: block;
				fill: currentColor;
				transition: fill .3s ease;
			}
		}
		input + label,
		input.inverted:checked + label {
			color: @control-color-inactive;
		}
		button, 
		input.inverted + label,
		input:checked + label {
			color: @control-color;
		}
		button {
			border: 0;
			background: transparent;
			overflow: hidden;

			&:focus {
				outline: 0;
			}
		}
		button:hover,
		button:focus,
		label:hover,
		input:focus + label {
			background: @control-color-active;

			svg {
				fill: #fff;
			}
		}
		.icon-exit-fullscreen {
			display: none;
		}
		.px-video-time {
			display: inline-block;
			vertical-align: middle;
			margin-left: @control-spacing;
			color: #fff;
			font-weight: 600;
			font-size: 14px;
			.font-smoothing();
		}
	}
	progress {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: @control-spacing;
		margin: 0;
		vertical-align: top;
		
		&[value] {
			-webkit-appearance: none;
			border: none;
			background: @gray;
			cursor: pointer;

			&::-webkit-progress-bar {
				background: @gray;
			}

			// The value
			&::-webkit-progress-value {
				background: @control-color-active;
			}
			&::-moz-progress-bar {
				background: @control-color-active;
			}
		}
	}
	.play-controls {
		float: left;
	}
	.sound-controls {
		float: right;
	}

	&-controls .px-video-pause,
	&.playing .player-controls .px-video-play {
		display: none;
	}
	&.playing .player-controls .px-video-pause {
		display: inline-block;
	}

	// Volume control
	input[type='range'] {
		-webkit-appearance: none;
		height: 6px;
		width: 100px;
		margin-right: @control-spacing;
		background: @gray;
		outline: 0;
		border-radius: 10px;
		
		&::-moz-range-track {
			-moz-appearance: none;
			height: 6px;
			background: @gray;
			border: 0;
			border-radius: 10px;
		}
		&::-webkit-slider-thumb {
			-webkit-appearance: none !important;
			height: 12px;
			width: 12px;
			background: @control-color;
			border-radius: 100%;
			transition: background .3s ease;
		}
		&::-moz-range-thumb {
			height: 12px;
			width: 12px;
			border: 0;
			background: @control-color;
			border-radius: 100%;
		}
		&:focus::-webkit-slider-thumb {
			background: @control-color-active;
		}
		&:focus::-moz-range-thumb {
			background: @control-color-active;
		}
	}
}

/* fixing display for IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.px-video-controls input[type='range'] {
		position: relative;
		padding: 0;
		height: 8px;
		top: -3px;
	}
	.px-video-time {
		margin-top: 4px;
	}
	.px-video-captions {
		padding: 8px;
		min-height: 36px;
	}
}