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

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

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

.uiSpells {
	position: absolute;
	right: 10px;
	top: 10px;

	height: (@btnSize + (@pad * 2));
	padding: @pad;
	background-color: fade(#3a3b4a, 90%);

	.spell {
		width: @btnSize;
		height: @btnSize;
		float: left;
		margin: 0px 8px;

		cursor: pointer;
		position: relative;

		&:hover {
			background-color: fade(@white, 10%);
		}

		.icon {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
		}

		.cooldown {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 0px;
			height: 100%;
			background-color: fade(@red, 75%);
		}

		.hotkey {
			position: absolute;
			left: -2px;
			bottom: -6px;
			color: @white;
			font-size: 18px;
			z-index: 2;
			text-shadow: 2px 2px 0 #2d2136,
			   -2px -2px 0 #2d2136,  
			    2px -2px 0 #2d2136,
			   -2px  2px 0 #2d2136,
			    2px  2px 0 #2d2136;

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