plyr/assets/less/simple-media.less

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

// Variables
// -------------------------------
// Colors
@blue:          			#3498DB;
@gray-dark: 				#343f4a;
@gray: 						#565d64;
@gray-light: 				#cbd0d3;

// Controls
@controls-bg: 				@gray-dark;
@control-color: 			@gray-light;
@control-color-active: 		@blue;
@control-color-inactive: 	@gray;
@control-spacing: 			10px;

// Progress
@progress-bg: 				@gray;
@progress-value-bg: 		@blue;

// 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
// -------------------------------
// Screen reader only
.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;
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	zoom: 1;
	&:before, 
	&:after { content: ""; display: table; }
	&:after { clear: both; }
}

// Tab focus styles
.tab-focus() {
	outline: thin dotted #000;
	outline-offset: 1px;
}

// 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;
	}

	video {
		width: 100%;
		height: auto;
		vertical-align: middle;
	}

	// Captions
	&-captions {
		display: none;
		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();
	}
	&.captions &-captions {
		display: block;
	}

	// Player controls
	&-controls {
		.clearfix();
		.font-smoothing();
		position: relative;
		padding: (@control-spacing * 2) @control-spacing @control-spacing;
		background: @controls-bg;
		line-height: 1;

		// Layout
		&-playback {
			float: left;
		}
		&-sound {
			float: right;
		}
		
		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 {
				width: 18px;
				height: 18px;
				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;
		}
		button:hover,
		label:hover {
			background: @control-color-active;

			svg {
				fill: #fff;
			}
		}
		input:focus + label,
		button:focus {
			.tab-focus();

			svg {
				fill: #fff;
			}
		}
		.icon-exit-fullscreen,
		.icon-muted {
			display: none;
		}
		.player-time {
			display: inline-block;
			vertical-align: middle;
			margin-left: @control-spacing;
			color: #fff;
			font-weight: 600;
			font-size: 14px;
			.font-smoothing();
		}
	}

	// Player progress
	&-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: @progress-bg;
			cursor: pointer;

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

			// The value
			&::-webkit-progress-value {
				background: @progress-value-bg;
			}
			&::-moz-progress-bar {
				background: @progress-value-bg;
			}
		}
	}

	// States
	&-controls [data-player='pause'],
	&.playing .player-controls [data-player='play'] {
		display: none;
	}
	&.playing .player-controls [data-player='pause'] {
		display: inline-block;
	}

	// Muted
	&.muted .player-controls .icon-muted {
		display: block;

		& + svg {
			display: none;
		}
	}

	// Volume control
	&-volume {
		-webkit-appearance: none;
		height: 6px;
		width: 100px;
		margin-right: @control-spacing;
		background: @gray;
		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 {
			outline: 0;
			
			&::-webkit-slider-thumb {
				background: @control-color-active;
			}
			&::-moz-range-thumb {
				background: @control-color-active;
			}
		}
	}

	// Full screen mode
	&:fullscreen {
		height: 100%;
		width: 100%;

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

			.icon-exit-fullscreen {
				display: block;

				& + svg {
					display: none;
				}
			}
		}
	}
}

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