homebrewery/client/homebrew/statusbar/statusbar.less

.statusbar{
	position         : fixed;
	z-index          : 1000;
	height           : 25px;
	width            : 100%;
	background-color : black;
	font-size        : 24px;
	color            : white;
	line-height      : 1.0em;
	border-bottom    : 1px solid @grey;
	.logo{
		display        : inline-block;
		vertical-align : middle;
		margin-top     : -5px;
		margin-right   : 20px;
		svg{
			margin-top : -6px;
		}
	}
	.left{
		display        : inline-block;
		vertical-align : top;
	}
	.right{
		float : right;
	}
	.toolName{
		display         : block;
		vertical-align  : middle;
		font-family     : CodeBold;
		font-size       : 16px;
		color           : white;
		line-height     : 30px;
		text-decoration : none;
		small{
			font-family : CodeBold;
		}
	}
	.controls{
		font-size : 12px;
		>*{
			display     : inline-block;
			height      : 100%;
			padding     : 0px 10px;
			border-left : 1px solid @grey;
		}
		.savingStatus{
			width      : 56px;
			color      : @grey;
			text-align : center;
		}
		.newButton{
			.animate(background-color);
			color           : white;
			text-decoration : none;
			&:hover{
				background-color : fade(@green, 70%);
			}
		}
		.chromeField{
			background-color: @orange;
			color           : white;
			text-decoration : none;
			i{
				margin-right: 10px;
			}
		}
		.changelogButton{
			.animate(background-color);
			color           : white;
			text-decoration : none;
			&:hover{
				background-color : fade(@purple, 70%);
			}
		}
		.deleteButton{
			.animate(background-color);
			color           : white;
			text-decoration : none;
			cursor: pointer;
			&:hover{
				background-color : fade(@red, 70%);
			}
		}
		.shareField{
			.animate(background-color);
			cursor          : pointer;
			color           : white;
			text-decoration : none;
			&:hover{
				background-color : fade(@teal, 70%);
			}
			span{
				margin-right : 5px;
			}
			input{
				width     : 100px;
				font-size : 12px;
			}
		}
		.printField{
			.animate(background-color);
			cursor          : pointer;
			color           : white;
			text-decoration : none;
			&:hover{
				background-color : fade(@orange, 70%);
			}
			span{
				margin-right : 5px;
			}
			input{
				width     : 100px;
				font-size : 12px;
			}
		}
		.sourceField{
			.animate(background-color);
			cursor          : pointer;
			color           : white;
			text-decoration : none;
			&:hover{
				background-color : fade(@teal, 70%);
			}
			span{
				margin-right : 5px;
			}
			input{
				width     : 100px;
				font-size : 12px;
			}
		}
	}
}