@import "library.less";


.object {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
	overflow: hidden;
	-webkit-transform: translateZ(0);
	.box-sizing;
	
	&[data-type="image"] {
		img {
			display: block;
			width: 100%;
		}
		.fx {
			position: absolute;
			display: none;
			opacity: 0.6;
			
			&.anim {
				display: block;
				-webkit-animation: myOrbit 1s linear infinite;
			}
		}
		
		&[data-wide-image="true"] {
			img {
				position: absolute;
			}
		}
	}
	
	&[data-type="text"] {
		background: rgba(255,255,255,0);
		.no-no-select;
		
		.content {
			width: 100%;
			height: 100%;
		}
		.editor {
			overflow: hidden;
			width: 100%;
			height: 100%;
		}
	}
	
	&[data-type="media"] {
		.content {
			width: 100%;
			height: 100%;
		}
		.site-embed {
			display: block;
			color: inherit;
			text-decoration: none;
			
			.img {
				float: left;
				width: 100px;
				height: 100px;
				.cover;
			}
			.title {
				display: block;
				font-family: PTSerif-Regular;
				font-size: 18px;
				line-height: 22px;
				padding-left: 120px;
				text-decoration: none;
				padding-top: 5px;
			}
			.description {
				display: block;
				font-size: 16px;
				line-height: 18px;
				padding-left: 120px;
				padding-top: 5px;
				text-decoration: none;
				color: #666;
			}
		}
	}
	
	&[data-type="audio"] {
		@player_color: #ffca24;
		overflow: visible;
		
		&.audio-player {
			width: 450px;
			height: 50px;
			
			.play {
				position: relative;
				float: left;
				width: 50px;
				height: 50px;
				cursor: pointer;
				background: @player_color;
				border-right: 1px solid lighten(@player_color, 20%);
				
				.ico-play, .ico-pause {
					position: absolute;
					width: 100%;
					height: 100%;
					background: url(../images/audio-player.png);
					z-index: 2;
				}
				.ico-pause {
					display: none;
					background-position: 0px -50px;
					z-index: 1;
				}
				&:hover {
					-webkit-filter: brightness(110%);
				}
			}
			.time {
				float: left;
				width: 50px;
				height: 36px;
				padding: 7px 0;
				background: @player_color;
				border-right: 1px solid lighten(@player_color, 20%);
				
				p {
					font-family: MonoCondensed-Bold, Arial, Helvetica, sans-serif;
					font-size: 12px;
					line-height: 18px;
					text-align: center;
					color: #fff;
					margin: 0;
				}
				.duration {
					color: rgba(255,255,255,0.6);
				}
			}
			.progress {
				float: left;
				width: 297px;
				height: 50px;
				background: lighten(@player_color, 15%);
				
				.slider {
					cursor: pointer;
					height: 100%;
					width: 100%;
				
					.ui-slider-handle {
						height: 13px !important;
						width: 1px !important;
						margin: 5px 0 0 -1px !important;
						cursor: pointer;
					}
					.ui-slider-range {
						background: @player_color;
						height: 100%;
					}
				}
			}
			.volume {
				float: left;
				position: relative;
				width: 50px;
				height: 50px;
				border-left: 1px solid lighten(@player_color, 20%);
				background: @player_color url(../images/audio-player.png) no-repeat 0px -100px;
				
				.bar {
					display: none;
					position: absolute;
					height: 100px;
					width: 50px;
					top: -50px;
					left: 0px;
					background: lighten(@player_color, 15%);
				}
				.slider {
					cursor: pointer;
					height: 100px;
					width: 100%;
				
					.ui-slider-handle {
						height: 13px !important;
						width: 1px !important;
						margin: 5px 0 0 -1px !important;
						cursor: pointer;
					}
					.ui-slider-range {
						background: @player_color;
						height: 9px;
						margin-top: 3px;
					}
				}
				&:hover {
					.bar {
						display: block;
					}
				}
				&:active {
					.bar {
						display: block !important;
					}
				}
			}
		}
	}
	
	&.hide {
		opacity: 0;
	}
	
	&[data-scroll-effects="true"] {
		/*.transition(); */
		/*opacity: 0.3;*/
		
		-webkit-transition: -webkit-transform 1000ms ease, opacity 1000ms ease;
		-moz-transition: -moz-transform 1000ms ease, opacity 1000ms ease;
		-ms-transition: -ms-transform 1000ms ease, opacity 1000ms ease;
		-o-transition: -o-transform 1000ms ease, opacity 1000ms ease;
		transition: transform 1000ms ease, opacity 1000ms ease;
		
		&.scroll-effects-class-fade {
			opacity: 1;
		}
		
		&.scroll-effects-class-fade-start {
			opacity: 0;
		}
		&.scroll-effects-class-fade-end {
			opacity: 1;
		}
		
		&.scroll-effects-class-scale-start {
			opacity: 0;
			-webkit-transform: scale(0.7);
			-moz-transform: scale(0.7);
			-ms-transform: scale(0.7);
			-o-transform: scale(0.7);
			transform: scale(0.7);
		}
		&.scroll-effects-class-scale-end {
			opacity: 1;
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}
		
		&.scroll-effects-class-slide-left-start {
			opacity: 0;
			-webkit-transform: translateX(-200px);
			-moz-transform: translateX(-200px);
			-ms-transform: translateX(-200px);
			-o-transform: translateX(-200px);
			transform: translateX(-200px);
		}
		&.scroll-effects-class-slide-left-end {
			opacity: 1;
			-webkit-transform: translateX(0px);
			-moz-transform: translateX(0px);
			-ms-transform: translateX(0px);
			-o-transform: translateX(0px);
			transform: translateX(0px);
		}
		
		&.scroll-effects-class-slide-right-start {
			opacity: 0;
			-webkit-transform: translateX(200px);
			-moz-transform: translateX(200px);
			-ms-transform: translateX(200px);
			-o-transform: translateX(200px);
			transform: translateX(200px);
		}
		&.scroll-effects-class-slide-right-end {
			opacity: 1;
			-webkit-transform: translateX(0px);
			-moz-transform: translateX(0px);
			-ms-transform: translateX(0px);
			-o-transform: translateX(0px);
			transform: translateX(0px);
		}
	}
	
	&[data-type="slider"] {
		overflow: visible;
		
		.content {
			height: 100%;
		}
	}
	
	&[data-type="ajpg"] {
		.content {
			height: 100%;
		}
		
		&[data-ajpg-action="move"] {
			cursor: url(../images/cursors/ajpg-move.png), auto;
		}
	}
	
	&[data-type="colorchanger"] {
		width: 100%;
		height: 50px;
		z-index: 1000
	}
	
	&[data-image-3d="true"] {
		overflow: visible;
		/*cursor: url(../images/cursors/3d-image.png), auto;*/
	}
	
	&[data-flip-image="true"] {
		overflow: visible;
		
		.content {
			overflow: visible;
			position: relative;
			
			-webkit-perspective: 800px;
			-moz-perspective: 800px;
			-ms-perspective: 800px;
			-o-perspective: 800px;
			perspective: 800px;
			
			>img {
				position: absolute;
				z-index: 2;
				-webkit-backface-visibility:hidden;
				-moz-backface-visibility:hidden;
				-ms-backface-visibility:hidden;
				-o-backface-visibility:hidden;
				backface-visibility:hidden;
				display: block;
				.transition();
			}
			&:hover {
				>img {
					-webkit-transform: rotateY(180deg);
					-moz-transform: rotateY(180deg);
					-ms-transform: rotateY(180deg);
					-o-transform: rotateY(180deg);
					transform: rotateY(180deg);
					
				}
				.back-side {
					-webkit-transform: rotateY(0deg);
					-moz-transform: rotateY(0deg);
					-ms-transform: rotateY(0deg);
					-o-transform: rotateY(0deg);
					transform: rotateY(0deg);
				}
			}
		}
		.back-side {
			/*position: absolute;*/
			top: 0px;
			left: 0px;
			font-family: ProximaNova-Regular;
			font-size: 18px;
			z-index: 1;
			.box-sizing;
			.cover;
			.transition();
			
			-webkit-transform: rotateY(-180deg);
			-moz-transform: rotateY(-180deg);
			-ms-transform: rotateY(-180deg);
			-o-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
			
			
			&.txt {
				padding: 30px;
				background: #fff;
				text-align: center;
			}
			
			.va {
				display:table;
				height: 100%;
				width: 100%;
				
				p {
					display: table-cell;
					vertical-align: middle;
				}
			}
		}
	}
	
	&[data-parallax-speed] {
		-webkit-transform: translateZ(0);
	}
	
	&[data-type="points"] {
		z-index: 20;
		overflow: visible;
		
		.point {
			position: relative;
			background: fadeout(#ffd445, 50%);
			width: 24px;
			height: 24px;
			cursor: pointer;
			.border-radius();
			
			i {
				position: absolute;
				display: block;
				width: 10px;
				height: 10px;
				background: #ffd445;
				top: 7px;
				left: 7px;
				.border-radius();
				.transition(@duration: 200ms);
			}
			
			.point-text {
				position: absolute;
				background: #ffd445;
				width: 200px;
				padding: 20px 12px;
				.box-sizing;
				cursor: default;
				top: 0px;
				left: -9999px;
				opacity: 0;
				.transition(@type:opacity);
				
				p {
					font-family: ProximaNova-Regular;
					font-size: 12px;
					line-height: 18px;
					margin-bottom: 0px;
				}
				
				&:before {
					position: absolute;
					content: '';
					width: 10px;
					height: 2px;
					padding: 12px 0;
					background-color: fadeout(#ffd445, 50%);
					left: -10px;
					top: 0px;
					background-clip: content-box;
				}
			}
			
			&:hover, &.active {
				i {
					-webkit-transform: scale(2);
					-moz-transform: scale(2);
					-ms-transform: scale(2);
					-o-transform: scale(2);
					transform: scale(2);
				}
				.point-text {
					left: 30px;
					opacity: 1;
				}
			}
			
			&.align-left:hover {
				i {
					-webkit-transform: scale(2);
					-moz-transform: scale(2);
					-ms-transform: scale(2);
					-o-transform: scale(2);
					transform: scale(2);
				}
				.point-text {
					left: -210px;
					opacity: 1;
					
					&:before {
						right: -10px;
						left: auto;
					}
				}
			}
		}
	}
	
	&[data-type="label"] {
		h1 {
			font-size: 50px;
			line-height: 60px;
		}
	}
	
	&[data-scroll-to-fixed="true"] {
		&.fixed {
			position: fixed;
		}
	}
	
	&[data-type="embed"] {
		.content {
			width: 100%;
			height: 100%;
		}
	
		.embed-error-message {
			position: absolute;
			display: none;
			width: 100%;
			height: 100%;
			z-index: 1;
			/*background-color: rgba(255, 20, 20, 0.7);*/
			background-color: #cc2728;
			
			p {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				color: #ffffff;
				font-family: Courier, "Courier New", monospace;
			}
			
			&.shown {
				display: table;
			}
		}
	}
	
	&.missing {
		background: rgba(255,0,0,0.3);
		box-shadow: none;
		border: 2px dashed rgba(255,0,0,0.3);
		
		&:before {
			content: 'Missing visual object "' attr(data-type) '"';
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -15px 0 0 -150px;
			text-align: center;
			width: 300px;
			height: 30px;
			font-size: 16px;
			line-height: 30px;
			font-family: 'Courier New';
			color: #fff;
		}
	}
}

.ajpg {
	width: 100%;
	height: 100%;

	.ajpg-content {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		
		.frame {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			top: 0%;
			left: 0%;
			display: none;
			.cover;
			
			&.current {
				display: block;
				z-index: 2;
			}
			
			&.old {
				display: block;
				z-index: 1;
			}
		}
	}
}

.slider {
	@duration: 600ms;
	@type: cubic-bezier(.59,.1,.38,.78);
	@controller_width: 22px;
	@controller_height: 46px;

	width: 100%;
	height: 100%;

	.slider-content {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		
		.slide {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			top: 0%;
			left: 0%;
			display: none;
			.cover;
			
			/*==== mixins ====*/
			
			.animated {
				.transition(@duration:@duration, @type:@type);
			}
			
			.prev {
				left: -100%;
				z-index: 2;
				display: block;
			}
			
			.current {
				left: 0%;
				z-index: 3;
				display: block;
			}
			
			.next {
				left: 100%;
				z-index: 2;
				display: block;
			}
			
			/*=========*/
			
			&.current {
				.current;
			}
			
			&.prev {
				.prev;
			}
			
			&.next {
				.next;
			}
			
			&.current-to-prev {
				.prev;
				.animated;
			}
			
			&.current-to-next {
				.next;
				.animated;
			}
			
			&.to-current {
				.current;
				.animated;
			}
		}
	}
	
	.slider-utility {
		position: relative;
		width: 100%;
		height: 100%;
		top: -100%;
	
		.slider-label {
			position: absolute;
			width: 100%;
			top: 100%;
			margin-top: 20px;
			text-align: center;
		}
		
		.slider-controller {
			position: absolute;
			width: @controller_width;
			height: @controller_height;
			cursor: pointer;
			top: 50%;
			left: auto;
			margin-left: auto;
			margin-top: -@controller_height / 2;
			z-index: 5;
			background-image: url(../images/slider-arrows.png);
			
			&.prev {
				left: 20px;
				background-position: 0px 0px;
				
				&:hover:not(.disabled) {
					background-position: 0px -@controller_height;
				}
			}
			
			&.next {
				right: 20px;
				background-position: -@controller_width 0px;
				
				&:hover:not(.disabled) {
					background-position: -@controller_width -@controller_height;
				}
			}
			
			&.disabled {
				opacity: 0.5;
				cursor: default;
			}
		}
	}
	
	&.vertical {
		.slider-content {
			.slide {
				top: 0%;
				left: 0%;
			
				/*==== mixins ====*/
				.animated {
					.transition(@duration:@duration, @type:@type);
				}
				
				.prev {
					top: -100%;
					z-index: 2;
					display: block;
				}
				
				.current {
					top: 0%;
					z-index: 3;
					display: block;
				}
				
				.next {
					top: 100%;
					z-index: 2;
					display: block;
				}
				
				/*=========*/
				
				&.current {
					.current;
				}
				
				&.prev {
					.prev;
				}
				
				&.next {
					.next;
				}
				
				&.current-to-prev {
					.prev;
					.animated;
				}
				
				&.current-to-next {
					.next;
					.animated;
				}
				
				&.to-current {
					.current;
					.animated;
				}
			}
		}
		
		.slider-controller {
			left: 50%!important;
			top: auto;
			margin-top: auto;
			margin-left: -@controller_height / 2;
			width: @controller_height;
			height: @controller_width;
			background-image: url(../images/slider-arrows-vertical.png);
			
			&.prev {
				top: 20px!important;
				background-position: 0px 0px;
				
				&:hover:not(.disabled) {
					background-position: -@controller_height 0px;
				}
			}
			
			&.next {
				bottom: 20px!important;
				background-position: 0px -@controller_width;
				
				&:hover:not(.disabled) {
					background-position: -@controller_height -@controller_width;
				}
			}
		}
	}
}

.color-changer {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
	pointer-events: none;
	
	div {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;		
		/*-webkit-transition: background 0.5s linear;
		-moz-transition: background 0.5s linear;
		-o-transition: background 0.5s linear;
		transition: background 0.5s linear;*/
	}
	.z1 {
		z-index: 0;
	}
	.z0 {
		z-index: -1;
	}
}