Iosevka/shared/styles-scss/pages/customizer.scss

@use "sass:math";

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

$formItemHeight: 2.25em;
$mwDualCol: 102;

.customizer {
	@media (max-width: metrics.sectionTotalWidthChars($mwDualCol, 1rem)) {
		min-width: 0.6 * metrics.$sectionWidth;
	}

	> .section-inner {
		width: auto;
		margin: 0;
		display: flex;

		@media (max-width: metrics.sectionTotalWidthChars($mwDualCol, 1rem)) {
			display: block;
		}

		> .config-panel {
			flex: none;
			width: 0.4 * metrics.$sectionWidth;
			margin-left: calc((100vw - #{2 * metrics.$sectionHPadding} - #{metrics.$sectionWidth}) / 2);

			@media (max-width: metrics.sectionTotalWidthChars($mwDualCol, 1rem)) {
				width: auto;
				margin-left: 0;
			}
		}

		> .config-co-panel {
			padding-top: 2rem * (1.375 + 1);
			width: 0.6 * metrics.$sectionWidth;

			@media (max-width: metrics.sectionTotalWidthChars($mwDualCol, 1rem)) {
				width: auto;
				margin-left: 0;
			}
		}

		> .result-panel,
		> .try-panel,
		> .style-matcher-panel {
			width: metrics.$sectionWidth;
			margin-left: calc((100vw - #{2 * metrics.$sectionHPadding} - #{metrics.$sectionWidth}) / 2);

			@media (max-width: metrics.sectionTotalWidthChars($mwDualCol, 1rem)) {
				margin: 0;
				width: auto;
			}
		}

		> .preview-panel {
			border-left: 1px solid color.change(chroma.$light1, $alpha: 0.25);
			margin-top: -(metrics.$sectionPadding);
			margin-bottom: -(metrics.$sectionPadding);
			margin-left: math.div(metrics.$sectionPadding, 2);

			@media (max-width: metrics.sectionTotalWidthChars($mwDualCol, 1rem)) {
				display: none;
			}

			> .inner {
				position: sticky;
				top: 0;
				left: 0;
				padding: metrics.$sectionPadding metrics.$sectionHPadding metrics.$sectionPadding
					math.div(metrics.$sectionPadding, 2);
			}
		}
	}

	h1 {
		font-size: 3rem;
		font-weight: 200;
		font-stretch: expanded;
		margin: 0;
	}

	h2 {
		font-size: 2rem;
		font-weight: 200;
		font-stretch: expanded;
		margin: 0 0 1em 0;
		position: relative;
		@include chroma.gradient-text-bg(chroma.$accent1, chroma.$azure1);

		> em {
			font-style: normal;
			@include chroma.gradient-text-enable();
		}
	}

	.introduction p {
		margin: 1.5em 0.25em;
		font-size: 0.8em;
		font-weight: 300;
		line-height: 1.75;

		a {
			color: chroma.$light2;
			@include chroma.thin-underline(1.1em, chroma.$light1, chroma.$accent1);

			&:hover {
				color: chroma.$accent1;
			}
		}
	}

	.customizer-body {
		font-stretch: expanded;
		margin-left: math.div(6ch, 0.8);
		font-size: 0.8em;

		&.editor-toolbar {
			margin-left: 0;
		}

		&.variants > .group {
			display: flex;
			flex-wrap: wrap;
			font-size: 1.25em;
			font-stretch: normal;
		}

		> dl {
			display: flex;
			line-height: $formItemHeight;
			margin: 0;
			padding: 0.25em 0;

			> dt {
				margin: 0;
				padding: 0;
				width: 14ch;
				flex: none;
			}

			> dd {
				margin: 0;
				padding: 0;
				flex: 1;
			}

			&.long-options {
				display: block;

				> dt {
					padding-bottom: 0.25em;
				}
			}

			&.editor-controls {
				align-items: center;
				gap: 1em;

				.control-label,
				.language-control,
				.font-size-control {
					flex: none;
					width: auto;
				}

				.language-control select {
					width: auto;
				}

				.font-size-control {
					display: flex;
					align-items: center;
					gap: 1em;

					input[type="range"] {
						flex: 1;
						accent-color: chroma.$azure1;
					}
				}
			}
		}

		input,
		select {
			box-sizing: border-box;
			height: $formItemHeight;
		}

		.grade-list {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 0 -0.25em;

			> .grade-button {
				flex: 1;
				margin: 0 0.25em;
				width: $formItemHeight;
				height: $formItemHeight;
				&.dummy {
					cursor: default;
				}
			}
		}

		}

	.config-co-panel .customizer-body > dl > dt {
		width: 20ch;
	}

	.custom-config-source,
	.custom-build-commands > dd {
		color: chroma.$azure1;
		white-space: pre;
		border: 1px solid color.change(chroma.$light1, $alpha: 0.1);
		padding: 1em;
		margin: 1em;
	}

	.custom-build-commands a {
		color: chroma.$light2;
		@include chroma.thin-underline(1.1em, chroma.$light1, chroma.$accent1);
	}

		.cm-scroller {
			font: inherit;
			font-feature-settings: inherit;
		}
	}

.customizer-preview .highlight-toggle {
	text-align: right;
	font-size: 0.8em;
}

.customizer-preview .grid-preview {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;

	> .cell {
		font-size: 1.5em;
		line-height: 2em;
	}

	> .cell.single-char {
		text-align: center;
		box-sizing: border-box;
		border: 0.5px solid transparent;
		width: 6.24%;
		flex-shrink: 0;
		flex-grow: 1;
		transition:
			transform 0.25s,
			border-color 0.25s;
		background: chroma.$dark1;
		cursor: crosshair;

		&:hover {
			position: relative;
			transform: scale(2);
			z-index: 1;
			box-shadow: 0 0 0.25em dark1;
			border-color: color.change(chroma.$light1, $alpha: 0.25);
		}
	}

	> .cell.code-sample {
		width: 100%;
		flex-shrink: 0;
		flex-grow: 1;
		display: flex;

		&.excluded {
			opacity: 0.25;
		}

		> .header {
			font-size: 0.7em;
			box-sizing: border-box;
			padding: 0 1ch;
			min-width: 4em;
			flex: 1;
			text-align: left;
		}

		> pre {
			flex: 7;
			margin: 0;
			font-size: 0.75em;
			text-shadow: 0 0 1px chroma.$dark1;

			&.wd-600 {
				font-size: math.div(0.75em, 1.2);
			}
		}

		&.ignore-highlight > pre {
			.token.dim,
			.highlight {
				color: chroma.$light2;
			}
		}

		&.display-highlight > pre span.highlight {
			display: inline-block;
			line-height: 1;
			text-shadow: none;
			transition:
				transform 0.25s,
				border-color 0.25s;
			cursor: crosshair;

			&:hover {
				position: relative;
				z-index: 1;
				transform: scale(3);
				background: chroma.$dark1;
				border: 0.333px solid color.change(chroma.$light1, $alpha: 0.25);
				padding: 0.25em 0.5em;
				margin: calc(-0.333px - 0.25em) calc(-0.333px - 0.5em);
			}
		}
	}
}

.customizer-body.ligation-sampler {
	.sample-text {
		font-size: 2em;
	}

	@media (max-width: metrics.sectionTotalWidthChars(92, 1rem)) {
		.sample-text {
			font-size: 1.5em;
		}
	}

	@media (max-width: metrics.sectionTotalWidthChars(76, 1rem)) {
		.sample-text {
			font-size: 1.25em;
		}
	}

	.rank-0 {
		color: color.mix(chroma.$light1, chroma.$dark1, 25%);
	}

	.rank-2,
	.rank-3 {
		color: chroma.$accent1;
	}
}

.customizer.popup-background {
	position: fixed;
	z-index: 200;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: color.adjust($color: chroma.$dark1, $alpha: -0.125);
	backdrop-filter: blur(0.5rem);
}
.customizer.popup {
	position: fixed;
	z-index: 201;
	top: 25%;
	bottom: 25%;
	left: 25%;
	right: 25%;
	background: chroma.$dark1;
	border: 1px solid color.change(chroma.$light1, $alpha: 0.25);
	padding: 1rem;

	> h2 {
		margin: 0 0 1rem 0;
		font-size: 1.5rem;
	}
	> .inner {
		width: auto;
		display: block;
		position: absolute;
		left: 1rem;
		right: 1rem;
		bottom: 4rem;
		top: 3.5rem;
		> textarea {
			width: 100%;
			height: 100%;
		}
	}
	> input {
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		width: 5rem;
	}
}

.customizer .style-matcher-cv-panel {
	display: flex;
	flex-wrap: wrap;

	> .cv-item {
		display: block;
		flex: 0;
		width: 2 * character-variant-picker.$smallOptionSize;
		border: 1px solid chroma.$dark3;
		padding: 0.25rem;
		margin: 0.25rem;

		> .target-sample {
			font-size: 2rem;
			height: 2 * character-variant-picker.$smallOptionSize;
			line-height: 2 * character-variant-picker.$smallOptionSize;
			text-align: center;
			border-bottom: 1px solid chroma.$dark3;
			overflow: hidden;
		}
	}
}