Spaces:
Sleeping
Sleeping
| .confirm-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 2000; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(4px); | |
| -webkit-backdrop-filter: blur(4px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 16px; | |
| animation: confirm-fade-in 0.15s ease-out; | |
| } | |
| .confirm-dialog { | |
| width: 100%; | |
| max-width: 420px; | |
| background: var(--bg-primary, #ffffff); | |
| border: 1px solid var(--border-primary, #e5e7eb); | |
| border-radius: 16px; | |
| box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.35); | |
| padding: 28px 28px 20px; | |
| text-align: center; | |
| animation: confirm-scale-in 0.18s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="dark"] .confirm-dialog { | |
| box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.65); | |
| } | |
| .confirm-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| margin: 0 auto 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-secondary, #f3f4f6); | |
| color: var(--text-secondary, #6b7280); | |
| } | |
| .confirm-icon.danger { | |
| background: rgba(239, 68, 68, 0.12); | |
| color: #ef4444; | |
| } | |
| [data-theme="dark"] .confirm-icon.danger { | |
| background: rgba(239, 68, 68, 0.18); | |
| color: #f87171; | |
| } | |
| .confirm-title { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text-primary, #111827); | |
| margin: 0 0 8px 0; | |
| letter-spacing: -0.01em; | |
| } | |
| .confirm-message { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--text-secondary, #6b7280); | |
| margin: 0 0 24px 0; | |
| } | |
| .confirm-actions { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: center; | |
| } | |
| .confirm-btn { | |
| flex: 1; | |
| padding: 10px 18px; | |
| border-radius: 10px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease; | |
| border: 1px solid transparent; | |
| } | |
| .confirm-btn:active { | |
| transform: translateY(1px); | |
| } | |
| .confirm-btn-cancel { | |
| background: var(--bg-secondary, #f3f4f6); | |
| color: var(--text-primary, #111827); | |
| border-color: var(--border-primary, #e5e7eb); | |
| } | |
| .confirm-btn-cancel:hover { | |
| background: var(--bg-tertiary, #e5e7eb); | |
| } | |
| [data-theme="dark"] .confirm-btn-cancel { | |
| background: var(--bg-secondary-dark, #374151); | |
| color: var(--text-primary-dark, #f9fafb); | |
| border-color: var(--border-dark, #4b5563); | |
| } | |
| [data-theme="dark"] .confirm-btn-cancel:hover { | |
| background: var(--bg-tertiary-dark, #4b5563); | |
| } | |
| .confirm-btn-primary { | |
| background: var(--accent-primary, #2663eb); | |
| color: #ffffff; | |
| } | |
| .confirm-btn-primary:hover { | |
| background: var(--accent-secondary, #1d4fc4); | |
| box-shadow: 0 4px 12px -2px rgba(38, 99, 235, 0.45); | |
| } | |
| .confirm-btn-danger { | |
| background: #ef4444; | |
| color: #ffffff; | |
| } | |
| .confirm-btn-danger:hover { | |
| background: #dc2626; | |
| box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.45); | |
| } | |
| @keyframes confirm-fade-in { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes confirm-scale-in { | |
| from { opacity: 0; transform: scale(0.96) translateY(4px); } | |
| to { opacity: 1; transform: scale(1) translateY(0); } | |
| } | |