View source for Template:Messaging footer/Wiki Chatting v2.0

{{#css:
.messaging-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
background-color: rgba(0,0,0,0.1);
height: 32px;
padding: 4px;
} .messaging-footer .text-input {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
border-radius: 6px;
height: 32px;
width: 100%;
color: grey;
} .messaging-footer .text-input .placeholder {
padding: 4px;
} .messaging-footer .text-input .send {
width: 32px;
height: 32px;
background-color: rgb(133,190,237);
color: white;
border-radius: 0 6px 6px 0;
} .messaging-footer .text-input .send img {
vertical-align: initial;
} .messaging-footer .text-input .send:hover {
background-color: rgb(82,139,191);
} .messaging-footer .button {
width: 32px;
height: 32px;
background-color: rgb(133,190,237);
color: white;
border-radius: 6px;
padding: 0;
} .messaging-footer .button:hover {
background-color: rgb(82,139,191);
}
.send, .messaging-footer .button {
image-rendering:-moz-crisp-edges;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
-ms-interpolation-mode:nearest-neighbor;
}
}}<!--
--><div class=messaging-footer>
<div class=text-input><div class=placeholder>{{{input-placeholder|Type message...}}}</div> <div class=send title="Send">[[File:MessageSend.png|32px]]</div></div>
<div class=button title="Attach">[[File:MessageAttach.png|32px]]</div>
<div class=button title="Emoji">[[File:MessageEmoji.png|32px]]</div>
</div><!--
--><noinclude>
[[Category:User interface elements]]
</noinclude>