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;
	padding: 6px;
	display: inline-block;
	border: 2px solid #3983CD;
	position: relative;
	line-height: 0;

	cursor: default;

	canvas.selectable {
		cursor: text;
	}

	@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;
		}
	}
}

#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;
		}
	}
}

#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: 8em;
		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;
		}
	}
}

// Tango
.theme-0 {
	$term-colors:
			#111213, #CC0000, #4E9A06, #C4A000, #3465A4, #75507B, #06989A, #D3D7CF,
			#555753, #EF2929, #8AE234, #FCE94F, #729FCF, #AD7FA8, #34E2E2, #EEEEEC;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors, $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// Linux
.theme-1 {
	$term-colors:
			#000000, #aa0000, #00aa00, #aa5500, #0000aa, #aa00aa, #00aaaa, #aaaaaa,
			#555555, #ff5555, #55ff55, #ffff55, #5555ff, #ff55ff, #55ffff, #ffffff;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors, $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// xterm
.theme-2 {
	$term-colors:
			#000000, #cd0000, #00cd00, #cdcd00, #0000ee, #cd00cd, #00cdcd, #e5e5e5,
			#7f7f7f, #ff0000, #00ff00, #ffff00, #5c5cff, #ff00ff, #00ffff, #ffffff;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors,  $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// rxvt
.theme-3 {
	$term-colors:
			#000000, #cd0000, #00cd00, #cdcd00, #0000cd, #cd00cd, #00cdcd, #faebd7,
			#404040, #ff0000, #00ff00, #ffff00, #0000ff, #ff00ff, #00ffff, #ffffff;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors,  $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// Ambience
.theme-4 {
	$term-colors:
			#2e3436, #cc0000, #4e9a06, #c4a000, #3465a4, #75507b, #06989a, #d3d7cf,
			#555753, #ef2929, #8ae234, #fce94f, #729fcf, #ad7fa8, #34e2e2, #eeeeec;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors,  $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// Solarized
.theme-5 {
	$term-colors:
			#073642, #dc322f, #859900, #b58900, #268bd2, #d33682, #2aa198, #eee8d5,
			#002b36, #cb4b16, #586e75, #657b83, #839496, #6c71c4, #93a1a1, #fdf6e3;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors,  $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// 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;
}
//

.Row.color-preview {
	font-family: monospace;
	font-size: 16pt;
	display: block;
	margin-bottom: 0;

	padding-left: $form-label-w;

	@include media($phone) {
		padding-left: 0;
		font-size: 14pt;
	}

	.colorprev {
		display:block;
		margin: 0;
		cursor: pointer;
	}
}

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