homebrewery/client/homebrew/navbar/navbar.less

@import "naturalcrit/styles/colors.less";
@navbarHeight : 28px;
@keyframes pinkColoring {
  0%   {color : pink;}
  50%  {color : pink;}
  75%  {color : red;}
  100% {color : pink;}
}
.homebrew nav {
	.homebrewLogo {
		.animate(color);
		font-family : CodeBold;
		font-size   : 12px;
		color       : white;
		div {
			margin-top    : 2px;
			margin-bottom : -2px;
		}
		&:hover {
			color : @blue;
		}
	}
	.editTitle.navItem {
		padding : 2px 12px;
		input {
			font-family      : "Open Sans", sans-serif;
			font-size        : 12px;
			font-weight      : 800;
			width            : 250px;
			margin           : 0;
			padding          : 2px;
			text-align       : center;
			color            : white;
			border           : 1px solid @blue;
			outline          : none;
			background-color : transparent;
		}
		.charCount {
			display        : inline-block;
			margin-left    : 8px;
			text-align     : right;
			vertical-align : bottom;
			color          : #666;
			&.max {
				color : @red;
			}
		}
	}
	.brewTitle.navItem {
		font-size        : 12px;
		font-weight      : 800;
		height           : 100%;
		text-align       : center;
		text-transform   : initial;
		color            : white;
		background-color : transparent;
		flex-grow        : 1;
	}
	.save-menu {
		.dropdown {
			z-index : 1000;
		}
		.navItem i.fa-power-off {
			color : red;
			&.active {
				color  : rgb(0, 182, 52);
				filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
			}
		}
	}
	.patreon.navItem {
		border-right : 1px solid #666;
		border-left  : 1px solid #666;
		&:hover i {
			color : red;
		}
		i {
			.animate(color);
			animation-name     : pinkColoring;
			animation-duration : 2s;
			color              : pink;
		}
	}
	.recent.navItem {
		position : relative;
		.dropdown {
			position        : absolute;
			z-index         : 10000;
			top             : 28px;
			left            : 0;
			overflow        : hidden auto;
			width           : 100%;
			max-height      : ~"calc(100vh - 28px)";
			scrollbar-color : #666 #333;
			scrollbar-width : thin;
			h4 {
				font-size        : 0.8em;
				display          : block;
				box-sizing       : border-box;
				padding          : 5px 0;
				text-align       : center;
				color            : #BBB;
				border-top       : 1px solid #888;
				background-color : #333;
				&:nth-of-type(1) {
					background-color : darken(@teal, 20%);
				}
				&:nth-of-type(2) {
					background-color : darken(@purple, 30%);
				}
			}
			.item {
				#backgroundColorsHover;
				.animate(background-color);
				position         : relative;
				display          : block;
				overflow         : clip;
				box-sizing       : border-box;
				padding          : 8px 5px 13px;
				text-decoration  : none;
				color            : white;
				border-top       : 1px solid #888;
				background-color : #333;
				.clear {
					position         : absolute;
					top              : 50%;
					right            : 0;
					display          : none;
					width            : 20px;
					height           : 100%;
					transform        : translateY(-50%);
					opacity          : 70%;
					border-radius    : 3px;
					background-color : #333;
					&:hover {
						opacity : 100%;
					}
					i {
						font-size  : 10px;
						width      : 100%;
						height     : 100%;
						margin     : 0;
						text-align : center;
					}
				}
				&:hover {
					background-color : @blue;
					.clear {
						display       : grid;
						place-content : center;
					}
				}
				.title {
					display       : inline-block;
					overflow      : hidden;
					width         : 100%;
					white-space   : nowrap;
					text-overflow : ellipsis;
				}
				.time {
					font-size : 0.7em;
					position  : absolute;
					right     : 2px;
					bottom    : 2px;
					color     : #888;
				}
			}
		}
	}
	.metadata.navItem {
		position    : relative;
		display     : flex;
		align-items : center;
		height      : 100%;
		padding     : 0;
		flex-grow   : 1;
		i {
			margin-right : 10px;
		}
		.window {
			position         : absolute;
			z-index          : -1;
			bottom           : 0;
			left             : 50%;
			display          : flex;
			justify-content  : flex-start;
			width            : 440px;
			max-height       : ~"calc(100vh - 28px)";
			margin           : 0 auto;
			padding          : 0 10px 5px;
			transition       : transform 0.4s, opacity 0.4s;
			border           : 3px solid #444;
			border-top       : unset;
			border-radius    : 0 0 5px 5px;
			background-color : #333;
			box-shadow       : inset 0 7px 9px -7px #111;
			flex-flow        : row wrap;
			align-content    : baseline;
			&.active {
				transform : translateX(-50%) translateY(100%);
				opacity   : 1;
			}
			&.inactive {
				transform : translateX(-50%) translateY(0%);
				opacity   : 0;
			}
			.row {
				display   : flex;
				width     : 100%;
				flex-flow : row wrap;
				h4 {
					display    : block;
					box-sizing : border-box;
					min-width  : 76px;
					padding    : 5px 0;
					text-align : center;
					color      : #BBB;
					flex-basis : 20%;
					flex-grow  : 1;
				}
				p {
					font-family    : "Open Sans", sans-serif;
					font-size      : 10px;
					font-weight    : normal;
					padding        : 5px 0;
					text-transform : initial;
					flex-basis     : 80%;
					flex-grow      : 1;
					.tag {
						display          : inline-block;
						margin           : 2px 2px;
						padding          : 2px;
						border           : 2px solid grey;
						border-radius    : 5px;
						background-color : #444;
					}
					a.userPageLink {
						text-decoration : none;
						color           : white;
						&:hover {
							text-decoration : underline;
						}
					}
				}
				&:nth-of-type(even) {
					background-color : #555;
				}
			}
		}
	}
	.warning.navItem {
		position         : relative;
		color            : white;
		background-color : @orange;
		&:hover > .dropdown {
			visibility : visible;
		}
		.dropdown {
			position         : absolute;
			z-index          : 10000;
			top              : 28px;
			left             : 0;
			display          : block;
			visibility       : hidden;
			box-sizing       : border-box;
			width            : 100%;
			padding          : 13px 5px;
			text-align       : center;
			background-color : #333;
		}
	}
	.account.navItem {
		min-width : 100px;
	}
	.account.username.navItem {
		text-transform : none;
	}
}