main/public_html/css/container.css

/* Card container */
#CONTAINER.message{
	height: calc( 100% - 6.3em );

	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

	#CONTAINER.message div,
	#CONTAINER.message div[data-noauthor='1']{ /* Message item */
		display: inline-block;
		position: relative;
			top: 0;
			left: 0;
			height: auto;

		margin: 0 1.5em;
		margin-top: 2.5em;
		padding: 1em;

		align-self: flex-start;

		border-radius: 3px;

		background-color: #fff;

		color: #222;
	}

	#CONTAINER.message div[data-noauthor='0']{
		margin-top: .5em;
	}

	#CONTAINER.message div.me{ /* Message Item (self) */
		/* background: #13d89d; */
		align-self: flex-end;
		margin: 1em 1.5em;
	}

	#CONTAINER.message div.end-pad{
		padding: 0;
		opacity: 0;
	}

		#CONTAINER.message div span.author{ /* Message author */
			display: block;
			position: absolute;
				top: -1.8em;
				left: .5em;

			background: #eee;

			color: #888;
		}

		#CONTAINER.message div.me span.author{ /* Hide message author if self */
			display: none;
		}

		#CONTAINER.message div span.date{ /* Message date */
			display: block;
			position: relative;

			margin-top: 1em;

			color: #888;
			font-size: .8em;
		}

		#CONTAINER.message div span.del, /* Del btn */
		#CONTAINER.message div span.upd{ /* Update btn */
			display: block;
			position: absolute;
				top: calc( 100% + .2em );
				left: calc( 100% - 1.5em );
				width: 1em;
				height: 1em;

			background: url('/image/container/del-msg.svg@777777') center center no-repeat;
			background-size: 80% auto;

			cursor: pointer;
		}

		#CONTAINER.message div span.upd{
			left: calc( 100% - 3em );
			background-image: url('/image/container/edit-msg.svg@777777');
		}

		#CONTAINER.message div span.del:hover{
			background-image: url('/image/container/del-msg.svg@e33222')
		}

		#CONTAINER.message div span.upd:hover{
			background-image: url('/image/container/edit-msg.svg@2ab1dd')
		}

		#CONTAINER.message div span span.code{ /* Code block */
			display: inline-block;
			position: relative;

			padding: .2em .3em;

			border-radius: 3px;

			background: #f0f0f0;

			font-family: 'Liberation Mono';
			font-size: .9em;

		}

		#CONTAINER.message div span span.utf8{ /* Smileys */
			font-family: 'Liberation Mono';
			font-size: 1.3em;

			color: #ea921f;
		}

		#CONTAINER.message div span span.utf8.bl{ color: #338be0; }
		#CONTAINER.message div span span.utf8.br{ color: #773c22; }


	#CONTAINER.message form.msg-input{ /* Message Input */
		display: block;
		position: fixed;
			top: calc( 100% - 3em );
			left: 15em;
			width: calc( 100% - 15em - 2*1px );
			height: 3em;

		border-top: 1px solid #ddd;

		background: #fff;

		overflow: hidden;

		transition: left  .2s ease-in-out,
					width .2s ease-in-out;
	}

	#WRAPPER.min #CONTAINER.message form.msg-input{
		left: 3.5em;
		width: calc( 100% - 3.5em - 2*1px );
	}

	#CONTAINER.message form.msg-input input{ /* form Input */
		display: inline-block;
		position: absolute;
			top: 0;
			left: 0;
			width: calc( 100% - 2em - 3em );
			height: calc( 100% - 2*.5em );

		padding: .5em 1em;

		border: none;

		background: url('/image/loader/send-input.svg') -1em center no-repeat;
		background-size: 1em auto;

		font-size: inherit;
		font-family: inherit;

		transition: all .2s ease-in-out;
	}

	#CONTAINER.message form.msg-input input.loading{ /* Loading input */
		width: calc( 100% - 2em - 3em - 2.5em );
		padding-left: 3em;

		background-position: 1em center;
	}

	#CONTAINER.message form.msg-input button{ /* form send button */
		display: inline-block;
		position: absolute;
			top: 0;
			left: calc( 100% - 3em );
			width: 3em;
			height: 3em;

		background: url('/image/container/send-msg.svg@777777') center center no-repeat;
		background-size: 50%;

		border: none;

		font-size: inherit;

		cursor: pointer;
	}

	#CONTAINER.message form.msg-input button:hover{
		background-image: url('/image/container/send-msg.svg@000000');
	}