/* Card container */ #CONTAINER.message{ flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; } #CONTAINER.message div{ /* Message item */ display: inline-block; position: relative; top: 0; left: 0; height: auto; margin: 1em; padding: 1em; flex: 1 1 1; align-self: flex-start; border-radius: 3px; background-color: #fff; color: #222; } #CONTAINER.message > div:last-of-type{ /* Margin bottom to last */ margin-bottom: 5em; } #CONTAINER.message div.me{ /* Message Item (self) */ background: #13d89d; align-self: flex-end; } #CONTAINER.message div span.author{ /* Message author */ display: inline-block; position: relative; padding: .2em .4em; margin-right: 1em; border: 1px solid #ddd; border-radius: 3px; background: #eee; color: #666; } #CONTAINER.message div span.author:after{ /* Add 'dit' */ content: ' dit'; color: #333; } #CONTAINER.message div.me span.author{ /* Hide message author if self */ display: none; } #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; } #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; font-size: inherit; font-family: inherit; } #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'); }