mattermost/web/sass-files/sass/partials/_post.scss

.custom-textarea {
	white-space:pre-wrap;
	word-wrap:break-word;
	background:transparent;
	border:1px solid #ccc;
	position:absolute;
	top:0px;
	height:auto;
	resize: none;
	line-height:20px;
	min-height:36px;
	&:focus {
		border-color: #ccc;
		box-shadow: none;
	}
}

.bad-connection {
	background-color: rgb(255, 255, 172) !important;
}

.textarea-div {
	white-space:pre-wrap;
	word-wrap:normal;
	color:rgba(0,0,0,0);
	position:absolute;
	top:0px;
	word-break: break-word;
	left:1px;
	line-height:20px;
	min-height:36px;
	height:auto;
	border:0;
}

body.ios {
	.textarea-div {
		padding: 7px 17px 7px 15px;
		-webkit-overflow-scrolling: auto;
	}
}

.textarea-div::-webkit-scrollbar {
	display:none;
}

.textarea-wrapper {
	position:relative;
	min-height:37px;
}

.date-separator, .new-separator {
	text-align: center;
	height: 2em;
	margin: 0;
	position: relative;
	&:before, &:after {
		content: "";
		height: 1em;
		position: absolute;
		left: 0;
		width: 100%;
		display: none;
	}
	&:before {
		bottom: 0;
	}
	&:after {
		top: 0;
	}
	&.hovered--after {
		&:before {
			background: #f5f5f5;
			display: block;
		}
	}
	&.hovered--before {
		&:after {
			background: #f5f5f5;
			display: block;
		}
	}
	.separator__hr {
		border-color: #ccc;
		margin: 0;
		position: relative;
		z-index: 5;
		top: 1em;
	}
	.separator__text {
		line-height: 2em;
		color: #555;
		background: #FFF;
		display: inline-block;
		padding: 0 1em;
		font-weight: 700;
		@include border-radius(50px);
		position: relative;
		z-index: 5;
		font-size: 13px;
	}
}
.new-separator {
	.separator__hr {
		border-color: #FFAF53;
	}
	.separator__text {
		color: #F80;
		font-weight: normal;
	}
}

.file-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	text-align: center;
	color: #FFF;
	font-size: em(20px);
	font-weight: 600;
	z-index: 6;

	&.right-file-overlay {
		font-size: em(18px);
		.overlay__circle {
			width: 300px;
			height: 300px;
			margin: -150px 0 0 -150px;
		}
		.overlay__files {
			margin: 60px auto 15px;
			width: 150px;
		}
	}

	.overlay__circle {
		background: #111;
		background: rgba(black, 0.7);
		width: 370px;
		height: 370px;
		margin: -185px 0 0 -185px;
		@include border-radius(500px);
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.overlay__files {
		display: block;
		margin: 75px auto 20px;
	}

	.overlay__logo {
		position: absolute;
		left: 50%;
		bottom: 30px;
		margin-left: -50px;
		@include opacity(0.3);
	}

	.fa {
		display: inline-block;
		font-size: 1.1em;
		margin-right: 8px;
	}
}

#post-list {
	.post-list-holder-by-time {
		background: #fff;
		overflow-y: scroll;
		width: 100%;
		padding: 1em 0 0;
		position: relative;
		-webkit-overflow-scrolling: touch;
		&::-webkit-scrollbar {
			width: 0px !important;
		}
		&.inactive {
			display: none;
		}
		&.active {
			display: inline;
		}
	}
	.post-list__table {
		display: table;
		table-layout: fixed;
		width: 100%;
		min-height: 100%;
		height: 100%;
		.post-list__content {
			display: table-cell;
			vertical-align: bottom;
		}
	}
	.more-messages-text {
		margin-top: 2px;
		margin-bottom: 5px;
		display: block;
		text-align: center;
		outline: none;
		border: none;
	}
	.beginning-messages-text {
		margin-top: 2px;
		margin-bottom: 5px;
		display: block;
		text-align: center;
		color: grey;
	}
}

.post-create__container {
	form {
		width: 100%;
		padding: 0 1em;
		margin: 0;
	}
	.post-create-body {
		max-width: 850px;
		padding: 0 0 2px;
		position: relative;
		.post-body__cell {
			vertical-align: top;
			position: relative;
			&.scroll {
				.btn-file {
					right: 15px;
				}
				.custom-textarea {
					padding-right: 43px;
				}
			}
		}
		.send-button {
			display: none;
			cursor: pointer;
			padding-right: 4px;
			width: 45px;
			height: 37px;
			font-size: 18px;
			line-height: 37px;
			vertical-align: bottom;
			text-align: center;
			@include single-transition(all, 0.15s);
			&:active {
				@include opacity(0.75);
			}
		}
		.custom-textarea {
			padding-top: 8px;
			padding-right: 28px;
			max-height: 160px;
			overflow: auto;
			line-height: 1.5;
		}
		.textarea-div {
			padding-top: 8px;
			padding-right: 30px;
			max-height: 160px;
			overflow: auto;
			line-height: 1.5;
		}
		.btn-file {
			right: 0;
			position: absolute;
			top: 1px;
			color: #444;
			@include opacity(0.5);
			@include single-transition(all, 0.15s);
			font-size: 16px;
			padding: 7px 9px 6px;
			&:hover, &:active {
				@include opacity(0.9);
				box-shadow: none;
			}
		}
		textarea {
			box-shadow: none;
		}
	}
	.post-create-footer {
		@include clearfix;
		padding: 0;
		.has-error {
			.control-label {
				font-weight: normal;
				margin-bottom: 0;
			}
		}
		.msg-typing {
			min-height: 20px;
			line-height: 18px;
			display: inline-block;
			font-size: 13px;
			@include opacity(0.7);
		}
	}
}

.post {
	word-wrap: break-word;
	padding: 8px 1em;
	position: relative;
	max-width: 100%;
	@include legacy-pie-clearfix;
	&:hover {
		.post-header .post-header-col.post-header__reply {
			.dropdown, .comment-icon__container {
				@include opacity(1);
			}
		}
		background: #f5f5f5;
	}
	&.current--user {
		.post-body {
			@include border-radius(4px);
			background: rgba(#000, 0.05);
		}
	}
	&.post--comment {
		&.other--root {
			.post-comment {
				border-left: 4px solid #EEE;
				padding: 4px 0 6px 10px;
				margin: 0 0 0 30px;
				@include border-radius(0 4px 4px 0);
			}
			.post-body {
				background: transparent;
				margin: 0;
				padding: 1px 0px;
			}
			&.current--user {
				.post-comment {
					background: #f5f5f5;
				}
			}
		}
		&.same--root {
			.post-body {
				@include border-radius(0 4px 4px 0);
			}
		}
	}
	&.same--root {
		.comment-icon__container {
			@include opacity(0);
		}
		div.post-profile-img__container {
			height: 1px;
			.post-profile-img {
				visibility: hidden;
			}
		}
		.post__content {
			padding: 0;
		}
		.post-body {
			border-left: 4px solid #EEE;
			width: 570px;
			margin-left: 30px;
			padding-left: 10px;
			.post-link {
				display: none;
			}
		}
	}
	&.post--last {
		.post-header {
			.post-header-col.post-header__reply {
				.dropdown-menu {
					top: auto;
					bottom: 25px;
				}
			}
		}
	}
	.post-create-footer {
		padding: 0;
	}
	p {
		margin: 0 0 5px;
		font-size: 0.97em;
		white-space: pre-wrap;
	}

	.post-loading-gif {
		height:10px;
		width:10px;
		margin-top:6px;
	}

	.post-fail {
		color: #D58A8A;
	}

	.post-waiting {
		color: #999;
	}

	.comment-icon__container {
		margin-left: 7px;
		fill: $primary-color;
		.comment-icon {
			display: inline-block;
			top: 3px;
			position: relative;
			margin-right: 3px;
			fill: inherit;
		}
		path {
			fill: inherit;
		}
	}
	> div {
		&.post-profile-img__container {
			float: left;
			.post-profile-img {
				margin-right: 10px;
				@include border-radius(50px);
			}
		}
		&.post__content {
			padding-left: 46px;
			max-width: 100%;
			@include legacy-pie-clearfix;
		}
	}
	.post-image__columns {
		@include legacy-pie-clearfix;
		padding-bottom: 5px;
	}
	.post-info--hidden {
		display: none;
	}
	.post-body {
		position: relative;
		z-index: 1;
		max-width: 100%;
		width: 600px;
		float: left;
		word-wrap: break-word;
		padding: 0.3em 0.5em 0.1em;
		margin: -0.3em 0 0;
		.post-link {
			@include clearfix;
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;
		}
	}
	.create-reply-form-wrap {
		width: 100%;
		margin-top: 5px;
		form {
			padding: 0;
		}
		.comment-btn {
			display: none;
		}
	}
	.post-header {
		position: relative;
		list-style-type: none;
		margin: 0 0 1px;
		padding-left: 0px;
		&.post-header-post {
			position: relative;
			z-index: 1;
			width: 200px;
			text-align: right;
			float: left;
			padding-right: 15px;
		}
		&.post-info {
			.post-profile-time {
				width: 150px;
				display: inline-block;
				margin-left: 50px;
			}
		}
		.post-header-col {
			vertical-align: top;
			display: inline-block;
			margin-right: 10px;
			&.post-header__reply {
				min-width: 70px;
				.dropdown-menu {
					right: 0;
					left: auto;
				}
				.dropdown {
					min-width: 18px;
					display: inline-block;
					@include opacity(0);
				}
				.dropdown-toggle:after {
					content: '[...]';
				}
			}
		}
		.post-profile-time {
			color: #a8adb7;
		}
	}
	.post-comment {
	}
	.web-embed-data {
		padding: 2px 0 0 10px;
		background: #f9f9f9;
		background: rgba(0, 0, 0, 0.05);
		@include border-radius(2px);
		height: 50px;
		overflow: hidden;
		text-overflow: ellipsis;
		.embed-title {
			margin: 3px 0 1px;
			color: #555;
			font-weight: 600;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.embed-description {
			margin: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			color: #888;
		}
		.embed-link {
			display: none;
		}
	}
	.msg-typing {
		margin-top: 2px;
		margin-left: 5px;
		color: #a8adb7;
	}
	.post-grey {
		color:lightgrey;
	}
	.post-reply {
		clear: both;
		width: 100%;
		word-break: break-word;
		.btn-file {
			width: 40px;
		}
	}
}

.bot-indicator {
	background-color: lightgrey;
	border-radius:2px;
	padding-left:2px;
	padding-right:2px;
	font-family:"Courier New"
}