contentdb/app/scss/components.scss

.ui-autocomplete, ui-front {
	position:absolute;
	cursor:default;
	z-index:1100 !important
}

.ui-autocomplete {
	background: #333 !important;
	border: 1px solid #444 !important;
	overflow-x: hidden;
	overflow-y: auto;
	max-width: 700px;
	max-height: 400px;

	li {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	a {
		display: block;
		padding: 0.3em 0.5em !important;
		margin: 0 !important;
	}

	a:hover, a:focus, li:focus a {
		font-weight: normal !important;
		text-decoration: none;
		padding: 0.3em 0.5em !important;
		margin: 0 !important;
	}
}

.bulletselector {
	height: auto !important;
	display: inline-block !important;
}

.bulletselector input {
	border: none;
	border-radius: 0;
	-moz-border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	width: auto;
	min-width: 50px;
	float: left;
	padding: 4px 0;
	white-space: nowrap;
	background: transparent;
}
.bulletselector .badge {
	float: left;
	padding: 0.4em 0.8em;
	margin-right: 0.3em;
}

.invalid-remaining {
	display: none;
}

.t-mll tr td:not(:first-child) {
	text-align: left;
}

.userlist li.NOT_JOINED {
	color: #aaa !important;
}

.NOT_JOINED a, .NOT_JOINED {
	color: #aaa !important;
}

.ADMIN a, .ADMIN{
	color: #e30 !important;
}

.MODERATOR a, .MODERATOR {
	color: #e90 !important;
}

.APPROVER a, .APPROVER {
	color: #69f !important;
}

.EDITOR a, .EDITOR {
	color: #b6f !important;
}

.TRUSTED_MEMBER a, .TRUSTED_MEMBER {
	color: #2c2 !important;
}

.BOT a, .BOT {
	color: #FFDF00 !important;
}

.wiptopic a:not(.btn) {
	color: #7ac;
}

.discardtopic {
	text-decoration: line-through;
	a:not(.btn) {
		color: #7ac;
	}
	filter: brightness(0.5);
}

.editor-toolbar, .editor-toolbar.fullscreen {
	margin-bottom: 0 !important;
	background-color: #444 !important;
	border: none !important;
	border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
}

.editor-toolbar button {
	color: white;
}

.editor-toolbar button.active, .editor-toolbar button:hover {
	background: #375a7f !important;
	color: white !important;
}

.editor-toolbar.fullscreen::before, .editor-toolbar.fullscreen::after {
	display: none !important;
}

// .CodeMirror {
// 	background-color: #222 !important;
// }

.editor-preview-side, .editor-preview {
	background-color: #222 !important;
	color: white !important;
}

.sortable {
	user-select: none;
}

blockquote {
	padding: 0.5em 1em;
	border-left: 3px solid rgba(255, 255, 255, 0.25);

	& > *:last-child {
		margin-bottom: 0;
	}
}

.tabs-container {
	background: #1c1c1c;
	border-bottom: 1px solid #444;

	.nav {
		border-bottom: none;
	}
}

.toc {
	.nav-link {
		color: #ADADAD;
		padding: 0.25rem 0.5rem;

		&:hover, &.active {
			color: #DDD;
		}
	}

	.nav .nav {
		margin: 0.1em 0 0.1em 0.7rem;
		padding-left: 0.25em;
		border-left: 3px solid rgba(173, 173, 173, 0.25);
	}

	& > .nav > * > .nav {
		margin-bottom: 0.5em;
	}
}


.signin {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;

  	.form-control {
		position: relative;
		box-sizing: border-box;
		height: auto;
		padding: 10px;
		font-size: 16px;
	}

	.form-group {
		margin-bottom: 0;
	}

	.form-control:focus {
		z-index: 2;
	}

	.checkbox {
		font-weight: 400;
	}

	input[type="text"] {
		margin-bottom: -1px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

	input[type="password"] {
		margin-bottom: 10px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
}

.info-sidebar {
	color: #999;

	h3 {
		color: #aaa;
	}

	& > h3:first-of-type {
		margin-top: 0;
	}

	dt {
		font-weight: normal;
	}

	dd {
		font-weight: bold;
		max-height: 300px;
		overflow-y: auto;
	}

	.badge, .list-group-item-action {
		color: #ddd;
	}

	& > .btn.btn-secondary {
		color: #ddd;
		background-color: #303030;
		border-color: #444;

		&:hover {
			background-color: #444;
		}
	}
}

.panel {
	background: #2c2c2c;
	padding: 1.25rem;
	border: 1px solid rgba(0,0,0,0.125);
	border-radius: .25rem;

	& > *:first-child {
		margin-top: 0 !important;
	}

	& > *:last-child {
		margin-bottom: 0 !important;
	}
}