| body { |
| margin: 0; |
| overflow: hidden; |
| } |
| |
| #container { |
| position: relative; |
| height: 100%; |
| width: 100%; |
| display: flex; |
| flex-direction: column; |
| margin: 0; |
| padding: 0; |
| justify-content: flex-end; |
| } |
| |
| #messages { |
| position: relative; |
| z-index: 0; |
| width: 100%; |
| overflow-y: scroll; |
| height: auto; |
| max-height: calc(100% - 50px); |
| } |
| |
| #sendMessage { |
| display: flex; |
| position: relative; |
| border-top : 2px solid #d3d3d3; |
| margin-left: 10px; |
| margin-right: 10px; |
| padding-left: 8px; |
| overflow: hidden; |
| padding-top: 8px; |
| padding-bottom: 8px; |
| align-items: center; |
| |
| } |
| |
| #message { |
| flex: 1; |
| margin-right: 10px; |
| border: 0; |
| overflow-y: scroll; |
| color: black; |
| max-height: 150px; |
| padding-left: 8px; |
| resize: none; |
| } |
| |
| #message:focus, |
| #message.focus { |
| outline: none; |
| } |
| |
| input[placeholder], [placeholder], *[placeholder] { |
| color: #d3d3d3; |
| } |
| |
| #sendBtn { |
| border-radius: 50%; |
| border: 0; |
| width: 40px; |
| height: 40px; |
| align-self: center; |
| transition: all 0.3s ease; |
| } |
| |
| #sendBtn.hover, |
| #sendBtn:hover { |
| background: #bae5f0; |
| } |
| |
| #sendBtn.hover svg, |
| #sendBtn:hover svg { |
| fill: black; |
| } |
| |
| #sendMessage svg { |
| fill: #666; |
| padding: 5px; |
| width: 100%; |
| height: 100%; |
| transition: all 0.3s ease; |
| } |
| |
| |
| .wc { |
| will-change: transform; |
| } |
| |
| .status_circle { |
| fill: #A0A0A0; |
| -webkit-animation: circle-dance; |
| -webkit-animation-duration: 0.8s; |
| -webkit-animation-iteration-count: infinite; |
| -webkit-animation-direction: alternate; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| .anim-first { |
| -webkit-animation-delay: 0.7s; |
| } |
| |
| .anim-second { |
| -webkit-animation-delay: 0.9s; |
| } |
| |
| .anim-third { |
| -webkit-animation-delay: 1.1s; |
| } |
| |
| @-webkit-keyframes circle-dance { |
| 0%,50% { |
| -webkit-transform: translateY(0); |
| fill: #A0A0A0; |
| } |
| 100% { |
| -webkit-transform: translateY(-8px); |
| fill: #000; |
| } |
| } |
| |
| .status-check { |
| stroke-dasharray: 17; |
| stroke-dashoffset: 17; |
| -webkit-animation: dash-check; |
| -webkit-animation-duration: 0.4s; |
| -webkit-animation-delay: 0.7s; |
| -webkit-animation-fill-mode: forwards; |
| -webkit-animation-timing-function: ease-in-out; |
| display: none; |
| } |
| |
| .message--sent .status-check { |
| display: inline-block; |
| } |
| |
| @-webkit-keyframes dash-check{ |
| from { |
| stroke-dashoffset: 17; |
| } |
| to { |
| stroke-dashoffset: 0; |
| } |
| } |
| |
| .status-x { |
| stroke-dasharray: 12; |
| stroke-dashoffset: 12; |
| -webkit-animation: dash-x; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-fill-mode: forwards; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| .x-first { |
| -webkit-animation-delay: 0.7s; |
| } |
| |
| .x-second { |
| -webkit-animation-delay: 0.9s; |
| } |
| |
| @-webkit-keyframes dash-x{ |
| from { |
| stroke-dashoffset: 12; |
| } |
| to { |
| stroke-dashoffset: 0; |
| } |
| } |
| |
| .message_wrapper { |
| transform: scale(0); |
| max-width: 50%; |
| margin: 10px 0; |
| display: inline-block; |
| padding: 10px; |
| border-radius: 10px; |
| position: relative; |
| -webkit-animation: talk; |
| -webkit-animation-duration: 0.3s; |
| -webkit-animation-delay: 0.1s; |
| -webkit-animation-fill-mode: forwards; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| .message { |
| font: 0.875em "Open sans",Helvetica,"Segoe UI",sans-serif; |
| margin: 0; |
| display: flex; |
| justify-content: flex-start; |
| align-items: top; |
| overflow: hidden; |
| } |
| |
| pre { |
| font : inherit; |
| font-family : inherit; |
| font-size : inherit; |
| font-style : inherit; |
| font-variant : inherit; |
| font-weight : inherit; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .message_out { |
| flex-direction: row-reverse; |
| } |
| |
| .message_sender { |
| display: none; |
| } |
| |
| .sender_image { |
| border-radius: 50%; |
| transition: transform 0.2s ease-in-out; |
| margin: 10px; |
| } |
| |
| .message_in .sender_image { |
| -webkit-animation-name: enter-stage-left; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| .message_out .sender_image { |
| -webkit-animation-name: enter-stage-right; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| @-webkit-keyframes enter-stage-left { |
| from { |
| transform: translateX(-100%); |
| } |
| to { |
| transform: translateX(0); |
| } |
| } |
| |
| @-webkit-keyframes enter-stage-right { |
| from { |
| transform: translateX(100%); |
| } |
| to { |
| transform: translateX(0); |
| } |
| } |
| |
| .message_out > .message_wrapper { |
| background-color: #cfebf5; |
| border-top-right-radius: 0; |
| transform-origin: top right; |
| } |
| |
| .message_out + .message_out > .message_wrapper { |
| border-top-right-radius: 10px; |
| } |
| |
| .message_in > .message_wrapper { |
| background-color: #DEDEE0; |
| border-top-left-radius: 0; |
| transform-origin: top left; |
| } |
| |
| .message_in + .message_in > .message_wrapper { |
| border-top-left-radius: 10px; |
| } |
| |
| .message_timestamp { |
| font-size: 0.8em; |
| margin-top: 0.5em; |
| opacity: 1; |
| transition: opacity 0.5s ease-in-out; |
| line-height: 1em; |
| display: inline-block; |
| } |
| |
| .sent-checkmark { |
| margin-left: 0.313em; |
| } |
| |
| .message_in .message_timestamp { |
| color: #9E9E9E; |
| } |
| |
| @-webkit-keyframes fade-in { |
| from { |
| opacity: 0; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
| |
| .message_text { |
| word-wrap: break-word; |
| display: block; |
| } |
| |
| @-webkit-keyframes talk { |
| from { |
| transform: scale(0); |
| } |
| to { |
| transform: scale(1); |
| } |
| } |
| |
| .message_in > .message_wrapper:before { |
| content: ""; |
| width: 10px; |
| height: 10px; |
| position: absolute; |
| left: -10px; |
| top: 0; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M10,0 L0,0 C10,0 10,10 10,10' fill='%23DEDEE0'/%3E %3C/svg%3E"); |
| transform-origin: top left; |
| } |
| |
| .message_in + .message_in > .message_wrapper:before { |
| display: none; |
| } |
| |
| .message_out + .message_out > .message_wrapper:after { |
| display: none; |
| } |
| |
| .message_out > .message_wrapper:after { |
| content: ""; |
| width: 10px; |
| height: 10px; |
| position: absolute; |
| right: -10px; |
| top: 0; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M0,0 L10,0 C0,0 0,10 0,10' fill='%23cfebf5'/%3E %3C/svg%3E"); |
| transform-origin: top right; |
| } |
| |
| .message_delivery_status { |
| margin: 10px 10px; |
| color: #A0A0A0; |
| opacity: 0; |
| -webkit-animation-name: fade-in; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-timing-function: ease-in-out; |
| -webkit-animation-delay: 0.4s; |
| -webkit-animation-fill-mode: forwards; |
| transition: opacity 0.5s ease-in-out; |
| } |
| |
| .message_in + .message_in .sender_image { |
| opacity: 0; |
| } |
| |
| .message_out + .message_out .sender_image { |
| opacity: 0; |
| } |