messaging-widget
Version:
Widget embebible multi-canal para WhatsApp, Instagram, Messenger y chat interno
1 lines • 5.87 kB
CSS
#messaging-widget-container{bottom:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:fixed;right:20px;z-index:9999}.messaging-widget-main-button{align-items:center;background:#25d366;border:none;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer;display:flex;height:60px;justify-content:center;overflow:hidden;position:relative;transition:all .3s ease;width:60px}.messaging-widget-main-button:hover{box-shadow:0 6px 20px rgba(0,0,0,.2);transform:scale(1.1)}.messaging-widget-main-button:active{transform:scale(.95)}.messaging-widget-main-button svg{height:24px;width:24px;fill:#fff}.messaging-widget-channels-menu{background:#fff;border-radius:12px;bottom:70px;box-shadow:0 8px 25px rgba(0,0,0,.15);min-width:200px;opacity:0;overflow:hidden;position:absolute;right:0;transform:translateY(10px);transition:all .3s ease;visibility:hidden}.messaging-widget-channels-menu.open{opacity:1;transform:translateY(0);visibility:visible}.messaging-widget-channel-item{align-items:center;border-bottom:1px solid #f0f0f0;color:#333;cursor:pointer;display:flex;padding:12px 16px;text-decoration:none;transition:background .2s ease}.messaging-widget-channel-item:last-child{border-bottom:none}.messaging-widget-channel-item:hover{background:#f8f9fa}.messaging-widget-channel-icon{flex-shrink:0;height:24px;margin-right:12px;width:24px}.messaging-widget-channel-name{font-size:14px;font-weight:500}.messaging-widget-chat-window{background:#fff;border-radius:12px 12px 0 0;bottom:0;box-shadow:0 -5px 25px rgba(0,0,0,.15);display:flex;flex-direction:column;height:500px;opacity:0;overflow:hidden;position:absolute;right:0;transform:translateY(100%);transition:all .3s ease;visibility:hidden;width:350px}.messaging-widget-chat-window.open{opacity:1;transform:translateY(0);visibility:visible}.messaging-widget-chat-header{align-items:center;background:#25d366;color:#fff;display:flex;justify-content:space-between;padding:16px}.messaging-widget-chat-title{font-size:16px;font-weight:600}.messaging-widget-close-button{background:none;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:18px;padding:4px;transition:background .2s ease}.messaging-widget-close-button:hover{background:hsla(0,0%,100%,.1)}.messaging-widget-chat-messages{background:#f8f9fa;display:flex;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding:16px}.messaging-widget-message{border-radius:12px;font-size:14px;line-height:1.4;max-width:80%;padding:8px 12px;word-wrap:break-word}.messaging-widget-message.received{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;color:#333}.messaging-widget-message.sent{align-self:flex-end;background:#25d366;border-bottom-right-radius:4px;color:#fff}.messaging-widget-chat-input-container{background:#fff;border-top:1px solid #e0e0e0;display:flex;gap:8px;padding:16px}.messaging-widget-chat-input{border:1px solid #e0e0e0;border-radius:20px;flex:1;font-size:14px;outline:none;padding:8px 16px;transition:border-color .2s ease}.messaging-widget-chat-input:focus{border-color:#25d366}.messaging-widget-send-button{align-items:center;background:#25d366;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.messaging-widget-send-button:hover{background:#128c7e;transform:scale(1.05)}.messaging-widget-send-button:disabled{background:#ccc;cursor:not-allowed;transform:none}.messaging-widget-typing-indicator{align-self:flex-start;animation:messaging-widget-pulse 2s infinite;background:#fff;border-radius:12px;border-bottom-left-radius:4px;color:#666;font-style:italic;padding:8px 12px}@keyframes messaging-widget-pulse{0%,to{opacity:.6}50%{opacity:1}}@media (max-width:480px){#messaging-widget-container{bottom:10px;right:10px}.messaging-widget-chat-window{border-radius:0;bottom:0;height:100vh;right:0;width:100vw}.messaging-widget-channels-menu{bottom:70px;left:0;margin:0 20px;right:0}}.messaging-widget-position-bottom-left{bottom:20px;left:20px;right:auto}.messaging-widget-position-top-right{bottom:auto;right:20px;top:20px}.messaging-widget-position-top-left{bottom:auto;left:20px;right:auto;top:20px}.messaging-widget-theme-blue .messaging-widget-chat-header,.messaging-widget-theme-blue .messaging-widget-main-button,.messaging-widget-theme-blue .messaging-widget-message.sent,.messaging-widget-theme-blue .messaging-widget-send-button{background:#007bff}.messaging-widget-theme-blue .messaging-widget-send-button:hover{background:#0056b3}.messaging-widget-theme-blue .messaging-widget-chat-input:focus{border-color:#007bff}.messaging-widget-theme-purple .messaging-widget-chat-header,.messaging-widget-theme-purple .messaging-widget-main-button,.messaging-widget-theme-purple .messaging-widget-message.sent,.messaging-widget-theme-purple .messaging-widget-send-button{background:#6f42c1}.messaging-widget-theme-purple .messaging-widget-send-button:hover{background:#5a2d91}.messaging-widget-theme-purple .messaging-widget-chat-input:focus{border-color:#6f42c1}.messaging-widget-theme-red .messaging-widget-chat-header,.messaging-widget-theme-red .messaging-widget-main-button,.messaging-widget-theme-red .messaging-widget-message.sent,.messaging-widget-theme-red .messaging-widget-send-button{background:#dc3545}.messaging-widget-theme-red .messaging-widget-send-button:hover{background:#c82333}.messaging-widget-theme-red .messaging-widget-chat-input:focus{border-color:#dc3545}.messaging-widget-hidden{display:none}.messaging-widget-fade-in{animation:messaging-widget-fadeIn .3s ease}.messaging-widget-fade-out{animation:messaging-widget-fadeOut .3s ease}@keyframes messaging-widget-fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes messaging-widget-fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}}