woodpecker/server/app/styles/modules/alert.less

.alert {
	line-height:23px;
	padding:20px;
	border:none;

	&:before {
		font-family: 'FontAwesome';
		font-size:22px;
		min-width:32px;
		margin-left:10px;
		margin-right:15px;
		display:inline-block;
	}

	a:visited,
	a:active,
	a {
		color: inherit;
	}
}

.alert-info {
	background:#f4f8fa;
	color: #5bc0de;
	border-left: 5px solid #5bc0de;

	&:before {
	  content: "\f05a";
	}
}

.alert[data-status="Success"] {
	background: #D9F3EA;
	border-left: 5px solid #40C598;
	color: #339E7A;

	&:before {
		content: "\f00c";
	}
}

.alert-danger,
.alert[data-status="Error"],
.alert[data-status="Failure"],
.alert[data-status="Killed"] {
	background: #fdf7f7;
	border-left: 5px solid #ed5564;
	color: #ed5564;

	&:before {
		content: "\f00d";
	}
}

.alert[data-status="Pending"],
.alert[data-status="Started"] {
	position:relative;
	margin-bottom:10px;
	padding-bottom:30px;
	background: #fef9e5;
	border-left: none;
	color: #CBB45B;

	&:before {
		x-display:none;
		content: "\f126";
	}

	&:after {
		-webkit-animation: progress 1s linear infinite;
			-moz-animation: progress 1s linear infinite;
			animation: progress 1s linear infinite;
		position:absolute;
		content:' ';
		height:10px;
		bottom:-1px;
		left:0px;
		right:0px;
		background: #fee172;
		background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
		background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
		background-repeat: repeat-x;
		background-size: 30px 30px;
	}
}

@-webkit-keyframes progress {
	to {background-position: 30px 0;}
}

@-moz-keyframes progress {
	to {background-position: 30px 0;}
}

@keyframes progress {
	to {background-position: 30px 0;}
}