.nmodal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 9999; } /* BOX */ .nmodal-box { background: #fff; border-radius: 12px; width: 90%; max-width: 400px; padding: 30px 25px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: modalPop 0.25s ease; } /* ICON */ .nmodal-icon-wrap { margin-bottom: 15px; } .nmodal-icon { width: 70px; height: 70px; margin: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; } /* COLORS */ .nmodal-box.success .nmodal-icon { background: #28a745; } .nmodal-box.error .nmodal-icon { background: #dc3545; } .nmodal-box.warning .nmodal-icon { background: #ffc107; color: #333; } .nmodal-box.info .nmodal-icon { background: #17a2b8; } /* TEXT */ .nmodal-title { font-weight: 600; margin-bottom: 10px; } .nmodal-msg { font-size: 14px; color: #555; margin-bottom: 20px; } /* BUTTONS */ .nmodal-actions { display: flex; justify-content: center; gap: 10px; } .nmodal-btn { border: none; padding: 8px 18px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: 0.2s; } /* CANCEL */ .nmodal-btn-cancel { background: #e0e0e0; } .nmodal-btn-cancel:hover { background: #d5d5d5; } /* OK BUTTON COLORS */ .nmodal-btn-ok.success { background: #28a745; color: #fff; } .nmodal-btn-ok.error { background: #dc3545; color: #fff; } .nmodal-btn-ok.warning { background: #ffc107; color: #333; } .nmodal-btn-ok.info { background: #17a2b8; color: #fff; } .nmodal-btn-ok:hover { opacity: 0.9; } /* ANIMATION */ @keyframes modalPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* TRANSITION (Vue) */ .nmodal-enter-active, .nmodal-leave-active { transition: opacity 0.2s; } .nmodal-enter-from, .nmodal-leave-to { opacity: 0; }