lychee/src/styles/_content.scss

/**
 * @copyright   2015 by Tobias Reich
 */

#content {

	display: flex;
	flex-wrap: wrap;
	padding: 50px 0 33px;
	width: 100%;
	min-height: calc(100% - 83px);
	-webkit-overflow-scrolling: touch;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		border-top: 1px solid white(.02);
	}

	&.sidebar { width: calc(100% - 300px); }

	/* Animations ------------------------------------------------------------------- */
	&.contentZoomIn .album,
	&.contentZoomIn .photo {
		animation-name: zoomIn;
		animation-duration: .2s;
		animation-fill-mode: forwards;
		animation-timing-function: $timing;
	}

	&.contentZoomIn .divider {
		animation-name: fadeIn;
		animation-duration: .2s;
		animation-fill-mode: forwards;
		animation-timing-function: $timing;
	}

	&.contentZoomOut .album,
	&.contentZoomOut .photo {
		animation-name: zoomOut;
		animation-duration: .2s;
		animation-fill-mode: forwards;
		animation-timing-function: $timing;
	}

	&.contentZoomOut .divider {
		animation-name: fadeOut;
		animation-duration: .2s;
		animation-fill-mode: forwards;
		animation-timing-function: $timing;
	}

	/* Albums and Photos ------------------------------------------------*/
	.album,
	.photo {
		position: relative;
		width: 202px;
		height: 202px;
		margin: 30px 0 0 30px;
		cursor: default;

		img {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: #222;
			box-shadow: 0 2px 5px black(.5);
			border: 1px solid white(.5);
			transition: opacity .3s ease-out, transform .3s ease-out, border-color .3s ease-out;
			will-change: transform;
		}

		&:hover img,
		&.active img {
			border-color: $colorBlue;
		}

		&:active img {
			transition: none;
			border-color: darken($colorBlue, 15%);
		}
	}

	/* Album ------------------------------------------------*/
	.album  {
		img:first-child,
		img:nth-child(2) {
			transform: rotate(0) translateY(0) translateX(0);
			opacity: 0;
		}

		&:hover img:nth-child(1),
		&:hover img:nth-child(2) { opacity: 1; }

		&:hover img:nth-child(1) { transform: rotate(-2deg) translateY(10px) translateX(-12px); }

		&:hover img:nth-child(2) { transform: rotate(5deg) translateY(-8px) translateX(12px); }
	}

	/* Album/Photo Overlay ------------------------------------------------*/
	.album .overlay,
	.photo .overlay {
		position: absolute;
		margin: 0 1px;
		width: 200px;
		background: black(.6);
		background: linear-gradient(to bottom, black(0), black(.6));
		bottom: 1px;
	}

	// No overlay for empty albums
	.album img[data-overlay='false'] + .overlay {
		background: none;
	}

	.photo .overlay { opacity: 0; }

	.photo:hover .overlay,
	.photo.active .overlay {
		opacity: 1;
	}

	.album .overlay h1,
	.photo .overlay h1 {
		min-height: 19px;
		width: 180px;
		margin: 12px 0 5px 15px;
		color: #fff;
		text-shadow: 0 1px 3px black(.4);
		font-size: 16px;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.album .overlay a,
	.photo .overlay a {
		display: block;
		margin: 0 0 12px 15px;
		font-size: 11px;
		color: #ccc;
		text-shadow: 0 1px 3px black(.4);
	}

	.photo .overlay a .iconic {
		fill: #ccc;
		margin: 0 5px 0 0;
		width: 8px;
		height: 8px;
		filter: drop-shadow(0 1px 3px black(.4));
	}

	.album img[data-overlay='false'] + .overlay h1,
	.album img[data-overlay='false'] + .overlay a  { text-shadow: none; }

	/* Badges ------------------------------------------------*/
	.album .badges,
	.photo .badges {
		position: relative;
		margin: -1px 0 0 6px;
	}

	.album .badge,
	.photo .badge {
		display: none;
		margin: 0 0 0 6px;
		padding: 12px 8px 6px;
		width: 18px;
		background: $colorRed;
		box-shadow: 0 0 2px black(.6);
		border-radius: 0 0 5px 5px;
		border: 1px solid #fff;
		border-top: none;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 0 black(.4);
		opacity: .9;

		&--visible { display: inline-block; }

		.iconic {
			fill: #fff;
			width: 16px;
			height: 16px;
			filter: drop-shadow($shadowLight);
		}
	}

	/* Divider ------------------------------------------------*/
	.divider {
		margin: 50px 0 0;
		padding: 10px 0 0;
		width: 100%;
		opacity: 0;
		border-top: 1px solid white(.02);
		box-shadow: $shadow;

		&:first-child {
			margin-top: 10px;
			border-top: 0;
			box-shadow: none;
		}

		h1 {
			margin: 0 0 0 30px;
			color: white(.6);
			font-size: 14px;
			font-weight: bold;
		}
	}

}

/* No Content ------------------------------------------------*/
.no_content {
	position: absolute;
	top: 50%;
	left: 50%;
	padding-top: 20px;
	color: white(.35);
	text-shadow: 0 -1px 0 black(.4);
	text-align: center;
	transform: translateX(-50%) translateY(-50%);

	.iconic {
		fill: white(.3);
		margin: 0 0 10px;
		width: 50px;
		height: 50px;
		filter: drop-shadow(0 -1px 0 black(.4));
	}

	p {
		font-size: 16px;
		font-weight: bold;
	}
}