|
.chat-window { |
|
background-color: #02081d; |
|
color: white; |
|
font-size: 17px; |
|
width: 100%; |
|
height: 100%; |
|
border: none; |
|
resize: none; |
|
} |
|
|
|
|
|
input[type="text"]{font: 15px/24px 'Muli', sans-serif; color: white; width: 100%; box-sizing: border-box; letter-spacing: 1px;} |
|
:focus{outline: none;} |
|
.message-input-container{ |
|
float: left; |
|
width: 50vw; |
|
margin: 15px 3%; |
|
position: relative;} |
|
input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: white; width: 100%; box-sizing: border-box; letter-spacing: 1px;} |
|
.message-input { |
|
border: 1px solid #ccc; |
|
border-radius: 5px; |
|
padding: 7px 14px 9px; |
|
transition: 0.4s; |
|
font-size: 20px; |
|
display: flex; |
|
color: white; |
|
background-color: transparent; |
|
} |
|
|
|
.message-input ~ .focus-border:before, |
|
.message-input ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #85a7ff; transition: 0.3s;} |
|
.message-input ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;} |
|
.message-input ~ .focus-border i:before, |
|
.message-input ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #85a7ff; transition: 0.4s;} |
|
.message-input ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;} |
|
.message-input:focus ~ .focus-border:before, |
|
.message-input:focus ~ .focus-border:after{width: 100%; transition: 0.3s;} |
|
.message-input:focus ~ .focus-border i:before, |
|
.message-input:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;} |
|
|
|
.send-btn { |
|
font-family: "Prompt", Helvetica; |
|
font-size: 1rem; |
|
border-color: #6785d3; |
|
color: #fff; |
|
box-shadow: 0 0 10px 0 #6785d3 inset, 0 0 10px 4px #6785d3; |
|
transition: all 150ms ease-in-out; |
|
cursor: pointer; |
|
background-color: transparent; |
|
padding: 0.6em 2em; |
|
border-radius: 1.5em; |
|
} |
|
|
|
.send-btn:hover { |
|
box-shadow: 0 0 40px 40px #6785d3 inset, 0 0 0 0 #6785d3; |
|
outline: 0; |
|
} |
|
|
|
.options-container { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 20px 40px; |
|
bottom: 0; |
|
width: 100%; |
|
} |