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

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

.uiCharacters {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;

	.logo {
		width: 562px;
		height: 200px;
		margin-bottom: 60px;
	}

	.bottom {
		display: flex;
		height: 300px;

		.left,
		.right {
			background-color: #3a3b4a;
			filter: drop-shadow(0 -2px 0 @black) drop-shadow(0 2px 0 @black) drop-shadow(2px 0 0 @black) drop-shadow(-2px 0 0 @black);
		}

		.left {
			width: 400px;
			overflow-y: auto;

			.character {
				height: 50px;
				width: 100%;
				color: @white;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;

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

				&.selected {
					background-color: @grayD;
				}

			}

		}

		.right {
			width: 400px;
			padding: 10px;
			margin-left: 30px;
			display: flex;
			flex-direction: column;

			.portrait {
				height: 205px;
				background-color: @black;
				display: flex;
				justify-content: center;
				align-items: center;

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

			}

			.info {
				height: 30px;
				margin-bottom: 10px;
				background-color: @black;
				color: @white;
				display: flex;
				justify-content: space-between;
				padding: 0px 10px;

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

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

			}

			.buttons {
				display: flex;

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

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

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

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

				}

			}

		}

	}

	.message {
		height: 30px;
		width: 100%;
		margin-top: 30px;
		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;
	}

}