Evolution API WhatsApp MCP Server

/* Custom styles for Evolution API MCP Dashboard */ /* Nueva paleta de colores */ :root { --cream: #eaf8bfff; --cerulean: #006992ff; --indigo-dye: #27476eff; --oxford-blue: #001d4aff; /* Colores principales */ --primary-color: var(--cerulean); --secondary-color: var(--indigo-dye); --accent-color: var(--oxford-blue); --background-color: var(--cream); /* Colores de texto */ --text-color: var(--oxford-blue); --text-muted: var(--indigo-dye); /* Colores de componentes */ --card-bg: #ffffff; --border-color: rgba(39, 71, 110, 0.2); --hover-bg: rgba(0, 105, 146, 0.1); /* Estados */ --success-color: #28a745; --success-bg: rgba(40, 167, 69, 0.1); --danger-color: #dc3545; --danger-bg: rgba(220, 53, 69, 0.1); --warning-color: #ffc107; --warning-bg: rgba(255, 193, 7, 0.1); } body { background: linear-gradient(135deg, var(--cream) 0%, rgba(234, 248, 191, 0.8) 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); min-height: 100vh; } .navbar-brand { font-weight: 600; color: var(--oxford-blue) !important; } .navbar { background: linear-gradient(90deg, var(--cerulean), var(--indigo-dye)) !important; box-shadow: 0 2px 10px rgba(0, 29, 74, 0.2); } .navbar-brand, .navbar-nav .nav-link { color: var(--cream) !important; } .list-group-item { border: 1px solid var(--border-color); border-radius: 8px !important; margin-bottom: 4px; transition: all 0.3s ease; background-color: var(--card-bg); color: var(--text-color); } .list-group-item:hover { background-color: var(--hover-bg); transform: translateX(5px); border-color: var(--cerulean); } .list-group-item.active { background: linear-gradient(135deg, var(--cerulean), var(--indigo-dye)); border-color: var(--cerulean); color: var(--cream); transform: translateX(5px); } .card { border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 29, 74, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: var(--card-bg); } .card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 105, 146, 0.2); border-color: var(--cerulean); } .card-header { background: linear-gradient(135deg, var(--cream), rgba(234, 248, 191, 0.5)); border-bottom: 1px solid var(--border-color); border-radius: 12px 12px 0 0 !important; font-weight: 600; color: var(--oxford-blue); } .tab-content { display: none; } .tab-content.active { display: block; animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .badge { font-size: 0.75em; padding: 0.5em 0.75em; } .btn { border-radius: 8px; font-weight: 500; transition: all 0.3s ease; } .btn-primary { background: linear-gradient(135deg, var(--cerulean), var(--indigo-dye)); border-color: var(--cerulean); color: var(--cream); } .btn-primary:hover { background: linear-gradient(135deg, var(--indigo-dye), var(--oxford-blue)); border-color: var(--indigo-dye); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 105, 146, 0.3); } .btn-secondary { background-color: var(--indigo-dye); border-color: var(--indigo-dye); color: var(--cream); } .btn-secondary:hover { background-color: var(--oxford-blue); border-color: var(--oxford-blue); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(39, 71, 110, 0.3); } .btn:hover { transform: translateY(-1px); } .modal-content { border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 29, 74, 0.2); background-color: var(--card-bg); } .modal-header { background: linear-gradient(135deg, var(--cream), rgba(234, 248, 191, 0.5)); border-bottom: 1px solid var(--border-color); border-radius: 12px 12px 0 0; color: var(--oxford-blue); } .modal-footer { border-top: 1px solid var(--border-color); border-radius: 0 0 12px 12px; background-color: var(--card-bg); } .form-control, .form-select { border-radius: 8px; border: 1px solid var(--border-color); transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: var(--card-bg); color: var(--text-color); } .form-control:focus, .form-select:focus { border-color: var(--cerulean); box-shadow: 0 0 0 0.2rem rgba(0, 105, 146, 0.25); outline: none; } .form-label { color: var(--text-color); font-weight: 500; } .table { border-radius: 8px; overflow: hidden; background-color: var(--card-bg); } .table th { background: linear-gradient(135deg, var(--cream), rgba(234, 248, 191, 0.5)); border-top: none; font-weight: 600; color: var(--oxford-blue); border-bottom: 1px solid var(--border-color); } .table td { color: var(--text-color); border-bottom: 1px solid var(--border-color); } .status-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; } .status-connected { background-color: #28a745; } .status-disconnected { background-color: #dc3545; } .status-connecting { background-color: #ffc107; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .qr-code-container { text-align: center; padding: 20px; } .qr-code-container img { max-width: 256px; border: 2px solid #dee2e6; border-radius: 8px; } .instance-actions { display: flex; gap: 8px; } .instance-actions .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .loading-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(234, 248, 191, 0.3); border-top: 2px solid var(--cerulean); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .alert { border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--card-bg); } .alert-success { background-color: var(--success-bg); border-color: var(--success-color); color: var(--success-color); } .alert-danger { background-color: var(--danger-bg); border-color: var(--danger-color); color: var(--danger-color); } .alert-warning { background-color: var(--warning-bg); border-color: var(--warning-color); color: var(--warning-color); } .alert-info { background-color: rgba(0, 105, 146, 0.1); border-color: var(--cerulean); color: var(--cerulean); } .toast { border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 29, 74, 0.15); background-color: var(--card-bg); } /* Responsive adjustments */ @media (max-width: 768px) { .container-fluid { padding: 0 15px; } .card { margin-bottom: 1rem; } .instance-actions { flex-direction: column; } .instance-actions .btn { width: 100%; margin-bottom: 4px; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { :root { --card-bg: var(--oxford-blue); --text-color: var(--cream); --text-muted: rgba(234, 248, 191, 0.7); --border-color: rgba(0, 105, 146, 0.3); --hover-bg: rgba(0, 105, 146, 0.2); } body { background: linear-gradient(135deg, var(--oxford-blue) 0%, var(--indigo-dye) 100%); color: var(--cream); } .card { background-color: var(--card-bg); color: var(--cream); border-color: var(--border-color); } .card-header { background: linear-gradient(135deg, var(--indigo-dye), rgba(39, 71, 110, 0.8)); border-bottom-color: var(--border-color); color: var(--cream); } .list-group-item { background-color: var(--card-bg); color: var(--cream); border-color: var(--border-color); } .list-group-item:hover { background-color: var(--hover-bg); } .form-control, .form-select { background-color: var(--card-bg); border-color: var(--border-color); color: var(--cream); } .modal-content { background-color: var(--card-bg); color: var(--cream); } .modal-header { background: linear-gradient(135deg, var(--indigo-dye), rgba(39, 71, 110, 0.8)); color: var(--cream); } .table th { background: linear-gradient(135deg, var(--indigo-dye), rgba(39, 71, 110, 0.8)); color: var(--cream); } .table td { color: var(--cream); } } /* Webhook Configuration Styles */ .webhook-events { max-height: 300px; overflow-y: auto; background-color: var(--card-bg); border-radius: 8px; padding: 10px; } .webhook-event { padding: 8px 12px; margin-bottom: 8px; border-radius: 6px; font-size: 0.875rem; border-left: 3px solid var(--cerulean); background-color: var(--card-bg); color: var(--text-color); } .webhook-event.success { background-color: var(--success-bg); border-left-color: var(--success-color); color: var(--success-color); } .webhook-event.error { background-color: var(--danger-bg); border-left-color: var(--danger-color); color: var(--danger-color); } .webhook-event.warning { background-color: var(--warning-bg); border-left-color: var(--warning-color); color: var(--warning-color); } .webhook-event-time { font-size: 0.75rem; opacity: 0.7; display: block; margin-top: 2px; } .webhook-status { display: flex; align-items: center; gap: 8px; } .webhook-status-indicator { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .webhook-status-indicator.active { background-color: var(--success-color); box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.3); } .webhook-status-indicator.inactive { background-color: var(--text-muted); } .webhook-status-indicator.error { background-color: var(--danger-color); box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3); } /* Dark mode webhook styles */ @media (prefers-color-scheme: dark) { .webhook-events { background-color: var(--card-bg); } .webhook-event { background-color: var(--card-bg); color: var(--cream); border-left-color: var(--cerulean); } .webhook-event.success { background-color: rgba(40, 167, 69, 0.2); color: var(--success-color); border-left-color: var(--success-color); } .webhook-event.error { background-color: rgba(220, 53, 69, 0.2); color: var(--danger-color); border-left-color: var(--danger-color); } .webhook-event.warning { background-color: rgba(255, 193, 7, 0.2); color: var(--warning-color); border-left-color: var(--warning-color); } } /* OpenAI Configuration Styles */ .openai-config-form { background: var(--card-bg); border-radius: 8px; padding: 20px; } .temperature-slider { width: 100%; } .temperature-value { font-weight: 600; color: var(--primary-color); } .openai-status { background: var(--card-bg); border-radius: 8px; padding: 15px; } .api-key-toggle { cursor: pointer; } .usage-stats { background: var(--card-bg); border-radius: 8px; padding: 15px; } .usage-stat-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .usage-stat-item:last-child { border-bottom: none; } .usage-stat-label { color: var(--text-muted); font-size: 0.9em; } .usage-stat-value { font-weight: 600; color: var(--text-color); } .cost-estimate { color: var(--success-color); font-weight: 600; } .model-selector { position: relative; } .model-info { font-size: 0.8em; color: var(--text-muted); margin-top: 4px; } .system-prompt { font-family: 'Courier New', monospace; font-size: 0.9em; line-height: 1.4; } .openai-test-result { margin-top: 15px; padding: 10px; border-radius: 4px; font-size: 0.9em; } .openai-test-success { background-color: var(--success-bg); color: var(--success-color); border: 1px solid var(--success-color); } .openai-test-error { background-color: var(--danger-bg); color: var(--danger-color); border: 1px solid var(--danger-color); } /* Dark mode adjustments for OpenAI */ @media (prefers-color-scheme: dark) { .openai-config-form { background: var(--card-bg); } .openai-status { background: var(--card-bg); } .usage-stats { background: var(--card-bg); } .usage-stat-item { border-bottom-color: var(--border-color); } .usage-stat-label { color: var(--text-muted); } .usage-stat-value { color: var(--cream); } .system-prompt { background: var(--card-bg); color: var(--cream); border: 1px solid var(--border-color); } .openai-test-success { background-color: rgba(40, 167, 69, 0.1); color: var(--success-color); border-color: var(--success-color); } .openai-test-error { background-color: rgba(220, 53, 69, 0.1); color: var(--danger-color); border-color: var(--danger-color); } .temperature-value { color: var(--cerulean); } .cost-estimate { color: var(--success-color); } .model-info { color: var(--text-muted); } }