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

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

.uiSmithing {
	display: none;
	background-color: @blackB;
	border: 5px solid @blackB;
	text-align: center;

	> .heading {
		color: @blueA;
		width: 100%;
		height: 36px;
		background-color: @blackB;

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

	}

	.bottom {
		height: 170px;
		background-color: @blackC;
		padding: 10px;
	}

	.col {
		float: left;
		margin-right: 10px;

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

		.heading {
			width: 80px;
			height: 16px;
			color: @white;
			text-align: center;
			margin-bottom: 10px;
		}

		.content {
			width: 80px;
			height: 80px;
			background-color: @blackD;

			&.chance {
				padding-top: 32px;
				color: @white;
				text-align: center;
			}

			&.item-picker,
			&.actionButton {
				cursor: pointer;

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

			}

			&.item-picker {
				> .icon {
					margin: 8px;
					display: inline-block;
					width: 64px;
					height: 64px;
					background: url('../../../images/uiIcons.png') -256px -64px;
				}

			}

			&.actionButton {
				padding: 8px;

				.icon {
					width: 64px;
					height: 64px;
					background: url('../../../images/uiIcons.png') -192px -64px;
				}

			}

			.item {
				width: 100%;
				height: 100%;
				float: left;
				position: relative;
				cursor: pointer;
				box-sizing: border-box;

				.quantity {
					left: 6px;
					bottom: 3px;
					position: absolute;
					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);
					-moz-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);

					&.red {
						color: @red;
					}

				}

				.icon {
					width: 64px;
					height: 64px;
					position: absolute;
					left: 8px;
					top: 8px;
					filter: brightness(100%)
					drop-shadow(0px -4px 0px @blackD) 
					drop-shadow(0px 4px 0px @blackD)
					drop-shadow(4px 0px 0px @blackD) 
					drop-shadow(-4px 0px 0px @blackD);
					-moz-filter: brightness(100%)
					drop-shadow(0px -4px 0px @blackD) 
					drop-shadow(0px 4px 0px @blackD)
					drop-shadow(4px 0px 0px @blackD) 
					drop-shadow(-4px 0px 0px @blackD);
				}

			}

		}

		&:first-child {
			.heading {
				width: 190px;
			}

			.content {
				width: 190px;
				background-color: transparent;

				.col-btn {
					height: calc((100% - 10px) / 2);
					width: 100%;
					color: #f2f5f5;
					text-align: center;
					padding-top: 10px;
					background-color: @blackB;
					margin-bottom: 10px;
					cursor: pointer;

					&.selected {
						color: @orangeA;
					}

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

					&.col-half {
						width: calc((100% - 10px) / 2);
						float: left;

						&:nth-child(2n + 1) {
							margin-right: 10px;
						}

					}

					&:not(.col-half) {
						clear: both;
					}

				}

			}

		}

	}

}