style.less

@fretBoardColor: rgba(255,255,255,0.4);
@lineColor: rgba(212,182,132,0.95);
@bridgeColor: rgba(115,88,45,0.95);
@fretHeight: 60px;
@fingerColorOne: rgba(226,111,68,0.9);
@fingerColorTwo: rgba(92,113,148,0.9);
@background: rgb(92,113,148);
@queryBackground: rgba(92,113,148,0.7);
@fretNumWidth: 15px;
@smartphones: ~"screen and (max-width: 480px)";
@tabletsAndDesktops: ~"screen and (min-width: 481px)";

* {
	box-sizing: border-box;
}

body {
	background-color: @background;
}

#query {
	text-align: center;
	width: 100%;
	height: 40px;
	vertical-align: middle;
	padding-top: 10px;
	background-color: @queryBackground;
	position: fixed;
	top: 0px;
	z-index: 30;
}

#ukulele-neck {
	display: block;
	width: 200px + @fretNumWidth;
	margin: 40 auto 0 auto;
	.fret {
		width: 100%;
		height: @fretHeight;
		margin: 0;
		padding: 0;
		div.line {
			position: relative;
			width: 50px;
			height: 100%;
			display: inline-block;
			margin: 0;
			border-bottom: 1px solid lighten(@fretBoardColor, 30%);
			background-color: @fretBoardColor;
			span.line {
				height: 100%;
				width: 3px;
				background-color: @lineColor;
				display: block;
				margin: 0 auto 0 auto;
			}
			.finger {
				z-index: 10;
				position: absolute;
				left: 5px;
				top: 10px;
				height: 40px;
				width: 40px;
				border-radius: 20px;
				opacity: 0.8;
				&.odd {
					background-color: @fingerColorOne;
					border: 2px solid @fingerColorOne;
				}
				&.even {
					background-color: @fingerColorTwo;
					border: 2px solid @fingerColorTwo;
				}
				&.highlight {
					z-index: 20;
				}
			}
		}
		&:first-child {
			div.line {
				border-bottom: 3px @bridgeColor solid;
				.finger {
					background: transparent;
				}
			}
		}
		.fretNum {
			position: relative;
			display: inline-block;
			width: @fretNumWidth;
			height: 100%;
			vertical-align: middle;
			text-align: center;
			color: white;
			font-size: 12px;
			font-family: monospace;
			.chordNum {
				position: absolute;
				top: -8px;
				color: @background;
				background-color: white;
				height: 28px;
				width: 28px;
				border-radius: 14px;
				vertical-align: middle;
				text-align: center;
				padding-top: 1px;
				font-size: 23px;
				font-weight: 700;
				font-family: sans-serif;
				box-shadow: 2px 3px 0px 0px rgba(255,255,255,0.6);
				&.clicked {
					box-shadow: none;
					top: -4px;
					box-shadow: -2px -2px 0px 0px rgba(150,150,150,0.9);
					&.right {
						left: 28px;
					}
					&.left {
						right: 227px;
					}
				}
				&.right {
					left: 25px;
				}
				&.left {
					right: 230px;
				}
				&:hover {
					cursor: pointer;
				}
			}
		}
	}
}
#next, #previous {
	display: block;
	position: fixed;
	color: @background;
	background-color: @lineColor;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	vertical-align: middle;
	text-align: center;
	font-size: 40px;
	font-weight: 700;
	font-family: sans-serif;
	opacity: 0.7;
	z-index: 30;
	@media @smartphones {
		bottom: 10px;
	}
	@media @tabletsAndDesktops {
		bottom: 45%;
	}
}
#next {
	right: 10px;
	padding-left: 10px;
}
#previous {
	left: 10px;
}
.hover {
	&:hover {
		cursor: pointer;
	}
}