snappymail/dev/Styles/SystemDropDown.less

#top-system-dropdown-id {
	overflow: hidden;
	padding-left: 10px;
	padding-right: 10px;
}

.rl-left-panel-disabled #more-list-dropdown-id + .dropdown-menu {
    position: fixed;
    top: 40px;
}

.b-system-drop-down {

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

	.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 {
		display: inline-block;
		font-size: 30px;
		height: 30px;
		margin-right: 10px;
		width: 1em;

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

		.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;

		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;
	}
}

/* mobile */
@media screen and (max-width: 767px) {
	.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 {

	margin-top: 5px;
	width: 30px;
	height: 20px;
	position: relative;

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

	.first {
		left: calc(1em / 2 - 10px);
	}
	.second {
		left: calc(1em / 2 - 2px);
	}
	.third {
		left: calc(1em / 2 + 6px);
	}

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