nonogram.scss

$theme-color: #8732f5;


@import "fonts/MPLUSRounded1c";


html, body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
body {
	display: flex;
	flex-flow: column nowrap;
	font-family: MPLUSRounded1c, var(--bs-body-font-family), sans-serif;
	touch-action: pan-x pan-y; // disable default pinch-to-zoom since desktop chrome ignores user-scalable meta tag
	-webkit-user-select: none; // disable iOS text selection
}

header {
	padding: 0.5rem 1rem;
	display: flex;
	flex-flow: row wrap;
	align-items: start;

	h1 {
		flex: 1;
		margin: 0;
		padding: .7rem 0;
	}

	#headerActions {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}
	
	@media screen and (max-width: 500px) {
		display: block;
	}
}

.icon-links {
	text-align: center;
}

main {
	overflow: hidden;
	flex: 1 0 auto;
	display: flex;
}

board {
	display: grid;
	grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 0;
	text-align: center;
	padding: 1em;
	width: 100%;
	max-width: 75vh;
	margin: auto;


	label {
		// center text
		display: flex;
		align-items: center;

		white-space: nowrap;
		transition: color 0.2s ease, opacity 1s ease;
	}
	label.vertical {
		flex-direction: column-reverse; // align text at bottom
		padding-bottom: 1em;
	}
	label.horizontal {
		flex-direction: row-reverse; // align text to end
		padding-right: 1em;
		min-width: 4em;
	}
	label::after {
		content: "✗";
		padding-inline: 0.3em;
		opacity: 0;
		transition: opacity 0.2s;
	}
	label.incorrect {
		color: red;
	}
	label.incorrect::after {
		opacity: 0.7;
	}
	label.correct {
		color: $theme-color;
		opacity: 0;
	}
}

footer {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	align-items: center;
	padding: 1rem;
	gap: 1rem;

	> * {
		flex-basis: 4rem;
		margin: auto;
	}

	#crossToggle {
		&::before {
			background: $theme-color no-repeat center center;
			background-size: 100%;
			border-radius: 33%;
		}

		&.is-cross {
			&::before {
				background-color: transparent;
				background-image: url("images/cross.svg");
			}
		}
	}
	#binBtn {
		&::before {
			background: url("images/trash.svg") no-repeat center center;
			background-size: 100%;
		}
	}

	#difficultyToggleContainer {
		display: flex;
		flex-flow: column nowrap;

		> * {
			width: 100%;
			text-align: center;
		}
		> input {
			border: none;
		}
		> label {
			font-size: 0.9em;
		}
	}
}

.btn-link {
	color: $theme-color;
}
.btn-outline-primary {
	color: $theme-color;
	border-color: transparent;
	&:active,
	&:hover {
		color: mix($theme-color, black);
		background-color: rgba($theme-color, 0.25);
		border-color: transparent;
	}
	&:focus {
		box-shadow: 0 0 0 .25rem rgba($theme-color,.5);
	}
}
.btn-icon {
	height: 4rem;
	position: relative;
	border-radius: 50%;
	aspect-ratio: 1;

	&::before {
		content: "";
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0; height: 1.5rem;
		margin: auto;
		aspect-ratio: 1;
	}
}
.btn-refresh {
	&::before {
		background: url("images/refresh.svg") no-repeat center center;
		background-size: contain;
	}
}
.btn-sound {
	&::before {
		background: url("images/sound-on.svg") no-repeat center center;
		background-size: contain;
	}
	&.is-muted::before {
		background-image: url("images/sound-off.svg");
	}
}
.btn-lock {
	&::before {
		background: url("images/unlock.svg") no-repeat center center;
		background-size: contain;
	}
	&.is-locked::before {
		background-image: url("images/lock.svg");
	}
}
.btn-github {
	&::before {
		background: url("/assets/images/logos/GitHub-Mark.svg") no-repeat center center;
		background-size: contain;
	}
}
.btn-google-play {
	aspect-ratio: auto;
	border-radius: 0.5rem;
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	img {
		height: 2rem;
		max-height: 100%;
		width: auto;
	}
}
#eReaderBtn svg {
	width: 1.8rem;
	height: 1.8rem;
	object-fit: contain;
	fill: $theme-color;
	transition: transform 0.2s;
}
#eReaderBtn.eReaderEnabled svg {
	fill: black;
	transform: rotate(180deg);
}

tile {
	aspect-ratio: 1;
	border-radius: 33%;
	margin: 3%;
	background-color: rgba(0, 0, 0, 0.05);
	transition: background-color 0.05s, transform 0.2s, opacity 0.2s;
	touch-action: pinch-zoom; // disable double-tap to zoom and panning

	&.x-middle,
	&.y-middle {
		background-color: rgba(0,0,0,0.1);
	}

	&.selected {
		background-color: $theme-color;
	}
	&.crossed {
		background: url("images/cross.svg") no-repeat center center;
		background-size: 50%;
	}

	&.locked {
		transform: scale(0.5);
		opacity: 0.7;
	}
}

.modal {
	align-content: center;
	align-items: center;
}
.modal-dialog {
	margin: auto;
}


body.e-reader {
	&, .modal-content {
		background-color: white;
	}

	footer {
		#crossToggle {
			&::before {
				background-color: #111;
			}
			&.is-cross {
				&::before {
					background-color: transparent;
					background-image: url("images/cross.svg");
				}
			}
		}
	}
	tile {
		transition: none;

		&.selected {
			background-color: #111;
		}
	}
	board label::after {
		transition: none;
	}

	.modal-backdrop {
		opacity: 0 !important;
	}
	.modal-content {
		border: 1px solid black;
	}
}

@media (prefers-color-scheme: dark) {
	html, body, .modal-content {
		background: #191919;
		color: white;
	}
	input {
		background: rgba(#ffffff, 0.1);
		color: white;
	}
	.btn-icon::before {
		filter: invert(1);
	}
	#eReaderBtn svg {
		fill: $theme-color;
	}
	#eReaderBtn.eReaderEnabled svg {
		fill: white;
	}
	#crossToggle {
		&::before {
			filter: none;
		}
		&.is-cross::before {
			filter: invert(1);
		}
	}
	tile {
		background-color: rgba(255, 255, 255, 0.05);
		&.x-middle,
		&.y-middle {
			background-color: rgba(255, 255, 255, 0.1);
		}
		&.selected {
			background-color: $theme-color;
		}
		&.crossed {
			background-color: transparent;
			background-image: url("/nonogram/images/cross-white.svg");
		}
	}

	body.e-reader {
		&, .modal-content {
			background: #111;
		}

		footer {
			#crossToggle {
				&::before {
					background-color: #eee;
				}
				&.is-cross {
					&::before {
						background-color: transparent;
						background-image: url("images/cross.svg");
					}
				}
			}
		}
		tile {
			&.selected {
				background-color: #eee;
			}
		}

		.modal-content {
			border-color: white;
		}
	}
}