framework7/lazy-components/messages.css

Full featured mobile HTML framework for building iOS & Android apps

.messages{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100%;position:relative;z-index:1}.messages-title{text-align:center;width:100%;line-height:1}.message{max-width:70%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;position:relative;z-index:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.message-avatar{border-radius:50%;position:relative;background-size:cover;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.message-content{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.message-footer,.message-header,.message-name{line-height:1;font-size:12px}.message-footer{font-size:11px;margin-bottom:-1em}.message-bubble{-webkit-box-sizing:border-box;box-sizing:border-box;word-break:break-word;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;line-height:1.2}.message-image img{display:block;max-width:100%;height:auto;width:auto}.message-text-footer,.message-text-header{font-size:12px;line-height:1}.message-text{text-align:left}.message-sent{text-align:right;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.message-received{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.message-received .message-content{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.message-sent .message-content{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.message:not(.message-last) .message-avatar{opacity:0}.message:not(.message-first) .message-name{display:none}.message.message-same-name .message-name{display:none}.message.message-same-header .message-header{display:none}.message.message-same-footer .message-footer{display:none}.message-appear-from-bottom{-webkit-animation:message-appear-from-bottom .3s;animation:message-appear-from-bottom .3s}.message-appear-from-top{-webkit-animation:message-appear-from-top .3s;animation:message-appear-from-top .3s}.message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}.message-typing-indicator>div{display:inline-block;position:relative;background:#000;vertical-align:middle;border-radius:50%}@-webkit-keyframes message-appear-from-bottom{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes message-appear-from-bottom{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes message-appear-from-top{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes message-appear-from-top{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ios .messages,.ios .messages-content{background:#fff}.ios .messages-title{font-size:11px;color:#8e8e93;margin-top:10px}.ios .messages-title:last-child{margin-bottom:10px}.ios .messages-title b{font-weight:600}.ios .message{margin-top:10px}.ios .message:last-child{margin-bottom:10px}.ios .message-avatar{width:29px;height:29px}.ios .message-footer,.ios .message-header,.ios .message-name{color:#8e8e93}.ios .message-footer b,.ios .message-header b,.ios .message-name b{font-weight:600}.ios .message-header,.ios .message-name{margin-bottom:3px}.ios .message-footer{margin-top:3px}.ios .message-bubble{font-size:17px;line-height:1.2;border-radius:16px;padding:6px 16px 9px;min-width:48px;min-height:35px}.ios .message-image{margin:6px -16px}.ios .message-image:first-child{margin-top:-6px}.ios .message-image:first-child img{border-top-left-radius:16px;border-top-right-radius:16px}.ios .message-image:last-child{margin-bottom:-9px}.ios .message-image:last-child img{border-bottom-left-radius:16px;border-bottom-right-radius:16px}.ios .message-text-header{margin-bottom:3px}.ios .message-text-footer{margin-top:3px}.ios .message-received{margin-left:10px}.ios .message-received .message-footer,.ios .message-received .message-header,.ios .message-received .message-name{margin-left:16px}.ios .message-received .message-text-footer,.ios .message-received .message-text-header{opacity:.5}.ios .message-received .message-bubble{color:#000;background:#e5e5ea;padding-left:22px;-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%}.ios .message-received .message-image{margin-left:-22px}.ios .message-received.message-tail:not(.message-typing) .message-bubble{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%}.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0px}.ios .message-sent{margin-right:10px}.ios .message-sent .message-footer,.ios .message-sent .message-header,.ios .message-sent .message-name{margin-right:16px}.ios .message-sent .message-text-footer,.ios .message-sent .message-text-header{opacity:.8}.ios .message-sent .message-bubble{background:#00d449;color:#fff;padding-right:22px;-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%}.ios .message-sent .message-image{margin-right:-22px}.ios .message-sent.message-tail .message-bubble{border-radius:16px 16px 0 16px;-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%}.ios .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0px}.ios .message+.message:not(.message-first){margin-top:1px}.ios .message-received.message-typing .message-content:after,.ios .message-received.message-typing .message-content:before{content:'';position:absolute;background:#e5e5ea;border-radius:50%}.ios .message-received.message-typing .message-content:after{width:11px;height:11px;left:4px;bottom:0px}.ios .message-received.message-typing .message-content:before{width:6px;height:6px;left:-1px;bottom:-4px}.ios .message-typing-indicator>div{width:9px;height:9px;opacity:.35}.ios .message-typing-indicator>div+div{margin-left:4px}.ios .message-typing-indicator>div:nth-child(1){-webkit-animation:ios-message-typing-indicator .9s infinite;animation:ios-message-typing-indicator .9s infinite}.ios .message-typing-indicator>div:nth-child(2){-webkit-animation:ios-message-typing-indicator .9s 150ms infinite;animation:ios-message-typing-indicator .9s 150ms infinite}.ios .message-typing-indicator>div:nth-child(3){-webkit-animation:ios-message-typing-indicator .9s .3s infinite;animation:ios-message-typing-indicator .9s .3s infinite}.ios .theme-dark .messages,.ios .theme-dark .messages-content,.messages-content.ios .theme-dark,.messages.ios .theme-dark{background-color:transparent}.ios .theme-dark .message-received.message-typing .message-content:after,.ios .theme-dark .message-received.message-typing .message-content:before{background:#333}.ios .theme-dark .message-typing-indicator>div{background-color:#fff}.ios .theme-dark .message-received .message-bubble{background-color:#333;color:#fff}@media (orientation:landscape){.ios.device-iphone-x .ios-edges .message-received,.ios.device-iphone-x .ios-left-edge .message-received,.ios.device-iphone-x .panel-left .message-received,.ios.device-iphone-x .popup .message-received,.ios.device-iphone-x .sheet-modal .message-received{margin-left:calc(10px + constant(safe-area-inset-left));margin-left:calc(10px + env(safe-area-inset-left))}.ios.device-iphone-x .ios-edges .message-sent,.ios.device-iphone-x .ios-right-edge .message-sent,.ios.device-iphone-x .panel-right .message-sent,.ios.device-iphone-x .popup .message-sent,.ios.device-iphone-x .sheet-modal .message-sent{margin-right:calc(10px + constant(safe-area-inset-right));margin-right:calc(10px + env(safe-area-inset-right))}}@-webkit-keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}.md .messages,.md .messages-content{background:#eee}.md .message{margin-top:16px}.md .message:last-child{margin-bottom:16px}.md .messages-title{font-size:12px;color:rgba(0,0,0,.51);margin-top:16px}.md .messages-title:last-child{margin-bottom:16px}.md .messages-title b{font-weight:500}.md .message-avatar{width:32px;height:32px}.md .message-footer,.md .message-header,.md .message-name{color:rgba(0,0,0,.51)}.md .message-footer b,.md .message-header b,.md .message-name b{font-weight:500}.md .message-header,.md .message-name{margin-bottom:2px}.md .message-footer{margin-top:2px}.md .message-bubble{font-size:16px;border-radius:2px;padding:6px 8px;min-height:32px}.md .message-text-footer,.md .message-text-header{color:rgba(0,0,0,.51)}.md .message-text-header{margin-bottom:4px}.md .message-text-footer{margin-top:4px}.md .message-received{margin-left:8px}.md .message-received .message-bubble{color:#333;background:#fff}.md .message-received .message-avatar+.message-content{margin-left:8px}.md .message-received.message-tail .message-bubble{border-radius:2px 2px 2px 0}.md .message-received.message-tail .message-bubble:before{position:absolute;content:'';border-left:8px solid transparent;border-right:0 solid transparent;border-bottom:8px solid #fff;right:100%;bottom:0;width:0;height:0}.md .message-sent{margin-right:8px}.md .message-sent .message-bubble{color:#333;background:#c8e6c9}.md .message-sent .message-avatar+.message-content{margin-right:8px}.md .message-sent.message-tail .message-bubble{border-radius:2px 2px 0 2px}.md .message-sent.message-tail .message-bubble:before{position:absolute;content:'';border-right:8px solid transparent;border-left:0 solid transparent;border-bottom:8px solid #c8e6c9;left:100%;bottom:0;width:0;height:0}.md .message+.message:not(.message-first){margin-top:8px}.md .message-typing-indicator>div{width:6px;height:6px;opacity:.6}.md .message-typing-indicator>div+div{margin-left:6px}.md .message-typing-indicator>div:nth-child(1){-webkit-animation:md-message-typing-indicator .9s infinite;animation:md-message-typing-indicator .9s infinite}.md .message-typing-indicator>div:nth-child(2){-webkit-animation:md-message-typing-indicator .9s 150ms infinite;animation:md-message-typing-indicator .9s 150ms infinite}.md .message-typing-indicator>div:nth-child(3){-webkit-animation:md-message-typing-indicator .9s .3s infinite;animation:md-message-typing-indicator .9s .3s infinite}.md .theme-dark .messages,.md .theme-dark .messages-content,.messages-content.md .theme-dark,.messages.md .theme-dark{background-color:transparent}.md .theme-dark .messages-title{color:rgba(255,255,255,.54)}.md .theme-dark .message-footer,.md .theme-dark .message-header,.md .theme-dark .message-name{color:rgba(255,255,255,.54)}@media (orientation:landscape){.md.device-iphone-x .ios-edges .message-received,.md.device-iphone-x .ios-left-edge .message-received,.md.device-iphone-x .panel-left .message-received,.md.device-iphone-x .popup .message-received,.md.device-iphone-x .sheet-modal .message-received{margin-left:calc(8px + constant(safe-area-inset-left));margin-left:calc(8px + env(safe-area-inset-left))}.md.device-iphone-x .ios-edges .message-sent,.md.device-iphone-x .ios-right-edge .message-sent,.md.device-iphone-x .panel-right .message-sent,.md.device-iphone-x .popup .message-sent,.md.device-iphone-x .sheet-modal .message-sent{margin-right:calc(8px + constant(safe-area-inset-right));margin-right:calc(8px + env(safe-area-inset-right))}}@-webkit-keyframes md-message-typing-indicator{0%{-webkit-transform:translateY(0%);transform:translateY(0%)}25%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}50%{-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes md-message-typing-indicator{0%{-webkit-transform:translateY(0%);transform:translateY(0%)}25%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}50%{-webkit-transform:translateY(0%);transform:translateY(0%)}}