nginxconfig.io/resources/scss/_main.scss

@keyframes sk-bounce {
	0%, 100% {
		transform: scale(0.0);
	} 50% {
		transform: scale(1.0);
	}
}

section.tabs {
	margin-bottom: 1rem;

	.nav-tabs {
		.nav-item {
			flex-basis: 50%;

			@include media-breakpoint-down(lg) {
				a {
					border-bottom-left-radius: $border-radius;
					border-bottom-right-radius: $border-radius;
				}

				&:nth-last-child(-n+2) {
					a {
						border-bottom-left-radius: 0;
						border-bottom-right-radius: 0;
					}
				}
			}

			@include media-breakpoint-up(xl) {
				flex: 1 1 auto;
			}

			a {
				cursor: pointer;
				position: relative;
				transition: all 0.25s;
				font-size: 0.9rem;
				white-space: nowrap;

				@include media-breakpoint-up(xl) {
					padding-left: 0;
					padding-right: 0;
					font-size: 1rem;
					text-align: center;
				}

				&.active {
					@include media-breakpoint-down(lg) {
						color: #fff;
						border-color: #343a40;
						background-color: #343a40;

						&.text-muted {
							color: #fff !important;
						}
					}

					@include media-breakpoint-up(xl) {
						border-bottom-color: #fff;
						background-color: transparent;
					}
				}

				&.changed {
					font-weight: 700;

					@include media-breakpoint-up(xl) {
						padding-right: 1rem;
					}

					small {
						display: inline;

						@include media-breakpoint-up(xl) {
							padding-left: 0.1rem;
						}
					}
				}

				small {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					display: none;
					color: #999;

					@include media-breakpoint-down(lg) {
						right: 0.25rem;
					}
				}
			}
		}
	}
	.tab-content {
		padding: 0.5rem 0.75rem;
		border-left: 1px solid #dee2e6;
		border-right: 1px solid #dee2e6;
		border-bottom: 1px solid #dee2e6;
		border-bottom-right-radius: 0.25rem;
		border-bottom-left-radius: 0.25rem;

		.form-group {
			margin-bottom: 0.25rem;

			@include media-breakpoint-only(xs) {
				margin-bottom: 0.5rem;
			}

			.col-form-label {
				@include media-breakpoint-only(xs) {
					font-weight: 700;
					margin-bottom: -0.25rem;
				}
			}

			.form-check {
				padding-top: 0.2rem;

				.form-check-label {
					cursor: pointer;
					user-select: none;
				}
			}

			.form-control.input-changed,
			.form-check.input-changed,
			select.input-changed {
				background-color: #fdffd9;
			}

			.form-check.input-changed {
				border-radius: 0.2rem;
			}

			.btn {
				&.btn-download {
					img {
						vertical-align: -2px;
						margin-right: 0.1rem;
						width: 1rem;
					}
				}
			}
section.loader {
	position: fixed;
	z-index: 1;
	bottom: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;

	.spinner {
		width: 50px;
		height: 50px;

		position: relative;
		margin: 100px auto;

		.double-bounce1,
		.double-bounce2 {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #999;
			opacity: 0.6;
			position: absolute;
			top: 0;
			left: 0;
			animation: sk-bounce 2.0s infinite ease-in-out;
		}

		.double-bounce2 {
			animation-delay: -1.0s;
		}
	}
}

main {
	flex: 1 1 auto;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;

	&.active {
		opacity: 1;
	}

	.commands {
		margin-bottom: 1rem;
	}

	.file {
		margin-bottom: 2rem;

		.btn-clipboard {
			font-size: 0;
			padding: 0.2rem 0.4rem 0.05rem;
			vertical-align: text-bottom;
			float: right;
		}
	}

	.commands,
	.file .code {
		overflow-x: auto;
		font-size: 0.75rem;
		line-height: 1.25;
		background-color: #f8f8f8;

		pre {
			margin-bottom: 0;
			font-size: inherit;

			code {
				display: block;
				padding: 0.6rem;
				-moz-tab-size: 4;
				tab-size: 4;
				overflow: visible;
				overflow-x: visible;
			}
		}
	}
}