framework7/components/messages/messages.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-message-text-header-opacity:0.65;--f7-message-text-header-font-size:12px;--f7-message-text-footer-opacity:0.65;--f7-message-text-footer-font-size:12px;--f7-message-bubble-line-height:1.2;--f7-message-header-font-size:12px;--f7-message-footer-font-size:11px;--f7-message-name-font-size:12px;--f7-message-name-font-weight:inherit;--f7-message-avatar-border-radius:50%;--f7-messages-title-font-weight:inherit;--f7-message-typing-indicator-bg-color:#000}:root .dark,:root.dark{--f7-message-typing-indicator-bg-color:#fff}.ios{--f7-message-text-header-text-color:inherit;--f7-message-text-footer-text-color:inherit;--f7-messages-title-font-size:11px;--f7-message-avatar-size:29px;--f7-message-margin:16px;--f7-message-bubble-min-height:32px;--f7-message-bubble-font-size:17px;--f7-message-bubble-border-radius:16px;--f7-message-bubble-padding-vertical:6px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.35;--f7-message-sent-text-color:#fff;--f7-messages-content-bg-color:#fff;--f7-message-received-text-color:#000;--f7-message-received-bg-color:#e5e5ea;--f7-messages-title-text-color:#00000073;--f7-message-header-text-color:#00000073;--f7-message-footer-text-color:#00000073;--f7-message-name-text-color:#00000073}.ios .dark,.ios.dark{--f7-message-received-bg-color:#252525;--f7-message-received-text-color:#fff;--f7-messages-content-bg-color:#0000;--f7-messages-title-text-color:#ffffff8a;--f7-message-header-text-color:#ffffff8a;--f7-message-name-text-color:#ffffff8a;--f7-message-footer-text-color:#ffffff8a}.md{--f7-messages-content-bg-color:#0000;--f7-messages-title-font-size:12px;--f7-message-avatar-size:32px;--f7-message-margin:16px;--f7-message-bubble-min-height:40px;--f7-message-bubble-font-size:16px;--f7-message-bubble-border-radius:20px;--f7-message-bubble-padding-vertical:10px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.6}.md,.md .dark,.md [class*=color-]{--f7-message-sent-bg-color:var(--f7-md-primary);--f7-message-sent-text-color:var(--f7-md-on-primary);--f7-message-received-bg-color:var(--f7-md-surface-variant);--f7-message-received-text-color:var(--f7-md-on-surface);--f7-message-text-header-text-color:var(--f7-md-on-surface-variant);--f7-message-text-footer-text-color:var(--f7-md-on-surface-variant);--f7-messages-title-text-color:var(--f7-md-on-surface-variant);--f7-message-header-text-color:var(--f7-md-on-surface-variant);--f7-message-footer-text-color:var(--f7-md-on-surface-variant);--f7-message-name-text-color:var(--f7-md-on-surface-variant)}.messages,.messages-content{background:var(--f7-messages-content-bg-color)}.messages{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:1}.message,.messages-title{margin-top:var(--f7-message-margin)}.message:last-child,.messages-title:last-child{margin-bottom:var(--f7-message-margin)}.messages-title{color:var(--f7-messages-title-text-color);font-size:var(--f7-messages-title-font-size);font-weight:var(--f7-messages-title-font-weight);line-height:1;text-align:center;width:100%}.message{align-items:flex-end;box-sizing:border-box;display:flex;max-width:70%;position:relative;transform:translateZ(0);z-index:1}.message-avatar{align-self:flex-end;background-size:cover;border-radius:var(--f7-message-avatar-border-radius);flex-shrink:0;height:var(--f7-message-avatar-size);position:relative;width:var(--f7-message-avatar-size)}.message-content{display:flex;flex-direction:column;position:relative}.message-footer,.message-header,.message-name{line-height:1}.message-header{color:var(--f7-message-header-text-color);font-size:var(--f7-message-header-font-size)}.message-footer{color:var(--f7-message-footer-text-color);font-size:var(--f7-message-footer-font-size);margin-bottom:-1em}.message-name{color:var(--f7-message-name-text-color);font-size:var(--f7-message-name-font-size);font-weight:var(--f7-message-name-font-weight)}.message-bubble{border-radius:var(--f7-message-bubble-border-radius);box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--f7-message-bubble-font-size);line-height:var(--f7-message-bubble-line-height);min-height:var(--f7-message-bubble-min-height);padding:var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);position:relative;word-break:break-word}.message-image img{display:block;height:auto;max-width:100%;width:auto}.message-text-footer,.message-text-header{line-height:1}.message-text-header{color:var(--f7-message-text-header-text-color);font-size:var(--f7-message-text-header-font-size);opacity:var(--f7-message-text-header-opacity)}.message-text-footer{color:var(--f7-message-text-footer-text-color);font-size:var(--f7-message-text-footer-font-size);opacity:var(--f7-message-text-footer-opacity)}.message-text{text-align:left}.message-sent{align-self:flex-end;flex-direction:row-reverse;text-align:right}.message-sent .message-bubble{background:var(--f7-message-sent-bg-color,var(--f7-theme-color));color:var(--f7-message-sent-text-color)}.message-sent .message-content{align-items:flex-end}.message-received{flex-direction:row}.message-received .message-bubble{background:var(--f7-message-received-bg-color);color:var(--f7-message-received-text-color)}.message-received .message-content{align-items:flex-start}.message:not(.message-last) .message-avatar{opacity:0}.message.message-same-footer .message-footer,.message.message-same-header .message-header,.message.message-same-name .message-name,.message:not(.message-first) .message-name{display:none}.message-appear-from-bottom{animation:message-appear-from-bottom .3s}.message-appear-from-top{animation:message-appear-from-top .3s}.message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}.message-typing-indicator>div{background:var(--f7-message-typing-indicator-bg-color);border-radius:50%;display:inline-block;opacity:var(--f7-message-typing-indicator-opacity);position:relative;vertical-align:middle}@keyframes message-appear-from-bottom{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes message-appear-from-top{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}.ios .messages{box-sizing:border-box;padding-bottom:16px}.ios .message-footer b,.ios .message-header b,.ios .message-name b,.ios .messages-title b{font-weight:600}.ios .message-header,.ios .message-name{margin-bottom:3px}.ios .message-footer{margin-top:3px}.ios .message-bubble{min-width:48px}.ios .message-image{margin:var(--f7-message-bubble-padding-vertical) calc(var(--f7-message-bubble-padding-horizontal)*-1)}.ios .message-image:first-child{margin-top:calc(var(--f7-message-bubble-padding-vertical)*-1)}.ios .message-image:first-child img{border-top-left-radius:var(--f7-message-bubble-border-radius);border-top-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-image:last-child{margin-bottom:calc(var(--f7-message-bubble-padding-vertical)*-1)}.ios .message-image:last-child img{border-bottom-left-radius:var(--f7-message-bubble-border-radius);border-bottom-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-text-header{margin-bottom:3px}.ios .message-text-footer{margin-top:3px}.ios .message-received{margin-left:calc(16px + var(--f7-safe-area-left))}.ios .message-received .message-footer,.ios .message-received .message-header,.ios .message-received .message-name{margin-left:var(--f7-message-bubble-padding-horizontal)}.ios .message-received .message-bubble{padding-left:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><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 35"/></svg>') 50% 42% 46% 56%}.ios .message-received .message-image{margin-left:calc((var(--f7-message-bubble-padding-horizontal) + 6px)*-1)}.ios .message-received.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0}.ios .message-received.message-tail:not(.message-typing) .message-bubble{-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><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 35"/><path d="M0 70c6-2 12-10 12-19V35l14 27s-8 8-26 8"/></svg>') 50% 42% 46% 56%}.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0}.ios .message-sent{margin-right:calc(16px + var(--f7-safe-area-right))}.ios .message-sent .message-footer,.ios .message-sent .message-header,.ios .message-sent .message-name{margin-right:var(--f7-message-bubble-padding-horizontal)}.ios .message-sent .message-bubble{padding-right:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35"/></svg>') 50% 56% 46% 42%}.ios .message-sent .message-image{margin-right:calc((var(--f7-message-bubble-padding-horizontal) + 6px)*-1)}.ios .message-sent.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35"/><path d="M96 70c-6-2-12-10-12-19V35L70 62s8 8 26 8"/></svg>') 50% 56% 46% 42%}.ios .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0}.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{background:var(--f7-message-received-bg-color);border-radius:50%;content:"";position:absolute}.ios .message-received.message-typing .message-content:after{bottom:0;height:11px;left:4px;width:11px}.ios .message-received.message-typing .message-content:before{bottom:-4px;height:6px;left:-1px;width:6px}.ios .message-typing-indicator>div{height:9px;width:9px}.ios .message-typing-indicator>div+div{margin-left:4px}.ios .message-typing-indicator>div:first-child{animation:ios-message-typing-indicator .9s infinite}.ios .message-typing-indicator>div:nth-child(2){animation:ios-message-typing-indicator .9s .15s infinite}.ios .message-typing-indicator>div:nth-child(3){animation:ios-message-typing-indicator .9s .3s infinite}@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}.md .message-footer b,.md .message-header b,.md .message-name b,.md .messages-title b{font-weight:500}.md .message-header,.md .message-name{margin-bottom:2px}.md .message-footer{margin-top:2px}.md .message-text-header{margin-bottom:4px}.md .message-text-footer{margin-top:4px}.md .message-image{margin:calc(var(--f7-message-bubble-padding-vertical)*-1) calc(var(--f7-message-bubble-padding-horizontal)*-1)}.md .message-image,.md .message-image img{border-radius:var(--f7-message-bubble-border-radius)}.md .message-received{margin-left:calc(8px + var(--f7-safe-area-left))}.md .message-received .message-footer,.md .message-received .message-header,.md .message-received .message-name{margin-left:16px}.md .message-received.message-first:not(.message-last) .message-bubble,.md .message-received.message-first:not(.message-last) .message-image,.md .message-received.message-first:not(.message-last) .message-image img{border-bottom-left-radius:4px}.md .message-received.message-last:not(.message-first) .message-bubble,.md .message-received.message-last:not(.message-first) .message-image,.md .message-received.message-last:not(.message-first) .message-image img{border-top-left-radius:4px}.md .message-received:not(.message-last):not(.message-first) .message-bubble,.md .message-received:not(.message-last):not(.message-first) .message-image,.md .message-received:not(.message-last):not(.message-first) .message-image img{border-bottom-left-radius:4px;border-top-left-radius:4px}.md .message-received .message-avatar+.message-content{margin-left:8px}.md .message-sent{margin-right:calc(8px + var(--f7-safe-area-right))}.md .message-sent .message-footer,.md .message-sent .message-header,.md .message-sent .message-name{margin-right:16px}.md .message-sent.message-first:not(.message-last) .message-bubble,.md .message-sent.message-first:not(.message-last) .message-image,.md .message-sent.message-first:not(.message-last) .message-image img{border-bottom-right-radius:4px}.md .message-sent.message-last:not(.message-first) .message-bubble,.md .message-sent.message-last:not(.message-first) .message-image,.md .message-sent.message-last:not(.message-first) .message-image img{border-top-right-radius:4px}.md .message-sent:not(.message-last):not(.message-first) .message-bubble,.md .message-sent:not(.message-last):not(.message-first) .message-image,.md .message-sent:not(.message-last):not(.message-first) .message-image img{border-bottom-right-radius:4px;border-top-right-radius:4px}.md .message-sent .message-avatar+.message-content{margin-right:var(--f7-message-bubble-padding-horizontal)}.md .message+.message:not(.message-first){margin-top:2px}.md .message-typing-indicator>div{height:6px;width:6px}.md .message-typing-indicator>div+div{margin-left:6px}.md .message-typing-indicator>div:first-child{animation:md-message-typing-indicator .9s infinite}.md .message-typing-indicator>div:nth-child(2){animation:md-message-typing-indicator .9s .15s infinite}.md .message-typing-indicator>div:nth-child(3){animation:md-message-typing-indicator .9s .3s infinite}@keyframes md-message-typing-indicator{0%{transform:translateY(0)}25%{transform:translateY(-5px)}50%{transform:translateY(0)}}