Spaces:
Build error
Build error
.chat-window { | |
background-color: #02081d; | |
color: white; | |
font-size: 17px; | |
width: 100%; | |
height: 100%; | |
border: none; | |
resize: none; | |
} | |
/* text input */ | |
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%; | |
} |