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

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

@leftWidth: 400px;
@rightWidth: 400px;
@boxPadding: 35px;

@logoWidth: 559px;
@logoHeight: 200px;

@boxHeight: 300px;

@messageHeight: @boxPadding;

@totalWidth: (@leftWidth + @rightWidth + @boxPadding);
@totalHeight: (@logoHeight + @boxHeight + (@boxPadding * 3) + @messageHeight);

.uiCharacters {
	width: @totalWidth;
	height: @totalHeight;

	.logo {
		width: 562px;
		height: @logoHeight;
		margin-left: ((@totalWidth / 2) - (@logoWidth / 2));
		margin-bottom: (@boxPadding * 2);
	}

	.left, .right {
		height: @boxHeight;
		float: left;
		background-color: #3a3b4a;
	}

	.left {
		width: @leftWidth;
		overflow-y: auto;

		.character {
			height: 50px;
			width: 100%;
			text-align: center;
			color: @white;
			padding: 17px 0px 0px 0px;
			cursor: pointer;

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

			&.selected {
				background-color: fade(@white, 25%);
			}
		}
	}

	.right {
		width: @rightWidth;
		padding: 16px;
		margin-left: @boxPadding;

		.portrait {
			width: 100%;
			height: 160px;
			background-color: @black;
			padding: 16px 0 0 120px;

			.sprite {
				width: 8px;
				height: 8px;
				transform: scale(16);
				transform-origin: 0% 0%;
				image-rendering: pixelated;
				image-rendering: optimizeSpeed;
				image-rendering: crisp-edges;
				display: none;
			}
		}

		.info {
			height: 57px;
			padding-top: 16px;
			margin-bottom: 16px;
			background-color: @black;
			color: @white;

			* {
				float: left;
				padding: 12px 16px;
			}

			.name {
				width: 47%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.class {
				width: 53%;
				text-align: right;
				color: darken(@white, 25%);
			}
		}

		.btn {
			background-color: @orangeC;
			width: calc((100% - (16px * 2)) / 3);
			float: left;
			margin-right: 16px;
			color: @white;

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

			&:hover {
				background-color: @orangeB;
			}

			&.deleting {
				background-color: @red;
				color: @white;
			}
		}

		.spacer-h {
			height: 91px;
		}
	}

	.message {
		height: @messageHeight;
		width: 100%;
		margin-top: @boxPadding;
		float: left;
		text-align: center;
		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);
	}
}

.mobile .uiCharacters {
	height: 300px;

	.logo {
		display: none;
	}
}