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

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

@pad: 8px;

.uiHud {
	position: absolute;
	left: 10px;
	top: 10px;
	width: calc(280px + (@pad * 2));
	padding: @pad;
	background-color: fade(#3a3b4a, 90%);

	.portraitBox {
		float: left;
		margin-right: 12px;

		.portrait {
			visibility: hidden;
			width: 64px;
			height: 64px;
		}
	}

	.boxes {
		width: calc(100% - 76px);
		float: left;
		height: 100%;

		.statBox {
			width: 100%;
			height: 18px;
			margin-bottom: 5px;
			position: relative;

			&:last-child {
				margin-bottom: 0px;
			}

			[class^="stat"] {
				position: absolute;
				left: 0px;
				top: 0px;
				height: 100%;
			}

			.text {
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				text-align: center;
				color: @white;
				padding: 2px 0px;
				line-height: 16px;

				text-shadow: 
					2px 0px #2d2136,
					-2px 0px #2d2136,
					0px -2px #2d2136,
					0px 2px #2d2136,
					-2px -2px #2d2136,
					-2px 2px #2d2136,
					2px -2px #2d2136,
					2px 2px #2d2136;
			}

			&:nth-child(1) {
				background-color: #802343;
			}

			&:nth-child(2) {
				background-color: #42548d;
			}

			&:nth-child(3) {
				background-color: #386646;
			}

			.statHp {
				background-color: #d43346;
			}

			.statMana {
				background-color: #3fa7dd;
			}

			.statXp {
				background-color: #4ac441;
			}
		}
	}
}