lychee/src/styles/_header.scss

.header {

	position: fixed;
	height: 49px;
	width: 100%;
	background: linear-gradient(to bottom, #222222, #1a1a1a);
	border-bottom: 1px solid #0f0f0f;
	z-index: 1;
	transition: transform .3s ease-out;

	// Modes -------------------------------------------------------------- //
	&--hidden { transform: translateY(-60px); }

	&--loading { transform: translateY(2px); }

	&--error { transform: translateY(40px); }

	&--view {
		background: none;
		border-bottom: none;

		&.header--error { background-color: rgba(10, 10, 10, .99); }
	}

	// Toolbars -------------------------------------------------------------- //
	&__toolbar {
		display: none;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 0 10px;

		&--visible { display: flex; }
	}

	// Title -------------------------------------------------------------- //
	&__title {
		width: 100%;
		padding: 16px 0;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		cursor: default;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		.iconic {
			display: none;
			margin: 0 0 0 5px;
			width: 10px;
			height: 10px;
			fill: white(.5);
			transition: fill .2s ease-out;
		}

		&:hover .iconic {
			fill: white(1);
		}

		&:active .iconic {
			transition: none;
			fill: white(.8);
		}

		&--editable .iconic { display: inline-block; }
	}

	// Buttons -------------------------------------------------------------- //
	.button {
		flex-shrink: 0;
		padding: 16px 8px;
		height: 15px;

		.iconic {
			width: 15px;
			height: 15px;
			fill: white(.5);
			transition: fill .2s ease-out;
		}

		&:hover .iconic {
			fill: white(1);
		}

		&:active .iconic {
			transition: none;
			fill: white(.8);
		}

		&--star.active .iconic { fill: #f0ef77; }

		&--eye.active .iconic { fill: #ff9737; }

		&--share .iconic { height: 18px; }

		&--info.active .iconic { fill: $colorBlue; }
	}

	// Divider -------------------------------------------------------------- //
	&__divider {
		flex-shrink: 0;
		width: 14px;
	}

	// Search -------------------------------------------------------------- //
	&__search {
		flex-shrink: 0;
		width: 80px;
		margin: 0;
		padding: 5px 12px 6px 12px;
		background-color: #1d1d1d;
		color: #fff;
		border: 1px solid black(.9);
		box-shadow: 0 1px 0 white(.04);
		outline: none;
		border-radius: 50px;
		opacity: .6;
		transition: opacity .3s ease-out, box-shadow .3s ease-out, width .2s ease-out;

		&:focus {
			width: 140px;
			border-color: $colorBlue;
			box-shadow: 0 1px 0 white(0);
			opacity: 1;
		}

		&:focus ~ #clearSearch { opacity: 1; }

		&::-ms-clear { display: none; }
	}

	&__clear {
		position: absolute;
		top: 13px;
		right: 60px;
		padding: 0;
		color: white(.5);
		font-size: 20px;
		opacity: 0;
		transition: color .2s ease-out;
		cursor: default;

		&:hover { color: white(1); }
	}

	// Hosted with -------------------------------------------------------------- //
	&__hostedwith {
		flex-shrink: 0;
		padding: 5px 10px;
		margin: 11px 0;
		color: #888;
		font-size: 13px;
		border-radius: 100px;
		cursor: default;

		&:hover { background-color: black(.3); }
	}

}