isleward/src/client/ui/templates/announcements/styles.less

@import "../../../css/colors.less";

.uiAnnouncements {
	pointer-events: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	top: calc(50% + 92px);

	.list {
		position: relative;
		width: 100%;

		.message {
			position: absolute;
			height: 36px;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			color: @white;
			font-size: 18px;
			background-color: fade(@blackD, 15%);
			padding: 8px;
			text-shadow: 2px 2px 0 @blackD, -2px -2px 0 @blackD, 2px -2px 0 @blackD, -2px  2px 0 @blackD, 2px  2px 0 @blackD;
			animation: 0.5s ease-in-out infinite bounce;

			&.success {
				color: @green;
			}

			&.failure {
				color: @red;
			}

		}

	}

}

@keyframes bounce {
	0% {
		top: 0px;
	}

	50% {
		top: 4px;
	}

	100% {
		top: 0px;
	}

}