espterm-front-end/sass/pages/_term.scss

body.term {
	#content {
		padding-left: 0;
		padding-right: 0;

		h1 {
			font-size: fsize(5);
			@include media($phone) {
				font-size: fsize(3);
			}
		}

		// longer duration to load everything in background nicely
		transition: opacity 0.25s ease-in;
	}
}

#screen {
	white-space: nowrap;
	background: #111213;
	display: inline-block;
	border: 2px solid #3983CD;
	position: relative;
	line-height: 0;

	cursor: default;

	canvas {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}

	canvas.selectable {
		cursor: text;
	}

	.screen-margin {
		position: absolute;
		// #111213 as rgb
		background: rgba(17, 18, 19, 0.2);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		pointer-events: none;

		&.top {
			top: 0;
			left: 0;
			right: 0;
			height: 6px;
		}
		&.left, &.right {
			top: 6px;
			left: 0;
			bottom: 0;
			width: 6px;
		}
		&.right {
			left: auto;
			right: 0;
		}
		&.bottom {
			left: 6px;
			right: 6px;
			bottom: 0;
			height: 6px;
		}
	}

	@include noselect();

	// Dummy input field used to open soft keyboard
	#softkb-input {
		position: absolute;
		// compensate for padding
		top: 6px;
		left: 6px;
		width: 1em;
		height: 1em;
		background: none;
		border: none;
		resize: none;
		overflow: hidden;
		opacity: 0;
		outline: 0 none !important;
		caret-color: transparent;
		color: transparent;
		@include click-through;

		// iOS Safari still shows a caret regardless of the above, so set the font
		// size as small as it can be (will show up as a blinking blue pixel)
		font-size: 1px;
	}

	#touch-select-menu {
		display: none;
		position: absolute;
		// compensate for padding
		top: 6px;
		left: 6px;

		&.open {
			display: block;
		}
	}

	.debug-canvas {
		position: absolute;
		top: 6px;
		left: 6px;
		pointer-events: none;
	}

	.debug-toolbar {
		line-height: 1.5;
		text-align: left;
		padding: 6px;
		font-family: $screen-stack;
		font-size: 12px;
		white-space: normal;

		.heartbeat {
			float: right;
			font-family: $font-stack;

			&.beat {
				animation-name: heartbeat-beat;
				animation-duration: 2s;
				animation-fill-mode: forwards;

				@keyframes heartbeat-beat {
					0% {
						transform: scale(1);
						animation-timing-function: ease-out;
					}
					5% {
						transform: scale(1.2);
						animation-timing-function: linear;
					}
					100% {
						transform: scale(0);
						opacity: 0;
					}
				}
			}
		}
	}
}

#action-buttons {
	margin-top: 10px;
	white-space: nowrap;

	button {
		margin: 0 3px;
		padding: 8px 5px;
		min-width: 62px;
		cursor: pointer;
		font-weight: bold;

		&:focus {
			outline: 0 none !important;
		}

		&.inactive {
			opacity: 0.2;
		}
	}
}

#load-failed {
	color: red;
	font-size: 18px;
	font-weight: bold;
	margin: 20px 15px;
}

#screen.failed {
	canvas, .screen-margin {
		display: none;
	}
}

#term-nav {
	padding-top: 1.5em;
	text-align: center;

	a {
		text-decoration: none;
		padding: 5px 5px;
		border-radius: 2px;
		position: relative;

		&, &:visited, &:link {
			color: #336085;
		}

		&:hover {
			color: #5abfff;
			background: #1b273c;
		}

		&:active {
			top: 1px;
		}

		i::before {
			display: inline;
		}

		span {
			margin-left: .2em;
		}

		@include media($phone) {
			span {
				display: none;
			}

			font-size: 130%;
			padding: 6px;
		}
	}

	.icn-keyboard {
		text-decoration: none;
		font-size: 130%; // make it bigger - icon is too small to be recognizable
		vertical-align: middle;
	}
}

#term-wrap {
	text-align: center;
}

#fu_modal {
	align-items: flex-start;
}

#fu_form {
	padding: dist(0);
	margin-top: 100px; // offset

	z-index: 1000;

	label {
		width: 12em;
		display: inline-block;
	}

	input[type="number"], select {
		width: 10em;
	}

	textarea {
		width: 100%;
		min-height: 8em;
		margin-top: dist(-1);
		resize: vertical;
	}

	.fu-buttons {
		text-align: center;
		padding: dist(-2);
		margin-top: dist(-2);
		border-radius: 3px;
	}

	.fu-prog-box {
		display: none;
	}

	&.busy {
		background: rgba($c-modal-bg, .3);
		border-left-color: rgba($c-form-highlight, .3);
		border-right-color: rgba($c-form-highlight, .3);

		.fu-content {
			@include click-through;
			opacity: .3;
		}

		.fu-buttons {
			text-align: left;
			background: $c-modal-bg;
			border: 1px solid $c-form-highlight;
		}

		.fu-prog-box {
			display: inline-block;
		}
	}
}

// shortcut bar on iOS
#keyboard-shortcut-bar {
	border-radius: 4px;
	width: calc(100vw - 20px);
	background: #d1d5db;
	padding: 5px 10px;
	overflow-x: auto;
	margin: 6px;

	&:not(.open) {
		display: none;
	}

	.shortcut-button {
		background: #fff;
		color: #000;
		padding: 10px 20px;
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
		text-shadow: none;
		border-radius: 4px;
		margin: 0 10px 0 0;
		font-family: -apple-system, sans-serif;
		min-width: 2em;

		&.modifier:not(.enabled) {
			background: #9ea6b1;
			color: #000;
		}
	}
}

body.pseudo-fullscreen {
	#screen .screen-margin,
	#keyboard-shortcut-bar {
		display: none;
	}
	#outer {
		position: static;
	}
	#screen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
	}
	#screen canvas {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	#term-nav {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 98;
		height: 24px;
		padding: 0;
	}
}

// Attributes
.bold {
	font-weight: bold !important;
}

.faint span { // content of faint is wrapped in span
	opacity: 0.6;
}

.italic {
	font-style: italic;
}

.under {
	text-decoration: underline;
}

.strike {
	text-decoration: line-through;
}

.underline.strike {
	text-decoration: underline line-through;
}

.blink-hide .blink {
	color: transparent;
}
//

.color-example {
	font-family: monospace;
	font-size: 14pt;
	padding: 4px 6px;
}

.preset {
	cursor: pointer;
	font-family: monospace;
	font-size: 14pt;
}

.Row.color-preview {
	label {
		align-self: center;
	}

	@include media($phone) {
		font-size: 12pt;
		align-items: flex-start;

		label {
			align-self: flex-start;
		}
	}

	.colorprev {
		font-family: monospace;
		font-size: 14pt;
		display:block;
		margin: 0;
		cursor: pointer;
	}
}

#color-example {
	display: inline-block;
	padding: 5px;
}

.theme-nav-btn {
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #4c4c4c;
	color: #eaeaea;
	margin: 5px;
	border-radius: 5px;

	@include noselect();

	cursor: pointer;
	position: relative;
	&:active {
		top: 1px;
	}
}