snappymail/dev/Styles/User/SystemDropDown.less

#top-system-dropdown-id {
	padding: 0 6px;
}

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

#V-SystemDropDown {

	position: absolute;
	top: 0;
	right: 0;
	padding: 10px @rlLowMargin;
	z-index: 103;

	.email-title {
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.audioPlace {
		cursor: pointer;
		display: inline-block;
		font-size: 30px;
		height: 1em;
		margin-right: 10px;
		width: 1em;

		.stopIcon {
			color: orange;
			display: none;
		}

		&:hover {

			.playIcon {
				display: none;
			}

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

	.accountPlace {
		border-right: 1px solid var(--btn-border-clr, rgba(0, 0, 0, 0.2));
		display: inline-block;
		font-weight: 600;
		line-height: 1.3;
		margin: 0 6px -4px 0;
		max-width: 25vw;
/*		max-width: calc(100vw - 300px);*/
		overflow: hidden;
		padding-right: 6px;
		text-overflow: ellipsis;
	}

	a[data-unread]::after {
		content: attr(data-unread);
		background-color: var(--unread-count-bg-color, #999);
		border-radius: 1em;
		color: var(--unread-count-color, #fff);
		font-size: 11px;
		line-height: 1.5em;
		min-width: 1.7em;
		padding: 1px 4px;
		text-align: center;
		text-shadow: 0 -1px 0 rgba(0,0,0,.25);
		position: absolute;
		right: 3px;
	}

}

@keyframes equaliserBar {
  0%   { top: 30%; }
  50%  { top: 100%; }
  100% { top: 30%; }
}

.playIcon {

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

	*, &::before, &::after  {
		animation: equaliserBar 1s infinite;
		background: orange;
		bottom:0;
		left: calc(1em / 2 - 2px);
		position: absolute;
		width: 5px;
		content: '';
	}

	&::before {
		left: calc(1em / 2 - 9px);
		animation-delay: -0.33s;
	}
	&::after {
		left: calc(1em / 2 + 5px);
		animation-delay: -0.66s;
	}
}