styles.less 2.38 KB
Newer Older
1
@import "../../../css/colors.less";
Big Bad Waffle's avatar
Big Bad Waffle committed
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

@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 {
68 69 70
				width: 8px;
				height: 8px;
				transform: scale(16);
Big Bad Waffle's avatar
Big Bad Waffle committed
71
				transform-origin: 0% 0%;
Big Bad Waffle's avatar
Big Bad Waffle committed
72
				image-rendering: pixelated;
Big Bad Waffle's avatar
Big Bad Waffle committed
73
				image-rendering: optimizeSpeed;
Big Bad Waffle's avatar
Big Bad Waffle committed
74
				image-rendering: crisp-edges;
Big Bad Waffle's avatar
Big Bad Waffle committed
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
				display: none;
			}
		}

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

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

			.name {
92
				width: 47%;
Big Bad Waffle's avatar
Big Bad Waffle committed
93 94 95 96 97 98
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.class {
99
				width: 53%;
Big Bad Waffle's avatar
Big Bad Waffle committed
100 101 102 103 104
				text-align: right;
				color: darken(@white, 25%);
			}
		}

105
		.btn {
106
			background-color: @blueC;
Big Bad Waffle's avatar
Big Bad Waffle committed
107 108 109 110 111 112 113 114 115 116
			width: calc((100% - (16px * 2)) / 3);
			float: left;
			margin-right: 16px;
			color: @white;

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

			&:hover {
117
				background-color: @blueB;
Big Bad Waffle's avatar
Big Bad Waffle committed
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
			}

			&.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);
	}
144
}
Big Bad Waffle's avatar
Big Bad Waffle committed
145 146

.mobile .uiCharacters {
147
	height: 300px;
Big Bad Waffle's avatar
Big Bad Waffle committed
148 149

	.logo {
150
		display: none;
Big Bad Waffle's avatar
Big Bad Waffle committed
151 152
	}
}