nodebb/public/scss/admin/admin.scss

@import "./mixins";

@import "./header";
@import "./mobile";

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

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

body {
	overflow-y: scroll;
}

.admin {
	background: #fff;
	font-size: 14px;

	h1 {
		font-size: 35px;
	}
	.form-label, .form-check-label {
		font-weight: 700;
	}
	.btn {
		border-radius: 0;
	}
	.btn-outline-secondary {
		color: $gray-700;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important;
		&:hover {
			background-color: $gray-200 !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;
	}

	.nodebb-logo {
		img {
			height: 31px;
			margin-top: -8px;
			margin-left: -7px;
			vertical-align: -43%;
		}

		@include box-header-font;
		color: #fff;
	}

	#breadcrumbs {
		cursor: default;
	}

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

	.nav-header {
		@include box-header-font;
	}

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

    .navbar-static-top, .navbar-fixed-top {
        box-shadow: 0px -3px 12px rgba(0, 0, 0, 0.5);
    }

    .navbar-header > .navbar-toggle {
        margin-right: 8px;
    }

    .navbar-nav {
	    >li {
            >#reconnect {
                color: $gray-700;
            }

            >#reconnect:focus, >#reconnect:hover {
                color: $gray-700;
                background-color: transparent;
            }
        }
    }

	#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 {
		width: 100%;
		border: 0;
		box-shadow: none;
		padding-left: 0;

		input {
			width: 100%;
			margin-left: 1px;
			margin-top: 9px;
			border-bottom: 1px dotted #ccc !important;
			padding-bottom: 5px;
			padding-left: 0;
		}
	}
}

// Allowing text to the right of an image-type brand
// See: https://github.com/twbs/bootstrap/commit/8e2348e9eda51296eb680192379ab37f10355ca3
.navbar-brand > img {
  display: inline-block;
}

.category-settings-form {
	h3 {
		margin-top: 0;
		cursor: pointer;
	}

	h4 {
		cursor: pointer;
	}
}

.category-preview {
	cursor: pointer;
	width: 100%;
	height: 100px;
	text-align: center;
	color: white;
	margin-top: 0;

	.icon {
		width: 30px;
		height: 30px;
		line-height: 40px;
		display: inline-block;
		margin: 35px 5px 0 5px;
	}
}

.category-dropdown-container.right .category-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;
}

form small {
	color: $gray-700;
}

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