nodebb/public/less/admin/admin.less

@import "bootstrap/less/bootstrap";
@import "./paper/variables";
@import "./paper/bootswatch";
@import "./mixins";
@import "./vars";

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

@import "./general/dashboard";
@import "./general/navigation";
@import "./manage/categories";
@import "./manage/privileges";
@import "./manage/tags";
@import "./manage/groups";
@import "./manage/registration";
@import "./manage/users";
@import "./manage/admins-mods";
@import "./appearance/customise";
@import "./appearance/themes";
@import "./extend/plugins";
@import "./extend/rewards";
@import "./extend/widgets";
@import "./advanced/database";
@import "./advanced/events";
@import "./advanced/logs";
@import "./advanced/errors";
@import "./advanced/hooks";
@import "./development/info";
@import "./settings";

@import "../flags";

@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;
		margin-bottom: 50px;
	}

	label {
		font-weight: 700;
		height: auto;
	}


	.btn {
		border-radius: 0;
	}

	.btn-link {
		color: @link-color;
	}

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

		button {
			&.primary {
				background: @brand-primary !important;
			}

			&.success {
				background: @brand-success !important;
			}

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

	.user-img {
		width:24px;
		height:24px;
	}

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

		.box-header-font;
		color: #fff;
	}

	#breadcrumbs {
		cursor: default;
	}

	.acp-panel-heading {
		padding: 7px 14px;
		border: 0;
		.box-header-font;
	}

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

		&.panel-default >.panel-heading {
			.acp-panel-heading;
			background: #fefefe;
			color: #333;
		}

		&.panel-danger >.panel-heading {
			.acp-panel-heading;
		}
	}

	.nav-header {
		.box-header-font
	}

	.icon-container {
		.row {
			margin: 0;
			i {
				width:20px;
				height:20px;
				margin: 1px;
				.pointer;
				line-height: 20px;
				text-align: center;
				color: @gray-dark;

				&:hover, &.selected {
					background: @brand-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 {
        margin-top: 0;
        margin-bottom: 0;

        >li {
            >a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

            >a:hover, >a:focus {
                color: @gray-dark;
                background-color: @gray-light;
            }

            >#reconnect {
                color: @gray-light;
            }

            >#reconnect:focus, >#reconnect:hover {
                color: @gray-light;
                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;
	}
}

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

	h4 {
		.pointer;
	}
}

.category-preview {
	.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;
	}
}
[component="category-selector"] {
	.fa-stack {
		border-radius: 50%;
	}
	.category-dropdown-menu {
		max-height: 400px;
		overflow-y: auto;
	}
}

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

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

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

.mdl-switch.is-checked .mdl-switch__ripple-container {
	cursor: pointer !important;
}

.mdl-switch.is-checked .mdl-switch__thumb {
	background: @brand-primary !important;
}

.mdl-switch.is-checked .mdl-switch__track {
	background: lighten(@brand-primary, 20%) !important;
}

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

[class^="col-"] .mdl-switch__label {
	padding-right: 15px;
}

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

form small {
	color: @gray-light;
}