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

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

@pad: 8px;
@btnSize: 64px;

.uiMessages {
	position: absolute;
	left: 10px;
	bottom: 10px;

	width: 480px;
	padding: @pad;

	pointer-events: none;

	&.typing {
		.el.message {
			display: block;
		}

		.filters {
			pointer-events: all;
			display: block;
		}

		.list {
			overflow-y: auto;
			background-color: @darkGray;

			.list-message {
				filter: none;
			}
		}
	}

	&.active {
		.list-message {
			opacity: 1 !important;
		}
	}

	.filters {
		display: none;
		width: 100%;
		height: 26px;
		margin-bottom: 10px;

		.filter {
			height: 100%;
			background-color: @blackC;
			float: left;
			color: @blackA;
			margin-right: 10px;
			padding: 5px 10px;
			cursor: pointer;

			&:hover {
				background-color: @blackB;
				color: @grayD;
			}

			&.active {
				background-color: @blackB;
				color: @green;

				&:hover {
					background-color: @blackA;
					color: @grayB;
				}
			}
		}
	}

	.list {
		overflow-y: hidden;
		width: 100%;
		max-height: 320px;

		.list-message {
			width: 100%;
			padding: 5px 10px;
			color: white;
			filter:
				drop-shadow(0px -2px 0px @blackD)
				drop-shadow(0px 2px 0px @blackD)
				drop-shadow(2px 0px 0px @blackD)
				drop-shadow(-2px 0px 0px @blackD);

			word-wrap: break-word;
			line-height: 18px;

			&.q0 {
				color: @white;
			}

			&.q1 {
				color: @blue;
			}

			a, &.q2 {
				color: @yellow;
			}

			&.q3 {
				color: @purple;
			}

			&.q4 {
				color: @orange;
			}

			&.color-green {
				color: @green;
			}

			&.color-red {
				color: @red;
			}

			&.color-cyan {
				color: @blueA;
			}

			display: none;
		}

		&.rep .list-message.rep {
			display: block;
		}

		&.chat .list-message.chat {
			display: block;
		}

		&.info .list-message.info {
			display: block;
		}

		&.loot .list-message.loot {
			display: block;
		}
	}

	.el.message {
		display: none;
		text-align: left;
		background-color: @gray;
		width: 100%;
		color: @white;
		padding: 5px 10px;
	}
}