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

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

.uiWorkbench {
	display: none;
	width: 827px;
	height: 447px;
	border: 5px solid @blackB;
	color: @white;
	position: relative;
	z-index: 2;

	> .heading,
	> .itemPicker > .heading {
		color: @orangeA;
		width: 100%;
		height: 36px;
		background-color: @blackB;
		text-align: center;

		.heading-text {
			padding-top: 8px;
			margin: auto;
		}

	}

	> .bottom {
		background-color: @blackC;
		height: calc(100% - 36px);
		width: 100%;

		.heading {
			color: @blueB;
			margin-bottom: 10px;
			text-align: center;
		}

		.left,
		.right {
			float: left;
			height: 100%;
			padding: 10px;
		}

		.left {
			width: 300px;

			.list {
				height: calc(100% - 25px);
				overflow-y: auto;
				display: flex;
				flex-direction: column;

				.item {
					width: 100%;
					padding: 5px 10px;
					cursor: pointer;
					color: @grayB;

					&.selected {
						background-color: @blackB;
						color: @white;
					}

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

				}

			}

		}

		.right {
			width: calc(100% - 300px);
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			> * {
				width: 100%;
			}

			.info {
				height: calc(100% - 100px - 35px);
				flex: 1;

				.title {
					color: @blueB;
					padding-bottom: 10px;
					text-align: center;
				}

				.description {
					color: @grayB;
					text-align: justify;
				}

			}

			.materialList {
				visibility: hidden;
				margin-bottom: 20px;

				.material {
					&.need {
						color: @redB;
					}

				}

			}

			.needItems {
				display: none;
				margin-bottom: 20px;
				flex-direction: column;

				.title {
					color: @blueB;
					padding-bottom: 10px;
					text-align: center;
				}

				.list {
					display: flex;
					justify-content: space-around;
				}

			}

			.buttons {
				height: 40px;

				> .btn {
					height: 35px;
					width: 100px;
					color: @white;
					text-align: center;
					padding-top: 10px;
					background-color: @blackB;
					cursor: pointer;
					float: left;

					&:last-child {
						float: right;
					}

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

				}

			}

		}

	}

	> .itemPicker {
		display: none;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: @blackC;
		flex-direction: column;

		.list {
			display: flex;
			flex-wrap: wrap;
			overflow-y: auto;
		}

	}

}

.mobile .uiWorkbench {
	z-index: 2;
}