framework7/components/messagebar/messagebar.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-messagebar-attachments-height:155px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px}.ios{--f7-messagebar-height:60px;--f7-messagebar-font-size:17px;--f7-messagebar-textarea-bg-color:var(--f7-glass-bg-color);--f7-messagebar-link-color:var(--f7-bars-text-color);--f7-messagebar-border-color:#0000;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:10px 16px 6px;--f7-messagebar-textarea-height:40px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-border-color:#0000;--f7-messagebar-attachment-border-radius:20px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-attachments-border-color:#0000;--f7-messagebar-textarea-border:none;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-textarea-placeholder-color:#0006;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}.ios .dark,.ios.dark{--f7-messagebar-sheet-bg-color:#000;--f7-messagebar-textarea-placeholder-color:#fff6;--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.md{--f7-messagebar-height:64px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:12px 16px;--f7-messagebar-textarea-height:48px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid #0000;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:72px;--f7-messagebar-attachment-landscape-height:72px;--f7-messagebar-border-color:#0000;--f7-messagebar-attachments-border-color:#0000}.md,.md .dark,.md [class*=color-]{--f7-messagebar-textarea-placeholder-color:var(--f7-md-on-surface-variant);--f7-messagebar-textarea-bg-color:var(--f7-md-surface-variant);--f7-messagebar-bg-color:var(--f7-md-surface);--f7-messagebar-textarea-text-color:var(--f7-md-on-surface);--f7-messagebar-sheet-bg-color:var(--f7-md-surface);--f7-messagebar-sheet-border-color:var(--f7-md-outline-variant);--f7-messagebar-link-color:var(--f7-md-on-surface)}.messagebar{bottom:0;font-size:var(--f7-messagebar-font-size);height:auto;min-height:var(--f7-messagebar-height);padding-bottom:var(--f7-safe-area-bottom);transform:translateZ(0)}.messagebar.no-outline:before,.messagebar.toolbar-hidden:after{display:none!important}.messagebar .toolbar-inner{bottom:auto;height:auto;padding-left:calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));padding-right:calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));position:relative;top:auto}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{flex-shrink:1;min-width:0;position:relative;width:100%}.messagebar textarea{background-color:var(--f7-messagebar-textarea-bg-color);border:var(--f7-messagebar-textarea-border);border-radius:var(--f7-messagebar-textarea-border-radius);color:var(--f7-messagebar-textarea-text-color);flex-shrink:1;font-size:var(--f7-messagebar-textarea-font-size);height:var(--f7-messagebar-textarea-height);line-height:var(--f7-messagebar-textarea-line-height);padding:var(--f7-messagebar-textarea-padding);width:100%}.messagebar textarea::placeholder{color:var(--f7-messagebar-textarea-placeholder-color)}.messagebar .toolbar-pane,.messagebar a.link{align-self:flex-end;color:var(--f7-messagebar-link-color,var(--f7-theme-color));flex-shrink:0}.messagebar-attachments{overflow:auto;width:100%;-webkit-overflow-scrolling:touch;box-sizing:border-box;font-size:0;position:relative;white-space:nowrap}.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments{display:none}.messagebar-attachment{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:var(--f7-messagebar-attachment-border-radius);display:inline-block;height:var(--f7-messagebar-attachment-height);position:relative;vertical-align:middle;white-space:normal}@media (orientation:landscape){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{border-radius:var(--f7-messagebar-attachment-border-radius);display:block;height:100%;width:auto}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;align-content:flex-start;background-color:var(--f7-messagebar-sheet-bg-color);border-top:1px solid var(--f7-messagebar-sheet-border-color);display:flex;flex-direction:column;flex-wrap:wrap;height:var(--f7-messagebar-sheet-height);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}@media (orientation:landscape){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image{background-position:50%;background-repeat:no-repeat;background-size:cover}.messagebar-sheet-image>img{border-radius:inherit;height:100%;object-fit:cover;object-position:center;transition-duration:.2s;width:100%}.messagebar-attachment-delete{border-radius:50%;box-sizing:border-box;cursor:pointer;display:block;position:absolute}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{content:"";left:50%;position:absolute;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar :is(a,button):is(.icon-only,:has(i:only-child),:has(svg:only-child)){min-height:var(--f7-messagebar-textarea-height);min-width:var(--f7-messagebar-textarea-height)}.ios .messagebar textarea{backdrop-filter:var(--f7-glass-backdrop);box-shadow:var(--f7-glass-shadow);min-height:var(--f7-messagebar-textarea-height)}.ios .messagebar-attachments{border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;padding:5px}.ios .messagebar-area,.ios .messagebar-attachments-visible .messagebar-area{border-radius:var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachments-visible .messagebar-area{backdrop-filter:saturate(180%) blur(16px);background:var(--f7-messagebar-textarea-bg-color);box-shadow:var(--f7-glass-shadow)}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{backdrop-filter:none;background:#0000;border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);box-shadow:none}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment+.messagebar-attachment{margin-left:8px}.ios .messagebar-attachment-delete{background:#7d7e80;border:2px solid #fff;box-shadow:0 0 2px #0003;height:20px;right:5px;top:5px;width:20px}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{background:#fff;height:2px;margin-left:-5px;margin-top:-1px;width:10px}.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;height:calc((var(--f7-messagebar-sheet-height) - 2px)/2);margin-left:1px;margin-top:1px;overflow:hidden;position:relative;width:calc((var(--f7-messagebar-sheet-height) - 2px)/2)}@media (orientation:landscape){.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/2);width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/2)}}.ios .messagebar-sheet-image .icon-checkbox,.ios .messagebar-sheet-image .icon-radio,.ios .messagebar-sheet-item .icon-checkbox,.ios .messagebar-sheet-item .icon-radio{bottom:8px;position:absolute;right:8px;z-index:1}.md .messagebar{--f7-toolbar-link-height:var(--f7-messagebar-height);background:var(--f7-messagebar-bg-color)}.md .messagebar:before{background-color:var(--f7-messagebar-border-color);bottom:auto;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:0;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 0;width:100%;z-index:15}.md .messagebar-attachments{border-bottom:1px solid var(--f7-messagebar-attachments-border-color);padding:16px 16px 0}.md .messagebar-attachment img{height:var(--f7-messagebar-attachment-height);object-fit:cover;object-position:center;width:var(--f7-messagebar-attachment-height)}.md .messagebar-attachment+.messagebar-attachment{margin-left:16px}.md .messagebar-attachments-visible .messagebar-attachments{background:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0}.md .messagebar-attachments-visible textarea{border-top-left-radius:0;border-top-right-radius:0}.md .messagebar-area{margin-bottom:8px;margin-top:8px;overflow:hidden}.md .messagebar-attachment-delete{background-color:var(--f7-md-inverse-surface);border:2px solid var(--f7-messagebar-textarea-bg-color);border-radius:24px;height:24px;right:-6px;top:-6px;width:24px}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{background:var(--f7-messagebar-textarea-bg-color);height:2px;margin-left:-6px;margin-top:-1px;width:12px}.md .messagebar-sheet-image,.md .messagebar-sheet-item{--f7-touch-ripple-color:#0000;border-radius:4px;box-sizing:border-box;flex-shrink:0;height:calc((var(--f7-messagebar-sheet-height) - 24px)/2);margin-left:8px;margin-top:8px;overflow:hidden;position:relative;width:calc((var(--f7-messagebar-sheet-height) - 24px)/2)}@media (orientation:landscape){.md .messagebar-sheet-image,.md .messagebar-sheet-item{height:calc((var(--f7-messagebar-sheet-landscape-height) - 24px)/2);width:calc((var(--f7-messagebar-sheet-landscape-height) - 8px)/2)}}.md .messagebar-sheet-image input:checked~img,.md .messagebar-sheet-item input:checked~img{transform:scale(.85)}.md .messagebar-sheet-image input:checked~.icon-checkbox,.md .messagebar-sheet-image input:checked~.icon-radio,.md .messagebar-sheet-item input:checked~.icon-checkbox,.md .messagebar-sheet-item input:checked~.icon-radio{transform:translate(-50%,-50%) scale(1)}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-image .icon-radio,.md .messagebar-sheet-item .icon-checkbox,.md .messagebar-sheet-item .icon-radio{align-items:center;border:none;border-radius:50%;display:flex;height:32px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.85);width:32px;z-index:1;--f7-checkbox-inactive-color:var(--f7-md-surface);--f7-checkbox-active-color:var(--f7-md-surface)}.md .messagebar-sheet-image .icon-checkbox:after,.md .messagebar-sheet-image .icon-radio:after,.md .messagebar-sheet-item .icon-checkbox:after,.md .messagebar-sheet-item .icon-radio:after{color:var(--f7-md-on-surface);font-size:18px;height:100%;left:0;line-height:32px;position:static;width:auto}