:root { --mek-swal-primary: var(--admin-primary, var(--mek-color-primary)); --mek-swal-primary-hover: var(--admin-primary-hover, var(--mek-color-primary-hover)); --mek-swal-surface: var(--mek-color-surface); --mek-swal-surface-soft: var(--mek-color-surface-soft); --mek-swal-text: var(--mek-color-text); --mek-swal-muted: var(--mek-color-muted); --mek-swal-border: var(--mek-color-border); --mek-swal-shadow: var(--mek-shadow-lg); --mek-swal-overlay: var(--mek-overlay-soft); --mek-swal-radius: 18px; --mek-swal-button-radius: 10px; --mek-swal-accent: var(--mek-swal-primary); --mek-swal-confirm-bg: var(--mek-swal-primary); --mek-swal-confirm-hover-bg: var(--mek-swal-primary-hover); --mek-swal-confirm-color: var(--mek-color-on-primary); --mek-swal-cancel-bg: var(--mek-swal-surface); --mek-swal-cancel-hover-bg: var(--mek-swal-surface-soft); --mek-swal-cancel-color: var(--mek-swal-text); --mek-swal-pattern-opacity: .13; } :root[data-admin-mode="dark"], :root[data-admin-scheme="dark"], :root[data-theme="dark"] { --mek-swal-pattern-opacity: .18; } .mek-swal-popup--success, .mek-swal-toast--success { --mek-swal-accent: var(--mek-color-success); } .mek-swal-popup--warning, .mek-swal-toast--warning { --mek-swal-accent: var(--mek-color-warning); } .mek-swal-popup--info, .mek-swal-toast--info { --mek-swal-accent: var(--mek-color-info); } .mek-swal-popup--question, .mek-swal-popup--primary { --mek-swal-accent: var(--mek-swal-primary); } .mek-swal-popup--error, .mek-swal-popup--danger, .mek-swal-toast--error { --mek-swal-accent: var(--mek-color-danger); --mek-swal-confirm-bg: var(--mek-color-danger); --mek-swal-confirm-hover-bg: var(--mek-color-danger-hover); --mek-swal-confirm-color: var(--mek-color-on-danger); } .swal2-container.mek-swal-container { z-index: var(--mek-z-modal); padding: 1rem; font-family: var(--mek-font-sans); } .swal2-container.mek-swal-container.swal2-backdrop-show { background: var(--mek-swal-overlay); backdrop-filter: blur(2px); } .swal2-popup.mek-swal-popup { position: relative; isolation: isolate; overflow: hidden; max-width: calc(100vw - 2rem); padding: 0 0 1.3rem !important; border: 1px solid var(--mek-swal-border); border-radius: var(--mek-swal-radius); color: var(--mek-swal-text); background: var(--mek-swal-surface); box-shadow: var(--mek-swal-shadow); font-family: var(--mek-font-sans); } .swal2-popup.mek-swal-popup::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 205px; height: 126px; pointer-events: none; background: url('/assets/images/global/sweetalert-subtle-pattern.png') top right / 250px auto no-repeat; opacity: var(--mek-swal-pattern-opacity); } :root[data-admin-mode="dark"] .swal2-popup.mek-swal-popup::before, :root[data-admin-scheme="dark"] .swal2-popup.mek-swal-popup::before, :root[data-theme="dark"] .swal2-popup.mek-swal-popup::before { filter: brightness(1.35); } .swal2-popup .mek-swal-icon.swal2-icon { margin: 2.1rem auto .9rem; transform: scale(.92); transform-origin: center; } .swal2-popup .mek-swal-icon .swal2-icon-content { font-size: 3.75em; line-height: 1; } .swal2-popup .mek-swal-icon.swal2-warning, .swal2-popup .mek-swal-icon.swal2-info, .swal2-popup .mek-swal-icon.swal2-question { color: var(--mek-swal-accent) !important; border-color: color-mix(in srgb, var(--mek-swal-accent) 58%, transparent) !important; } .swal2-popup .mek-swal-icon.swal2-error { border-color: color-mix(in srgb, var(--mek-swal-accent) 58%, transparent) !important; } .swal2-popup .mek-swal-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--mek-swal-accent) !important; } .swal2-popup .mek-swal-icon.swal2-success { border-color: color-mix(in srgb, var(--mek-swal-accent) 58%, transparent) !important; } .swal2-popup .mek-swal-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--mek-swal-accent) 28%, transparent) !important; } .swal2-popup .mek-swal-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--mek-swal-accent) !important; } .swal2-popup .mek-swal-icon.swal2-success [class^="swal2-success-circular-line"], .swal2-popup .mek-swal-icon.swal2-success .swal2-success-fix { background-color: var(--mek-swal-surface) !important; } .swal2-popup .mek-swal-title.swal2-title { margin: 0; padding: 0 1.25rem; color: var(--mek-swal-text); font-family: inherit; font-size: clamp(1.35rem, 3vw, 1.62rem); font-weight: var(--mek-font-weight-bold); line-height: 1.28; letter-spacing: -.02em; } .swal2-popup .mek-swal-content.swal2-html-container { max-width: 28rem; margin: .72rem auto 0; padding: 0 1.5rem; color: var(--mek-swal-muted); font-size: .96rem; line-height: var(--mek-line-height-base); overflow-wrap: anywhere; } .swal2-popup .mek-swal-content.swal2-html-container:empty { display: none; } .swal2-popup .mek-swal-actions.swal2-actions { width: auto; margin: 1.55rem auto 0; gap: .7rem; } .swal2-popup .mek-swal-button { min-width: 7.6rem; min-height: 2.9rem; margin: 0; padding: .72rem 1.15rem; border: 1px solid transparent; border-radius: var(--mek-swal-button-radius); cursor: pointer; font-family: inherit; font-size: .91rem; font-weight: var(--mek-font-weight-bold); line-height: 1.2; transition: background-color var(--mek-transition), border-color var(--mek-transition), box-shadow var(--mek-transition), color var(--mek-transition), transform var(--mek-transition); } .swal2-popup .mek-swal-button:hover { transform: translateY(-1px); } .swal2-popup .mek-swal-button:active { transform: translateY(0); } .swal2-popup .mek-swal-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--mek-swal-confirm-bg) 22%, transparent); outline-offset: 3px; } .swal2-popup .mek-swal-button--confirm { color: var(--mek-swal-confirm-color); background: var(--mek-swal-confirm-bg); box-shadow: 0 7px 16px color-mix(in srgb, var(--mek-swal-confirm-bg) 22%, transparent); } .swal2-popup .mek-swal-button--confirm:hover { background: var(--mek-swal-confirm-hover-bg); box-shadow: 0 9px 20px color-mix(in srgb, var(--mek-swal-confirm-bg) 26%, transparent); } .swal2-popup .mek-swal-button--danger { --mek-swal-confirm-bg: var(--mek-color-danger); --mek-swal-confirm-hover-bg: var(--mek-color-danger-hover); --mek-swal-confirm-color: var(--mek-color-on-danger); } .swal2-popup .mek-swal-button--cancel, .swal2-popup .mek-swal-button--deny { color: var(--mek-swal-cancel-color); border-color: var(--mek-swal-border); background: var(--mek-swal-cancel-bg); box-shadow: var(--mek-shadow-xs); } .swal2-popup .mek-swal-button--cancel:hover, .swal2-popup .mek-swal-button--deny:hover { background: var(--mek-swal-cancel-hover-bg); } .swal2-popup .mek-swal-input.swal2-input, .swal2-popup .swal2-select, .swal2-popup .swal2-textarea, .swal2-popup .swal2-file, .swal2-popup .swal2-range input { width: calc(100% - 3rem); margin: 1.2rem 1.5rem 0; border: 1px solid var(--mek-swal-border); border-radius: var(--mek-swal-button-radius); color: var(--mek-swal-text); background: var(--mek-swal-surface-soft); box-shadow: none; font: inherit; } .swal2-popup .mek-swal-input.swal2-input:focus, .swal2-popup .swal2-select:focus, .swal2-popup .swal2-textarea:focus, .swal2-popup .swal2-file:focus { border-color: var(--mek-swal-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mek-swal-primary) 13%, transparent); outline: 0; } .swal2-popup .mek-swal-validation.swal2-validation-message { margin: .8rem 1.5rem 0; border-radius: var(--mek-swal-button-radius); color: var(--mek-color-danger); background: var(--mek-color-danger-soft); font-size: .84rem; } .swal2-popup .mek-swal-close.swal2-close { top: .55rem; right: .55rem; width: 2.3rem; height: 2.3rem; border-radius: 9px; color: var(--mek-swal-muted); background: transparent; font-size: 1.35rem; } .swal2-popup .mek-swal-close.swal2-close:hover { color: var(--mek-swal-text); background: var(--mek-swal-surface-soft); } .swal2-popup .mek-swal-loader.swal2-loader { width: 2.1rem; height: 2.1rem; margin: 1rem auto .25rem; border: 0; border-radius: 50%; color: var(--mek-swal-confirm-bg); background: conic-gradient(from 35deg, transparent 0 14%, currentColor 14% 70%, transparent 70% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.75px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.75px)); animation: mek-ui-spin .78s linear infinite; } .swal2-container.mek-swal-toast-container { z-index: var(--mek-z-toast); padding: 1rem; font-family: var(--mek-font-sans); } .swal2-popup.mek-swal-toast { width: min(24rem, calc(100vw - 2rem)); min-height: 4.2rem; padding: .75rem .85rem; border: 1px solid var(--mek-swal-border); border-radius: 13px; color: var(--mek-swal-text); background: var(--mek-swal-surface); box-shadow: var(--mek-shadow-md); } .swal2-popup.mek-swal-toast .swal2-icon { color: var(--mek-swal-accent) !important; border-color: color-mix(in srgb, var(--mek-swal-accent) 55%, transparent) !important; } .swal2-popup.mek-swal-toast .swal2-error [class^="swal2-x-mark-line"] { background-color: var(--mek-swal-accent) !important; } .swal2-popup.mek-swal-toast .swal2-success [class^="swal2-success-line"] { background-color: var(--mek-swal-accent) !important; } .swal2-popup.mek-swal-toast .swal2-title { color: var(--mek-swal-text); font-family: inherit; font-size: .92rem; font-weight: var(--mek-font-weight-bold); } .swal2-popup.mek-swal-toast .swal2-html-container { color: var(--mek-swal-muted); font-size: .82rem; } .swal2-popup.mek-swal-toast .swal2-timer-progress-bar { background: var(--mek-swal-accent); } .mek-swal-animate-in { animation: mek-swal-in 180ms var(--mek-ease-emphasized) both; } .mek-swal-animate-out { animation: mek-swal-out 140ms var(--mek-ease-standard) both; } @keyframes mek-swal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mek-swal-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(5px) scale(.99); } } @media (max-width: 560px) { .swal2-container.mek-swal-container { padding: .65rem; } .swal2-popup.mek-swal-popup { width: calc(100vw - 1.3rem) !important; --mek-swal-radius: 15px; } .swal2-popup .mek-swal-title.swal2-title { font-size: 1.3rem; } .swal2-popup .mek-swal-content.swal2-html-container { padding-inline: 1.1rem; } .swal2-popup .mek-swal-actions.swal2-actions { width: calc(100% - 2.2rem); flex-direction: column-reverse; } .swal2-popup .mek-swal-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .mek-swal-animate-in, .mek-swal-animate-out { animation-duration: 1ms !important; } .swal2-popup .mek-swal-loader.swal2-loader { animation-duration: 1.4s; } }