ธรรมดาต่อท้าย กล่อง dialog จึงไปโผล่ใต้สุด ของหน้าและไม่มีฉากหลังทึบ ที่นี่ใช้ flex + auto margin แทน grid areas เพราะทั้งคู่มีมานานก่อน Chrome 83 */ .legacy-css .swal2-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* ไม่ใช้ inset: — Chrome 87 */ z-index: 1060; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0.625em; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(0, 0, 0, 0.4); } /* ตอนกำลังปิด SweetAlert2 สลับมาใช้คลาสนี้เพื่อให้ฉากหลังใส */ .legacy-css .swal2-container.swal2-backdrop-hide { background: transparent !important; } .legacy-css .swal2-container.swal2-no-backdrop { background: transparent; } /* ล็อกไม่ให้หน้าหลังเลื่อนตอนเปิด dialog (ของเดิมอยู่ในกฎที่หายไปเหมือนกัน) */ .legacy-css body.swal2-shown { overflow: hidden; } /* ── SweetAlert2: ตัวกล่อง ─────────────────────────────────────────────── SweetAlert2 ใส่ display:grid ให้ popup เป็น inline style ตอนเปิด (show()) ซึ่ง inline style ชนะ CSS เสมอ จึงไม่ต้องประกาศ display ที่นี่ และ**ห้าม** ประกาศ display:none ตามของเดิมด้วย เดี๋ยวจะไปบังจังหวะที่ JS ยังเซ็ตไม่ทัน margin:auto คือตัวจัดกึ่งกลาง — ดีกว่า align-items ตรงที่ถ้ากล่องสูงเกินจอ ยังเลื่อนขึ้นไปดูส่วนบนได้ ไม่ถูกตัดหาย */ .legacy-css .swal2-popup { position: relative; box-sizing: border-box; grid-template-columns: minmax(0, 100%); width: 32em; max-width: 100%; margin: auto; padding: 0 0 1.25em; border: none; border-radius: 5px; background: #fff; color: #545454; font-family: inherit; font-size: 1rem; text-align: center; } /* ตำแหน่งตาม option position: ของ SweetAlert2 — เขียนทับ auto margin ทีละด้าน แทนการไล่ทำ grid-template-areas ทั้งชุด */ .legacy-css .swal2-container.swal2-top > .swal2-popup, .legacy-css .swal2-container.swal2-top-start > .swal2-popup, .legacy-css .swal2-container.swal2-top-left > .swal2-popup, .legacy-css .swal2-container.swal2-top-end > .swal2-popup, .legacy-css .swal2-container.swal2-top-right > .swal2-popup { margin-top: 0; } .legacy-css .swal2-container.swal2-bottom > .swal2-popup, .legacy-css .swal2-container.swal2-bottom-start > .swal2-popup, .legacy-css .swal2-container.swal2-bottom-left > .swal2-popup, .legacy-css .swal2-container.swal2-bottom-end > .swal2-popup, .legacy-css .swal2-container.swal2-bottom-right > .swal2-popup { margin-bottom: 0; } .legacy-css .swal2-container.swal2-top-start > .swal2-popup, .legacy-css .swal2-container.swal2-top-left > .swal2-popup, .legacy-css .swal2-container.swal2-center-start > .swal2-popup, .legacy-css .swal2-container.swal2-center-left > .swal2-popup, .legacy-css .swal2-container.swal2-bottom-start > .swal2-popup, .legacy-css .swal2-container.swal2-bottom-left > .swal2-popup { margin-left: 0; } .legacy-css .swal2-container.swal2-top-end > .swal2-popup, .legacy-css .swal2-container.swal2-top-right > .swal2-popup, .legacy-css .swal2-container.swal2-center-end > .swal2-popup, .legacy-css .swal2-container.swal2-center-right > .swal2-popup, .legacy-css .swal2-container.swal2-bottom-end > .swal2-popup, .legacy-css .swal2-container.swal2-bottom-right > .swal2-popup { margin-right: 0; } /* ── SweetAlert2: ข้อความ ────────────────────────────────────────────────── */ .legacy-css .swal2-title { position: relative; max-width: 100%; margin: 0; padding: 0.8em 1em 0; color: inherit; font-size: 1.875em; font-weight: 600; text-align: center; word-wrap: break-word; } .legacy-css .swal2-html-container { z-index: 1; justify-content: center; margin: 1em 1.6em 0.3em; padding: 0; overflow: auto; color: inherit; font-size: 1.125em; font-weight: normal; line-height: normal; text-align: center; word-wrap: break-word; word-break: break-word; } .legacy-css .swal2-footer { margin: 1em 0 0; padding: 1em 1em 0; border-top: 1px solid #eee; color: inherit; font-size: 1em; text-align: center; } .legacy-css .swal2-validation-message { align-items: center; justify-content: center; margin: 1em 0 0; padding: 0.625em; overflow: hidden; background: #f0f0f0; color: #666; font-size: 1em; font-weight: 300; } /* ── SweetAlert2: ปุ่ม ─────────────────────────────────────────────────── JS เซ็ต display:inline-block ให้ปุ่มเป็น inline style อยู่แล้ว ที่นี่จัดแค่หน้าตา สีตรงกับค่าเริ่มต้นของ SweetAlert2 v11 เพื่อให้สองเครื่องหน้าตาใกล้กันที่สุด */ .legacy-css .swal2-actions { display: flex; z-index: 1; box-sizing: border-box; flex-wrap: wrap; align-items: center; justify-content: center; width: auto; margin: 1.25em auto 0; padding: 0; } .legacy-css .swal2-styled { /* ห้ามใช้ gap ใน flex — Chrome 84 จึงเว้นระยะระหว่างปุ่มด้วย margin */ margin: 0.3125em; padding: 0.625em 1.1em; box-shadow: none; border: 0; border-radius: 0.25em; color: #fff; font-weight: 500; font-size: 1em; } .legacy-css .swal2-styled:not([disabled]) { cursor: pointer; } .legacy-css .swal2-styled.swal2-confirm { background-color: #7066e0; } .legacy-css .swal2-styled.swal2-deny { background-color: #dc3741; } .legacy-css .swal2-styled.swal2-cancel { background-color: #6e7881; } .legacy-css .swal2-close { position: absolute; z-index: 2; top: 0; right: 0; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; padding: 0; overflow: hidden; border: none; border-radius: 5px; background: transparent; color: #ccc; font-family: serif; font-size: 2.5em; line-height: 1.2; cursor: pointer; } /* ── SweetAlert2: ช่องกรอก (หน้ากดคิวใช้ input:'text' ตอนใส่รหัสพนักงาน) ── font-size 1.125em ของ 16px = 18px เกิน 16px ตามกติกาใน docs/Frontend/mobile-input-stability.md จอจึงไม่ซูมเองตอนโฟกัส */ .legacy-css .swal2-input, .legacy-css .swal2-file, .legacy-css .swal2-textarea, .legacy-css .swal2-select { box-sizing: border-box; width: auto; max-width: 100%; margin: 1em 2em 3px; padding: 0.375em 0.625em; border: 1px solid #d9d9d9; border-radius: 0.1875em; background: transparent; color: inherit; font-size: 1.125em; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06); } .legacy-css .swal2-input { height: 2.625em; } .legacy-css .swal2-textarea { height: 6.75em; padding: 0.75em; } .legacy-css .swal2-input-label { display: flex; justify-content: center; margin: 1em auto 0; } .legacy-css .swal2-inputerror { border-color: #f27474 !important; box-shadow: 0 0 2px #f27474 !important; } /* ── SweetAlert2: แถบเวลาถอยหลัง (timerProgressBar) ─────────────────────── */ .legacy-css .swal2-timer-progress-bar-container { position: absolute; right: 0; bottom: 0; left: 0; grid-column: auto !important; height: 0.25em; overflow: hidden; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .legacy-css .swal2-timer-progress-bar { width: 100%; height: 0.25em; background: rgba(0, 0, 0, 0.2); } /* ── SweetAlert2: ไอคอน ────────────────────────────────────────────────── success/error ของจริงวาดเครื่องหมายด้วย

หลายชิ้นที่หมุนองศาและวางแบบ absolute ซึ่งกฎเรขาคณิตทั้งหมดหายไปกับ :where() ต่อให้ไล่เขียนคืนก็เปราะมาก จึงซ่อนชิ้นส่วนพวกนั้นแล้วใส่สัญลักษณ์ตัวอักษรแทน — อ่านออกแน่นอนกว่า ส่วน warning/info/question ใช้ .swal2-icon-content ที่มีตัวอักษรอยู่แล้ว */ .legacy-css .swal2-icon { position: relative; box-sizing: content-box; display: flex; align-items: center; justify-content: center; width: 5em; height: 5em; margin: 2.5em auto 0.6em; border: 0.25em solid transparent; border-radius: 50%; font-family: inherit; cursor: default; -webkit-user-select: none; user-select: none; } .legacy-css .swal2-icon .swal2-icon-content { display: flex; align-items: center; justify-content: center; font-size: 3.75em; } .legacy-css .swal2-icon.swal2-success { border-color: #a5dc86; color: #a5dc86; } .legacy-css .swal2-icon.swal2-error { border-color: #f27474; color: #f27474; } .legacy-css .swal2-icon.swal2-warning { border-color: #facea8; color: #f8bb86; } .legacy-css .swal2-icon.swal2-info { border-color: #9de0f6; color: #3fc3ee; } .legacy-css .swal2-icon.swal2-question { border-color: #c9dae1; color: #87adbd; } .legacy-css .swal2-icon.swal2-success > *, .legacy-css .swal2-icon.swal2-error > * { display: none !important; } .legacy-css .swal2-icon.swal2-success:before { content: '\2713'; /* ✓ */ font-size: 3.5em; line-height: 1; } .legacy-css .swal2-icon.swal2-error:before { content: '\2715'; /* ✕ */ font-size: 3em; line-height: 1; } /* ── SweetAlert2: ตัวหมุนตอนโหลด ────────────────────────────────────────── */ .legacy-css .swal2-loader { align-items: center; justify-content: center; width: 2.2em; height: 2.2em; margin: 0 1.875em; animation: swal2-rotate-loading 1.5s linear 0s infinite normal; border-width: 0.25em; border-style: solid; border-radius: 100%; border-color: #2778c4 transparent #2778c4 transparent; } /* ── flowbite Modal ────────────────────────────────────────────────────── ตรวจจาก CSS ที่บิลด์ออกมาจริงแล้ว: Tailwind ของโปรเจกต์นี้แปลง inset-0 เป็น top/right/bottom/left แยกกันอยู่แล้ว (ไม่ใช่ shorthand inset:) จึงไม่พังบน 83 ที่พังคือ start-0 / end-0 ซึ่งออกมาเป็น inset-inline-start/end — logical property ที่มาตอน Chrome 87 พอถูกทิ้ง กล่อง dialog เลยไม่มีขอบซ้ายขวายึด (dialogClass ของ flowbite Modal คือ 'fixed top-0 start-0 end-0 ...') หน้าคิวเป็น LTR ล้วน จึงแปลง start->left / end->right ตรง ๆ ได้ */ .legacy-css .start-0 { left: 0; } .legacy-css .end-0 { right: 0; } .legacy-css .start-2\.5 { left: 0.625rem; } .legacy-css .end-2\.5 { right: 0.625rem; }