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

.uiEvents {
	margin-top: 10px;
	width: 320px;
	
	.heading {
		color: @yellow;
		padding: 8px;
		background-color: fade(#3a3b4a, 90%);
	}

	.list {
		.event {
			cursor: pointer;
			padding: 8px;
			background-color: fade(#3a3b4a, 90%);

			&:hover {
				background-color: fade(lighten(#3a3b4a, 15%), 90%);
			}

			.name {
				color: @white;
				margin-bottom: 3px;
			}

			.description {
				color: darken(@white, 35%);
			}

			&.active {
				.name {
					color: @blue;
				}
			}

			&.ready {
				.name {
					color: @green;
				}

				.description {
					display: none;
				}
			}
		}
	}
}