nodebb-widget-html-extended/public/less/fdb.less

Enhanced HTML widget for NodeBB with slider functionality

.fdb-block {
	&.category-header-block {
		h1 {
			font-weight:600;
			font-family: "Asap", sans-serif;
			font-size: 30px;
			color: #6c757d;
		}
		p {
			font-family: "Sarabun", sans-serif;
		}
	}
	.lead {
		font-size: 20px;
	}
	margin: 0;
    /*font-size: 1em;*/
    font-weight: 400;
    /*line-height: 1.5;*/
    color: #444444;
    text-align: left;
    background-color: #fff;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
	padding: 3.5rem 0;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	background-color: #FFFFFF;

	.container {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.container.bg-r {
		background-position: right;
	}
	.fdb-box {
		background: #FFFFFF;
		padding: 3.75rem 2.5rem;
		overflow: hidden;
		color: #444444;
		border-radius: 0.25rem;
		box-shadow: 0 0.3125rem 0.875rem 0 rgba(129, 129, 129, 0.2) !important;
	}
	.fdb-touch {
		border-top: solid 0.3125rem #329ef7;
		z-index: 2;
	}
	img {
		&+p {
			margin-top: 1.25rem;
		}
		&+h3 {
			margin-top: 1.25rem;
		}
		&+h4 {
			margin-top: 1.25rem;
		}
		&+h1 {
			margin-top: 2.5rem;
		}
		&+h2 {
			margin-top: 2.5rem;
		}
	}
	.col-fill-left {
		width: 50%;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		z-index: 1;
		&+div {
			position: relative;
			z-index: 2;
		}
	}
	.col-fill-right {
		width: 50%;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		z-index: 1;
		&+div {
			position: relative;
			z-index: 2;
		}
	}
	img.fdb-icon {
		width: auto;
		width: 3.75rem;
	}
	img.fdb-icon-round {
		width: auto;
		width: 3.75rem;
	}
	.row-100 {
		height: 6.25rem;
		width: 100%;
	}
	.row-50 {
		height: 3.125rem;
		width: 100%;
	}
	.row-70 {
		height: 4.375rem;
		width: 100%;
	}
	.justify-content-center {
		display: flex!important;
		flex-wrap: wrap;
		justify-content: center!important;
		-ms-flex-pack: center!important;
	}
	.align-items-center {
		display: flex!important;
		-ms-flex-align: center!important;
		align-items: center!important;
	}
	.btn-dark {
		color: #fff;
		background-color: #343a40;
		border-color: #343a40;
		&:hover {
			color: #fff;
			background-color: #23272b;
			border-color: #1d2124;
		}
		&:focus {
			box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
		}
		&:disabled {
			color: #fff;
			background-color: #343a40;
			border-color: #343a40;
		}
		&:not(:disabled) {
			&:not(.disabled) {
				&:active {
					color: #fff;
					background-color: #1d2124;
					border-color: #171a1d;
					&:focus {
						box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
					}
				}
			}
			&:not(.disabled).active {
				color: #fff;
				background-color: #1d2124;
				border-color: #171a1d;
				&:focus {
					box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
				}
			}
		}
	}
	.btn-dark.focus {
		box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
	}
	.btn-dark.disabled {
		color: #fff;
		background-color: #343a40;
		border-color: #343a40;
	}
	.show {
		>.btn-dark.dropdown-toggle {
			color: #fff;
			background-color: #1d2124;
			border-color: #171a1d;
			&:focus {
				box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
			}
		}
	}
}
.fdb-block.fdb-viewport {
	min-height: calc(100% - 2 * 3.5rem);
	.container {
		min-height: calc(100% - 2 * 3.5rem);
	}
}
.fdb-block.fdb-image-bg {
	color: #f2f2f2;
}