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;

	.sites {
		margin-bottom: 1rem;
	}

	.lead {
		margin-top: 0.5rem;
	}

	.nav-tabs {
		.nav-item {
			&.disabled {
				pointer-events: none;
				user-select: none;
				flex-grow: 0;
				padding: 0 1rem;
				font-weight: 700;
				font-style: italic;
				color: #666;
			}

			.nav-link {
				padding-top: 0.25rem;
				padding-bottom: 0.25rem;
			}
		}

		&.nav-site {
			.nav-item {
				.nav-link {
					&.changed {
						font-weight: normal;
					}

					&.active {
						font-weight: 700;
					}
				}
			}
		}

		&.nav-site-tab {
			.nav-item {
				.nav-link {
					&:hover {
						background-color: #f8f8f8;
					}

					&.active {
						@include media-breakpoint-up(xl) {
							background-color: #f8f8f8;
							border-bottom-color: #f8f8f8;
							background-color: #f8f8f8;
						}
					}
				}
			}
		}

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

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

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

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

			.nav-link {
				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.75rem;
					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;

					small {
						display: inline;

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

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

					@include media-breakpoint-down(lg) {
						right: 0.25rem;
					}
				}

				button.close {
					line-height: 0.8;
				}
			}
		}
	}
	.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;

		&.site-content {
			padding-bottom: 0.75rem;
		}

		&.site-tab-content {
			background-color: #f8f8f8;

			.form-group {
				margin-bottom: 0;

				.form-check {
					// padding-top: 0.25rem;
				}
			}
		}

		.row + .row:not(.form-group) {
			margin-top: 0.5rem;
		}

		.disabled {
			pointer-events: none;
			user-select: none;
			opacity: 0.4;

			.disabled {
				opacity: 1;
			}
		}

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

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

			&:last-child {
				margin-bottom: 0;
			}

			.form-control-sm {
				padding-top: 0;
				padding-bottom: 0;
				margin-bottom: 1px;
			}

			select.form-control-sm {
				height: 24px;
			}

			.col-form-label-sm {
				padding-top: 0;
				padding-bottom: 0;
			}

			.input-group-sm {
				.input-group-text {
					font-size: 0.75rem;
				}
			}

			label {
				margin-bottom: 0;

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

			.form-check {
				font-size: 0;
				padding-bottom: 3px;

				&.form-check-left {
					padding-left: 0;

					.form-check-input {
						position: relative;
						margin-left: 0.25rem;
					}
				}

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

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

	.btn {
		&.btn-download {
			img {
				vertical-align: -1px;
				margin-right: 0.1rem;
				width: 1rem;
			}
		}
	}

	.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;
		border: 1px solid #e8e8e8;

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