nodebb-theme-rubyonyx/modules/composer.less

Ruby Theme for Onyx Hub

@topbarHeight: 50px;

.composer {
	.no-select;

	position: fixed;
	bottom: 0px;

	right: 0px;
	width: 100%;
	height: 50%;

	background: rgb(224, 224, 224);
	background: rgba(224, 224, 224, 0.95);
	visibility: hidden;

	.composer-container {
		min-height: 50px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.title-container {
		margin-top: 10px;
		padding-left: 8px;
		padding-right: 8px;
		.title {
			display: block;
			font-size: 14px;
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
		}
	}

	.category-tag-row {
		margin: 5px 0;

		.tags-container {
			.bootstrap-tagsinput {
				width:100%;
				margin-bottom: 0px;
				input {
					height:28px;
				}
			}
		}
	}

	.write-preview-container {
		height:100%;
		margin: 0 0;
		padding-bottom: 10px;
		>div {
			height:100%;
		}
	}

	.write, .preview  {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		font-size: 14px;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		resize:none;
		overflow: auto;
	}

	.preview {
		overflow-y: auto;
	}

	.formatting-bar {
		margin: 5px 0;
		padding: 0px 8px;
		span {
			color: #000;
		}

		.spacer {
			&:before {
				content: ' | ';
				color: @gray-light;
			}
		}
	}

	.resizer {
		position: absolute;
		width: 100%;
		top: 10px;
		.pointer;

		.trigger {
			position: relative;
			display: block;
			height: 10px;
			width: 50px;
			top: -15px;
			margin: 0 auto;

			background: #efefef;
			border: 1px solid #999;
			.border-radius(2px);

			i {
				position:relative;
				top:-9px;
				font-size: 11px;
				color: #666;
			}
		}
	}

	.imagedrop {
		position: absolute;
		top: 250px;
		text-align: center;
		font-size: 24px;
		color: #999;
		width: 100%;
		display: none;
	}

  .topic-thumb-container {
    margin-top: 5px;
    margin-left: 8px;
    margin-right: 8px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
  }

  .topic-thumb-btn {
    cursor: hand;
    cursor: pointer;
  }

  .topic-thumb-toggle-btn {
	position: absolute;
	right: 30px;
	top: 22px;
  }

  .topic-thumb-preview {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px
  }

  .topic-thumb-ctrl.form-group {
    display: inline-block;
    vertical-align: -50% !important;
  }
}

@media (max-width: 767px) {
	.composer {
		width: 100%;
		background: rgba(224, 224, 224, 1);
	}

	.resizer {
		visibility: hidden;
	}
}