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

@import "../../../css/colors.less";
@pad: 8px;

.uiHud {
	position: absolute;
	left: 10px;
	top: 10px;

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

		.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%;
				}

				.statManaReserve {
					position: absolute;
					right: 0%;
					top: 0px;
					left: auto;
					height: 100%;
					background-color: @grayB;
				}

				.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;
				}

			}

		}

	}

	.quickBar {
		position: absolute;
		left: calc(290px + (@pad * 2));
		top: 0px;
		box-shadow: 0 -2px 0 @black, 0 2px 0 @black, 2px 0 0 @black, -2px 0 0 @black;

		.quickItem {
			display: none;
			width: 80px;
			height: 80px;
			background-color: fade(#3a3b4a, 90%);
			cursor: pointer;
			padding: 8px;
			position: relative;

			.icon {
				height: 100%;
				filter: brightness(100%)
				drop-shadow(0px -4px 0px @blackC) 
				drop-shadow(0px 4px 0px @blackC)
				drop-shadow(4px 0px 0px @blackC) 
				drop-shadow(-4px 0px 0px @blackC);
			}

			.info {
				left: 6px;
				bottom: 3px;
				position: absolute;
				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);
				-moz-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);
			}

			&:hover {
				.icon {
					filter: brightness(160%);
					-moz-filter: brightness(160%);
				}

				&.empty {
					background-color: fade(@blueA, 10%);
				}

			}

		}

	}

}