/* ============================================================================= VTLog.ui.confirm() — app-styled confirmation modal (global component) Appended to , so the redesign palette is hard-coded here rather than inherited from a page wrapper's CSS vars. ============================================================================= */ .vtl-confirm { position: fixed; inset: 0; z-index: 2000; display: none; } .vtl-confirm.is-open { display: block; } .vtl-confirm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); animation: vtlConfirmFade 0.12s ease; } .vtl-confirm-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 2rem)); background: #1e2a38; border: 1px solid rgba(99, 99, 99, 0.25); border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); padding: 1.25rem; animation: vtlConfirmPop 0.14s ease; } .vtl-confirm-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.7rem; } .vtl-confirm-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 153, 0, 0.12); color: #ff9900; font-size: 0.95rem; } .vtl-confirm.is-danger .vtl-confirm-icon { background: rgba(255, 59, 48, 0.14); color: #ff3b30; } .vtl-confirm-title { color: #e0e0e0; font-size: 1rem; font-weight: 600; } .vtl-confirm-msg { color: rgba(224, 224, 224, 0.7); font-size: 0.85rem; line-height: 1.5; margin-bottom: 1.15rem; } .vtl-confirm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } .vtl-confirm-btn { border-radius: 6px; padding: 0.5rem 1.05rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.12s; } .vtl-confirm-cancel { background: transparent; color: rgba(224, 224, 224, 0.8); border-color: rgba(99, 99, 99, 0.4); } .vtl-confirm-cancel:hover { background: #202d3c; color: #e0e0e0; } .vtl-confirm-ok { background: #ff9900; color: #1a1a1a; } .vtl-confirm-ok:hover { filter: brightness(1.08); } .vtl-confirm.is-danger .vtl-confirm-ok { background: #ff3b30; color: #fff; } .vtl-confirm-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } @keyframes vtlConfirmFade { from { opacity: 0; } to { opacity: 1; } } @keyframes vtlConfirmPop { from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }