vue-chat-button-simple/dist/vue-chat-button-simple.css

Vue 2 & Vue 3 compatible chat button components with badge support, modal popup, fixed positioning, environment configuration, and customizable themes

:root{--padding: 16px;--radius: 4px;--radius-md: 8px;--text: 14px;--text-sm: 12px;--text-md: 16px}.center{display:flex;align-items:center;justify-content:center}.flex-1{flex:1}.chat-button-simple{position:relative;display:inline-block}.chat-button{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;cursor:pointer;border-radius:50%;transition:all .3s ease;border:none}.chat-button:hover{transform:translateY(-2px)}.chat-button:active{transform:translateY(0)}.chat-button.loading{cursor:not-allowed!important;opacity:.7!important;transform:scale(.95)!important}.chat-button.loading:hover{transform:scale(.95)!important;box-shadow:none!important}.chat-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;overflow:hidden}.chat-icon img{width:20px;height:20px}.chat-button-with-badge{position:relative;display:inline-block;font-size:var(--text)}.chat-button-with-badge.fixed-bottom-right{position:fixed;right:20px;bottom:20px;z-index:9999}@media (width <= 768px){.chat-button-with-badge.fixed-bottom-right{right:16px;bottom:16px}}.badge{position:absolute;top:-6px;right:-6px;display:flex;align-items:center;justify-content:center;min-width:14px;height:14px;padding:2px;font-size:10px;color:#fff;border:1px solid #fff;border-radius:50%}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.chat-modal-overlay{position:fixed;display:flex;align-items:center;justify-content:center;font-family:PingFang SC,Microsoft YaHei,sans-serif;font-size:var(--text);z-index:999}.chat-modal-logo{width:24px;height:24px;object-fit:contain}.chat-modal-container{display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 20px #00000026;position:fixed;z-index:10000}.chat-modal-container.right{position:fixed;top:0;right:0;bottom:0;width:var(--modal-width, 400px);height:100vh;border-radius:0;animation:slideInRight .3s ease-out}.chat-modal-container.center{position:fixed;width:var(--modal-width, 600px);max-width:90vw;height:var(--modal-height, 600px);max-height:90vh}.chat-modal-container.custom{position:fixed;width:var(--modal-width, 600px);height:var(--modal-height, 600px)}.chat-modal-close-container{display:flex;align-items:center;justify-content:center;margin-right:var(--padding)}.chat-modal-container.fullscreen{position:fixed!important;width:100vw!important;height:100vh!important;left:0!important;top:0!important;right:0!important;bottom:0!important;border-radius:0!important;z-index:10000!important;max-width:none!important;max-height:none!important;margin:0!important;transform:none!important;box-shadow:none!important}.chat-modal-container.fullscreen .chat-modal-content{flex:1;width:100%;height:calc(100vh - 60px);overflow:hidden}.chat-modal-container.fullscreen .chat-modal-iframe{width:100%;height:100%;border:none}.chat-modal-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 0;background:#fff}.chat-modal-title{gap:13px;padding:0 var(--padding);font-size:var(--text-md);color:#333;letter-spacing:-.01}.chat-modal-close{display:flex;align-items:center;justify-content:center;height:24px;cursor:pointer;border:none;background:transparent;border-radius:4px}.chat-modal-close:hover{color:#333;background:#f0f0f0}.chat-modal-close svg{width:15px;height:15px}.full-screen-icon svg{width:12px;height:12px}.chat-modal-content{flex:1;width:100%;overflow:hidden}.chat-modal-iframe{width:100%;height:100%;border:none}.chat-modal-placeholder{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--text-sm);color:#999}.modal-fade-enter-active,.modal-fade-leave-active{transition:opacity .3s ease}.modal-fade-enter-from,.modal-fade-leave-to{opacity:0}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.chat-modal-container.dragging{-webkit-user-select:none;user-select:none;cursor:move}.chat-modal-container.dragging *{pointer-events:none}.chat-modal-container.dragging .chat-modal-header,.chat-modal-header.draggable{cursor:move}.chat-modal-header.draggable:hover{background:#f8f9fa}.chat-modal-controls{display:flex;align-items:center;gap:8px;margin-right:var(--padding)}.chat-modal-control-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;border:none;background:transparent;border-radius:4px;color:#666;transition:all .2s ease}.chat-modal-control-btn:hover{color:#333;background:#f0f0f0}.chat-modal-control-btn svg{width:16px;height:16px}.chat-modal-resize-handle{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:se-resize;background:linear-gradient(135deg,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);border-radius:0 0 var(--radius-md) 0;opacity:0;transition:opacity .2s ease}.chat-modal-container:hover .chat-modal-resize-handle{opacity:1}.chat-modal-resize-handle:hover{background:linear-gradient(135deg,transparent 0%,transparent 50%,#999 50%,#999 100%)}.chat-modal-container.dragging .chat-modal-resize-handle{opacity:0}.chat-modal-container.fullscreen .chat-modal-resize-handle{display:none}.chat-modal-container.fullscreen .chat-modal-header.draggable{cursor:default}.chat-modal-container.fullscreen .chat-modal-header.draggable:hover{background:transparent}@media (max-width: 768px){.chat-modal-container.dragging,.chat-modal-container.dragging .chat-modal-header{cursor:default}.chat-modal-resize-handle{display:none}}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;pointer-events:none}.loading-spinner{width:100%;height:100%;border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.global-loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;z-index:10000;display:flex;align-items:center;justify-content:center}.global-loading-container{border-radius:12px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:200px}.global-loading-spinner{width:40px;height:40px;border-top:4px solid transparent;border-radius:50%;animation:global-spin 1s linear infinite;margin-bottom:16px}.global-loading-text{font-size:16px;color:#333;font-weight:500}@keyframes global-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.global-loading-container{padding:24px;min-width:160px}.global-loading-spinner{width:32px;height:32px;border-width:3px}.global-loading-text{font-size:14px}}.error-modal-overlay{position:fixed;top:30px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:99999}.error-modal-container{display:flex;align-items:center;background:#fff2f1;fill:#f56c6c;padding:6px 16px;box-shadow:0 8px 20px #b1c5c514;border-radius:4px;border:1px solid #f56c6c;min-width:200px;max-width:500px;max-height:80vh;overflow:hidden;animation:error-modal-bounce .3s ease-out}.error-modal-title{flex:1;font-size:12px;line-height:1;color:#333}.error-modal-icon{width:16px;height:16px;margin-right:10px}.error-modal-close{background:none;margin:0;padding:0;border:none;cursor:pointer;color:#8c8c8c;display:flex;align-items:center;transition:all .2s;fill:#00000073}.error-modal-enter-active,.error-modal-leave-active{transition:all .3s ease}.error-modal-enter-from,.error-modal-leave-to{opacity:0;transform:scale(.8)}@keyframes error-modal-bounce{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@media (width <= 768px){.chat-modal-container.right{width:100vw}.chat-modal-container.center{width:95vw;height:80vh}}