/* ── Confirm/alert dialogs (SweetAlert2) — app-wide sizing ──────────────────── Vendor defaults (32em wide, 1rem base, 5em icon, 1.875em title) render about 1.5× the rest of this app: our own modals use text-lg titles and text-sm body. Everything inside the popup is em-based, so the one font-size on .swal2-popup rescales title/text/buttons together; --swal2-width and --swal2-icon-zoom pull the box and the icon in the rest of the way. Loaded from fragments/ds-head.html (every page) and login.html (own ). */ .swal2-popup:not(.swal2-toast) { --swal2-width: 24rem; --swal2-icon-zoom: .6; --swal2-border-radius: .75rem; --swal2-padding: 0 0 1rem; --swal2-title-padding: .6em 1.4em 0; --swal2-html-container-padding: .5em 1.6em .2em; --swal2-confirm-button-border-radius: .5rem; --swal2-cancel-button-border-radius: .5rem; --swal2-deny-button-border-radius: .5rem; /* App colours instead of the vendor's purple/grey. A per-call confirmButtonColor still wins — SweetAlert2 applies that as an inline style. */ --swal2-confirm-button-background-color: #2563EB; /* primary */ --swal2-cancel-button-background-color: #64748B; /* slate-500 */ --swal2-deny-button-background-color: #DC2626; /* danger */ --swal2-input-border-radius: .5rem; --swal2-input-border: 1px solid #D1D5DB; max-width: calc(100vw - 2rem); font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: .875rem; /* base for every em below — 14px, same as text-sm */ } /* Title at text-lg, body at text-sm — matching fragments/task-modal.html et al. */ .swal2-popup:not(.swal2-toast) .swal2-title { font-size: 1.286em; line-height: 1.5 } .swal2-popup:not(.swal2-toast) .swal2-html-container { font-size: 1em; line-height: 1.6 } .swal2-popup:not(.swal2-toast) .swal2-actions { margin-top: 1.1em } /* Buttons and form controls don't inherit the popup font by default (UA sheet wins) */ .swal2-popup:not(.swal2-toast) .swal2-styled { padding: .5em 1.35em; font-size: 1em; font-family: inherit } /* Input dialogs (Swal.fire({input}) or hand-rolled .swal2-input markup): the vendor leaves fields at width:auto with 2em side margins, so they float mid-dialog at a different width than every other form in the app. Full width of the body instead. */ .swal2-popup:not(.swal2-toast) .swal2-input, .swal2-popup:not(.swal2-toast) .swal2-textarea, .swal2-popup:not(.swal2-toast) .swal2-select, .swal2-popup:not(.swal2-toast) .swal2-file { width: 100%; margin: .6em 0 0; padding: .45em .75em; font-size: 1em; font-family: inherit; } .swal2-popup:not(.swal2-toast) .swal2-input { height: auto } .swal2-popup:not(.swal2-toast) .swal2-validation-message { margin-top: .8em; font-size: 1em } .swal2-popup:not(.swal2-toast) .swal2-footer { font-size: .93em } .swal2-popup:not(.swal2-toast) .swal2-close { --swal2-close-button-font-size: 1.75em } /* ── ข้อกำหนดการเรียงปุ่มใน dialog (ทั้งโปรเจค) ──────────────────────────────── ปุ่มบวก (บันทึก / ยืนยัน / สร้าง / ตกลง) = ขวาสุด · ปุ่มยกเลิก / ปิด = ซ้าย SweetAlert2 วาง DOM เป็น [confirm, deny, cancel] แล้ว flex ปกติ = confirm อยู่ซ้าย (ผิดกฎ) row-reverse พลิกให้เห็นเป็น cancel | deny | confirm (ซ้าย→ขวา) = ตรงกฎ ครอบทุก Swal ทั้งแอป *** custom modal: เรียง HTML ให้ปุ่มยกเลิก/ปิด "มาก่อน" ปุ่มบันทึก/ยืนยันเสมอ (ใน flex ปกติ) *** */ .swal2-popup:not(.swal2-toast) .swal2-actions { flex-direction: row-reverse } /* ── Roomy prompt (customClass.popup='swal-roomy') ──────────────────────────── Swal.fire({input}) ที่มีแต่ input (html-container ถูกซ่อน) → input เป็นลูกตรงของ grid popup กฎ .swal2-input ด้านบนตั้ง width:100% + margin ข้าง 0 มันเลยชนขอบ popup พอดี ดูอึดอัด ปลอกนี้ (specificity สูงกว่าเพราะมี .swal-roomy) เว้นระยะขอบซ้าย/ขวาให้ input หายใจได้ */ .swal2-popup.swal-roomy:not(.swal2-toast) .swal2-input, .swal2-popup.swal-roomy:not(.swal2-toast) .swal2-textarea { width: calc(100% - 3rem); margin: .6em 1.5rem 0; } .swal2-popup.swal-roomy:not(.swal2-toast) .swal2-input { padding: .55em .85em } .swal2-popup.swal-roomy:not(.swal2-toast) .swal2-input-label { margin: .2em 1.5rem 0; text-align: left }