Iosevka/shared/styles-scss/pages/character-specimen.scss

@use "sass:math";

@use "sass:color";
@use "../shared/chroma.scss";
@use "../shared/metrics.scss";
@use "../shared/picker-frame.scss";
@use "../shared/font-cfg";

#character-specimen {
	min-width: metrics.$sectionWidth;
	padding-left: 4rem;
	padding-right: 4rem;

	.section-toolbar {
		position: fixed;
		background: chroma.$dark1;
		z-index: 10;
	}

	h1 {
		font-size: 2rem;
		font-weight: 200;
		font-stretch: expanded;
		margin: 0 0 1em 0;
	}
}

#character-specimen #navigator-panel {
	position: fixed;
	right: calc(50vw - (0.5 * metrics.$sectionWidth + 0.25rem));
	top: 0;
	z-index: 20;

	> .button {
		line-height: 2rem;
		padding: 0 0.25rem;
		@include picker-frame.picker-button-visual();
	}
	> .navigation-dropdown {
		display: none;
		background: chroma.$dark2;
		position: absolute;
		right: 0;
		top: 2rem;
		padding: 0.25em;

		@include chroma.add-backdrop;

		> .blocks-panel {
			width: 26rem;
			columns: 2;
			font-size: 0.625rem;
			padding-top: 1.25em;
			max-height: 90vh;
			overflow-y: auto;
			> ol {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			> ol > li {
				break-inside: avoid;
				padding: 0.25em;
				cursor: pointer;

				&.hovered {
					background: chroma.$dark4;
				}
			}
		}

		> .strips-panel {
			margin-left: 1em;
			padding-left: 0.5em;
			padding-right: 1px;
			padding-bottom: 1px;
			border-left: 1px solid chroma.$control-border;
			width: (24 * 0.625rem);
			max-height: 90vh;
			overflow-y: auto;

			> .row {
				display: flex;
				font-size: 0.625rem;
				font-weight: 500;
				font-stretch: expanded;

				> .start {
					width: 2em;
					padding: 0 0.75em 0 0;
					height: 1.25em;
					text-align: right;
				}
				> .columns {
					display: flex;
					flex: 1;
				}

				> .columns > .strip {
					@include font-cfg.fc-sans();
					flex: none;
					display: flex;
					height: 1.25em;

					&.filled {
						cursor: pointer;
						background: chroma.$dark3;
					}
					> span {
						position: relative;
						z-index: 2;
						display: block;
						flex: 1;
						text-align: center;
					}
					&.filled.hovered {
						position: relative;
						background: chroma.$dark4;
						outline: 1px solid chroma.$accent1;

						&::after {
							content: " ";
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: chroma.$dark4;
							z-index: 1;
						}
					}
					&.filled > span:hover {
						background: color.adjust($color: chroma.$light1, $alpha: -0.8);
					}
				}
			}
		}
	}
	&.dropdown-visible {
		> .button {
			background: chroma.$dark2;
			color: chroma.$light2;
			@include chroma.add-backdrop;
		}
		> .navigation-dropdown {
			display: flex;
		}
	}
}

#character-specimen .character-sample {
	cursor: cell;
	text-align: center;
	font-size: 2rem;
	height: 2em;
	line-height: 2em;
	z-index: 1;
	transition:
		background 0.2s,
		color 0.2s;
	white-space: nowrap;
	&.markings-hidden .background {
		visibility: hidden;
	}
	.background {
		display: inline-block;
		color: chroma.$azure1;
		width: 0;
		position: relative;
		user-select: none;
		&.mark-base:before {
			display: inline;
			content: "\25cc";
		}
		&.pre-letter:before {
			display: inline;
			content: "\f89b";
		}
		&.under-letter:before {
			display: inline;
			content: "\f89a";
		}
		&.post-letter:before {
			display: inline;
			content: "\f89c";
		}
		&.pre-symbol:before {
			display: inline;
			content: "\f896";
		}
		&.post-symbol:before {
			display: inline;
			content: "\f897";
		}
		&.pre-mosaic:before {
			display: inline;
			content: "\f898";
		}
		&.post-mosaic:before {
			display: inline;
			content: "\f899";
		}
	}
	.character-sample-inner {
		position: relative;
		display: inline-block;
		z-index: 1;
		> .pre {
			position: relative;
			white-space: pre;
			z-index: 1;
		}
		> .background.under-letter {
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}
}

#character-specimen .specimen-block {
	> h3 {
		font-weight: 300;
		font-stretch: expanded;
	}
	> .anchors {
		position: absolute;
		margin-top: -8rem;
		z-index: -1;
		> div {
			height: 4rem;
			width: 1rem;
		}
	}
	> .specimen-block-body {
		display: flex;
		flex-wrap: wrap;
	}
}

#character-specimen .specimen-character {
	flex: 1 1 6.25%;
	width: 6.25%;
	position: relative;
	cursor: default;
	&.column-0:before {
		content: attr(data-unicode-label) "⏵";
		position: absolute;
		display: block;
		right: 100%;
		font-size: 0.75em;
		height: math.div(4em, 0.75);
		line-height: math.div(4em, 0.75);
		z-index: -1;
		font-stretch: expanded;
		opacity: 0.5;
	}
	&.not-in-font > .character-sample {
		opacity: 0.25;
	}
	&.unassigned > .character-sample {
		opacity: 0.1;
	}
	&:hover {
		.character-sample {
			@include chroma.control-hover();
		}
		.has-variant-marker {
			right: 2px;
			bottom: 2px;
			border-width: 3px;
		}
	}
	&.variant-menu-visible {
		@include chroma.control-active-no-hover();
		.character-sample {
			@include chroma.control-active();
			.background {
				color: color.mix(chroma.$accent1, chroma.$dark1, 50%);
			}
		}
		.character-sample-variants {
			display: block;
		}
		.has-variant-marker {
			opacity: 1;
			border-right-color: chroma.$dark1;
			border-bottom-color: chroma.$dark1;
			right: 2px;
			bottom: 2px;
			border-width: 3px;
		}
	}
	.has-variant-marker {
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 0;
		height: 0;
		border: 5px solid chroma.$light1;
		border-left-color: transparent;
		border-top-color: transparent;
		opacity: 0.25;
		transition:
			border-width 0.2s,
			border-color 0.2s,
			right 0.2s,
			bottom 0.2s,
			opacity 0.2s;
	}
	.character-sample-variants {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: chroma.$light1;
		z-index: 3;
		padding: 0.25rem;
		> .group {
			display: block;
			white-space: nowrap;
			> .group-name {
				font-size: 0.625em;
				font-weight: 600;
				background: color.adjust($color: chroma.$dark1, $alpha: -0.9);
				margin: 0.2em 0;
				padding: 0 0.2em;
			}
			&:first-child > .group-name {
				margin-top: 0;
			}
			> .subgroup {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				> .character-sample {
					display: inline-block;
					font-size: 1.5rem;
					line-height: 2rem;
					height: 2rem;
					width: 2rem;
					&.current-selection {
						background: color.adjust($color: chroma.$dark1, $alpha: -0.85);
					}
				}
			}
		}
	}
}

#character-specimen .standouts {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 0;
	height: 15rem;
	padding: 0rem 0.5rem;
	overflow: auto;
	z-index: 3;
	background: chroma.$dark1;
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid color.change(chroma.$light1, $alpha: 0.25);
	border-left: 1px solid color.change(chroma.$light1, $alpha: 0.25);
	border-right: 1px solid color.change(chroma.$light1, $alpha: 0.25);
	box-shadow: 0 0 0.25em chroma.$dark1;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	> .standout {
		box-sizing: border-box;
		width: 15rem;
		height: 15rem;
		flex: none;
		position: relative;
		background: chroma.$dark1;
		> button.close {
			display: block;
			z-index: 1;
			font-size: 1rem;
			line-height: 1rem;
			height: 1.5rem;
			width: 1.5rem;
			position: absolute;
			top: 0.25rem;
			left: 0.25rem;
			text-align: center;
			border: none;
			background: chroma.$dark1;
			color: chroma.$light1;
			&:hover {
				@include chroma.control-hover();
			}
		}
		> h4 {
			font-size: 1rem;
			font-weight: normal;
			line-height: 1.5rem;
			margin: 0;
			padding-left: 1.75rem;
		}
	}
	> .standout > .character-sample {
		height: 15rem;
		font-size: 10rem;
		line-height: 15rem;
	}
	> .standout.outside-font > .character-sample {
		opacity: 0.25;
	}
}