/*!
 * Valiant360 panorama video player jquery plugin
 *
 * Copyright (c) 2014 Charlie Hoey <@flimshaw>
 *
 * Released under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 */
@import 'font-awesome.less';

.transition (@transition) {
	-webkit-transition: @transition;
	-moz-transition:    @transition;
	-ms-transition:     @transition;
	-o-transition:      @transition;
}

.box-sizing (@sizing) {
	box-sizing: @sizing;
	-moz-box-sizing: @sizing;
	-webkit-box-sizing: @sizing;
}

.Valiant360_default {
	position: relative;
	canvas {
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.controlsWrapper {
		position: absolute;
		height: 0;
		width: 100%;
		bottom:0;
		overflow:hidden;
		.transition(all .5s ease-in-out);
	}
	.controls {
		overflow: hidden;
		position: absolute;
		bottom: 0;
		background-color:rgba(0,0,0,.75);
		height: 40px;
		width: 100%;
		.box-sizing(border-box);
		font-size: 50%;
		padding: 0 10px;
		.button {
			width: 40px;
			text-align: center;
			margin: 0;
			padding: 0;
			line-height: 40px;
			opacity: .5;
			font-size: 3em;
			color: #fff;
			text-decoration: none;
			.transition(all .25s ease-in-out);
		}
		.button:hover {
			opacity: 1;
		}
		.fullscreenButton {
			float: right;
		}
		.timeLabel{
			color: #fff;
			font-size: 2em;
			height: 100%;
			line-height:40px;
			padding:0 10px;
		}
		
		.audioControl{
			display: inline-block;
		}

		.audioControl:hover{
			padding-right:10px;
			.volumeControl{
				width:80px;
				.volumeCursor{
					display:block;
				}
			}
		}
		
		.volumeControl:hover {
			opacity: 1;
			width:80px;
		}
		
		.volumeControl{
			width: 0;
			height:26px;
			position:relative;
			top:5px;
			opacity: .5;
			display: inline-block;
			cursor:pointer;
			.transition(all .25s ease-in-out);
			.volumeBar{
				position:absolute;
				top:11px;
				.volumeProgress {
					height: 4px;
					width: 100%;
					position:absolute;
					background-color: #fff;
				}
				.volumeCursor{
					height: 12px;
					width: 12px;
					display:none;
					border-radius:50%;
					background-color: #fff;
					position:absolute;
					right:-6px;
					top:-4px;
				}
			}
		}
		
		.volumeControl:before {
			content:'';
			width:100%;
			background-color: #444;
			height: 4px;
			width: 100%;
			position:absolute;
			top:11px;
		}
		
	}	
	.loading {
		position: absolute;
		z-index:10;
		height:100%;
		width:100%;
		display:none;
		overflow: hidden;
		.icon{
			margin: 25% auto;
			width: 32px;
			height: 32px;
			font-size: 32px;
			color: #fff;
		}
		.waiting-icon{
			text-indent: -9999em;
			border-radius: 50%;
			background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
			background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
			background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
			background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
			background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
			position: relative;
			-webkit-animation: load3 1.4s infinite linear;
			animation: valiant360_default_waiting_load 1.4s infinite linear;
			-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
		}
	}
	.timeTooltip{
		display:none;
		position: absolute;
		bottom: 50px;
		height: 25px;
		line-height: 25px;
		padding:5px;
		border-radius: 4px;
		background-color:rgba(0,0,0,.75);
		color: #fff;
	}
}

.Valiant360_default:hover {
	.controlsWrapper {
		height: 48px;
	}
}

.Valiant360_default.fullscreen {
	width: 100%!important;
	height: 100%!important;
}

.Valiant360_default .valiant-progress-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
}
.Valiant360_default .valiant-progress-bar:hover {
    cursor: pointer;
}
.Valiant360_default .valiant-progress-bar > div {
    height: 100%;
    float:left;
    background-color: #444;
}
.Valiant360_default .valiant-progress-bar > div:first-child {
    background-color: red;
}

.Valiant360_default .loading .waiting-icon:before {
	width: 50%;
	height: 50%;
	background: #ffffff;
	border-radius: 100% 0 0 0;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
}

.Valiant360_default .loading .waiting-icon:after {
	background: #000;
	width: 75%;
	height: 75%;
	border-radius: 50%;
	content: '';
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

@-webkit-keyframes valiant360_default_waiting_load {
	0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
}
@keyframes valiant360_default_waiting_load {
	0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
}
