Mercurial > libervia-templates
view sat_templates/templates/bulma/static/chat.css @ 376:c1f384f006e8
bulma (call): add "ringing" status
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 16 Aug 2023 18:27:06 +0200 |
parents | 281d1c958d56 |
children | 941e4006ab6e |
line wrap: on
line source
#chat-panel { height: calc(100vh - 3.25rem); } #messages { overflow-y: auto; } #attachments { overflow-x: auto; white-space: nowrap; } #message_input { resize: None; max-height: 20rem; min-height: 48px; } .is-chat-message { transition: all 0.3s ease; padding-left: 1.5em; } .is-chat-message:hover { background-color: #f5f5f5; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .message-attachment { max-width: 20rem; } .status-icons { padding-bottom: 0.4rem; } .actions { position: absolute; right: 5px; bottom: 5px; opacity: 0; } .is-chat-message:hover .actions { opacity: 1; } .action-button { box-sizing: border-box; margin: 0 0.2rem; } .action-button:hover { box-shadow: 0 0 0 10px rgba(0,0,0,0.1); border-radius: 50%; transition: box-shadow 0.3s ease; } .has-padding-left { padding-left: 0.5em; } #attach_button, #send_button { height: 100%; } /* URL previews */ .url-preview-iframe-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; } .url-preview-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Attachments */ #attachments { opacity: 1; max-height: 1000px; transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out; overflow-x: auto; overflow-y: hidden; padding: 1.25rem 0; margin: 0; } #attachments.is-contracted { opacity: 0; max-height: 0; padding: 0; } .attachment-preview { position: relative; border: 1px solid #dbdbdb; padding: 0.3rem 0.5rem; border-radius: 4px; background-color: #f5f5f5; width: 9rem; height: 6rem; } .thumbnail-container { width: 150px; height: 80px; overflow: hidden; position: relative; } .icon { width: 60px; height: 60px; } .thumbnail-image { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; transform: translate(-50%, -50%); } .attachment-name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%; font-size: 0.8em; letter-spacing: 0.02em; text-align: center; margin-top: auto; } .thumbnail-image:empty { left: 50%; top: 50%; width: 8rem; height: auto; transform: translate(-50%, -50%); } .attachment-delete-button { position: absolute; top: -10px; right: -10px; }