hoverzoom_150.scss

$experimental-support-for-opera: false;
$experimental-support-for-microsoft: false;
$experimental-support-for-khtml: false;
@import "compass";

@mixin animation($property){
	animation: $property;
	-moz-animation: $property;
	-webkit-animation: $property;
}

@mixin user-select($property){
	user-select: $property;
	-moz-user-select: $property;
	-webkit-user-select: $property;
}

$shadow: 0 4px 16px rgba(0,0,0,0.2);
$main: #dd4839;

#hoverzoom{
	position: fixed;
	box-shadow: $shadow;
	z-index: 10002;
	display: none;
	background: rgba(255,255,255,0.5);
	img{
		display: block;
		margin: 5px;
	}
	small{
		display: block;
		text-align: center;
		line-height: 1;
		margin: 0 5px 5px;
	}
}
#hz_loading{
	width: 20px;
	height: 20px;
	box-shadow: 0 -2px 1px 1px $main;
	position: absolute;
	pointer-events: none;
	z-index: 10000;
	display: none;
	@include border-radius(50%);
	@include animation(loading infinite 0.8s linear);
}
#hoverzoom_db{
	position: fixed;
	top: 45%;
	right: -40px;
	background: #f5f5f5;
	border: 1px solid #d2d2d2;
	border-right: none;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	width: 37px;
	height: 37px;
	@include border-radius(2px 0 0 2px);
	@include transition(0.3s);
	&:hover{
		div{
			background: #666;
		}
	}
	&.enable{
		right: 0;
	}
	div{
		margin: 6px;
		width: 25px;
		height: 25px;
		background: #aaa;
		@include border-radius(50%);
		@include transition(0.3s);
		&:before, &:after{
			position: absolute;
			content: '';
		}
		&:before{
			width: 6px;
			height: 8px;
			background: #f5f5f5;
			top: 12px;
			left: 15px;
		}
		&:after{
			border-style: solid;
			border-width: 7px 8px;
			border-color: #f5f5f5 transparent transparent;
			top: 19px;
			left: 10px;
		}
	}
}
#hoverzoom_sc{
	position: absolute;
	z-index: 10005;
	box-shadow: $shadow;
	display: none;
	a, span{
		outline: none;
		cursor: pointer;
		color: #3366CC;
	}
	a{
		border-right: 1px solid #eee;
		padding-right: 5px;
	}
	span{
		border-left: 1px solid #eee;
		padding-left: 5px;
		&:hover{
			text-decoration: underline;
		}
	}
}
div[id^='update-']{
	&:hover{
		.hz_dlButton{
			background-color: #fff;
			border-color: #ddd;
			@include background(linear-gradient(center bottom, rgba(0,0,0,0.05), rgba(0,0,0,0) 20px));
			@include transition(border 0.218s);
		}
	}
}
.hz_dlButton{
	border: 1px solid #fff;
	cursor: pointer;
	float: left;
	height: 22px;
	margin-left: 7px;
	margin-top: 7px;
	outline: none;
	@include border-radius(2px);
	&:hover{
		border-color: #bbb !important;
	}
	&:active{
		background-color: #eee;
		@include background(linear-gradient(center top, rgba(0,0,0,0.1), rgba(0,0,0,0) 20px) !important);
	}
	span{
		background: inline-image("download.png") center no-repeat;
		width: 32px;
		height: 22px;
		@include inline-block;
	}
	small{
		color: #999;
		display: block;
		float: right;
		line-height: 22px;
		padding-right: 10px;
	}
}
.hz_albumDownload{
	span{
		background-image: inline-image("picasa.png");
	}
}
.hz_tubeStacks{
	span{
		background-image: inline-image("youtube.png");
	}
}
.hz_maxPicResize{
	span{
		background-image: inline-image("resize.png");
	}
}
.hz_in-albumDownload{
	margin-left: 16px;
	margin-right: 2px;
	@include inline-block;
}
.hz_button{
	position: relative;
	cursor: pointer;
	font-size: 11px;
	font-weight: bold;
	height: 27px;
	line-height: 27px;
	min-width: 54px;
	outline: none;
	padding: 0 8px;
	text-align: center;
	text-decoration: none !important;
	@include border-radius(2px);
	@include user-select(none);
	&.green{
		background-color: #3D9400;
		border: 1px solid #29691D;
		color: #fff;
		text-shadow: 0 1px rgba(0,0,0,0.1);
		@include background(linear-gradient(left top, #3d9400, #398a00));
		&:hover{
			background-color: #368200;
			border: 1px solid #2D6200;
			text-shadow: 0 1px rgba(0,0,0,0.3);
			@include background(linear-gradient(left top, #3d9400, #368200));
		}
		&:focus, &:active{
			box-shadow: 0 0 0 1px #fff inset;
		}
	}
	&.blue{
		background-color: #4D90FE;
		border: 1px solid #3079ed;
		color: #fff;
		@include background(linear-gradient(left top, #4d90fe, #4787ed));
		&:hover{
			background-color: #357AE8;
			border: 1px solid #2F5BB7;
			@include background(linear-gradient(left top, #4d90fe, #357ae8));
		}
		&:focus, &:active{
			box-shadow: 0 0 0 1px #fff inset;
		}
	}
	&.white{
		background-color: #F5F5F5;
		border: 1px solid rgba(0,0,0,0.1);
		color: #444;
		@include background(linear-gradient(left top, #f5f5f5, #f1f1f1));
		&:hover{
			background-color: #F8F8F8;
			border: 1px solid #c6c6c6;
			color: #333;
			@include background(linear-gradient(left top, #f8f8f8, #f1f1f1));
		}
		&:focus, &:active{
			box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
		}
	}
	&.orange{
		background-color: #D14836;
		color: #fff;
		text-shadow: 0 1px rgba(0,0,0,0.1);
		border: 1px solid transparent;
		@include background(linear-gradient(left top, #dd4b39, #d14836));
		&:hover{
			background-color: #C53727;
			border: 1px solid #B0281A;
			box-shadow: 0 1px 1px rgba(0,0,0,0.2);
			@include background(linear-gradient(left top, #dd4b39, #c53727));
		}
		&:focus, &:active{
			box-shadow: 0 0 0 1px #fff inset;
		}
	}
}
#hoverzoom_fs{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10010;
	display: none;
	background: rgba(0,0,0,0.8);
	color: #ccc;
	text-shadow: 1px 1px 2px #000;
	overflow: auto;
	&.zoom{
		.ctrl{
			.right{
				.zoom{
					display: inline-block;
				}
			}
		}
	}
	&.load{
		.loading{
			opacity: 0.8;
		}
	}
	&.multi{
		.ctrl{
			.center{
				display: block;
			}
		}
	}
	&.actual{
		.ctrl{
			.right{
				.zoom{
					ul{
						li{
							&:last-of-type{
								display: block;
							}
						}
					}
				}
			}
		}
	}
	.back{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.main{
		position: absolute;
		img{
			opacity: 0;
			box-shadow: $shadow;
			max-width: 0;
			max-height: 0;
			display: block;
		}
	}
	.ctrl{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100px;
		margin-top: -50px;
		opacity: 0;
		@include transition(opacity 0.5s, margin 0.5s);
		@include background(linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%));
		&:hover{
			margin-top: 0;
			opacity: 1;
		}
		div{
			@include transition(0.3s);
			&:before, &:after{
				content: '';
				position: absolute;
			}
		}
		.close{
			position: absolute;
			left: 23px;
			opacity: 0.3;
			height: 50px;
			cursor: pointer;
			&:hover{
				opacity: 1;
			}
			&:before, &:after{
				background: #fff;
				height: 32px;
				bottom: 10px;
				width: 5px;
			}
			&:before{
				@include transform(rotate(-45deg));
			}
			&:after{
				@include transform(rotate(45deg));
			}
		}
		.center{
			position: absolute;
			left: 50%;
			top: 15px;
			width: 200px;
			margin-left: -100px;
			text-align: center;
			display: none;
			.prev, .next{
				position: absolute;
				top: 5px;
				cursor: pointer;
				opacity: 0.3;
				&:hover{
					opacity: 1;
				}
				&:before{
					top: 50%;
					border-top: 5px solid #fff;
					border-left: 5px solid #fff;
					width: 10px;
					height: 10px;
				}
			}
			.prev{
				left: 0;
				&:before{
					left: 0;
					@include transform(rotate(-45deg));
				}
			}
			.next{
				right: 0;
				&:before{
					right: 0;
					@include transform(rotate(135deg));
				}
			}
			span{
				font-size: 20px;
			}
		}
		.right{
			float: right;
			margin: 15px 25px;
			position: relative;
			a{
				color: #ccc;
				margin-left: 20px;
				@include transition(0.3s);
				&:hover{
					color: #fff;
					text-decoration: none;
				}
			}
			small{
				font-size: 13px;
			}
			.zoom{
				margin-left: 20px;
				padding-right: 15px;
				display: none;
				position: relative;
				cursor: pointer;
				&:after{
					border-style: solid;
					border-color: #ccc transparent transparent;
					border-width: 5px;
					top: 6px;
					right: 0;
				}
				&:hover{
					color: #fff;
					border-top-color: #fff;
					ul{
						display: block;
					}
				}
				ul{
					position: absolute;
					top: 100%;
					right: 0;
					list-style: none;
					color: #ccc;
					margin: 0;
					padding: 5px 0 0;
					white-space: nowrap;
					font-size: 12px;
					z-index: 10020;
					display: none;
					li{
						padding: 5px 10px;
						background: rgba(0,0,0,0.8);
						&:hover{
							background: #000;
							color: #fff;
						}
						&:last-of-type{
							display: none;
						}
					}
				}
			}
		}
	}
	.loading{
		background: #000;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		overflow: hidden;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -25px;
		margin-left: -25px;
		opacity: 0;
		@include transition(0.3s);
		@include animation(loading 2s infinite linear);
		&:before, &:after{
			position: absolute;
			content: '';
		}
		&:before{
			border: 5px solid #fff;
			border-radius: 50%;
			height: 24px;
			width: 24px;
			top: 8px;
			left: 8px;
		}
		&:after{
			background: #000;
			content: '';
			height: 12px;
			width: 36px;
			top: 30px;
			left: 7px;
		}
	}
}
.hz_settings{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 10000;
	&.loading{
		.cycle{
			opacity: 1 !important;
			@include animation(loading infinite 0.8s linear);
		}
	}
	.back{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.75);
		z-index: 10000;
	}
	.wrap{
		display: inline-block;
		overflow-x: hidden;
		overflow-y: auto;
		margin: 10px 0;
		img{
			margin-right: 10px;
			margin-top: 5px;
		}
	}
	.main{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 550px;
		height: 296px;
		margin-top: -250px;
		margin-left: -285px;
		background: #fff;
		border: 1px solid #acacac;
		border-bottom: 1px solid #999;
		box-shadow: $shadow;
		z-index: 10001;
		border-radius: 2px;
		padding: 20px;
		overflow: hidden;
		h3{
			font-size: 20px;
			font-weight: normal;
			margin: 0;
		}
		small{
			color: #666;
		}
		.close{
			background: url(//ssl.gstatic.com/s2/oz/images/dialogx.png) no-repeat;
			cursor: pointer;
			height: 15px;
			width: 15px;
			position: absolute;
			right: 16px;
			top: 16px;
		}
		.menu{
			background: #f5f5f5;
			border-bottom: 1px solid #ebebeb;
			border-top: 1px solid #ebebeb;
			padding: 0 5px 0 10px;
			margin: 15px -20px 0;
			li{
				display: inline-block;
				padding: 7px 12px;
				color: #666;
				cursor: pointer;
				&.current{
					font-weight: bold;
					color: $main;
				}
				&:hover{
					color: $main;
				}
				&:last-of-type{
					display: none;
				}
			}
		}
		.tabs{
			border-top: 1px solid #ddd;
			position: absolute;
			left: 0;
			width: 590 * 5px;
			line-height: 2;
			div{
				float: left;
				width: 550px;
				padding: 15px 20px 0;
			}
			ul{
				padding-left: 15px;
				margin: 0;
			}
		}
		input[type='text']{
			border: 1px solid #d9d9d9;
			padding: 2px 5px;
			margin-right: 5px;
			width: 50px;
		}
		input[type='checkbox']{
			margin: 0 5px 0 0;
		}
		label{
			margin-right: 5px;
			display: inline-block;
			min-width: 120px;
		}
		input + label, select + label{
			min-width: 0;
		}
		textarea{
			border: 1px solid #ccc;
			font: 12px 'Consolas', Monaco, Courier New, Courier, monospace !important;
			height: 251px;
			width: 540px;
			padding: 10px 0 0 10px;
			margin-top: 10px;
			resize: none;
		}
		.functions{
			position: absolute;
			&.top{
				top: 20px;
				right: 50px;
				.hz_button{
					float: left;
					margin-right: 16px;
					&:last-child{
						margin-right: 0;
					}
				}
			}
			&.bottom{
				bottom: 20px;
				left: 20px;
				width: 550px;
				.hz_button{
					float: right;
					margin-left: 16px;
					&.update{
						display: none;
					}
				}
				.meta{
					position: absolute;
					bottom: 5px;
					padding-left: 15px;
					color: #666;
					&:empty{
						display: none;
					}
					&:before{
						content: '';
						background: #666;
						width: 5px;
						height: 5px;
						position: absolute;
						top: 5px;
						left: 0;
						@include border-radius(50%);
						@include box-shadow(0 0 3px #666);
					}
					&.green:before{
						background: #3D9400;
						@include box-shadow(0 0 3px #3D9400);
					}
					&.red:before{
						background: red;
						@include box-shadow(0 0 3px red);
					}
					&.orange:before{
						background: orange;
						@include box-shadow(0 0 3px orange);
					}
				}
			}
			.cycle{
				float: left;
				border: 3px solid #ccc;
				border-radius: 50%;
				height: 16px;
				width: 16px;
				margin-right: 10px;
				position: relative;
				top: 4px;
				opacity: 0;
				@include transition(opacity 0.3s);
				&:before{
					content: '';
					position: absolute;
					bottom: -3px;
					right: -3px;
					width: 12px;
					height: 12px;
					background: #fff;
				}
			}
		}
	}
}
#hz_copyarea{
	.back{
		z-index: 10001;
	}
}
#hz_opts{
	border-top: 1px solid #e5e5e5;
	color: #333;
	margin-top: 6px;
	padding-top: 6px;
	strong, li{
		display: block;
		padding: 6px 24px;
	}
	ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li{
		cursor: pointer;
		&:hover{
			background: #eee;
		}
	}
}
#disable_hz{
	position: relative;
	&:after{
		content: '';
		background: #3d9400;
		position: absolute;
		top: 10px;
		left: 10px;
		width: 5px;
		height: 5px;
		box-shadow: 0 0 3px #3d9400;
		@include border-radius(50%);
	}
	&.off{
		&:after{
			box-shadow: 0 0 3px #666;
			background: #666;
		}
	}
}
.hz_img-in-comm, .hz_img-in-post{
	display: block;
	img{
		max-width: 100%;
		height: auto;
		display: block;
	}
}
.hz_img-in-post{
	img{
		margin: 5px 0;
	}
	+br{
		display: none;
	}
}
.hz_yt-in-post{
	margin: 3px 0;
}
.hz_closeYT{
	background: url(//ssl.gstatic.com/s2/oz/images/stars/x_off.png) no-repeat;
	cursor: pointer;
	float: right;
	margin-top: -22px;
	width: 10px;
	height: 10px;
	&:hover{
		background-image: url(//ssl.gstatic.com/s2/oz/images/stars/x_hover.png);
	}
}
.hz_stacksDetail{
	position: absolute;
	top: 25px;
	left: 0;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	padding: 16px;
	position: absolute;
	z-index: 980;
	display: none;
	min-width: 150px;
	@include border-radius(2px);
	strong{
		display: block;
		margin-bottom: 8px;
	}
	a{
		&:hover{
			text-decoration: none;
			border-bottom: 1px solid #36c;
		}
	}
	small{
		color: #999;
		position: absolute;
		right: 16px;
	}
	.notify{
		color: #999;
		margin-right: -16px;
		padding: 10px 0 5px;
		text-align: center;
	}
	&.loaded{
		.notify{
			display: none;
		}
	}
	&:before{
		position: absolute;
		top: -9px;
		left: 20px;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-bottom: 9px dashed #ccc;
		content: '';
	}
	&:after{
		position: absolute;
		top: -7px;
		left: 20px;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-bottom: 9px dashed #fff;
		content: ''; 
	}
	.hz_stackItem{
		display: inline-block;
		margin-top: 2px;
		margin-right: 4px;
		position: relative;
		&:nth-of-type(6n){
			margin-right: 0;
		}
		input{
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	nav{
		border-top: 1px solid #ccc;
		height: 18px;
		margin-top: 16px;
		padding-top: 16px;
		a{
			&:hover{
				border: none;
				text-decoration: underline;
			}
			&:first-child{
				display: none;
				float: left;
			}
			&:last-child{
				float: right;
				margin-left: 20px;
			}
		}
	}
}
.hz_closeButton{
	background: url(//ssl.gstatic.com/ui/v1/icons/common/x_8px.png) no-repeat;
	cursor: pointer;
	height: 21px;
	width: 21px;
	position: absolute;
	right: 2px;
	top: 2px;
	opacity: 0.4;
	border: 1px solid transparent;
	&:active, &:focus{
		opacity: 1;
		border: 1px solid rgb(113,167,255);
	}
}
.hz_maxPic_container{
	max-width: 100% !important;
	max-height: none !important;
	width: auto !important;
	height: auto !important;
	background-image: none !important;
	float: none !important;
	img{
		position: static !important;
		max-width: 100%;
		border-bottom: 1px solid #fff;
	}
	.ot-anchor{
		display: block;
		margin-bottom: 10px;
	}
}
@keyframes loading{
	0% {transform: rotate(0deg)}
	100% {transform: rotate(360deg)}
}
@-webkit-keyframes loading{
	0% {-webkit-transform: rotate(0deg)}
	100% {-webkit-transform: rotate(360deg)}
}
@-moz-keyframes loading{
	0% {-moz-transform: rotate(0deg)}
	100% {-moz-transform: rotate(360deg)}
}