nodebb/public/less/generics.less

.define-if-not-set() {
	@gray-base:              #000;
	@gray-darker:            lighten(@gray-base, 13.5%); // #222
	@gray-dark:              lighten(@gray-base, 20%);   // #333
	@gray:                   lighten(@gray-base, 33.5%); // #555
	@gray-light:             lighten(@gray-base, 46.7%); // #777
	@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

	@brand-primary:         darken(#428bca, 6.5%); // #337ab7
	@brand-success:         #5cb85c;
	@brand-info:            #5bc0de;
	@brand-warning:         #f0ad4e;
	@brand-danger:          #d9534f;
}

.define-if-not-set();

.category-list {
	padding: 0;
	height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
	li {
		.inline-block;
		.pointer;
		padding: 0.5em;
		margin: 0.25em;
		.border-radius(3px);

		&.disabled {
			background-color: #888!important;
			.opacity(0.5);
		}
	}
}

.user-list {
	padding-left: 2rem;
	padding-top: 1rem;

	li {
		.pointer;
		display: inline-block;
		list-style-type: none;
		padding: 0.5rem 1rem;

		&:hover {
			background: #eee;
		}

		.avatar  {
			float: left;
			margin-right: 1rem;
		}

		span {
			vertical-align: middle;
			display: inline-block;
		}
	}
}

.user-icon {
	display: inline-block;
	text-align: center;
	color: @gray-lighter;
	font-weight: normal;

	&:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
}

.avatar {
	/* Contains the user icon class as a mixin, so there's no need to include that in the template */
	.user-icon;

	&.avatar-sm {
		width: 24px;
		height: 24px;
		.user-icon-style(24px, 1.5rem);
	}

	&.avatar-lg {
		width: 128px;
		height: 128px;
		.user-icon-style(128px, 7.5rem);
	}

	&.avatar-rounded {
		border-radius: 50%;
	}
}