MCP Vulnerability Management System

/* Custom styles to complement Tailwind CSS */ /* API Key card styles */ .api-key-card { transition: all 0.3s ease; } .api-key-card:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Modal animation */ .modal-enter { animation: modalEnter 0.3s ease-out; } @keyframes modalEnter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Form input focus styles */ input:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } /* Button hover effects */ .btn-hover { transition: all 0.2s ease; } .btn-hover:hover { transform: translateY(-1px); } /* Loading spinner */ .spinner { width: 24px; height: 24px; border: 3px solid #f3f3f3; border-top: 3px solid #4f46e5; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Toast notification */ .toast { position: fixed; bottom: 1rem; right: 1rem; padding: 1rem; border-radius: 0.5rem; background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 50; animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Responsive adjustments */ @media (max-width: 640px) { .modal-content { width: 90%; margin: 1rem auto; } } /* General styles */ body { background-color: #f8f9fa; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } /* Card styles */ .card { border: none; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 20px; } .card-header { background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 15px 20px; } .card-title { margin: 0; font-size: 1.1rem; font-weight: 600; } /* Table styles */ .table { margin-bottom: 0; } .table th { border-top: none; font-weight: 600; } .table-hover tbody tr:hover { background-color: rgba(0,0,0,0.02); } /* Badge styles */ .badge { padding: 0.5em 0.8em; font-weight: 500; } /* Form styles */ .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25); border-color: #80bdff; } /* Button styles */ .btn { padding: 0.5rem 1rem; font-weight: 500; } .btn-primary { background-color: #007bff; border-color: #007bff; } .btn-primary:hover { background-color: #0069d9; border-color: #0062cc; } /* Alert styles */ .alert { border: none; border-radius: 10px; padding: 1rem 1.5rem; } /* Footer styles */ .footer { background-color: #f8f9fa; padding: 1rem 0; margin-top: auto; } /* Responsive adjustments */ @media (max-width: 768px) { .card { margin-bottom: 15px; } .table-responsive { margin-bottom: 0; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; }