messages.css
6.32 KB
.message,.messages{-webkit-box-orient:vertical;-moz-box-orient:vertical}.messagebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-duration:0s;transition-duration:0s}.messagebar textarea{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #c8c8cd;background:#fff;border-radius:5px;box-shadow:none;display:block;padding:3px 8px;margin:0;width:100%;height:28px;color:#000;font-size:17px;line-height:20px;font-family:inherit;resize:none;-webkit-flex-shrink:1;-ms-flex:0 1 auto;flex-shrink:1}.messagebar .link{-ms-flex-item-align:flex-end;-webkit-align-self:flex-end;align-self:flex-end;-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0}.messagebar .link.icon-only:first-child{margin-left:-6px}.messagebar .link:not(.icon-only)+textarea,.messagebar textarea+.link{margin-left:8px}.messagebar~.page-content,.page.no-toolbar .messagebar~.page-content{padding-bottom:44px}.hidden-toolbar .messagebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-duration:0s;transition-duration:0s}.messages-content{background:#fff}.messages{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.messages-date{text-align:center;font-weight:500;font-size:11px;line-height:1;margin:10px 15px;color:#8e8e93}html.ios-gt-8 .messages-date{font-weight:600}.messages-date span{font-weight:400}.message{box-sizing:border-box;margin:1px 10px 0;max-width:70%;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.message:first-child{margin-top:10px}.message .message-text{box-sizing:border-box;border-radius:16px;padding:6px 16px 9px;min-width:48px;min-height:35px;font-size:17px;line-height:1.2;word-break:break-word}.message-label,.message-name{font-size:12px;line-height:1;color:#8e8e93}.message.message-pic .message-text{padding:0;background:0 0}.message.message-pic img{display:block;height:auto;max-width:100%;border-radius:16px}.message-hide-label .message-label,.message-hide-name .message-name,.messages-auto-layout .message-label,.messages-auto-layout .message-name{display:none}.message-name{margin-bottom:2px;margin-top:7px}.message-label{margin-top:4px}.message-avatar{width:29px;height:29px;border-radius:100%;margin-top:-29px;position:relative;top:1px;background-size:cover;opacity:1;-webkit-transition-duration:.4s;transition-duration:.4s}.message-hide-avatar .message-avatar,.messages-auto-layout .message-avatar{opacity:0}.message-sent{-ms-flex-item-align:end;-webkit-align-self:flex-end;align-self:flex-end;-webkit-box-align:end;-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end}.message-sent .message-name{margin-right:16px}.message-sent .message-label{margin-right:6px}.message-sent.message-with-avatar .message-text{margin-right:29px}.message-sent.message-with-avatar .message-name{margin-right:45px}.message-sent.message-with-avatar .message-label{margin-right:34px}.message-sent .message-text{padding-right:22px;background-color:#00d449;color:#fff;margin-left:auto;-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%}.message-sent.message-last .message-text,.message-sent.message-with-tail .message-text{border-radius:16px 16px 0;-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%}.message-sent.message-last.message-pic img,.message-sent.message-with-tail.message-pic img{border-radius:16px 16px 0}.message-received{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start;-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start}.message-received .message-text{padding-left:22px;background-color:#e5e5ea;color:#000;-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%}.message-received .message-name{margin-left:16px}.message-received .message-label{margin-left:6px}.message-received.message-with-avatar .message-text{margin-left:29px}.message-received.message-with-avatar .message-name{margin-left:45px}.message-received.message-with-avatar .message-label{margin-left:34px}.message-received.message-last .message-text,.message-received.message-with-tail .message-text{border-radius:16px 16px 16px 0;-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%}.message-received.message-last.message-pic img,.message-received.message-with-tail.message-pic img{border-radius:16px 16px 16px 0}.message-last{margin-bottom:8px}.message-appear-from-bottom{-webkit-animation:messageAppearFromBottom .4s;animation:messageAppearFromBottom .4s}.message-appear-from-top{-webkit-animation:messageAppearFromTop .4s;animation:messageAppearFromTop .4s}.messages-auto-layout .message-first .message-name,.messages-auto-layout .message-last .message-label{display:block}.messages-auto-layout .message-last .message-avatar{opacity:1}html.retina.ios-6 .message,html.retina.ios-6 .message.message-pic img{-webkit-mask-box-image:none;border-radius:16px}@-webkit-keyframes messageAppearFromBottom{from{-webkit-transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes messageAppearFromBottom{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}@-webkit-keyframes messageAppearFromTop{from{-webkit-transform:translate3d(0,-100%,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes messageAppearFromTop{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}