NodeBB/public/scss/admin/admin.scss

@import "fonts";
@import "mixins";
@import "common";

@import "sidebar";
@import "./mobile";

@import "./general/dashboard";
@import "./general/navigation";
@import "./manage/categories";
@import "./manage/privileges";
@import "./manage/tags";
@import "./manage/groups";
@import "./settings/api";
@import "./appearance/customise";
@import "./extend/plugins";
@import "./extend/widgets";
@import "settings";

@import "./modules/alerts";
@import "./modules/selectable";
@import "./modules/nprogress";
@import "./modules/search";

body {
	overflow-y: scroll;
}

.admin {
	.acp-page-container {
		max-width: 800px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: $spacer * 1.5;
		padding: $spacer * 1.5;
		padding-top: 0;
	}
	.acp-page-main-header {
		background-color: white;
	}

	.settings, .categories, .category, .admins-mods {
		hr {
			color: $gray-500;
		}
	}

	.form-control::placeholder, .bootstrap-tagsinput::placeholder {
		color: $gray-500 !important;
	}

	// .floating-button can either be a container or the button itself
	.floating-button {
		position: fixed;
		right: 30px;
		bottom: 30px;
		z-index: 2;
		max-width: 56px;

		button {
			&.primary {
				background: $primary !important;
			}

			&.success {
				background: $success !important;
			}

			&:not(:last-child) {
				margin-bottom: 2rem;
			}
		}
	}
	button.floating-button {
		background: $primary !important;
	}

	@mixin acp-panel-heading() {
		padding: 7px 14px;
		border: 0;
		@include box-header-font;
	}

	.card:not([data-container-html]) {
		background-color: #FFF;
		box-sizing: border-box;
		border-radius: 3px;
		border-width: 0px;
		box-shadow: 0px 1px 3px 0px rgba(165, 165, 165, 0.75);
		margin-bottom: 20px;

		>.card-header {
			@include acp-panel-heading;
			background: #fefefe;
			color: #333;
		}

		&.card-danger >.card-header {
			@include acp-panel-heading;
		}
	}

	.icon-container {
		.fa-nbb-none {
			border: 1px dotted black;
		}
		.nbb-fa-icons {
			margin: 0;
			i {
				width: 36px;
				height: 36px;
				cursor: pointer;
				line-height: 36px;
				text-align: center;
				color: $gray-800;
				margin: 4px;

				&:hover, &.selected {
					background: $primary;
					color: white;
				}
			}
		}
	}

	#taskbar {
		display: none; /* not sure why I have to do this, but it only seems to show up on prod */
	}

	/* Allows the autocomplete dropbox to appear on top of a modal's backdrop */
	.ui-autocomplete {
		z-index: $zindex-popover;
	}

	.bootstrap-tagsinput {
		box-shadow: $input-box-shadow;
		width: 100%;

		input {
			font-size: 0.875rem;
			width: 64px;
			padding: 0;
		}
	}
}

.dropdown-left .dropdown-menu {
	--bs-position: start;
}
.dropdown-right .dropdown-menu {
	--bs-position: end;
}

[component="category-selector"] {
	.category-dropdown-menu {
		max-height: 500px;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

.table-reordering {
	tr:hover {
		cursor: move;
	}
}

.privilege-table {
	th {
		font-size: 10px;
	}

	img {
		max-width: 24px;
		max-height: 24px;
	}
}

* > .checkbox:first-child {
	margin-top: 0px;
}

.ui-selectable-helper {
	border: 1px dashed $success;
	background: lighten($success, 10%);
	opacity: 0.5;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

#save {
	transition: background-color 500ms linear;

	&.saved {
		background-color: $success;

		i {
			@include fa-icon-solid($fa-var-check);
		}
	}
}