discord-client/webpack/scss/container.scss

@import 'constants';

@keyframes slide-list{
	from{ transform: translateY(-1em); }
	to{   transform: translateY(0);    }
}


#WRAPPER > div.container{

	display: block;
	position: absolute;
		top: 0;
		left: #{$menu-width + $dialog-width};
		width: calc( 100% - #{$menu-width + $dialog-width} );
		height: 100%;

	background-color: $container-bg;


	/* (1) Container HEADER */
	& > div.header{
		display: flex;
		position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: $header-height;

		border-bottom: #{$bb-height} solid darken($container-bg, 5%);
		box-shadow: 0 #{$bb-offset - $bb-height} 0 darken($container-bg, 2%);

		z-index: 200;

		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;

		// {1} Title //
		& > div.title{
			display: inline-block;
			position: relative;

			padding: .2em .5em;
			padding-left: 1.3em;
			margin-left: .7em;

			font-weight: bold;

			background: url('../asset/svg/dialog.text.svg') left center no-repeat;
			background-size: auto 60%;

			align-self: center;
		}

	}

	/* (2) Container BODY */
	& > div.body{
		display: flex;
		position: absolute;
			top: calc( #{$header-height} + #{$bb-offset} );
			left: 0;
			width: 100%;
			height: calc( 100% - #{$header-height} - #{$bb-offset} );

		background-color: $input-bg;

		flex-direction:  column;
		justify-content: flex-end;
		align-items:     stretch;
		flex-wrap:       nowrap;

		overflow: hidden;

		z-index: 100;

		section.message-stack{

			flex: 0 1 100%;

			display: flex;
			position: relative;
				height: calc( 100% - #{$input-height} - 1px );

			// border-bottom: 1px solid #474a4f;
			// box-shadow: 0 1px 1px 0 #474a4f;
			box-shadow: calc( 100vw - #{$menu-width} - #{$dialog-width} - 1.2em) 0 0 1px #{$input-bg},
						1.2em 0 0 1px #474a4f;

			background-color: $container-bg;

			flex-direction: column;
			flex-wrap: nowrap;

			overflow: auto;

			// {1} Message Container //
			div.message{

				display: flex;
				position: relative;

				margin: 0 1.3em;
				padding: 1em 0;

				&:not(:last-child){ border-bottom: 1px solid #474a4f; }

				flex-direction:  row;
				justify-content: stretch;
				align-items:     flex-start;
				flex-wrap:       wrap;

				transition: transform .1s ease-in-out;
				animation: slide-list .3s cubic-bezier(.49, .4, .26, 1.93);

				// {1} Meta Data //
				& > span.meta{

					flex: 1 1 90%;

					display: inline-block;
					position: relative;

					margin: 0 4em;
					margin-bottom: .5em;

					// {2} Author //
					& > span.author{
						padding-right: .5em;

						color: #fff;
						font-size: .9em;
						font-weight: bold;

						cursor: pointer;
						&:hover{ text-decoration: underline; }
					}

					// {3} Date //
					& > span.date{
						font-size: .8em;
						color: #595d63;
					}

				}

				// {2} Message Text //
				& > span.text{
					flex: 1 1 90%;

					display: inline-block;
					position: relative;

					margin: 0 4em;

					color: hsla(0,0%,100%,.7);

				}

				// {3} Icon circle //
				& > div.icon{

					display: block;
					position: absolute;
						width: 2.5em;
						height: 2.5em;

					border-radius: 50% / 50%;

					background-color: #fff;

					cursor: pointer;

					transition: opacity .2s ease-in-out;

					&:hover{
						opacity: .8;
					}
				}


			}

		}


		section.message-input{

			display: flex;
			position: relative;
				min-height: calc( #{$input-height} - 2*1em );
				height: auto;

			margin: 1em 1.2em;

			border-radius: 5px / 5px;

			background-color: #484b52;

			flex-direction:  row;
			justify-content: stretch;
			align-items:     center;
			flex-wrap:       nowrap;

			overflow: hidden;

			& > textarea{

				display: block;
				position: relative;
					min-height: calc( 1em + 1.5em );
					height:     calc( 1em + 1.5em );
					max-height: calc( 5em + .4em );

				flex: 1 1 0;

				margin: 1.5em 3em;

				padding: .4em 1em;

				color: #ddd;
				font-family: inherit;

				border: none;
				border-left: 1px solid #666;

				// reset
				-moz-appearance:    none;
				-webkit-appearance: none;
				appearance:         none;
				outline:            none;
				resize:             none;
				background-color: transparent;

				overflow: hidden;

			}
		}


	}

}