snappymail/dev/Styles/SystemDropDown.less

.b-system-drop-down {

	.b-toolbar {
		position: absolute;
		top: 0;
		right: 0;
		height: 30px;
		padding: 10px @rlLowMargin;
		z-index: 103;
	}

	.e-facebook-name {
		display: inline-block;
		padding-top: 4px;
	}

	.btn.system-dropdown {
		padding-left: 10px;
		padding-right: 10px;
	}

	.button-fb-logout {
		margin: 5px;
	}

	.email-title {
		display: inline-block;
		max-width: 200px;
		text-align: left;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-right: 28px;
		vertical-align: middle;
	}

	.logoPlace {
		margin: -5px 10px 0 0;
		font-size: 25px;
		line-height: 30px;
		height: 40px;
	}

	.audioPlace {

		font-size: 25px;
		line-height: 30px;
		margin-right: 10px;
		width: 25px;

		.playIcon, .stopIcon {
			cursor: pointer;
			color: orange;
			text-shadow: 0 1px 0 #555;
			float: right;
		}

		.playIcon {
			margin-top: 5px;
		}

		.stopIcon {
			font-size: 30px;
			line-height: 30px;
			margin-right: 10px;
		}

		.stopIcon {
			display: none;
		}

		&:hover {

			.playIcon {
				display: none;
			}

			.stopIcon {
				display: inline-block;
			}
		}
	}

	.accountPlace {
		background-color: #000;
		background-color: rgba(0, 0, 0, 0.5);

		color: #fff;
		text-shadow: 0 1px 0 #000;

		display: inline-block;
		height: 29px;
		max-width: 250px;
		border-radius: 4px;
		font-size: 16px;
		line-height: 30px;
		padding: 1px 8px;
		overflow: hidden;
		text-overflow: ellipsis;
		border-radius: 4px;
		font-weight: bold;
		margin-right: 5px;

		white-space: nowrap;
	}

	.account-item {

		.icon-ok {
			display: none;
		}

		&.current {
			.icon-ok {
				display: inline-block;
			}
			.icon-user {
				display: none;
			}
		}
	}

	.counter {
		display: inline-block;
	}

	.g-ui-menu .e-link.account-item {
		padding-right: 5px;
	}
}

html.ssm-state-mobile .accountPlace {
	max-width: 150px !important;
}

@keyframes firstBar {
  0%   { height: 30%; }
  50%  { height: 100%; }
  100% { height: 30%; }
}

@keyframes secondBar {
  0%   { height: 90%; }
  50%  { height: 30%; }
  100% { height: 100%; }
}

@keyframes thirdBar {
  0%   { height: 20%; }
  40%  { height: 40%; }
  60%  { height: 80%; }
  100% { height: 40%; }
}

.equaliser {

	width: 20px;
	height: 20px;
	position: relative;

	.bar {
		float:left;
		width: 5px;
		height: 5px;
		background: orange;
		position: absolute;
		bottom:0;
	}


	.first {
		left: 0px;
		animation: none;
	}
	.second {
		left: 7px;
		animation: none;
	}
	.third {
		left: 14px;
		animation: none;
	}

	&.animated {
		.first {
			animation: firstBar 1s infinite;
		}
		.second {
			animation: secondBar 1s infinite;
		}
		.third {
			animation: thirdBar 1s infinite;
		}
	}
}