Spaces:
Sleeping
Sleeping
| /* === AEGIS-AI Components: Buttons, Cards, Modals, Toasts, Skeletons === */ | |
| /* Buttons */ | |
| .btn { | |
| flex: 1; | |
| padding: 12px 20px; | |
| border-radius: 8px; | |
| font-family: inherit; | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: var(--transition-normal); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #000; | |
| border: none; | |
| box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(0, 240, 255, 0.4); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-main); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .btn-export { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: var(--text-main); | |
| padding: 7px 12px; | |
| border-radius: 6px; | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition-normal); | |
| font-family: inherit; | |
| } | |
| .btn-export:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| /* Badges & Risk Levels */ | |
| .risk-badge { | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| padding: 4px 10px; | |
| border-radius: 20px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-left: 10px; | |
| display: inline-block; | |
| } | |
| .risk-high { | |
| background: var(--danger-dim); | |
| color: var(--danger); | |
| border: 1px solid var(--danger-glow); | |
| animation: pulse-risk 2s infinite; | |
| } | |
| .risk-medium { | |
| background: rgba(255, 204, 0, 0.15); | |
| color: var(--warning); | |
| border: 1px solid rgba(255, 204, 0, 0.3); | |
| } | |
| .risk-low { | |
| background: var(--success-dim); | |
| color: var(--success); | |
| border: 1px solid rgba(0, 255, 170, 0.3); | |
| } | |
| /* Report Section Cards */ | |
| .report-section { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 12px; | |
| padding: 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .report-section-title { | |
| font-family: var(--font-code); | |
| font-size: 1.05rem; | |
| font-weight: 600; | |
| color: var(--accent); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| padding-bottom: 10px; | |
| } | |
| /* Collapsible Accordion (Tier 3) */ | |
| .accordion-section { | |
| overflow: hidden; | |
| } | |
| .accordion-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| padding: 14px 18px; | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 8px; | |
| transition: var(--transition-fast); | |
| font-weight: 500; | |
| } | |
| .accordion-header:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .accordion-header .accordion-icon { | |
| transition: transform 0.3s ease; | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .accordion-section.open .accordion-header .accordion-icon { | |
| transform: rotate(180deg); | |
| color: var(--accent); | |
| } | |
| .accordion-body { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.4s ease-out, padding 0.3s ease; | |
| padding: 0 15px; | |
| border: 1px solid transparent; | |
| border-top: none; | |
| border-radius: 0 0 8px 8px; | |
| } | |
| .accordion-section.open .accordion-body { | |
| max-height: 2000px; | |
| padding: 15px; | |
| border-color: var(--border-subtle); | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| /* Modals */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: rgba(0, 0, 0, 0.85); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| z-index: 200; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .modal-content { | |
| background: var(--bg-panel); | |
| border: 1px solid var(--border-glow); | |
| max-width: 500px; | |
| width: 100%; | |
| border-radius: 16px; | |
| padding: 28px; | |
| box-shadow: var(--shadow-modal); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border-subtle); | |
| padding-bottom: 14px; | |
| font-family: var(--font-code); | |
| } | |
| .btn-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: color 0.2s; | |
| } | |
| .btn-close:hover { | |
| color: #fff; | |
| } | |
| /* Form Controls & Toggles */ | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .form-group label { | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| } | |
| .form-group input[type='text'] { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 12px; | |
| border-radius: 8px; | |
| color: #fff; | |
| font-family: inherit; | |
| font-size: 0.9rem; | |
| outline: none; | |
| transition: border-color 0.3s; | |
| } | |
| .form-group input[type='text']:focus { | |
| border-color: var(--accent); | |
| } | |
| .toggle-group { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 44px; | |
| height: 24px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transition: .3s; | |
| border-radius: 24px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ''; | |
| height: 16px; | |
| width: 16px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: #fff; | |
| transition: .3s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: var(--accent); | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(20px); | |
| } | |
| /* Toast Notifications */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| z-index: 9999; | |
| pointer-events: none; | |
| } | |
| .toast-card { | |
| background: var(--bg-glass); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid var(--border-glow); | |
| border-left: 4px solid var(--accent); | |
| padding: 14px 18px; | |
| border-radius: 8px; | |
| color: var(--text-main); | |
| font-size: 0.9rem; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.6); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| max-width: 380px; | |
| pointer-events: auto; | |
| transform: translateX(120%); | |
| opacity: 0; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .toast-card.show { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| .toast-card i { | |
| font-size: 1.1rem; | |
| color: var(--accent); | |
| } | |
| .toast-card.error { | |
| border-left-color: var(--danger); | |
| } | |
| .toast-card.error i { | |
| color: var(--danger); | |
| } | |
| .toast-card.success { | |
| border-left-color: var(--success); | |
| } | |
| .toast-card.success i { | |
| color: var(--success); | |
| } | |
| .toast-card-content { | |
| flex-grow: 1; | |
| line-height: 1.4; | |
| } | |
| /* Skeleton Loading State */ | |
| .skeleton { | |
| background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s ease-in-out infinite; | |
| border-radius: 8px; | |
| } | |
| .skeleton-verdict { height: 80px; border-radius: 12px; margin-bottom: 15px; } | |
| .skeleton-image { aspect-ratio: 1; border-radius: 8px; } | |
| .skeleton-bar { height: 6px; border-radius: 3px; margin: 8px 0; } | |
| .skeleton-text { height: 14px; border-radius: 4px; margin: 4px 0; } | |
| .skeleton-text.short { width: 50%; } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| @keyframes pulse-risk { | |
| 0% { box-shadow: 0 0 0 0 var(--danger-glow); } | |
| 70% { box-shadow: 0 0 0 10px rgba(255, 42, 85, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255, 42, 85, 0); } | |
| } | |