khguide/templates/components/ddd/style.css

.blue {
	background-color: #35a0a8;
}

.purple {
	background-color: #992a9b;
}

.green {
	background-color: #7ecf50;
}

.yellow {
	background-color: #d3c949;
}

.secret1 {
	background-color: #497331;
}

.secret2 {
	background-color: #881a22;
}

div.abilities {
	display: flex;

	& div {
		margin-right: 60px;
	}
}

.dispositions {
	display: flex;
	flex-wrap: wrap;

	div.route {
		display: flex;
		align-items: center;
		width: 40%;

		& div {
			display: flex;
			align-items: center;
		}

		& .disposition {
			width: 32px;
			height: 32px;
			margin-right: 5px;
			display: inline-block;
			vertical-align: middle;
		}

		& span {
			font-size: 18px;
		}

		& ul {
			list-style: disclosure-closed;
			line-height: 2.5;

			& li {
				display: list-item;
			}
		}
	}
}

table.board {
	width: inherit;

	td {
		width: 120px;
		height: 100px;
		position: relative;

		& span {
			position: inherit;
			z-index: 10;
			color: black;
		}

		& .slot {
			width: 70%;
			height: 70%;
			position: relative;
			left: 15px;
			background-color: #cbf;
			z-index: 10;
			align-content: center;
			font-size: 14px;
			box-shadow: 1px 1px 5px black;

			.help:after {
				content: "?";
				position: absolute;
				color: rgba(0, 0, 0, 0.3);
				font-size: 24px;
				bottom: 0;
				right: 5px;
			}
		}

		.tooltip-wrapper {
			.tooltip {
				visibility: hidden;
				background-color: #555;
				max-width: 250px;
				min-width: 150px;
				color: #fff;
				text-align: center;
				border-radius: 6px;
				padding: 8px;
				position: absolute;
				z-index: 1;
				bottom: 125%;
				left: -50%;
				opacity: 0;
				transition: opacity 0.3s;
			}

			&:hover .tooltip {
				visibility: visible;
				opacity: 1;
			}
		}

		&.slot-w {
			height: 20px;
		}

		&.slot-h {
			width: 20px;
		}

		&.start .slot {
			background-color: #dcbf7e;
		}

		&.north.east.south.west .path::after {
			content: "┼";
		}

		&.east.south.west .path::after {
			content: "┬";
		}

		&.east.north.west .path::after {
			content: "┴";
		}

		&.north.south.west .path::after {
			content: "┤";
		}

		&.north.south.east .path::after {
			content: "├";
		}

		&.south.east .path::after {
			content: "┌";
		}

		&.south.west .path::after {
			content: "┐";
		}

		&.north.west .path::after {
			content: "┘";
		}

		&.north.east .path::after {
			content: "└";
		}

		&.east.west .path::after {
			content: "─";
		}

		&.north.south .path::after {
			content: "│";
		}

		&.west .path::after {
			content: "╴";
		}

		&.east .path::after {
			content: "╶";
		}

		&.south .path::after {
			content: "╷";
		}

		&.north .path::after {
			content: "╵";
		}
	}
}

.path {
	position: absolute;
	top: -70px;
	left: 0;
	font-size: 200px;
	width: 100%;
	height: 100%;
	z-index: 0;
	/*color: #3c3c3c;*/
	color: #ccbbff;
}