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

Vue 3 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}body{font-size:var(--text)}.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}.chat-button:hover{box-shadow:0 6px 16px #1890ff66!important;transform:translateY(-2px)}.chat-button:active{transform:translateY(0)}.chat-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.chat-icon img{width:20px;height:20px}.chat-button-with-badge{position:relative;display:inline-block}.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;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;font-family:PingFang SC,Microsoft YaHei,sans-serif;background:#0000007f}.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}.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:relative;width:var(--modal-width, 600px);max-width:90vw;height:var(--modal-height, 600px);max-height:90vh;margin:auto}.chat-modal-container.fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;border-radius:0}.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;width:24px;height:24px;margin-right:var(--padding);cursor:pointer}.chat-modal-close:hover{color:#333;background:#f0f0f0}.chat-modal-close img{width:24px;height:24px}.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)}}@media (width <= 768px){.chat-modal-container.right{width:100vw}.chat-modal-container.center{width:95vw;height:80vh}}