Robware/less/gallery.less

@import "colours.less";

#tabs{
	background:@primary;
	margin:-20px;
	margin-bottom:10px;
	position:fixed;
	width:100%;
	box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
	overflow-x:auto;
	white-space:nowrap;

	a{
		display:inline-block;
		color:@primary-100;
		padding:15px 30px;
		text-decoration:none;
		text-transform: uppercase;

		&.active{
			color:#fff;
			border-bottom:3px solid #fff;
		}
	}
}

.album{
	width:33.33%;
	/*float:left;*/
	display:inline-block;
	vertical-align:top;

	div{
		margin:5px;
		padding:5px;
		background:@control2;
	}

	span{
		display:block;
		text-align:center;
		color:@Grey-800;
		overflow:hidden;
	}
}

.imageSelector{
	.image{
		width:25%;
		display:inline-block;
		vertical-align:top;
		text-align:center;

		&.selected {
			>div{
				background:@primary-300;

				&:hover{
					background:@primary-400;
				}
			}
		}

		input[type=checkbox]{
			display:none;
		}

		>div{
			margin:5px;
			padding:5px;
			background:@control2;

			&:hover{
				background:@Grey-400;
			}
		}
	}
}

#album-viewer{
	height:100%;
	display:flex;
	flex-direction: column;

	#album-description{
		flex: 0 0 auto;

		.expander{
			padding:5px;
			background:@control2;

			&:after{
				float:right;
				content: "+";
			}

			&.expanded:after{
				content: '-';
			}
		}

		.text{
			background:@control;
			padding:5px;

			&.ng-hide{
				//opacity: 0;
				line-height: 0;
			}
		}
	}

	#album-thumbnails{
		flex: 0 0 auto;
		overflow-x:auto;
		overflow-y:hidden;
		white-space:nowrap;
		text-align:center;

		img{
			width:100px;
			border:3px solid transparent;

			&.selected{
				border:3px solid @primary-300;
			}
		}
	}

	#album-images{
		flex: 1 1 auto;
		overflow:auto;
		position:relative;

		.image{
			position:absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			overflow:hidden;
			text-align:center;

			img{
				max-height: 100%;

			}
		}
	}
}

#galleryUpload{

	.upload{
		font-size:2em;
		padding:5px;
	}

	.dragDrop{
		min-height:200px;
		border-color: @background;
		background-position: center;
		background-size: 100px;
		margin-bottom:5px;

		&.dragOver{
			border: 3px dashed @Grey-700;
			background-image: url("/images/upload.svg");
			background-repeat: no-repeat;
		}
	}

	.newImage{
		display:flex;
		margin-bottom:5px;

		.information{
			flex:1;
		}

		.preview{
			flex:1;
			position: relative;

			.imageContainer{
				position:absolute;
				top:0;
				bottom:0;
				right:0;
				text-align:right;

				img{
					height:100%;
				}
			}
		}
	}
}