/* ===================================================================== Message modal (#msgModal) — shown after ajax form submits Markup: project/layouts/default/includes/modals/messages.blade.php Content injected by mainframe/js/validation.js (loadMsg) Shared by both layouts: loaded on the admin side via config/mainframe/config.php (load.css) and linked directly in project/layouts/public/template.blade.php for public pages. ===================================================================== */ .message-modal .modal-dialog { max-width: 480px; margin: 30px auto; } .message-modal .modal-content { border: none; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); overflow: hidden; } .message-modal .modal-header { background: #faf8fd; border-bottom: 1px solid #ece6f6 !important; padding: 14px 20px; align-items: center; } .message-modal .modal-title { float: none; /* mainframe.css floats .modal-title; header is flex in BS4/BS5 */ font-size: 16px; font-weight: 600; color: #333; } /* JS never sets a title — collapse the empty heading */ .message-modal .modal-title:empty { display: none; } .message-modal .modal-header .close { padding: 0 8px; margin: 0 0 0 auto; } .message-modal .modal-body { padding: 20px; } /* Status blocks (Success / Error / Message) */ .message-modal .ajaxMsg { border-radius: 10px; padding: 14px 16px !important; margin: 0 0 10px; border-left: none; font-size: 14px; } .message-modal .ajaxMsg:last-child { margin-bottom: 0; } .message-modal .ajaxMsg h4 { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: inherit; } /* text-green / text-red on injected h4 aren't defined in AdminLTE 3 — inherit the block colour instead */ .message-modal .ajaxMsg .text-green, .message-modal .ajaxMsg .text-red { color: inherit; } .message-modal .ajax-msg-success { background: #f0faf4; border: 1px solid #bfe8cf; color: #1e7a44; } .message-modal .ajax-msg-error { background: #fdf2f2; border: 1px solid #f3c8c8; color: #b02a37; } .message-modal .ajax-msg { background: #faf8fd; border: 1px solid #ece6f6; color: #4a4458; } .message-modal .modal-footer { background: #faf8fd; border-top: 1px solid #ece6f6 !important; padding: 12px 20px; } .message-modal .modal-footer .btn-secondary { border-radius: 8px; padding: 7px 22px; } /* ===================================================================== Dark mode () Both themes give .modal-content a dark surface (dark-theme.css on the admin side, custom.css on the public site), so the hard-coded light chrome above would leave a dark body sandwiched between two white bars. Re-tint it here, in the file both layouts load. The token fallbacks cover pages where neither theme file is present. !important on the status blocks is needed to beat dark-theme.css's generic `[data-theme="dark"] .callout` rule. ===================================================================== */ [data-theme="dark"] .message-modal .modal-header, [data-theme="dark"] .message-modal .modal-footer { background: var(--sp-bg-elevated, #1a2035); border-color: var(--sp-border, #1e2536) !important; } [data-theme="dark"] .message-modal .modal-title { color: var(--sp-text-primary, #e0e0e0); } /* the close button carries an inline color:#555 — !important is the only override */ [data-theme="dark"] .message-modal .modal-header .btn-light { background-color: var(--sp-surface, #141829) !important; border-color: var(--sp-border, #1e2536) !important; color: var(--sp-text-primary, #e0e0e0) !important; } [data-theme="dark"] .message-modal .ajax-msg-success { background: rgba(34, 197, 94, .12) !important; border: 1px solid rgba(74, 222, 128, .35) !important; color: #6ee7a0 !important; } [data-theme="dark"] .message-modal .ajax-msg-error { background: rgba(239, 68, 68, .12) !important; border: 1px solid rgba(248, 113, 113, .35) !important; color: #fca5a5 !important; } [data-theme="dark"] .message-modal .ajax-msg { background: var(--sp-bg-elevated, #1a2035) !important; border: 1px solid var(--sp-border, #1e2536) !important; color: var(--sp-text-primary, #e0e0e0) !important; } @media (max-width: 767.98px) { .message-modal .modal-dialog { margin: 10px; max-width: none; } }