react-webrtc-phone-dialer/dist/index.esm.css

A modern, floating WebRTC phone dialer component for React applications

.phone-dialer-new{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;position:fixed;width:320px;z-index:9999}.phone-dialer-new[data-theme=dark]{background:#1f2937;border-color:#374151;color:#fff}.phone-dialer-minimized{background:#2563eb;border-radius:50%;box-shadow:0 10px 25px -3px rgba(0,0,0,.1);color:#fff;cursor:pointer;padding:12px;position:fixed;transition:all .2s;z-index:9999}.phone-dialer-minimized:hover{background:#1d4ed8}.phone-dialer-minimized-icon{height:24px;width:24px}.phone-dialer-notification-dot{background:#ef4444;border-radius:50%;height:12px;position:absolute;right:-4px;top:-4px;width:12px}.phone-dialer-notification-dot.pulse{animation:pulse 2s infinite}.phone-dialer-header{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;cursor:move;padding:16px}.phone-dialer-header-top{align-items:center;display:flex;justify-content:space-between}.phone-dialer-title{align-items:center;display:flex;font-weight:600;gap:8px}.phone-dialer-title-icon{height:20px;width:20px}.phone-dialer-minimize-btn{background:hsla(0,0%,100%,.2);border:none;border-radius:4px;color:#fff;cursor:pointer;padding:4px;transition:background .2s}.phone-dialer-minimize-btn:hover{background:hsla(0,0%,100%,.3)}.phone-dialer-header-controls{align-items:center;display:flex;gap:8px}.phone-dialer-ringing-toggle{align-items:center;background:hsla(0,0%,100%,.2);border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;height:28px;justify-content:center;padding:4px;transition:all .2s;width:28px}.phone-dialer-ringing-toggle:hover{background:hsla(0,0%,100%,.3)}.phone-dialer-ringing-toggle.disabled{background:hsla(0,0%,100%,.1);opacity:.5}.phone-dialer-ringing-toggle.disabled:hover{background:hsla(0,0%,100%,.2)}.phone-dialer-from-selector{margin-top:12px;position:relative}.phone-dialer-from-btn{align-items:center;background:#3b82f6;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;padding:8px 12px;transition:background .2s;width:100%}.phone-dialer-from-btn:hover{background:#60a5fa}.phone-dialer-dropdown{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);left:0;margin-top:4px;position:absolute;right:0;top:100%;z-index:10}.phone-dialer-dropdown-item{background:none;border:none;color:#374151;cursor:pointer;padding:8px 12px;text-align:left;transition:background .2s;width:100%}.phone-dialer-dropdown-item:hover{background:#f3f4f6}.phone-dialer-incoming-overlay{align-items:center;background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;display:flex;flex-direction:column;inset:0;justify-content:center;padding:24px;position:absolute;z-index:10}.phone-dialer-incoming-avatar{font-size:4rem;margin-bottom:16px}.phone-dialer-incoming-name{font-size:1.25rem;font-weight:600;margin-bottom:8px}.phone-dialer-incoming-number{color:hsla(0,0%,100%,.8);margin-bottom:32px}.phone-dialer-incoming-actions{display:flex;gap:24px}.phone-dialer-answer-btn,.phone-dialer-reject-btn{border:none;border-radius:50%;cursor:pointer;padding:16px;transition:all .2s}.phone-dialer-reject-btn{background:#ef4444;color:#fff}.phone-dialer-reject-btn:hover{background:#dc2626}.phone-dialer-answer-btn{background:#10b981;color:#fff}.phone-dialer-answer-btn:hover{background:#059669}.phone-dialer-ringing-state{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:24px}.phone-dialer-ringing-info{margin-bottom:24px;text-align:center}.phone-dialer-ringing-avatar{align-items:center;background:#f59e0b;border-radius:50%;display:flex;height:80px;justify-content:center;margin:0 auto 16px;position:relative;width:80px}.phone-dialer-ringing-icon{color:#fff;height:32px;width:32px}.phone-dialer-pulse-ring{animation:pulse-ring 2s infinite;background:#f59e0b;border-radius:50%;inset:0;opacity:.3;position:absolute}.phone-dialer-ringing-title{color:#92400e;font-size:1.125rem;font-weight:600;margin-bottom:8px}.phone-dialer-ringing-number{color:#b45309;font-size:1rem;margin-bottom:16px}.phone-dialer-ringing-dots{display:flex;gap:4px;justify-content:center;margin-bottom:24px}.phone-dialer-dot{animation:bounce-dots 1.4s ease-in-out infinite;background:#f59e0b;border-radius:50%;height:8px;width:8px}.phone-dialer-dot:first-child{animation-delay:-.32s}.phone-dialer-dot:nth-child(2){animation-delay:-.16s}.phone-dialer-dot:nth-child(3){animation-delay:0s}.phone-dialer-ringing-controls{display:flex;justify-content:center}.phone-dialer-cancel-btn{background:#ef4444;border:none;border-radius:50%;color:#fff;cursor:pointer;padding:12px;transition:background .2s}.phone-dialer-cancel-btn:hover{background:#dc2626}.phone-dialer-connected-state{background:linear-gradient(135deg,#d1fae5,#a7f3d0);padding:24px}.phone-dialer-connected-state.ringing{background:linear-gradient(135deg,#dbeafe,#93c5fd)}.phone-dialer-connected-info{margin-bottom:24px;text-align:center}.phone-dialer-connected-avatar{align-items:center;background:#10b981;border-radius:50%;display:flex;height:80px;justify-content:center;margin:0 auto 16px;width:80px}.phone-dialer-connected-avatar svg{color:#fff;height:32px;width:32px}.phone-dialer-connected-title{color:#047857;font-size:1.125rem;font-weight:600;margin-bottom:8px}.phone-dialer-connected-number{color:#065f46;font-size:1rem;margin-bottom:8px}.phone-dialer-call-duration{color:#059669;font-family:monospace;font-size:1.125rem;font-weight:600}.phone-dialer-ringing-indicator{align-items:center;animation:pulse 2s infinite;background:rgba(59,130,246,.1);border-radius:20px;color:#2563eb;display:flex;font-size:.875rem;gap:6px;justify-content:center;margin-top:8px;padding:6px 12px}.phone-dialer-ringing-sound-icon{animation:pulse 1s infinite;height:16px;width:16px}.phone-dialer-ringing-indicator.disabled{animation:none;background:hsla(220,9%,46%,.1);color:#6b7280}.phone-dialer-ringing-indicator.disabled .phone-dialer-ringing-sound-icon{animation:none}.phone-dialer-connected-controls{display:flex;gap:16px;justify-content:center}.phone-dialer-control-btn{background:#f3f4f6;border:none;border-radius:50%;color:#6b7280;cursor:pointer;padding:12px;transition:all .2s}.phone-dialer-control-btn:hover{background:#e5e7eb}.phone-dialer-control-btn.active,.phone-dialer-end-call-btn{background:#ef4444;color:#fff}.phone-dialer-end-call-btn{border:none;border-radius:50%;cursor:pointer;padding:12px;transition:background .2s}.phone-dialer-end-call-btn:hover{background:#dc2626}.phone-dialer-tabs{background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex}.phone-dialer-tab{align-items:center;background:none;border:none;color:#6b7280;cursor:pointer;display:flex;flex:1;flex-direction:column;font-size:12px;font-weight:500;padding:12px 8px;transition:all .2s}.phone-dialer-tab:hover{color:#374151}.phone-dialer-tab.active{background:#fff;border-bottom:2px solid #2563eb;color:#2563eb}.phone-dialer-tab-icon{height:16px;margin-bottom:4px;width:16px}.phone-dialer-content{max-height:400px;overflow-y:auto;padding:16px}.phone-dialer-tab-content{display:flex;flex-direction:column;gap:16px}.phone-dialer-input{border:1px solid #d1d5db;border-radius:8px;font-family:monospace;font-size:16px;padding:12px 16px;text-align:center;transition:border-color .2s;width:100%}.phone-dialer-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1);outline:none}.phone-dialer-keypad{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}.phone-dialer-key{aspect-ratio:2;background:#f3f4f6;border:none;border-radius:8px;cursor:pointer;font-size:18px;font-weight:600;transition:all .2s}.phone-dialer-key:hover{background:#e5e7eb}.phone-dialer-key:active{transform:scale(.95)}.phone-dialer-call-btn{align-items:center;background:#10b981;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-weight:600;gap:8px;justify-content:center;padding:12px 16px;transition:background .2s;width:100%}.phone-dialer-call-btn:hover:not(:disabled){background:#059669}.phone-dialer-call-btn:disabled{background:#d1d5db;cursor:not-allowed}.phone-dialer-search{position:relative}.phone-dialer-search-icon{color:#6b7280;height:16px;left:12px;position:absolute;top:50%;transform:translateY(-50%);width:16px}.phone-dialer-search-input{border:1px solid #d1d5db;border-radius:8px;font-size:14px;padding:8px 12px 8px 40px;transition:border-color .2s;width:100%}.phone-dialer-search-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1);outline:none}.phone-dialer-contacts-list{display:flex;flex-direction:column;gap:8px}.phone-dialer-contact-item{align-items:center;background:#f9fafb;border-radius:8px;display:flex;justify-content:space-between;padding:12px;transition:background .2s}.phone-dialer-contact-item:hover{background:#f3f4f6}.phone-dialer-contact-info{align-items:center;display:flex;gap:12px}.phone-dialer-contact-avatar{align-items:center;background:#e5e7eb;border-radius:50%;display:flex;font-size:18px;height:40px;justify-content:center;width:40px}.phone-dialer-contact-details{display:flex;flex-direction:column}.phone-dialer-contact-name{color:#374151;font-size:14px;font-weight:500}.phone-dialer-contact-number{color:#6b7280;font-size:12px}.phone-dialer-contact-call-btn{background:#2563eb;border:none;border-radius:6px;color:#fff;cursor:pointer;padding:8px;transition:background .2s}.phone-dialer-contact-call-btn:hover{background:#1d4ed8}.phone-dialer-contact-call-btn svg{height:16px;width:16px}.phone-dialer-history-list{display:flex;flex-direction:column;gap:8px}.phone-dialer-history-item{align-items:center;background:#f9fafb;border-radius:8px;display:flex;justify-content:space-between;padding:12px;transition:background .2s}.phone-dialer-history-item:hover{background:#f3f4f6}.phone-dialer-history-info{align-items:center;display:flex;gap:12px}.phone-dialer-history-icon{border-radius:6px;padding:8px}.phone-dialer-history-icon.outgoing{background:#dbeafe;color:#2563eb}.phone-dialer-history-icon.incoming{background:#d1fae5;color:#10b981}.phone-dialer-history-icon.missed{background:#fee2e2;color:#ef4444}.phone-dialer-history-icon svg{height:16px;width:16px}.phone-dialer-history-details{display:flex;flex-direction:column}.phone-dialer-history-name{color:#374151;font-size:14px;font-weight:500}.phone-dialer-history-meta{color:#6b7280;font-size:12px}.phone-dialer-history-call-btn{background:#2563eb;border:none;border-radius:6px;color:#fff;cursor:pointer;padding:8px;transition:background .2s}.phone-dialer-history-call-btn:hover{background:#1d4ed8}.phone-dialer-history-call-btn svg{height:16px;width:16px}.phone-dialer-new[data-theme=dark] .phone-dialer-tabs{background:#374151;border-bottom-color:#4b5563}.phone-dialer-new[data-theme=dark] .phone-dialer-tab{color:#9ca3af}.phone-dialer-new[data-theme=dark] .phone-dialer-tab:hover{color:#d1d5db}.phone-dialer-new[data-theme=dark] .phone-dialer-tab.active{background:#1f2937;color:#3b82f6}.phone-dialer-new[data-theme=dark] .phone-dialer-content{background:#1f2937}.phone-dialer-new[data-theme=dark] .phone-dialer-input,.phone-dialer-new[data-theme=dark] .phone-dialer-search-input{background:#374151;border-color:#4b5563;color:#fff}.phone-dialer-new[data-theme=dark] .phone-dialer-key{background:#374151;color:#fff}.phone-dialer-new[data-theme=dark] .phone-dialer-key:hover{background:#4b5563}.phone-dialer-new[data-theme=dark] .phone-dialer-contact-item,.phone-dialer-new[data-theme=dark] .phone-dialer-history-item{background:#374151}.phone-dialer-new[data-theme=dark] .phone-dialer-contact-item:hover,.phone-dialer-new[data-theme=dark] .phone-dialer-history-item:hover{background:#4b5563}.phone-dialer-new[data-theme=dark] .phone-dialer-contact-name,.phone-dialer-new[data-theme=dark] .phone-dialer-history-name{color:#f3f4f6}.phone-dialer-new[data-theme=dark] .phone-dialer-contact-number,.phone-dialer-new[data-theme=dark] .phone-dialer-history-meta{color:#9ca3af}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulse-ring{0%{opacity:.3;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}@keyframes bounce-dots{0%,80%,to{opacity:.5;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}@media (max-width:480px){.phone-dialer-new{width:300px}}